集中力が切れたり、モチベーションが下がるとデザインをいじりたくなる！
…で、気づいたらものすごく時間を消費していた！ということはありませんか？
テスト前とか妙に片付けを始めたり全然違うことをしたものです。
記事作成の合間にブログデザインを息抜きにカスタマイズする初心者にゃもでございます。
カスタマイズは楽しいですが、どうカスタマイズするか調べたり、実際に上手に反映されるかどうか試していると時間がかかりますよね。
今回はブログ・カスタマイズともに、初心者の私が実際に当ブログで使っているカスタマイズと参考リンクをご紹介します。
デザインのためにかける時間を短縮して、記事作成に時間をあてませんか？
難易度は初心者の私から見て独自につけてますので参考までに。
ちなみにCSSデザインの変更をするときは要バックアップです！
あと、最初から記述してあるものは絶対に消さないでくださいね！
（元のテンプレートの記述なので消すと大変です）
難易度★☆☆：CSSカスタマイズのみ
CSSデザインを書き換えるだけでデザインが反映されるものをご紹介します。
記事の文字の大きさを変更する
記事本文の文字の大きさを変更しました。
当ブログの文字の大きさは17pxを採用しています。
元のテンプレートの大きさが個人的好みより小さかったので、カスタマイズしました。
参考にさせていただいたブログ
見出しのデザインを変更する
見出しの色とデザインを変更しています。
はてなブログのCSSはデフォルトで大見出しは「h3」中見出しは「h4」で設定します。
はてなブログには「h2がh3問題」というのがあるのですが…ただデザインを変更するだけならこのあたりは無視しましょう。
SEO対策や、ちょっと深堀りしたいなら検索して勉強しましょう。
参考にさせていただいているのは「サルワカ」さんです。
難易度★★☆：HTML記述必要・CSSカスタマイズ
ご紹介するものは、CSSに記述したあと、記事の設置したい場所にHTML記述が必要なものです。記事作成の「HTML編集」の部分で使用します。
はてなブログの「見たまま編集」しか使っていない方には、ちょびっと難易度があがりますが、コピペでOKなので慣れればかんたんです。
枠組みを設置する
目立たせたい場所や、リンク先を枠組みで囲っています。
目をひくデザインを設置できます
参考サイトはまたしても「サルワカ」さんです。
記事にマーカーをひく
太字だけだと味気ないかな？とかもうちょっと目立たせたいかもというとき
蛍光マーカーをひいたようなデザインが有効です。
参考にさせていただいたのはこちら。
リンクボタンを設置する
商品紹介の記事のとき「公式サイトはこちら」などのリンクをボタンにするデザインです。
あまり使うことはないのですが、あったら格好いいよね！
なんかそれっぽい（どれっぽいんだ？）ブログに見えそう！という不純な動機で採用しました。
難易度★★★：headに要素を追加・HTML・CSS
私が一番苦労したのがこちら。どうしてもやりたかったのでがんばりましたが、知識のない私だと参考サイトを熟読しても1時間近くかかりました。
ちょっとこったカスタマイズを使用する際にお世話になる「Font Awesome」というサイトがあるのですが…まぁバージョンに関することとかそのあたりなど勉強になりました。
このあたりは「初心者のうちにあんまりこだわるもんじゃないな！」と思ったので、本当に余裕ができてから調べて取り組みましょう。
トップに戻るボタンを設置する
長文の記事の場合（といっても当ブログは長くても2,000字程度なのですが）スマホから閲覧される方はスクロールが面倒かな？と設置したくて取り組みましたが、好みのものを設置するのにかなり手こずりました。
まぁ、動機の8割は「自分が使いたいから」なのですが、設置してよかったです。
だって自分のブログを一番見るのは自分ですからね。
使いやすいように変えたかったんですよ！しゅるーって戻りたかったんです！
参考にさせていただいたブログはこちら。
おわりに：カスタマイズは楽しいけどほどほどに！
自分好みのデザインにできるカスタマイズは楽しいですよね！
しかし、沼は深いし果てしないです。こだわればこだわるほど時間がなくなるのでほどほどにしましょうね！私も心に刻みます！なるべく！
情報を提供していただける各種サイト・ブログ様には本当に感謝しても足りないです。
なお、ブログカスタマイズやデザインに関する別ブログをたちあげました。
今後はカスタマイズに関する内容はサブブログにて更新させていただきます。
よろしければのぞいてみてくださいね。
