ブログをカスタマイズしてみました
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}という文字列の直前にコードを配置すると、記事の末尾に表示されるようになります。
でも、このままだとトップページの記事一覧にもいちいち表示されてしまう。出来れば記事詳細画面にだけ表示させたい。特に関連記事一覧は。
そこで何か方法はないかと調べてみたら、ありましたありました。
記事詳細画面にだけ表示させたい時は、そうしたいもののコードを{block:PermalinkPage}..~{/block:PermalinkPage}で囲んでやるだけ、とのこと。
早速その通りにしてみたら、見事記事詳細画面にだけソーシャルボタンと関連記事一覧が表示されるようになりました。めでたしめでたし。
ブログをカスタマイズしてみて
そんなわけで、ようやくブログが私好みの仕上がりになりました。カスタマイズはしたかったけどなかなか手が出せなくて、やっとこさ出来た、という感じです。
ブログは続けていくと、愛着がわいてくるものなんですね。どうせなら、自分好みのデザインにしたい。そう思えてきて、今回こうやってそれを実現できてよかったです。
少しでも読みやすいデザインになっているといいな。これからも気になる部分があったら積極的にカスタマイズしていこうと思います。
今日のあとがき
ブログのカスタマイズひとつとっても、先達の皆様の貴重な情報あってこそこうやって納得いく仕上がりのものを作ることができるんだなと実感。本当にありがとうございます!
まだまだCSSなどの知識は非常に乏しい私ですが、これから少しずつでもいいから身につけていければな、と思います。ブログのカスタマイズは、いい勉強になりそうです。
関連記事
-
-
【メルマガ読者の皆さんへ】メルマガ「Luminous Piece. -思考のカケラ-」がGmailで迷惑メール扱いになった場合の対処法
2017.12.12配信分より、こちらで配信しているメルマガ「Luminous Piece. -思考のカケラ-」がGmailにて迷惑メール扱いになってしまう事象が発生しています。そこで迷惑メールにならないようにする対処法をご紹介しますので、読者の皆さんにはお手数ですが解除処理をお願い申し上げます。
-
-
11月に流行った「好きなブログ紹介」を遅ればせながらやってみた
11月に多くのブロガーさんが行っていた「好きなブログ紹介」。12月も下旬になってしまったが、私も行ってみることにした。考察も交えつつ、私の好きなブログについてご紹介してみる。
-
-
モブロガー必携エディタアプリ「SLPRO X」アップデートで画像まわりと投稿設定がさらに使いやすくなったよ!
7月26日、言わずと知れたモブロガー必携エディタアプリ「SLPRO X」がバージョン1.1.2にアップデートした。今回もまたひとつ使いやすさが向上し、ますます理想的なブログエディタになっている。今回はそのアップデート内容についてご紹介する。
-
-
久々にブログにリファラースパムが来ていたので対策してみた
Googleアナリティクスを確認していると、ページタイトル別PV数一覧の中に見慣れぬページタイトルが……。もしやこれはスパムか!?ということで調べて対策を取ってみた。そんなお話。
-
-
ブログ移転作業真っ只中! ~「要素を検証」が何気に超便利~
この記事を読むのに必要な時間は約 7 分 43 秒です。 (Pixabayより) ブログ移転の準備を着々と進めております怜香@Ray_mnzkです。 とはいえ、なかなか思うようにいかず難儀しているのが …
-
-
「するぷろX」メジャーアップデートきました!!長文書きに嬉しい新機能満載!!
6月4日、モブロガー必携のブログ執筆アプリ「するぷろX」が初のメジャーアップデートを果たした。これまでにないほど数多くの新機能が搭載されたので、早速ご紹介する。
-
-
今年も一年ありがとうございました!
2016年も大晦日。まもなく到来する2017年を前に、ブログにまつわる今年の振り返りと、来年に向けた抱負を語ってみようと思う。
-
-
ブログ開始から2ヵ月経って見えてきたこと
この記事を読むのに必要な時間は約 8 分 42 秒です。 photo credit: MauriceBMüller via photopin cc 気がつけばブログ始めてから丸2ヵ月経っていました怜香 …
-
-
Googleアドセンス導入、申込みから広告設置までのあれこれ。
10日ほど前にようやく導入した、Googleアドセンス。設置に至るまでの思うところや、実際に申込みから広告設置までやった時のあれこれなど、そんな話をば。
-
-
ブログ100日連続更新達成しました!
この記事を読むのに必要な時間は約 0 分 51 秒です。 どうも、明日は有休申請してきた怜香@Ray_mnzkです。だって明日は花組大劇場公演初日!れいちゃん(柚香光さん)が番手ついたらしいということ …