【はてなブログ】当ブログに適用したカスタマイズのまとめ【Brooklyn】

ようやくブログのカスタマイズがひと段落したので、今までに実施したカスタマイズの内容を備忘録がてらまとめておく。

この記事には「Brooklyn」用のカスタマイズだけでなく、ブログ全般に使える内容も典拠のリンクとともに載せているのでぜひ参考にしていただきたい。

すでにかなり長い記事になってしまったが、新たな変更があれば順次加筆する予定である。

使用テーマ
1. 選定理由
全体を通しての参考サイト
カスタマイズ内容
その他参考にしたサイト
1. BrooklynのCSS一覧
2. HTMLとCSSの解説
トラブルシューティング

使用テーマ

「Brooklyn」というシンプルなテーマをチョイス。

選定理由

カスタマイズが簡単
レスポンシブデザインである
使用者が多いためカスタマイズに関する情報も多い

このテーマは作者様があらかじめカスタマイズ用のCSSをデザインテーマに組み込んでくださっているため、それを呼び出すだけで簡単にグローバルメニューやシェアボタン等を設置できる。

下は作者様のサイト。

テーマの説明のほか、グローバルナビ、シェアボタン、読者登録ボタンの設置方法が書かれている。

同じくテーマの作者様のサイト。

ドロップダウン付きグローバルナビの設置方法が書かれている。また、Proユーザー限定だが、ウィンドウ幅が狭いときにはトグルメニューに変える機能も紹介されている。

全体を通しての参考サイト

情報収集の入り口となったサイトを以下に列挙する。
「何をカスタマイズすればよいか？」を知るための参考にしていただきたい。

管理人の方が自作された様々なブログパーツが紹介されている。

かなり高度で凝ったものが多いが、丁寧な解説がついているのでわかりやすい。
詳しくは後述するが、当ブログで使用しているグローバルメニューの作者である。

Brooklynの細々としたカスタマイズが紹介されている。

デザインテーマに記述されているCSSの意味をなんとなく把握するのに役立った。

こちらのサイトでもBrooklynの様々なカスタマイズ例が載っている。

比較画像付きでかなり詳細に紹介されているため、イメージがつかみやすい。

同じくBrooklynのカスタマイズ集。

発生したトラブルとその解決法が示されているのがありがたい。

下のサイトは、タイトルに「Brooklynのカスタマイズ」と書かれているが、どのテーマでも参考になる内容。

「はてなブログでこんなこともできるのか」と思うような変わったデザインを知ることができる。

こちらのブログは同じテーマを使っているとは思えないほど大胆かつセンス良くカスタマイズされている。

記事の内容だけでなくブログ全体のデザインを参考にしたくなる。

カスタマイズ内容

以下、実施したカスタマイズを参考サイトと共に列挙する。

メモ：CSSでは対象となる要素を「セレクタ」で指定する

文字の大きさ

16px以上でないと読みにくいとのことなので、PCでは17px、スマホは16.5pxに変更。

なお、BrooklynのデフォルトはPC・スマホともに16px。

ブログのタイトルと説明文を中央寄せに

次項で述べるようにタイトルを画像に変更する場合、本項目を設定する意味はない。

ブログタイトルを中央寄せにする

#title{
text-align: center;  /*文字を中央寄せに*/
}

ブログタイトルの下に表示される説明文を中央寄せにする

#blog-description{
max-width:none;
text-align:center;
font-size:90%;
}

ついでにfont-sizeも変更し、文字を少し大きくした。

text-alignをcenterにしただけでは中央寄せにはならず、max-widthを無効にする必要があった。なお、max-widthのデフォルト値は500px。

ブログタイトルの画像化

ヘッダー画像の設定

ページ最上部のブログタイトル部分を、以下のサイトを参考に画像に変更した。

はてなブログでいう「背景画像」としてではなく、HTMLによって直接ヘッダー画像とリンクを設定している。

ヘッダー画像の作成・アップロード

こちらのサイトには、ヘッダー画像をオリジナルサイズでアップロードすることで画像がぼやけるのを防ぐ方法が紹介されている。

なお、上記サイトではご自分で作成されたヘッダー画像のサイズについても言及されている。私も同じサイズ（1500×400ピクセル）で作成したが、これははてなブログが推奨しているサイズ（1000×200ピクセル）の1.5倍である。大きめに作ることで、横幅を広げた際に画像が崩れないようにしているらしい。

スマホでの表示を調整

そのままではスマートフォンで見たときにヘッダー画像が小さくなってしまった。そこで以下のコードをデザインCSSに追加し、スマホで閲覧したときにヘッダー画像が大きめに表示されるようにした。

