こんにちは。Webライティングに興味のあるアラフィフ主婦のねーかめです。
他の方のはてなブログを見ていると、見出しが素敵なデザインになっていたり、アンダーラインが蛍光マーカー風になっていたりするものがあります。
読みやすくなるし、見た目もとてもオシャレなので、ぜひ私も取り入れたいと思っていました。
有料のはてなブログProに加入するればできるのかと思っていたのですが、無料版でも見た目をカスタマイズできるようなので、さっそく挑戦してみました。
アラフィフ主婦にはなかなか骨が折れる作業でしたが、頑張りましたよ……！
テーマを変更した
まずは、公式テーマから選んでいたテーマを、テーマストアから選び直しました。
そもそも、公式テーマしかないと思っていた……
公式テーマを下のほうにずっとスクロールしていくと、「テーマストアでテーマを探す」という表示があります。（パソコンでのやり方です）
かなり地味な表示です。
クリックすると、「テーマストア」が現れます。
すごくたくさんのテーマが載っています……！
気になるテーマのページに飛び、
「プレビューしてインストールする」→「適用するブログを選択する」を押すと自分のブログに適用されたプレビューを見ることができます。
OKであれば、「このテーマをインストールする」をクリックします。
私はいくつか試した結果、人気のテーマ第３位にあった「UnderShirt」にしました。
今、このブログのデザインになっているものです。
とてもシンプルで気に入っています。
本当にたくさんのテーマがあるので、気に入ったものが必ず見つかると思いますよ！
というか、テーマストアから選べるのを知らなかったのは私くらいかもしれませんね……
レスポンシブデザインの設定を忘れずに！
スマホでもパソコンと同じデザインで表示されるように、「レスポンシブデザイン」の設定を忘れないようにしましょう。
「デザイン」→「スマホのアイコン」→「詳細設定」→「レスポンシブデザイン」にチェックします。
見出しのデザインを変えてみた
はてなブログの見出しは、「大見出し」「中見出し」「小見出し」となっていますが、それぞれ違うデザインにカスタマイズできます。
やり方については、ちょっと話がややこしくなります。
ボタン一つで感覚的に、というわけにはいきません。
見出しのデザインを変えるには、CSS（シーエスエス）という言語を書き加えるようです。
CSSとは、Webページの見た目（スタイル）を設定する言語とのこと。
「デザイン」→「スパナのアイコン」→「{}デザインCSS」→「CSSを記述できます」というところに書き込みます。
もともと文字が書かれていると思いますが、続きに１行から２行開けて書けば大丈夫です。
書くといっても、もちろん自分で書くことはできませんので、コピペすることになります。
話がどんどんややこしくなりそうなので、参考にさせていただいたサイトをご紹介しますね。
サイトに書かれている手順に沿って作業を進めれば、大丈夫ですよ！
ちなみに「見たまま編集」で作業していても反映されていないように見えますが、プレビューを見るとちゃんと変わっていますので、プレビューで確認してくださいね。
デザインの種類については、こちらのサイトも参考になると思います。
CSSのコピペだけ！おしゃれな見出しのデザイン例 まとめ68選
蛍光マーカーを引けるようにした
文字に蛍光マーカーを引く方法については、こちらのブログを参考にさせていただきました。
マーカーを引きたい文字を選んで「斜体」を押すと反映されます。
ですので、普段から斜体文字をたくさん使う方には不向きな方法かもしれません。
【コピペでOK】無料はてなブログで「蛍光マーカー風」アンダーラインを引く方法
テキストボックスを入れてみた
今回の記事で、テキストボックスにも挑戦してみました。
一番最後にある、「おまけ」の文章のところです。
はてなブログには、編集サイドバーに「定型文」を保存する機能があります。
その「定型文」として、デザインされたテキストボックスを保存しておく方法です。
参考にさせていただいたサイトはこちらです
コピペして定型文に登録するだけ！見たまま編集で使える囲み枠
気に入ったデザインを複数登録しておくといいですね！
まとめ
今回は、はてなブログ無料版のデザインをカスタマイズする方法について、私が参考にさせていただいたサイトをお伝えしました。
どのサイトも丁寧に説明してくださっているので、ゆっくり、しっかり読んで真似したら、私にもカスタマイズできました。
私がブログを始めた目的は執筆トレーニングのためだったので、本来デザインはあまり関係ありません。
でも、他の方のブログを見ているうちに、見た目がオシャレなブログにしたいという思いがムクムク湧いてきました！
去年WordPressに挑戦したとき、「SWELL」というテーマを買いました。
今考えてみれば、今回やったようなデザインを、感覚的にクリックひとつでブログ上に配置し、編集できるものでした。デザイン自体も、とても素敵でした。
活かせずにいるのが勿体ない思いでいたのですが、今回の作業を通して、デザイン表示の元になっているCSSという概念を知ることができ、勉強になりました。
また新しい挑戦ができて、嬉しいです。
（2301文字）