ブログをカスタマイズしてみました

photo credit: Jorge Quinteros via photopin cc

ブログを始めて1か月半少々経ちました。
最初は「頭に思い浮かんだことを言葉にしていこう」と思って始めたのですが、日記やら、思想やら、観劇感想にアプリ紹介やらといろんなこと書いてきたなぁと思います。
こうやって毎日書いていると、だんだん「こういうスタイルにした方が読みやすいかな」とか、自然と考慮するようになってくるんですね。私は基本的に長文書きだからどうしても読みにくくなるんですが、それでも「少しでも読みやすくなるように整えよう」って思えてくる。最初はそんなこと思ってなかったですから、不思議なものです。

そんなわけで先日、ちょこちょこっとこのブログをカスタマイズしてみました。
実を言うとCSSとかの知識はほぼ皆無に等しくて、いつもこういう時はひたすら調べていろんな記事の情報を参考にしてやっています。
今回も様々な記事を参考にやってみたので、感謝の意を込めてご紹介しつつお話しします。
　

目次

　・記事の目次作成
　・記事の小見出し装飾
　・関連記事リンクの作成
　・関連記事などを記事詳細画面にのみ表示させる
　・ブログをカスタマイズしてみて
　・今日のあとがき
　

記事の目次作成

最初にブログを書いていた頃には考えもしなかったのですが、やっぱり目次あった方がいいな、と思えてきたのです。
でも、なかなか手を出せずにいました。HTMLタグとか複雑そうな先入観を抱いていたからです。
そこで目次の作り方を調べていたら、このような記事に出会いました。

2分でできる！ブログ記事にページ内リンクで目次を作る方法｜あなたのスイッチを押すブログ

目次作りに必要な「ページ内リンク」の作り方が分かりやすく説明されているだけでなく、今すぐ使えるようにテンプレートも作ってくださっています。有難すぎる……！！
というわけで、心の中でお礼を言いながら（コメ投稿する勇気がなかったorz）テンプレ拝借いたしました。そして自分なりに少し手を加えてみたものを、今この記事でも使っています。

手を加えた点は以下の通り。
・見出しとなるタグをh4→h4に変更
今使っているテンプレではh4タグは記事タイトルに用いられていたため。
・ページ内リンクのHTMLタグに「target=”_self”」を追加
Tumblr側の設定で「すべてのリンクを新ウィンドウで開く」ようにしているため、そのままだとページ内リンクまで別窓で開いてしまう。これを回避するため。
・「目次にもどる」リンクを右詰めに変更
次の見出しとの間に空行を設けたかったのだが、このリンクを右端に寄せれば擬似的に空行が出来ると思ったため。
・目次リンクの行頭にある記号を変更
これは完全に私の個人的な好みを反映させただけです。

こんな感じで、満足のいく形の目次が出来上がりました。とっても気に入っています！

記事の小見出し装飾

先ほどの目次を使う場合、記事内に小見出しが出来ることになります。
テンプレートのHTMLを開いて見出しに該当するタグを確認してみると、
・h1→ブログタイトル
・h2→日付表示
・h4→記事タイトル
に用いられていたため、記事小見出しに使えるのはh4ということがわかりました。
さらに調べてみると、h4タグはサイドバーのメニュー見出しにもなっている。でも、そのサイドバーのメニュー見出しは、何の装飾も施されていない、文字だけの殺風景なもの……
これでは記事小見出しには使えない！というわけで、何かいいデザインはないか調べてきました。

見出しのデザインをCSSのみでカスタマイズする（一部CSS3対応）｜賢威カスタマイズ研究所

正直、「こんなに手の込んだデザインの見出しが作れるのか！」とびっくり。
どの見出しデザインもとても素敵で迷ったのですが、私はサンプル16をチョイス。ブログに合うように色を変えたり、数字をいじってバランスを調整したりして、今小見出しに使っているようなデザインになりました。
ちなみにカラーコードはこのカラーコード表を参照しました。

関連記事リンクの作成

ひとつの記事を読み終わった後に、思わずクリックしちゃうのが関連記事。面白そうだなと思う記事があったら、大抵クリックして読みに行きます。
記事の少ないうちは必要ないかと思っていたのですが、記事も50本を超えてきたので、そろそろつけた方が他の記事も読んでもらえるだろうしいいかな、と思ってつけてみることにしました。
使ってみたのはこちら。

Create Tumblr related posts script.｜RAKUGAKI PROGRAMERS

こちらで紹介されているものを使うと画像の表示されていないテキストのみの関連記事一覧となるのですが、私のブログは画像を使っていない記事が大半なので、画像が表示されていなくてもそこまで支障はないかな、と。
でもこれからは出来るだけアイキャッチ画像を入れていきたいと思っているので、いずれは画像も表示されるようなものに変えていくことになるかなぁ。

関連記事などを記事詳細画面にのみ表示させる

以前追加したソーシャルボタン（結局「忍者おまとめボタン」に落ち着きました）や前述の関連記事一覧。これ、TumblrではテンプレートのHTMLにある{/block:Posts}という文字列の直前にコードを配置すると、記事の末尾に表示されるようになります。
でも、このままだとトップページの記事一覧にもいちいち表示されてしまう。出来れば記事詳細画面にだけ表示させたい。特に関連記事一覧は。
そこで何か方法はないかと調べてみたら、ありましたありました。

Tumblrテーマ作家が教える上級カスタマイズテクニック

記事詳細画面にだけ表示させたい時は、そうしたいもののコードを{block:PermalinkPage}..～{/block:PermalinkPage}で囲んでやるだけ、とのこと。
早速その通りにしてみたら、見事記事詳細画面にだけソーシャルボタンと関連記事一覧が表示されるようになりました。めでたしめでたし。

ブログをカスタマイズしてみて

そんなわけで、ようやくブログが私好みの仕上がりになりました。カスタマイズはしたかったけどなかなか手が出せなくて、やっとこさ出来た、という感じです。
ブログは続けていくと、愛着がわいてくるものなんですね。どうせなら、自分好みのデザインにしたい。そう思えてきて、今回こうやってそれを実現できてよかったです。
少しでも読みやすいデザインになっているといいな。これからも気になる部分があったら積極的にカスタマイズしていこうと思います。

今日のあとがき

ブログのカスタマイズひとつとっても、先達の皆様の貴重な情報あってこそこうやって納得いく仕上がりのものを作ることができるんだなと実感。本当にありがとうございます！
まだまだCSSなどの知識は非常に乏しい私ですが、これから少しずつでもいいから身につけていければな、と思います。ブログのカスタマイズは、いい勉強になりそうです。