/* スマホのヘッダー画像調整*/
@media (max-width:690px){
.headernew img{
width: 130%;
margin-top: 5px;
position: relative;
left: -15%;
}
}

表示を切り替えるタイミングは、トグルメニュー（後述）が表示されるウィンドウ幅と同じにした。

画像の拡大はwidthプロパティで設定している。なぜかheightプロパティで設定しようとしても変更が反映されなかった。このままだと画像が画面右側に飛び出すため、leftプロパティで左側に寄せている。

また、スマホだと画像の上端がはてなブログのヘッダーで隠れてしまうため、mergin-topで上側に隙間を設けている。

2020年２月2日追記

現在は下のようなコードを「ヘッダ」に記述することでブログタイトルに画像を表示している。

<style type="text/css">
.header-image-wrapper {display:none;}
#blog-title{display:none;}
.headernew img{
display: block;
max-height: 130px; /*ヘッダ画像の最大表示高さ*/
width: auto;  /*ヘッダ画像の縦横比を維持*/
max-width: 100%;  /*ヘッダ画像が画面からはみ出すのを防ぐ*/
margin: auto;  /*中央寄せ*/
margin-top: 10px;  /*画像がはてなのヘッダに隠れないよう上に余白を作る*/
}
.headernew a{
display:block;
background-color: white;
}
.headernew{
width: 100%;  /*幅を画面に合わせる*/
margin:0px!important;
}
</style>
<h1 class="headernew">
<a href="トップページのURL"> 
<img src="画像のURL" alt="ブログタイトル">
</a>
</h1>

これは「ヘッダー画像の設定」にてご紹介した月無ことのはさんのコードを一部変更したものである。
このコードを設定したことで、前項「スマホでの表示を調整」に載せたコードは不要になった。

レスポンシブ対応のグローバルメニュー

ウィンドウ幅を小さくするとボタンの間隔が狭まっていき、一定の幅より小さくなるとトグルメニューに変わる。

はてなブログProを使っている方ならBrooklynに搭載されているグローバルナビをそのまま使える。しかし、ウィンドウ上部に固定されるため、ヘッダーを隠すのが御法度な無料版ユーザーでは使えない。色々いじってみたものの、スマホではどうしても固定を解除できなかった。

そこで、以下のサイトに載っているものを実装した。

どこのパラメータを変えるとどのパーツに反映されるのかが分かりやすくコメントしてあって大変ありがたい。

幅や色、文字の大きさはできるだけBrooklyn純正のものに似せた。

その他の変更は次のとおり。

menu-innerのwidthを100%にしてメニューの幅がウィンドウサイズに追従するようにした。デフォルトのようにpxで指定するとメニューが画面外に飛び出す。
サブメニューの文字を左揃え（#menu-content > li > ul.second-content > liのtext-alignをleft）にして、左側に余白を追加（#menu-content > li > ul.second-content > li > aにpadding-leftを設定）
トグルメニューが開く速さを少し早くした（slideToggleの引数で設定。単位はミリ秒）
トグルメニューでも子メニューが表示されるように変更（#menu-content > li:hover > ul.second-contentのdisplayにblock、topに40pxを指定）

参考：jQuery リファレンス：slideToggle

なお、メニューのリンク先にカテゴリー別の記事一覧ページを指定している場合、カテゴリー名を変更するとURLも変わるためリンクの張り直しが必要になることにご注意。

サイドバーのデザイン

以下のサイトを参考にデフォルトの吹き出し型からシンプルなボックス型に変更した。

Font Awesomeというアイコンフォントの使い方やテンプレートのCSSを無効化する方法もこのサイトから学んだ。

ただ、どれだけ頑張ってもサイドバーにアイコンが表示されなかったのであきらめた。

サイドバーのプロフィール

デフォルトではプロフィール画像がかなり小さくなるため、こちらのサイトを参考にHTMLで大きめの画像を貼り付けた。

ついでに文字を少し大きくし、aboutページへのリンクを別途作成した。

編集画面では分かりにくいが、プロフィールの記述欄ではHTML表記が使用可能である。

見出しの変更

このようなデザインにした。

ソースコードは以下のサイトを参考にアレンジを加えて作成した。

引用デザイン

デフォルトのデザインでは引用だと分かりにくい気がしたので、引用マークが入ったものに変更。

デザインは以下のサイトを参考に作成した。ただし、引用マークのアイコンはFont Awesomeの代わりにはてなブログのものを使っている。

脚注

脚注をつけると記事の末尾に表示されるのだが、デフォルトでは記事本文との区別がつきにくい。そこで、先頭に「脚注」の文字を入れるとともに区切り線を追加した。

コードは以下の通り。

