記事を書く以上にブログのテーマをカスタマイズすることが好きなひとり情シスの暗黒卿ことアブラカタブラコイメカタメナカムラ (@sys_nakamura) です。残念ながら韻は上手に踏めません。昨日は一日体調が優れなくてたくさん寝てしまったので夜中に目が冴えながらこの記事を書いています。
さて、テーマを弄ることのほうが好きな私ですが、このブログを書き始めてからは記事を書くことに注力してしまっており、合間合間でしかテーマのカスタマイズができていません。いろいろと一段落したら TIPS 別にカスタマイズのことでも書こうと思っていましたが、何をやったのか忘れてしまいそうなのでひとまず現時点で私がこのブログに施しているカスタマイズをまとめてみたいと思います！
ちなみに私ははてなブログ PRO を使っているのでスマホ版もカスタマイズしているので、 PC 版とスマホ版でカスタマイズした箇所を分けて書いていきます。記事書いてたら、とても長くなってしまいそうなので今回は PC 版に施したカスタマイズのみをまとめます！
82 分で読めると表示されていますが 7791 文字なので文章だけ読むならそこまでかからないはずです！（笑）
- 使わせていただいているテーマ
- PC 版でカスタマイズした箇所
- タイトル表示をブログ名とは違うものにする
- トップページを記事一覧で表示する
- 記事一覧とサイドバーのアイキャッチを角丸にする
- ページ下にスクロールアップボタンを設置
- 記事タイトル下に記事を読む所要時間を表示
- グローバルヘッダーの色を変える
- グローバルナビを設置し Font Awesome で装飾
- シェアボタンのデザインを変更する
- CSS で細々とした部分のレイアウトを変更
- 目次のレイアウト変更
- カテゴリーラベルの色変更
- サイドバーの見出し変更 (吹き出し削除)
- まとめ
- こんな記事も書いています
使わせていただいているテーマ
Brooklyn というテーマを使わせていただいております。白と黒がベースになっていてシンプルにオシャレなテーマです。 PC 版のカスタマイズはこのテーマに合わせた状態で施しています。レスポンシブデザイン対応のテーマですがスマホ版ははてなブログのスマホ版で表示しています。
PC 版でカスタマイズした箇所
今回は PC 版でカスタマイズしたものに特化した記事を書きます。そして次回はスマホ版にカスタマイズしたものに特化した記事を書く予定です。 (本当は 1 回にまとめたかったのですがあまりにも長くなりそうなので分けます)
タイトル表示をブログ名とは違うものにする
このブログの名前は「ヒトリジョーシス 原宿ベース」なので本来ブログのタイトルはこのように表示されます。
ですが個人的には何となくアルファベット表記の方がオシャレ感が出せる気がしたので CSS で指定してこのようにブログ名とは異なるタイトルが表示されるようにしています。
設定手順 - 基本
このブログではフォントを Google フォントで表示されるように指定していますが、まずは純粋にブログ名とは異なるタイトルが表示されるようにするだけの設定を紹介します。以下の CSS コードをはてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「デザインCSS」に貼り付けます。
設定手順 - 応用
上記の記事も参考にしていただき使いたいフォントが見つかったら「3. Add this code to your website:」に記載されている以下のような記述のコードをコピーしておきます。
取得したコードははてなブログのダッシュボードから「設定」→「詳細設定」→「headに要素を追加」に貼り付けます。
これでコードを貼り付けた Google フォントがブログで表示されるようになったので、あとは以下のコードをはてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「デザインCSS」に貼り付けます。
これで設定完了です。
トップページを記事一覧で表示する
はてなブログのページは以下のように URL の後ろに「archive」という文言を足すと記事一覧という形式で表示されます。
「自分のブログの URL/archive」
個人的な好みではありますが、トップページは WordPress の STINGER シリーズのようにアイキャッチのサムネイルがすっきりリストで表示されるほうが好きなので、そういう表示に近い記事一覧がトップページを開けば自動で表示されるように設定してあります。スマホでみている方向けに PC 版のトップページをスクリーンショットした画像を貼っておきます。デフォルトでこういう風に表示されるように設定しています。
設定手順 - headに要素を追加
以下に以前書いた記事を貼っておきますので細かい部分はそちらも参考にしていただければと思いますが手順を簡潔に記載すると、以下のコードをはてなブログのダッシュボードから「設定」→「詳細設定」→「headに要素を追加」に貼り付けます。コード内の「自身のサイトのURL」や「自身のサイトのタイトル」については実際にご自身の URL やタイトルに書き換えて貼り付けます。
手順を記載している記事
こちらの設定については個別に記事を書いたものがあるのでご覧ください。
参考にさせていただいた記事
このカスタマイズをするにあたって参考にさせていただいた記事はこちらです。
記事一覧とサイドバーのアイキャッチを角丸にする
こちらも上に貼った以前書いた記事に手順を記載していますが、このブログでは記事一覧で表示されるアイキャッチとサイドバーの「最新記事」や「よく読まれている記事」に表示されるアイキャッチの画像を少し角丸にしています。参考までに角丸にしていない状態の画像と角丸にしたあとの画像を貼っておきます。
角丸にしていない状態
角丸にした状態
ほんのりではありますがアイキャッチに柔らかみがでます。
設定手順 - デザインCSSにコードを追加
以下に以前書いた記事を貼っておきますので細かい部分はそちらも参考にしていただければと思いますが手順を簡潔に記載すると、はてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「デザインCSS」に以下のコードを貼り付けます。
手順を記載している記事
こちらの設定については個別に記事を書いたものがあるのでご覧ください。
ページ下にスクロールアップボタンを設置
このブログではユーザビリティの向上として右下にスクロールアップボタンを設置してページを深くスクロールしていても一気にページトップまで戻れるようにしています。 PC や iPhone ならそれ単体の機能でページトップに戻ることができますが、私のように Android × Chromebook ユーザーだとサイト側で機能を提供してくれているとなかなか便利なのです。ちなみにスクロールアップボタンとはこれのことです。
PC 版とスマホ版両方に設置していますが、ここでは PC 版の設置方法について手順を紹介したいと思います。細かい手順については以前に個別の記事を書いたのでそちらもご覧ください。ここでは簡潔にこのブログと同じ状態でスクロールアップボタンを設置する手順について記載します。
設定手順 - headに要素を追加
まずは以下のコードをはてなブログのダッシュボードから「設定」→「詳細設定」→「headに要素を追加」に貼り付けます。これはボタンに使われているフォントが Font Awesome の Web フォントなのでフォントを表示できるようにするために必要な設定です。
設定手順 - フッタにコードを追加
次にはてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「フッタ」へ以下のコードを追加します。
設定手順 - デザインCSSへコードを追加
最後にはてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「デザインCSS」へ以下の CSS を記述すれば設置手順は完了です。
設定手順 - ボタンのサイズ変更
もし設置したボタンのサイズを変更したい場合には以下のコードをはてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「デザインCSS」に追加して数値の部分を調整することでサイズ変更することができます。
手順を記載している記事
こちらの設定については個別に記事を書いたものがあるのでご覧ください。
参考にさせていただいた記事
このカスタマイズをするにあたって参考にさせていただいた記事はこちらです。
記事タイトル下に記事を読む所要時間を表示
主に WordPress で書かれている記事を読むときに「この記事は○○分で読めます」といった表示が記事タイトル下にでていることがあります。このブログでも 1 分 400 文字換算で記事を読むための所要時間が表示されるようにしています。参考として実際に表示されているところを撮影したスクリーンショットを貼っておきます。
このカスタマイズも PC 版とスマホ版両方に施していますが、ここでは PC 版の設置方法について手順を紹介したいと思います。細かい手順については以前に個別の記事を書いたのでそちらもご覧ください。ここでは簡潔にこのブログと同じ状態で記事を読むための所要時間を表示する手順について記載します。
設定手順 - 記事上にコードを追加
以下のコードをはてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「記事」→「記事上」に貼り付けます。
設定は以上です。とても簡単です。
手順を記載している記事
こちらの設定については個別に記事を書いたものがあるのでご覧ください。
参考にさせていただいた記事
このカスタマイズをするにあたって参考にさせていただいた記事はこちらです。
グローバルヘッダーの色を変える
はてなブログのデフォルト状態ではページ上部に「グローバルヘッダー」という帯が表示されています。 (読者になるとかが表示されている帯) このヘッダー自体を CSS で非表示にしてしまうことも可能なのですが、けっこう個人的には便利に使っている機能なのでヘッダー自体は残しておいて私が使っているテーマの Brooklyn に色を合わせるように CSS で色変えをしてみました。この部分を CSS で色変えします。
設定手順 - デザインCSSにコードを追加
以下のコードをはてなブログの「ダッシュボード」→「デザイン設定」→「カスタマイズ」→「デザインCSS」に貼り付けます。 (フォントの色やバーの背景色はお好きなものに変更してください HTMLカラーコード)
手順を記載している記事
こちらの設定については個別に記事を書いたものがあるのでご覧ください。
グローバルナビを設置し Font Awesome で装飾
日々の記事更新で少しはブログのコンテンツも増えてきたので、このブログではページ上部にグローバルナビメニューを設置しています。これのことです。
私の使っているテーマ Brooklyn にグローバルナビを設置する手順については Brooklyn 作者様の記事にも載っているコードを追加して設置しています。
設定手順 - タイトル下にコードを追加
この記事でも簡潔に手順を記載しますとはてなブログ PRO を使っている場合には、以下のコードをはてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」に追加します。
ちなみに上記のコードは利用規約の関係で PRO を使っている人向けのものと PRO を使っていない人向けのものに分かれています。 PRO を使っていない方や詳細を確認した
い方は上に貼った作者様の記事をご確認ください。
メニューに Font Awesome でアイコンを表示
上記の手順で設置したグローバルナビメニューに Font Awesome のアイコンフォントを追加してメニューの視認性を向上させてみました。現在はこんな感じで各メニューの冒頭にアイコンを表示しています。
設定手順 - headに要素を追加
まずは Font Awesome の Web フォントをブログ上で表示できるようにするために以下のコードをはてなブログのダッシュボードから「設定」→「詳細設定」→「headに要素を追加」に貼り付けます。 ※ 既に上で紹介したスクロールアップボタンの設置で要素を追加している場合にはこの作業は不要です。
Font Awesome のサイトから使用するアイコンのコードを取得
head 要素に上記コードを追加したら Font Awesome のサイトからメニューに使いたいアイコンフォントのコードを取得します。
上記のサイトにアクセスしたらページ上にある「Icons」をクリックします。
使いたいアイコンが見つかったらアイコンをクリックして個別のページを開きページ内の <i class= から始まるコードを全文コピーします。
そして取得したコードをグローバルナビ設置時に貼り付けたコードの中に以下のように追記すればメニューの冒頭にアイコンフォントが表示されるようになります。 ※ 以下、グローバルナビ設置時のコード全文貼っています。
以上の作業で設置したグローバルナビの各メニュー冒頭に Font Awesome のアイコンフォントを挿入することができます。
シェアボタンのデザインを変更する
このブログでは現在シェアボタンのデザインを以下のものに変更して使っています。この記事では以下のシェアボタンと同じデザインのものを記事下に設置する手順を紹介します。
設定手順 - headに要素を追加
このシェアボタンには Font Awesome の Web フォントが使われているのでまずはブログ上で Font Awesome のフォントが表示されるようにする必要があります。以下のコードをはてなブログのダッシュボードから「設定」→「詳細設定」→「headに要素を追加」に貼り付けます。 ※ 既に上で紹介したスクロールアップボタンの設置やグローバルナビへのアイコンフォント挿入で要素を追加している場合にはこの作業は不要です。
設定手順 - 記事下にコードを追加
次にはてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「記事」→「記事下」に以下のコードを追加します。
設定手順 - 記事下に HTML を追加
上記の手順で「記事下」に Jquery のコードを追加したら更にその下の行から以下のコードを追加します。
設定手順 - デザインCSSにコードを追加
最後に設置したシェアボタンのデザインを整形するために以下のコードをはてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「デザインCSS」に貼り付けます。
以上でオシャレなシェアボタンの設置完了です。今回紹介した設置手順は現在このブログに設置している枠線付きのシェアボタンを PC 版のテーマに設置するための手順です。シェアボタンのレイアウトは色付きのものも用意されているので、詳細はこのカスタマイズを実施する際に参考にさせていただいた以下の記事をご覧ください。
参考にさせていただいた記事
CSS で細々とした部分のレイアウトを変更
最後にこのブログで行っている各所の細々とした CSS でのレイアウト変更を紹介したいと思います。目次の CSS 以外は基本的にテーマを Brooklyn に設定しているブログ向きのものです。
目次のレイアウト変更
はてなブログでは記事中にはてな記法で [ : contents ] と入力することで目次を挿入することができます。
目次は長文記事を作成する際にユーザビリティを考慮する上でとても便利な機能です。しかしデフォルトの目次だと少しシンプルすぎるので少しレイアウトをカスタマイズしています。現在はこんなふうになっています。
以下のコードをはてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「デザインCSS」に貼り付けて目次のレイアウトを変更しています。
手順を記載している記事
こちらのカスタマイズについては以前に個別で記事を書いているので詳細はこちらもご覧ください。
参考にさせていただいた記事
カスタマイズにあたってはこちらの記事を参考にさせていただきました。
カテゴリーラベルの色変更
現在このブログでは Brooklyn をテーマ適用時のデフォルトのカテゴリーラベル (グレーっぽい) ものから CSS の変更で黒背景に白文字のラベルへと変更しています。
CSS 変更前
こちらが変更前のデフォルト状態です。
CSS 変更後
こちらが CSS を変更して配色のカスタマイズを適用した後です。
設定手順 - デザインCSSにコードを追加
上記の配色変更は以下のコードをはてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「デザインCSS」に貼り付ければ適用されます。なお、このブログではトップページを記事一覧 (archive) がデフォルトで表示されるようにしているので、 archive でのカテゴリーラベル表示も CSS で指定して変更しています。サンプルのコードでは白文字に黒背景で指定をしていますがコードの値を変えれば配色の変更ができます。
サイドバーの見出し変更 (吹き出し削除)
Brooklyn のデフォルトではサイドバーは吹き出しのレイアウトが適用されていますが、個人的な好みからより白と黒がベースになっている感じを出すために CSS でサイドバーの見出しレイアウトをこのように変更しました。
CSS 変更前 (デフォルトの状態)
まず最初にデフォルトのサイドバー見出しはこうです。
CSS 変更後
CSS で吹き出しタイプの見出しから黒背景の帯に変更しました。
設定手順 - デザインCSSにコードを追加
以下のコードをはてなブログのダッシュボードから「デザイン」→「カスタマイズ」→「デザインCSS」に貼り付けることでレイアウトを変更することができます。サンプルのコードでは黒背景に白文字で指定していますがコードの値を変更すれば配色は変更可能です。
まとめ
以上のカスタマイズが現在このブログに私が適用しているカスタマイズの全てです。今回この記事を書くことで自分にとっても何を弄っているのか整理する良いふりかえりの機会になりましたが、とんでもなく記事を書くのに時間がかかってしまいました。 4 時間もかかるとは…。おかげさまで寝すぎて目が冴えていたので夜中に記事を書き始めたらもう明け方です。日曜日なのでこれから少し眠るか、起きているか悩むところですね。今度はスマホ版のカスタマイズまとめも書きたいと思っていますが、時間がかかりそうなので記事を書く時間に余裕がある時に着手したいと思います。
それではっ！
こんな記事も書いています
以下、この記事の中にも登場しましたがはてなブログのカスタマイズについて TIPS ごとに書いている記事です。