6C&FS

てがろぐスキンに手を入れました(いったんセーブ)

てがろぐのスキンに手を入れたので内容をまとめます。

まず、お借りしたスキンはOSHATEN!さんのPhotogenic Day Skin です。

かわいくてきれいなデザインです!配布いただきありがとうございます!

手を入れたところでメモしておきたい部分は、
  • スムーススクロールをCSSで表現(jQueryの読み込みをなくす)
  • タイトル部分の「Diary」表記をサイト名(略称)に変更
  • RSSアイコンとRSSフィードの設置

以上の3つです。

長くなりそうなので、実際の.htmlファイルと.cssファイルの編集については「続きを読む」からお読みください。

記述がざっくりなので、HTMLとCSSをある程度分かっている人でないと分かりづらいかもしれません。ご了承ください。

1.スムーススクロールをCSSで表現する

私個人は、できるかぎりHTMLとCSSのみで表現したい派です。(好みの問題なので、どの実装が正解...とかではないです)

jQurey部分のコードを見ると、スムーススクロールを実現する記述だったので、CSSで代用します。

最初に、スキンの.cssファイルの適切な部分に「html {  scroll-behavior: smooth;  }」を追記。

さらに、てがろぐのカバーページ.htmlファイルのheadタグ内のjQueryに関する記述を削除、

そして、同じくカバーページ.htmlファイル内のbodyタグ記述の一番下を「[[JS:LIGHTBOX]]」とし、「:JQ」の記述を消すと完了です。(てがろぐ内で標準のLightboxを使う場合)

2026/01/10追記:「:JQ」を消すと私の環境では[[JS:LIGHTBOX]]の部分も記述がなかったことになってしまうので、上の一文は取り消して訂正いたします。

2026/01/12追記:てがろぐのほうの画像表示モーダル系の設定をいじっていなければ、「:JQ」は消して大丈夫です。設定が初期設定になっていれば、標準のLightboxが使用できます。

2.タイトル部分の「Diary」表記をサイト名(略称)に変更

てがろぐのカバーページ.htmlファイル内の<h1>タグがついている「Diary」の表記をサイト名に変更(こちらのスキンのデザインだと、文字数少なめが良いです)、

また、私の場合はWebフォントも変更しました。フォントを変更する場合は.cssファイルの記述も変えることになります。

3.RSSアイコンとRSSフィードの設置

てがろぐはRSSフィードの出力がサポートされていますので、こちらも追加で設置します。

アクセシビリティ向上の一助になるかもと思って使っていますが、自分でRSSリーダーをうまく使えたことがありません。でもインターネットっぽくてわくわくします。

まずは、カバーページ.htmlファイル内のheadタグ内に、てがろぐ用のコマンド「[[RSS:AUTODISCOVERY:FULL]]」を追記。

次に、.htmlファイルのリンクボタンにしたい部分に[[RSS:URL:FULL]]を追記。(てがろぐのコマンドについては公式ドキュメント などでご確認ください。今回は絶対パスで指定しています。)

アイコンはスキンと同じMingCute Icon さんからダウンロードし、.htmlファイルと.cssファイルにclassを追記して完了です。


以上、3つのざっくりとしたやり方でした。

とっても素敵なデザインなので、こちらのスキンをうまいことカスタマイズしていきたいです。

ではまた。

たたむ
Category:tips
new NINTENDO 3DS(LL)を初期化するのにテザリングを使用した(備忘録)

古いゲーム機を売ろう!と思い立ったのですが、
意外と3DSの初期化に手間取ったという話です。

  • 3DSの初期化にはインターネット接続が必要
  • 3DSで可能なのは、規格がWPA2以下の無線接続
  • 新しめのWi-Fi機器は、WPA2以下に対応していないものもある

前提として、上記の3点があります。

ちょうど私の使っているWi-Fi機器(ルーター)では、WPA2以下での通信ができませんでした。
そのため、スマホのテザリング機能を使って3DSをインターネットに接続し、初期化しました。(テザリング方法はOSによって違うので、割愛します。)

手持ちのスマホはWPA2でのテザリングに対応しているので良かったのですが、そうでなかったら、WPA2対応のWi-Fi機器を更に買うことになっていたかもしれません。

Switchでも、初期化時はインターネット接続推奨のようです。
馴染みのあるPS系はネット接続がなくとも初期化できるので、この仕様にはびっくりしました。

