Luminous Tale.

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

*

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

      2015/02/22

この記事を読むのに必要な時間は約 7 分 34 秒です。


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

  関連記事

ブログ記事の構成を練るのにWorkflowyが便利な理由

この記事を読むのに必要な時間は約 0 分 49 秒です。 どうも、今日は一日家でのんびりしていました怜香@Ray_mnzkです。恐らく明日以降まる1カ月以上は一日中休みの休日はなくなると思われます、だ …

ブログ100日連続更新達成しました!

この記事を読むのに必要な時間は約 0 分 51 秒です。 どうも、明日は有休申請してきた怜香@Ray_mnzkです。だって明日は花組大劇場公演初日!れいちゃん(柚香光さん)が番手ついたらしいということ …

11月に流行った「好きなブログ紹介」を遅ればせながらやってみた

11月に多くのブロガーさんが行っていた「好きなブログ紹介」。12月も下旬になってしまったが、私も行ってみることにした。考察も交えつつ、私の好きなブログについてご紹介してみる。

「Workflowy」と「するぷろX」で記事を書こう!ブックマークレットによるシームレスな連携で記事執筆が捗る!

Workflowyで記事の構成を決めて、するぷろXで書く。モブログのひとつの形であるが、ふたつのアプリ間を行き来することなく、スムーズに連携することができれば、もっとモブログは捗るのではないだろうか?そんな思いを叶えるブックマークレットに出会うことができたので、ご紹介しつつ語ってみる。

久々にブログにリファラースパムが来ていたので対策してみた

Googleアナリティクスを確認していると、ページタイトル別PV数一覧の中に見慣れぬページタイトルが……。もしやこれはスパムか!?ということで調べて対策を取ってみた。そんなお話。

私がモブログをする理由。気負わずに、書きたい時に少しずつ書けばいい。

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

Googleアドセンス導入、申込みから広告設置までのあれこれ。

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

もっと手に馴染むブログエディタを求めて。新しいブログエディタ探しの顛末をまるっと語ってみる

とあるきっかけから、記事執筆に使うブログエディタをするぷろXから変更することになった。どのブログエディタに行き着いたのか、その過程と紆余曲折を詳細に語っていこうと思う。ブログエディタ探しの一助になることを願って。

記事執筆時にはプレビューが重要になる理由。読み手の視点から自分の文章を読んでみるべし!

ブログ記事を執筆する際は、最後にプレビューで自分のブログ上での見え方を確認すべし、とよく言われる。これは何故なのだろうか?先日記事を書いていた際に、この答えになるかもしれない出来事が起こったので、それを踏まえつつ「記事執筆においてプレビューが重要である理由」を考えてみることにする。

ブログ更新を数日がかりでやるようにしたらぐっと楽になった話

この記事を読むのに必要な時間は約 0 分 45 秒です。 どうも、眠すぎてまともに文章書ける気がしない怜香@Ray_mnzkです。 相変わらず花組公演のことで頭がいっぱいで、なかなかブログネタを思いつ …