はてなブログのデザインを変えてみた話
記事を３つほど書いてみましたが、さっそく読んでくださる方がいらっしゃって嬉しいです。デフォルトのままだとちょっと味気なさすぎるので、ブログのデザインを変えてみました！
文章を書くにあたって、はてなブログとNoteで媒体を迷ったのですが、結局はてなにしたのは、デザインをいじりたいからでした。
私自身、SEやっていたときにもちろんHTMLやCSSもかじったことありますが、めちゃくちゃ自信があるわけではないので参考サイトの完全コピペでの運用です。
でも、見た目に反映されるのが楽しいから、これを機に勉強してみようかな。（javaはやっぱそれで挫折したのかもなあ…。）
参考にさせていただいたサイトをまとめておきます。
PC・スマホ共通
ヘッダー画像をつくる
仕事がうまくいかなすぎて疲れたので(笑)、ブログタイトルはドラクエのさくせんでおなじみ、「いのちだいじに」と決めました。
画像はCanvaを使用しています。今ってこんな便利なツールがあるんですね！アイキャッチ画像もすぐ作れる！すごい！タイトルにちなんで、ゲーム風にデザインしました。
↓記事内リンクにはCanvaの使い方も載っててわかりやすいです。mido-ri.hatenablog.com
テーマをインストールする
レスポンシブデザインかつ、ヘッダー画像に合うよう、モノクロのテーマを探しました。サイドバータイトルの吹き出しがおしゃれで、一目惚れしました！
トップページの記事数を７→１にする
スマホで見てみたら、下にスクロールすると、永遠に次の記事が続いている……？
「動作重くなるし、関連性のない記事が下に続いたら混乱しない？」と調べたら、デフォルトだと７記事表示されるそうでした。記事のボリューム感にもよるのでしょうが、わたしは１ページ１記事が簡潔で好きなので、変更。
目次のデザインを変える（CSS追記）
デフォルトの目次はwordのようでなんだか味気ない…。ので、目次もかわいくしました。というか、ブログ書くまであまり意識していなかったけれど、目次が最初にあると記事の要点がわかって読みやすいな。上手く使えるようになりたい。
↓二重線のデザインをお借りしました。
スマホのブログデザイン
レスポンシブデザインを適用する
スマホの画面にもテーマを適用する方法がわからず調べたところ、こちらの記事がめちゃわかりやすかったです。（もしかしてCSS記述は不要だったりする？？）
ヘッダー画像が切れてしまうのを解消（CSS追記）
ようやくテーマをスマホにも適用できた！と思いきや、画像の両端がぶった切られている！？どうやらCSSの記述が別途必要な様子。。こちらで無事解決しました。
表示を比べてみると・・・
【2023/10/26追記】さらにデザインを加えました！
カテゴリのメニューバーを配置する
ヘッダー部分に記事カテゴリのメニューバーを置きました。ありがたいことに、CSSがテーマに組み込まれており、少しだけHTMLに追記するだけですぐできました！
アンダーラインを蛍光ペンにする
あまり使わない「斜体」を押すと太字×蛍光ペンになるように組み込みました。「見たまま編集」の画面では見れませんがプレビューで確認可能です。
こんな感じです！
これで、「太字のみ」との使い分けも可能です。
ボックスの枠を記事内に入れる
ただただ文字だけの羅列だと見ててつまらないので・・・
こんな感じの
ボックスを呼び出せるようにしました！
ボックスを設置する度にHTMLを書かなければならないのは面倒なので、はてなブログの定型文にHTMLを登録して、「見たまま編集」の画面からでもすぐに呼び出せて使えるようにしました！
↓こちらのサイト、カラーコードも自分好みに変えてそのままコードコピーできるのですごく助かりました。
箇条書きをおしゃれにする
ボックスの枠内にある箇条書きが「・」ではなく、チェックボックスになります。
はてなブログの「定型文」機能を使って、定型文にHTMLを登録することですぐに呼び出せるようにしました。
箇条書きのアイコンをチェックボックスに
- ←←こんな感じです！
まだまだ見やすくしていきたいです！