という備忘録でした。
Category:tips
折本の作り方を説明します。

ネットプリントで頒布している、A7サイズ16ページ折本の作り方を説明します。

この折り方は、井上のきあさんの『BOOKBINDING at HOME』という同人誌でご紹介されていた折り方です。
井上のきあさんのこちらのnote でも、ネットプリントで本を作る際の折り方などについて記事にされています。
こちらの折り方を参考にさせていただきました。ありがとうございます。

以下の折り方の説明は上記でリンクした記事と内容が被りますので、
どちらか見ていただければ十分です。

一応、私のブログに来た方のために説明を残します。

こちらから説明の全体が開けます。↓

説明のために、少し前に撮った写真を添えています。
実際に頒布しているものと内容が微妙に違っていますが、ご了承ください。

(キャプション自動取得対象外)
1.まず、表紙を裏にして机に置いてください。ここから折っていきましょう。
   折り目はきっちり付けると綺麗に仕上がります。
   軽く折ったあと、定規などで折り目をつけると良いでしょう。

(キャプション自動取得対象外)
2.その状態から半分に折ります。2列×2列の4ページ分が見えています。
    表紙はまだ裏面にあります。

(キャプション自動取得対象外)
3.さらに半分に折ります。
   写真には次の作業の折り目が先んじてついていますが、気にしないでください。

(キャプション自動取得対象外)
4.最後の折りです。ここで裏表紙が表面に出てきます。

(キャプション自動取得対象外)
5.ここでホチキスで留めます。折り目に沿って留めましょう。
   表紙と裏表紙を表に向けて、写真のように真ん中上側と下側で2箇所留めます。

(キャプション自動取得対象外)
6.留めた後はこんな感じです。これは裏面から見ている写真です。
   本の形にはなりましたが、このままだと開けないページがあるので、
   カッターを使ってページを切り離していきましょう。

(キャプション自動取得対象外)
7.本の上の部分のくっついているところを、カッターで開いていきます。
   封筒の封を開けるようにして、カッターを入れます。
   開く箇所は2〜3箇所くらいです。

(キャプション自動取得対象外)
8.本の横(小口側)部分も、先ほどと同じようにカッターで開いていきます。

(キャプション自動取得対象外)
9.ここまでの作業で、全てのページを開けるようになりました。
 ただ、印刷時の余白部分が残ってしまっています。

(キャプション自動取得対象外)
10.まず、本の下(地)部分の余白をカッターで切り離します。

(キャプション自動取得対象外)
11.次に、本の横(小口側)部分の余白もカッターで切り離します。

(キャプション自動取得対象外)
12.最後に、本の上(天)部分をカッターで数mm切り、整えます。
    上がガサガサしていたり、中表紙が本文ページに巻き込まれていたりするので、
    その分を数mm切り取ってしまいましょう。

(キャプション自動取得対象外)
13.以上で完成です!

こんな感じで作れます。ぜひ作っていただけたら嬉しいです。たたむ
Category:tips
個人サイト&ブログ作成の際にお借りしたテンプレートまとめ

※リンクは記事の下の方に載せてあります。
  • 個人サイトのテンプレートは、ガタガタさん著、『個人サイトを作ろう!テンプレートですぐできる!すぐに身につく!HTML&CSS』(マイナビ出版) の特典のテンプレート、「BASIC」をお借りしました。
  • てがろぐのスキンも、ガタガタさんが運営されている、「do」という創作・同人サイトの製作を支援するサイトから、「skin-white」をお借りしました。

個人サイトのテンプレートの方は、CSSのカスタマイズをしています。
(主に色指定やリンク表示周りと、マージンなど)

てがろぐのスキンはそのまま使っています。
CSSの解読ができたら、表示色や背景などを変更するかもしれません。

HTMLとCSSでのサイト作成は多少経験があったのですが、
昔の知識しかなく、また、素直にCSSを書くのがめんどくさすぎたので、
(一応、最近のWebコーディングの本は一通り読んだ後で、)
テンプレートをお借りすることにしました。


ということで、創作・同人サイト制作支援サイト「do」さんへのリンクはこちら

そもそものマイクロブログツール(日記型掲示板CGI)『てがろぐ』を配布されている、
「にししふぁくとりー」さんへのリンクはこちら

おかげさまで個人サイトとブログを無事に作れました。助かりました。
ここでもお礼申し上げます。ありがとうございました。
Category:tips