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

  関連記事

新ブログ始動しました!
この記事の所要時間: 46

この記事の所要時間: 約 4分6秒 昨日ようやく新ブログへの移転を済ませました怜香@Ray_mnzkです。 ようやくデザインが確定したところから、一気に個別ページまで作って独自ドメイン反映させて……と …

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

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

2015年締めのご挨拶とか振り返りとか。
この記事の所要時間: 452

2015年も大晦日。ブログを始めてから1年少々経過したこともあり、この一年を総括してブログのことを振り返ってみることにする。

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

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

新ブログ移行進捗状況 ~相変わらずCSSに悪戦苦闘中~
この記事の所要時間: 343

この記事の所要時間: 約 3分43秒 今日明日とお休みなのでのんびりしている怜香@Ray_mnzkです。今日は出かけたけどね。先月電池止まったまま放置状態になっていた腕時計の電池交換してベルトも新調し …

11月に流行った「好きなブログ紹介」を遅ればせながらやってみた
この記事の所要時間: 1224

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

【メルマガ読者の皆さんへ】メルマガ「Luminous Piece. -思考のカケラ-」がGmailで迷惑メール扱いになった場合の対処法
この記事の所要時間: 543

2017.12.12配信分より、こちらで配信しているメルマガ「Luminous Piece. -思考のカケラ-」がGmailにて迷惑メール扱いになってしまう事象が発生しています。そこで迷惑メールにならないようにする対処法をご紹介しますので、読者の皆さんにはお手数ですが解除処理をお願い申し上げます。

ブログ更新を数日がかりでやるようにしたらぐっと楽になった話
この記事の所要時間: 651

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

久々にブログにリファラースパムが来ていたので対策してみた
この記事の所要時間: 944

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

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

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