Luminous Tale.

過去よりも未来よりも「現在」を幸せに生きるために。今ここにある日常を輝かせるための“魔法”をお届け。旧「月光の狭間」。

*

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

      2015/02/22

この記事の所要時間: 63


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などの知識は非常に乏しい私ですが、これから少しずつでもいいから身につけていければな、と思います。ブログのカスタマイズは、いい勉強になりそうです。

 - ブログ

Sponsored Link
Sponsored Link

  関連記事

私がモブログ時に活用している画像編集アプリ3選&画像素材調達サイト2選
この記事の所要時間: 1118

ブログ記事に使う画像は、アイキャッチ画像も含め、実はiPhoneだけでも作ることができる。今回は私がモブログ時に用いている画像編集アプリと、素材となる画像を入手できるサイトを一挙ご紹介することにする。

ブログ移転作業真っ只中! ~「要素を検証」が何気に超便利~
この記事の所要時間: 611

この記事の所要時間: 約 6分11秒 (Pixabayより) ブログ移転の準備を着々と進めております怜香@Ray_mnzkです。 とはいえ、なかなか思うようにいかず難儀しているのが現状です……何せ私、 …

私がモブログをする理由。気負わずに、書きたい時に少しずつ書けばいい。
この記事の所要時間: 848

私がモブログを始めてから2ヶ月弱経った。今やパソコンでの執筆には戻れないと思うほど、モブログでの投稿は私にとって快適なものである。今回は「モブログ」について、思うところなどを語ってみることにする。

普段のネットサーフィンからブログ記事を生み出せる。ブロガー御用達ブラウザ「するぷろーら」アップデートで検索・共有機能が超強化!
この記事の所要時間: 832

6月20日、ブロガー御用達ブラウザ「するぷろーら」がバージョン5.0にメジャーアップデートした。検索・共有機能が大幅に強化され、さらに「ネット上からネタを拾ってブログ記事にする」力が増したと感じたので、早速ご紹介する。

ブログを独自ドメインにしてみました
この記事の所要時間: 612

この記事の所要時間: 約 6分12秒 (Pixabayより) 昨日の記事通りに早めの時間に親指シフト練習してたら見事に寝落ちた怜香@Ray_mnzkです。 どういうわけか親指シフトの練習していると途端 …

no image
タグ一覧がうまく表示されない件についてorz
この記事の所要時間: 42

この記事の所要時間: 約 4分2秒 昨日購入した32GBのUSBフラッシュメモリを活用して無事に動画編集作業を完了させた私です。なんとかなってよかった。 そして例の外付けHDDに入れていたiTunes …

モブロガー必携エディタアプリ「SLPRO X」アップデートで画像まわりと投稿設定がさらに使いやすくなったよ!
この記事の所要時間: 630

7月26日、言わずと知れたモブロガー必携エディタアプリ「SLPRO X」がバージョン1.1.2にアップデートした。今回もまたひとつ使いやすさが向上し、ますます理想的なブログエディタになっている。今回はそのアップデート内容についてご紹介する。

Googleアドセンス導入、申込みから広告設置までのあれこれ。
この記事の所要時間: 826

10日ほど前にようやく導入した、Googleアドセンス。設置に至るまでの思うところや、実際に申込みから広告設置までやった時のあれこれなど、そんな話をば。

ブログテーマ変えてみました!
この記事の所要時間: 821

先日偶然出会ったWordpressテーマ「Stinger5」に一目惚れしたのをきっかけに、ブログテーマの変更を行った。その際に行ったカスタマイズや、苦労した点などのお話。

Workflowyで記事構成を決めてから書くようにしたらさらに文章量が増えた話
この記事の所要時間: 121

私の書くブログ記事は、とにかく長い。だから少しでも短くして読みやすいものにしたい。……そんな願望から取り組んでみた、Workflowyで練った記事構成をするぷろXに反映させて書くという記事執筆方法。しかし、思わぬ結果が生まれることに。そこから考えた、ブログ記事の長さにまつわるお話。