/*脚注*/
div.footnote {
border-top: 1px solid #7d7d7d;
margin-top: 5em; /*記事本文と脚注との隙間*/
padding-top: 0.5em; /*脚注の区切り線と脚注本文との隙間*/
}
div.footnote:before{
content: "脚注";
position: absolute;
font-size: 20px;
margin-top: -2em;
}

コードブロックのデザイン

以下はコードブロックのサンプルとして適当に書いたPython3のコードである。

#Python
s1 = "Hello"
s2 = "World"
print(s1, s2)  #Hello World

変更点は次の通り。

Monokai風シンタックスハイライト

なお、以下のツールを使うと自分好みのカスタマイズが非常に作りやすくなる。

左上に言語名を表示

Pythonをよく使いそうなので独自に追加してみた。

背景色はオライリーの書籍をイメージした。

pre.lang-python::before{
background: rgb(210, 53, 164);
color: white;
}

print("これはPythonのコードブロックのサンプルです。")

行番号を表示

以下のサイトには偶数行の背景色を変えるコードも載っている。

ダブルクリックでソースコードを全選択

以下のサイトのコードをフッターにコピペした。

おまけ：見たままモードでコードブロックを挿入する方法

まず、コートブロック作成用に新たな記事を作り、はてな記法でコードブロックを記述する。リアルタイムプレービューを有効にしたら、プレビューに表示されるコードブロックをコピーし、好きな記事に見たままモードでペーストする。

もしも妙な改行が入るなどの表記の乱れが出たら、適宜HTML編集に切り替えて対応する。

カテゴリー（パンくずリスト）のカスタマイズ

カテゴリーの階層化

はてなブログにはカテゴリーを階層化する機能が無い。そこでしかるべきブログパーツを導入する必要があるのだが、なかでも利用者が多そうだったのがこちらである。

上のサイトで紹介されているものはカテゴリーのプルダウンメニュー化も同時に実現できる優れものである。

しかし、私は以下のサイトのものを使わせてもらった。

こちらは前者と比べて次の3点で優れている。

親カテゴリ単体での登録が不要
サイドバーでのカテゴリの表示順序を自由にできる（アルファベット順にする必要がない）
外部のサーバーからスクリプトファイルを読み込む必要が無い

1番目の意味は、例えば「パソコン」という親カテゴリの下にある「ソフトウェア」という子カテゴリで記事を書く場合、記事のカテゴリーに「パソコン」を指定する必要はないということである。

当ブログではこの仕様を利用し、サイドバーのカテゴリー一覧で「タグ」を疑似的にまとめている。下の画像で「タグ」だけがリンクになっていないのはそのためである。

カテゴリーのリスト表示化

Brooklynでは、サイドバーのカテゴリーがブロック状に並ぶデザインである。これをリスト状に縦一列に並ぶように変更した。

参考：カテゴリーとタグの分け方について

カテゴリーとタグの使い分けについては下の記事にまとめた。はてなブログでの両者の区別についても述べているのでよければご覧いただきたい。

LINE共有ボタンの設置

BrooklynではLINEのシェアボタンが用意されていないため、以下のサイトからコードをコピペして対応した。

こちらのサイトでは、はてブ数とFacebookシェア数の取得を無効化する方法も書かれている。これにより、ブログの読み込み時間を短縮できた。

シェアボタンにブログタイトルを挿入

TwitterやLINEのボタンを押したときに、「記事タイトル　-ブログタイトル　URL」の形式で挿入されるように変更。

対応する変数は以下の通り。

{Title} -{BlogTitle} {URLEncodedPermalink}

記事本文の真下にシェアボタンを設置

はてなブログの無料版の場合、記事の下にシェアボタンを設置しようとしても上から順に、

記事本文→はてなブログ側から強制的に入れられる広告→はてなブログ側から強制的に入れられるシェアボタン→自分が設置したシェアボタン

といったかなり間の抜けた配置になってしまう。

それを回避し、記事本文の直下に要素を挿入する方法が以下のサイトで紹介されている。

ページトップに戻るリンク

記事の下にあるシェアボタンのさらに下に、ページの最上部に戻るためのリンクを設置。

以下のコードを記事下のHTMLに記述することで作成した。

<!--ページトップに戻る-->
<div style="margin-top: 5px;">
<a href="#title">ページトップに戻る</a>
</div>

シェアボタンとの隙間を空けるためにmargin-topを指定している。#titleはページ最上部に表示されているブログタイトルを指す。

2019年11月9日　追記

前述のようにブログタイトルを画像に置き換えるとこのリンクが機能しなくなることが判明した。そのため、現在は#titleではなく#top-editareaを指定している。名前の意味が分かりにくくなった気もするが、他に適当なid名が見つからなかった。

ページトップに戻るボタン

