そろそろこの「薬剤師とザリガニの奮闘記」というブログを立ち上げて2ヶ月になります。立ち上げた頃を思い出すと毎日が新しい発見だらけで、たまに思い返さないと忘れてしまう！！と思い、今日はブログ開設5日目に行ったこと「CSSでデザイン変更にチャレンジ」についてを書こうと思います。
ブログのデザインについて
ブログのデザインを完璧にしようと思うと限りがないことは、先人の方々のブログを読ませてもらうと容易に想像できました。
ですので、まずは出来ることからやろうと決め「見出しのデザイン変更」と「文章に蛍光ペン様のラインを引く」のカスタマイズを行ってみました！
見出しのデザインを変えてみよう！
見出しのデザインでそのブログの読みやすさが決まる！！
と言っても過言ではないと僕は思っていますが、皆さんはどうでしょうか？シンプルなデザインにするのも良し、派手にして目立たせるのも良し、、良くも悪くもブログ管理者のキャラクターがモロに出てしまうところなので慎重に選びたいところです。
では、実際の変更の操作についてですが、こちらのサイトを参考にさせていただきました、、というかコピーさせていただきました↓↓
実際の変更方法
上で紹介しましたsaruwakakunのページを見てみると、見出しの見本が「68」も記載されています！！すごい！！
その一つ一つの見本の下に「コードを表示」というボタンがあるので、そこをクリックするとCSSのコードが表示されます。それを全てコピーして所定のところに貼り付けるだけです。
ちなみにその所定のところというのは、
ブログの「ダッシュボード」→「デザイン」と進むと下のような画面にたどり着くと思います。
その中の「デザインCSS」というところを選択すると、文章が打てるようなスペースが展開されるかと思います。そこに、さきほどコピーしたCSSコードを貼り付けるだけです(うまくスクリーンショットが取れずに説明文だけになってしまいました)。
ただし、ここで注意点があります(saruwakakunのページにも同様の記載はありますが…)！あくまでコピー元のCSSはh1タグを指定されています。
もし自分が「h2」タグのデザインをこれに変更したい、「h3」タグをこのデザインに変更したい、となった際には、コピー元で「h1」と記載されているところをそれぞれ「h2」「h3」と変更してあげると、それぞれのタグを変更することができます。
h2、h3ってなんだ？という方は、もしかしたらこの記事が参考になるかもしれません。
意外と簡単ですよね？？
コピーして、自分が変更したいタグの数字に置き換えて貼り付けるだけ！
コピー元のコードを提供してくれているサルワカ君に感謝です！
文章中に蛍光ペン様のラインを引けるようにしよう
こちらも例の「デザインCSS」にコピーするのみです！
提供してくれているサイトはこちらです↓↓
こちらのサイトでは蛍光ペン様のライン以外のカスタマイズも記載されていますので、蛍光ペン様ラインを引くためのCSSをこちらに掲載させていただきます。
.marker_blue {
background: linear-gradient(transparent 60%, #98f1cd 60%);
}
実際の変更方法
上記のコードを「デザインCSS」に入力した後、文章を下記のようにコードで挟んであげるとマーカーが引けるようになります！！
＜span class="marker_blue"＞マーカーを引きたい文字＜/span＞
※実際の＜＞は半角です。
この中の♯～の部分を適宜変更することで色を変更することも可能です。
カラーコードはこちらが参考になります↓↓
ちなみに、上のコードはmaker_blueと記載されていますが、もし色を黄色に変更した場合はmaker_yellowなどと変更してあげた方が後々分かりやすいですよ！！
まとめ
一度理解するとすごい簡単なカスタマイズですが、ブログの読みやすさを左右するであろう「見出しのデザイン」変更の一例を紹介させていただきました。
はてなブログでブログを書いているけど、一度も見出しのデザインを変更したことがないという方は試しにカスタマイズを考慮してみてはいかがですか？？読み手だけではなく、書き手のモチベーションもあがりますよ！！
