【はてなブログデザインカスタマイズ】はじめて2か月でやった21個のこと
こんにちは！はてなブログのカスタマイズについつい夢中になってしまい、久しぶりの投稿になります💦
ブログを始めて2ヶ月、私のブログも初めに比べるとだいぶ見た目が変わったな～と思います。
やはり自分色にカスタマイズしていくと、記事を書くモチベーションになりますね！
こちらに全てまとめておきたいと思います。
※👇先日書いたこちらの内容も当記事に含めた、総集編になります！
はてなブログのデザインを変えてみた話 - いのちだいじに
ブログ全体に関するカスタマイズ
ブログタイトル・プロフィールなどのコンセプト決め
カスタマイズとは外れますが、やっぱり大事だなぁと思ったので。
ブログタイトルは「いのちだいじに」。私は20代ながら大学卒業後3社を経験しており、仕事が思うようにいかず適応障害になったりした経験があります。
「HP優先で生きるコツを模索して発信する」コンテンツにしたい。とこの名前にしました。
なお、筆者の名前の「すらりん」は昔、ドラゴンクエストモンスターズ2でスライムに付けていた名前です。
レスポンシブデザインのブログテーマを適用する
当ブログは「Brooklyn」テーマを使用しています。吹き出しのサイドバーが可愛かったこと、あまりゴテゴテしすぎずシンプルだったことが決め手です。
レスポンシブデザインにして、スマホ表示でも適用されるようにしています。
はてなブログの超便利なデザインテーマ「Brooklyn」を作りました | SHIROMAG
ヘッダー画像をCanvaで作る
タイトルヘッダー画像はCanvaを使用して作成しました。Canvaは無料版でも十分いいものがつくれる大変良いツールです！お絵描き気分でいじってるだけでも楽しいです。
Canva内の検索ボックスで「はてなブログ Epicヘッダーテンプレート」と検索すると、ヘッダー推奨サイズ（幅1000px×高さ200px）に適したテンプレートが出てきます。
後からサイズ調整が要らないので楽です！
ヘッダー画像を画面いっぱいに表示させる
ただヘッダー画像を適用しただけでは、画像と画面の端っこの間に、無駄な余白が生まれてしまいます。以下の記事を参考に、ヘッダー部分いっぱいに表示されるようにしました。
ヘッダー画像をどんなテーマでもサイズピッタリに調整するカスタマイズ - 人生RPG
ブログ全体の配色を考えてからヘッダー画像を作ろう
はじめ、後述する「配色」をまったく考慮しておらず、テンプレート素材をそのまま使ったものだったので、雰囲気がコンセプトとかなり外れてしまっていました。後から改良を加えています。
＜ 初期のヘッダー画像 ＞
黄色と黒でどギツイ印象。筆者はどんな人か伝わらなさそう。
両端にゲームの絵があるから、ゲームの話をするブログと勘違いされてしまうかも…？
＜現在のヘッダー画像＞
優しい印象に変わり、コンセプトがわかりやすくなったと思います！
ブログ全体の配色を考える
初めは好きな色ばかり使っていて、黄色・オレンジ・黒・緑・・・でなんだか目が疲れる…？という印象でした。
かなり後から「配色」の存在を知り、そこからカスタマイズが一気に進んだので「最初から決めておくんだったな…」と少し後悔があります。
参考にさせていただいたのが、Sayuさんの配色パターンです！
センスが無くても大丈夫。色の組み合わせをこのパターンに合わせるだけで、ブログ全体のイメージがガラッと変わります！すごすぎます。
配色パターンのアイデア100選！おしゃれな色の組み合わせでwebデザインを制せよ。 | U Love English
カテゴリーバーをヘッダー部分に追加
ヘッダー部分に、記事カテゴリーごとに分かれたメニューバーを置きました。置き方自体はBrooklynテーマの作者さんが記載してくれています。
はてなブログの超便利なデザインテーマ「Brooklyn」を作りました | SHIROMAG
アイコンのマークは、はてなブログで使えるアイコンを使用しました。Font Awesomeより読み込みが早い気がするのでお気に入りです。
はてなブログで使えるアイコンフォント全125種 - フジブロっ！
※スマートフォンでもバーを表示させたかったのですが、スマートフォンのHTMLは別枠で、有料版はてなブログにしか無いことが判明し、断念しました。
かくなる上はデバイスの画面サイズで分岐させようか…？と思ったのですがキリがないのでやめました…。スマートフォンからご覧いただいている方、ごめんなさい。🙇
カテゴリーラベルの色を変える
記事タイトルのところに表示されるカテゴリー名、デフォルトだと結構地味で気になっていました…。こちら、カテゴリーラベルと言うそう。色を変えるくらいならすぐにできました。
参考記事内では「カテゴリーごとにカテゴリーラベルの色を変える」というものもありますが、まだ記事数自体がそんなに多くないこともあり、今後に回すことにします。
【はてなブログ】カテゴリーラベルに色をつける方法 – ブログ運営のためのブログカスタマイズ
フォントをメイリオにする
デフォルトだとゴシック体っぽい、ちょっと角ばったフォントでした。
メイリオはどんなデバイスでも比較的読みやすいとされるらしく、SEをやっていた時も基本設計書、詳細設計書、なんでもメイリオを使うよう指示がありました。（現場では游ゴシック許さないマンが多いです）
はてなブログで記事が格段にみやすくする方法。そのやり方とメモ - 他人に甘く、自分に甘く
トップページ画面のカスタマイズ
「続きを読む」ボタンで疑似的に一覧表示にする
トップページは、無料版はてなブログでは一覧表示にできず、全文表示にしかできません。全文表示だと記事をすべてスクロールしなければ下に進めず、かなり不便。画面自体の読み込みにも時間がかかります。
いろいろ調べたところ、「続きを読む」ボタンを設置することで、疑似的に一覧表示っぽく見せることは可能のよう。
すべての記事に「続きを読む」を設置する必要はありますが・・・。
※もちろん、有料版Proの方はこんなことする必要はないようです！
「続きを読む」ボタンのデザインカスタマイズ
Brooklynテーマのデフォルトは黒い四角。たくさん並んでると、ちょっと威圧感が気になりまして…。ブログ全体の配色に合わせてデザインを変更しました。
【保存版】簡単コピペの"続きを読む"ボタンデザイン集【はてなブログカスタムVol.11】
トップページの記事数を少なくする
トップページの記事数はデフォルトだと7記事表示されます。ちょっと長いかな～？と思い、5記事に減らしました。
設定画面＞詳細設定＞トップページの記事数（PC版） で変更可能です。
サイドバーのカスタマイズ
（Brooklynカスタマイズ）吹き出しの色を変更する
デフォルトだと黒い吹き出しの色なので、配色に合った色に変更しました。
こちらの記事だと、吹き出しを無くして四角にする、など細かいこともできそうです。
はてなブログにデザインテーマのBrooklynを適用＆カスタマイズ！ - モーリーのメモ
プロフィール画像がぼやける問題を解消
普通にプロフィール画像を設定するだけだと、めちゃくちゃぼやけませんか？
筆者の顔でもあるので、なんとかできないかと探したところ、ありました！プロフィールのところに、はてなフォトライフのURLをHTMLで直書きするというもの。
レスポンシブデザインにすると、スマホでも問題なく表示されます。
【超簡単】はてなブログのプロフィール画像がぼやける時の対処法！ - モナリザ研究所
記事内のカスタマイズ
目次のデザインを変える
デフォルトだとめちゃくちゃ味気ないんですよね…。柔らかい雰囲気かつ、目次だよ！ということが視覚的にわかりやすいデザインを目指しました。
こちらの「アイコンフォントを使用した目次」を使用しております。
はてなブログ【目次カスタマイズ】コピペで使えるデザイン集 - フジブロっ！
本文中に付いてしまうキーワードの点線リンクを消す
本文に、はてな内でキーワード検索ができる点線（＝キーワードリンク）が勝手に引かれる仕様のことです。単純に読みにくくなるし、誤クリックしただけで飛ばされるのは邪魔じゃね？と思っていました。
本来であれば、有料版はてなブログでしか、これを消すことはできないんだそうです。
が、それをJavascriptで消してしまうという技がありました。今ではひとつも見かけずノンストレス！
はてなブログ無料版でキーワードリンク（下線）を記事から消す方法 - インサイド シーナ
吹き出し会話を定型文に登録する
こんな吹き出しがボタンひとつで呼び出せちゃいます！
吹き出しの会話がついているブログってよく見かけませんか？
見た目が楽しいし、とっても読みやすいですよね。簡単に使える方法は無いかな？と探しました。
CSSでクラスを定義しておいて、はてなブログの「定型文」にクラス呼び出しのHTMLを登録しておく、というものです。すごすぎる！感動しました。
【超簡単】はてなブログの見たままモードで吹き出しを表示させる方法 - キラッとはてログ
見出しのデザインを変える
(Brooklynカスタマイズ)既存の見出しをリセット
見出しをカスタマイズしたい場合、はじめに適用しているテーマの見出しをリセットする必要があります。
Brooklynの見出しもシンプルでかっこ良いのですが、白黒のコントラスト強めな感じが、当ブログの目指している柔らかい雰囲気とちょっと違うかな～と思い、デザインを変えました。
見出しデザインのカスタマイズがうまくいかない時の対処方法(はてなブログ) - Brooklyn-カスタマイズ
大見出し・中見出し・小見出しのデザイン変更
デザインはこちらの記事を参考にカスタマイズしました。かわいい見出しがたくさんあります！
はてなブログの見出しデザイン24選！CSSコピペOKのおしゃれ・可愛い・シンプルカスタマイズ | hitorizumu
ポイントとして気を付けたところはこんな感じです。
- 見出しの大小関係が分かりやすいように
- 装飾が派手な見出しはスマホで見づらいので、シンプルに
- 誰でも読みやすいような緑を基調に
見出しの使い方を勉強しました
お恥ずかしながら、これまで見出しの使い方がかなり適当でした。いきなり「中見出し」「小見出し」から始めてしまっていたことも。
hタグは順番を守るべき、という根本的な使い方を勉強しました。
引用ボックスのデザイン変更
このように、引用ボックスが見やすくなりました！
デフォルトだと薄いグレーのボックスだけなんですね。これだけだと引用文だよ！ってことが分かりにくいんです。せめて引用マーク「''」はつけたい。
こちらの、はてなブログアイコンを使用したコードを使用させていただきました。
【はてなブログ】<blockquote>引用タグのデザインのカスタマイズ - Takeuchi BLOG
蛍光ペン風のアンダーラインを「斜体ボタン」に登録する
「斜体」ってそんなに使わないじゃないですか？（個人差ありますが）
なので、「斜体」を押すと太字×蛍光ペンになるように組み込みました。「見たまま編集」の画面では見ることはできませんが、プレビューで確認可能です。
ctrl+Iを押すと、蛍光ペンに。ctrl+Bを押すと、太字に。
このような使い分けができるのが良いところです。
はてなブログで蛍光ペン風の強調表示！「斜体」クリックで簡単！ - チョコベリーの暮らしをちょっと豊かにするブログ
ボックス（囲み枠）を定型文に登録する
本文中に文字だけでなく、ボックス（囲み枠）があると見やすいですよね！
こちらの「2. 角丸」「27. ラベルをつけたようなデザイン」を参考にして囲み枠のデザインを作成しました。
はてなブログの定型文に登録して、見たまま編集モードで編集できるようにしています。
【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
囲み枠のデザイン
その１
その２
あと、こちらの方の囲み枠も、デザインが凝っていてめちゃくちゃかわいいです…！
「box55／手書き風」が特に好きです。今後使わせていただくと思います<(_ _)>
ボックスデザイン（囲み枠）CSSコピペOK！ブログを見やすく装飾 | Turicco
ブログのバックアップを取っておこう
最後に、はてなブログのカスタマイズをしていると、「CSSのコードを上書きで消しちゃった…！」などの悲劇に遭われた方の記事をよく目にします。
私はSEをやっていた頃、業務中にそんな悲劇を経験したので（デグレったってやつですね）バックアップは是非取りたいところです。
検証用ブログを用意しよう
はてなブログって、ひとつのアカウントで複数ブログを作れるんですよね。
なので、テスト用のブログページを作っておこうという記事がありました。
デザインテーマを変えるときには特に作っておきたいですね！
はてなブログ初心者がカスタマイズする前にやっておくべき事 ‼︎ 後悔する前にバックアップ＆テスト用ブログを作る。 - PlantesSucculentesの雑記
テスト用ブログを作る際の注意点は以下２つです。
- テスト用のブログは、「TEST」など分かりやすい名前にしておくこと
- 非公開で作ること（全く同じサイトが2つあると違反になります）
デザインCSSのバックアップを取っておこう
デザインは基本、適用させると前回分に戻すことはできません。
消してしまっては痛いようなソースコードは、テキストファイルでいいので定期的に保存しておくことをお勧めします。
さらに、デザインテーマを変えると、デザインCSSのソースは消えてしまうようなので、注意です…。
まとめ
こうしてまとめてみると、色んなカスタマイズを重ねてきたな～としみじみ思います。
大事なのは、色や雰囲気といった「サイト全体の統一感」だと実感しています。
気に入ったデザインだと自分のブログに愛着が湧きますね💛
今後もさらに見やすくしていければと思います！