ある程度ページをスクロールすると表示されるボタン。押すとページの先頭にアニメーション付きで戻る。

以下のサイトを参考に作成。

ただし、そのままではスマートフォンのような狭いウィンドウでは表示されなかったため、@media only screen～のmin-widthを900pxに変更。

ボタンの表示位置も変更し、サイドバーが横に表示されるくらい大きなウィンドウでは記事本文のすぐ右側に、それより小さいウィンドウでは右端に表示されるように調整した。

リンクボタン

前述のグローバルメニューでは、トグルメニュー時にはサブメニューが表示されない。そこで、親メニューをクリックしたときに以下のようなメニューページに移動するようにした。

カテゴリがきちんと階層化できていればこんな回りくどいことをする必要はないが、まだ分類が固まっていないのでひとまずの応急処置である。

※2019年11月2日追記　カテゴリーの整理が完了したため現在は廃止している。

グローバルメニューに似せたリンクボタンを作るために以下のサイトを参考にした。

背景色の変更

はてなブログの「デザイン」ページで背景色を設定すると記事・サイドバー・下地がすべて同じ色で塗りつぶされてしまう。

そのため以下のサイトを参考に、記事本文やサイドバーの背景色を個別に設定した。

他にも記事やサイドバーの幅の変更や記事の枠に影をつける方法も紹介されている。

お問い合わせフォームの設置

当初はメールアドレスを掲載しておく予定だったが、スパムや悪用のリスクがあるらしく断念。

代わりに、以下のサイトに従ってGoogleフォームを設置した。

独自性がないページを検索結果から除外

上のお問い合わせページや、プライバシーポリシー・免責事項は独自性に乏しく、検索結果にわざわざ表示する意味もない。そのため、以下のサイトのコードを該当するページにコピペした。

なお、すでに検索結果に載ってしまっている場合はGoogle Search Consoleから削除申請する必要がある。
参考：URL 削除ツール – Search Console ヘルプ

こうした措置をすることでGoogleからコピーコンテンツとみなされにくくなり、SEOの評価が良くなったり、検索結果の順位が上がったり、Google AdSenseの審査に合格しやすくなったりするらしい。
参考：【2019年11月】はてなブログ無料版でGoogle AdSenseの「サイトの停止または利用不可」を乗り越えて審査に合格した方法

トップページを記事一覧表示にする

デフォルトではトップページに記事全文が表示され、非常に見づらい。

以下のサイトを参考に、記事の出だし数行のみが表示されるように変更した。

ただし当ブログではリダイレクトは行わず、代わりにメニューボタンやヘッダー画像のURLをアーカイブページに設定することで対応している。

このサイトには閲覧デバイスがPCかスマホかを判別し、スマホであれば一度に表示する記事数を自動的に変えるコードも紹介されている。ウィンドウ幅で判断しているようだ。

なお、Pro版では簡単に記事一覧表示にできる機能が最初から用意されている。ほかにも広告を消したり、固定ページを用意したりもできる。

リンク先を別ウィンドウで開く

デフォルトではリンク先をクリックすると現在のページから移動してしまう。

この設定を、自分のブログ内へのリンクなら同じウィンドウで開き、外部リンクなら別のウィンドウで開くように変更した。

コードはこちらのサイトのものを使用した。簡潔で分かりやすい解説も書かれている。

もしもアフィリエイトのかんたんリンクのカスタマイズ

当ブログでは「もしもアフィリエイト」というASPを使用している。

ここには「かんたんリンク」という機能があり、下のリンクのように、Amazon・楽天・ヤフーショッピングの商品リンクを一度に貼り付けることができる。

リンク

上のリンクボタンはもともと全て同じ色だったのだが、店舗ごとにボタンの色を変更した。
ちなみに、上でご紹介している本は本当におすすめのもの。文章を書く人なら一度は読んでほしい。

コードは以下のサイトのものを使用。

ただ、上のサイトの見本によるとPC版表示ではボタンが横に並ぶはずなのだが、当ブログでは常に縦に並んでしまう。あと、見本よりもボタンが大きい気がする。

はてなブログかBrooklynとの相性が悪いのかもしれない。

私は使用しなかったが、以下のサイトにも分かりやすいコメント付きのコードが載っているので参考になると思う。

その他参考にしたサイト

どちらのサイトも前述のはてなブログテンプレート【Brooklyn】のカスタマイズ集経由で知った。

BrooklynのCSS一覧

https://blog.hatena.ne.jp/-/theme/6653586347155924442.css

HTMLとCSSの解説

トラブルシューティング

当ブログで発生した不具合と対処法は下の記事にまとめている。よろしければ参考にしていただきたい。
【はてなブログ】HTMLとCSSのトラブル対処法のまとめ