はてなブログ：カスタマイズまとめ

はてなブログ、初期状態では使いづらい点・気に入らない点も多い。
しかし、そうした点はカスタマイズすることで徐々に使いやすく、また見やすいものにできる。

ここでは、実際どこをどのように調整していったか、参考にさせてもらったWebサイトの紹介を踏まえて、要点のみ簡潔にまとめていく。

※参考にさせてもらったWebサイトは必ず出典元として紹介するが、場合によりリンク切れや参照間違い、あるいは孫引きなども含まれているかもしれない。そうした点は徐々に修正していきたい。

カスタマイズのやり方【基本的な手順】

デザイン設定画面から、真ん中のレンチマークを選んで、一番下のデザインCSSにコードを追加していくこと。

また、コードがたくさん追加されていくと、どれがどの設定かわかりにくくなるので、行間をあけておくとともに「/* 蛍光ペン風(黄)+太字にする */」など「/*〇〇○*/」をアタマに入れて、何のデザインか判別できるようにしておくとよい。

カスタマイズの注意点

デベロッパーツールで確認する

CSSによるデザイン調整をした場合でも、PCだけで確認するのではなくスマホなど他のデバイスで正しく表示されているかもチェックしおくこと。

PCとスマホ表示は＜プレビュー＞で確認できる。

あらゆるデバイスでの表示に対しては、PCから「デベロッパーツール」で確認することができる。

たとえば、Chromeでは「表示メニュー＞開発/管理＞デベロッパーツール」で表示させることができる。デベロッパーツール画面では「端末やバージョンの選択・縦横や比率の変更」など様々な表示を試すことができる。

レスポンシブデザインモードにしておく

デザインCSSで、たとえば会話文や見出しのスタイルを追加調整しても、上記のデベロッパーツールで正しく表示されていないことがある。

これは「レスポンシブデザインモード」になっていないことが原因の場合がある。

デザイン設定画面から、右隅のスマホマークを選んで、一番下にある「レスポンシブデザインにチェックを入れておくこと。

ブログ全体（ベースデザイン）の調整

〇〇 

本文の文字サイズを調整する

【参考サイト：出典元】

はてなブログのフォントサイズを変える方法 最適な文字サイズは？ - Random Life Blog

【CSSコード】

/* 文字サイズを調整する */
.entry-content {

font-size:00px;
}

【解説】

• 「00部分」に文字サイズを入れる
• 16pxが最も標準かつ適当（このサイトでは、ウィキペディアを理想モデルにしているので、16px設定にしている）
• より見やすく読みやすくするなら17pxが妥当

見出しのデザインにメリハリを付ける

〇〇 

リンクを別ダブで開くようにする

〇〇 

下線マーカーを加える

【参考サイト：出典元】

【はてなブログ】コピペで簡単！蛍光ペン風のラインを楽に引く方法【斜体ボタン】 - 続・緑色日和。

【CSSコード：貼り付けるだけ】 

/* 蛍光ペン風(黄)+太字にする */
.entry-content em {
background: linear-gradient(transparent 60%, #fbff96 60%);
font-style: normal;
font-weight: bold;
}

【CSSコード：さらに調整できる点】

/* 蛍光ペン風(黄)+太字にする */
.entry-content em {
background: linear-gradient(transparent 60%, #fbff96 60%);
font-style: normal;
font-weight: normal;
}

 【解説】

このコードを貼り付けるだけで「イタリック」が「マーカー」として適用される。

「nomal」にすることで、自動的に太字にならず、マーカーだけ残せる

「#0000」で色味や色調の変更が可能

「00％」でマーカーの範囲調整が可能（0％文字全体、30％文字の8割ほどなど）

区切り線・枠線（囲み）を加える

<div style="border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border: 1px solid #006400; margin-top: 15px; margin-bottom: 15px; padding: 15px;">

 </div>

会話文（吹き出し）を入れる（スマホでも表示）

〇〇

上に戻るボタンの追加

〇〇

難読語（漢字）にルビ・振り仮名を付ける

〇〇