はてなブログを選ぶ要素として「カスタマイズがしやすい」です。ではデザインテンプレートを適用するだけで、カスタマイズをしたかと言われると答えはNOです。
今まで私が行ってきたカスタマイズについて触れていきたいと思います。今後はてなブログを収益化したい人や、少しでもかわいい・おしゃれなサイトを作りたいと思っている方は参考にしていただければ幸いです。
前回「すでにあるもの」をスタイルシート（CSS）でデザインし直す方法を学びました。今回は「必要だけど標準では無いもの」を作成したうえでCSSでデザインし直します。
グローバルメニューを設置しよう
グローバルメニューとはブログ上部に設置をしているメニューバーです。見た瞬間にこのブログでは何をメインコンテンツとして取り上げているのかがわかるために、来訪者に対して目で見えるアピールポイントとなります。必ず設置したい部分です。
モバイルを意識しているか
一番簡単な設置方法はHTMLで<table>を横に設置しただけの簡単なものです。しかしこのままでは横幅が変更されたとき（タブレット用・スマホ用）に、はみ出す形になったり閲覧ができない状況になります。必ずモバイルを意識したものにしましょう。
子要素を設置するか
私のブログでは子要素が設置されています。例えば「音声ぶろぐ」の子要素として「Vtuber」があると思います。このように設置をする必要があれば子要素が設置できるグローバルメニューを選びましょう。ただし前項同様にモバイルを意識しているものを選ばないと、子要素が無意味化されるコードも存在します。
![これでアクセスアップ。収入に直結する、人気ブログの作り方。広告設置と効果的なライティングについて。【電子書籍】[ フー ]](https://thumbnail.image.rakuten.co.jp/@0_mall/rakutenkobo-ebooks/cabinet/5661/2000003125661.jpg?_ex=128x128 "これでアクセスアップ。収入に直結する、人気ブログの作り方。広告設置と効果的なライティングについて。【電子書籍】[ フー ]")
カテゴリーにならないようにしよう
グローバルメニューの使い方を勘違いしているブログも多数あります。グローバルメニューはブログ型からサイト型への移行です。アフィリエイトによる収益化を考えていけば、最新記事が必ずしも最も稼げる記事にならないのは分かるでしょう。むしろ有益であれば1年前の記事にどうやって誘導するかを考える方が重要です。そのための設置メニューなのですから、カテゴリごとに時系列で並ぶようにならないようにしましょう。
お勧めのサイト
最もシンプルであり、最も使っている人が多いと思われる。モバイル対応もしているのでこの設置だけしておけば良いだろう。
同様のメニューバーになっているが、子要素まで作ることができるのが特徴。その分若干複雑なコードを書いているので、どういう意味があるのかは分かってからじゃないとちょっと怖いかもしれない。
＼ 来季から犬夜叉新作！その前に一気見！ ／
シェアボタンを設置しよう
はてなブログのシェアボタンはガタガタしていてかわいくないのです。かわいくするために必要な要素ですが、自分の記事をシェアしてくれる人なんてほぼいないと思いながら初心者は設置するのではないでしょうか。はじめはかわいくするために…。で結構ですが、設置する意味は覚えておくと今後の記事の書き方が変わります。
シェアボタンを設置する意味： Call To Action
シェアボタンを設置する場所のおすすめは「記事下」です。そして記事上とは使い方が本来全く異なります。Call To Action（以降CTA）は記事を書くものならば絶対に意識をしなければいけません。CTAとは「読んだお礼として欲しいことを記載する」です。もしもアクセスを増やしていきたいと考えるのであれば、「気に入っていただけたら記事のシェアをお願いします」などを記載することによりアクション性が高まります。Youtubeでは「チャンネル登録とグッドボタンをお願いします」が定番ですが、あれも一種のCTAです。
記事上に設置する意味は…？
記事下に設置する意味はCTAだということがわかりました。では記事上に設置する意味は何なのでしょうか。それは信頼度の獲得に他なりません。例えば記事を読む前に「この記事は5000人から支持を受けています」と言われたら、相当すごいレベルなんだなと勘違いします。数字の信頼度によって影響力を手に入れるのはインフルエンサーがするような手法と同様です。設置からしばらくしては意味がないかもしれませんが、意識して設置するように心がけましょう。デザイン上負担がかからないなら先から設置しておけば良いでしょう。
とりあえずアクセスを増やす効果として最適
このサイトのSNSからのアクセス誘因は概ね50%以上！！もしもTwitterなどに登録をしていないのであればこの機会に登録していきましょう。グローバルメニューの中にもSNSと連携する機能はありますので合わせてやってしまえば後々追加しなおすことはしなくてもよくなります。
お勧めサイト
＼ 無料期間中に鬼滅の刃を一気見しよう！ ／
毎度の事ですがデザインカスタマイズをする前に…。
絶対に覚えておかないといけない要素があります。ミスっても泣かない。しっかり戻せば大丈夫だということ。下記に挙げることは絶対に守りましょう。
動作のチェックは必ずすること
様々なブログでコピペで一発で使えますとうたっているコード（HTMLやCSS）がありますが、絶対に動くという保証はありません。場合によっては表示が崩れてしまったり、見られないサイトができるということも考慮しましょう。コピペで満足ではなく、しっかり動作しているかのチェックをしないとアクセスが伸びることはまずまずありえません。
バックアップは必ず取っておくこと
意外とみなさんやってないので、何度もカスタマイズすることにつながりますが絶対にやりましょう。追加の場合は「どこから - どこまで」が今回追加したコードなのかがわかるように何かしら目印を残しておくことが必要です。
HTMLとCSSの知識は順次覚えていくこと
確かにコピペで一発なのは楽です。ただ今後必要な知識になるので、HTMLとかCSSとか言われるものは最低限知識としては覚えておく必要があると感じます。あくまでも深く覚える必要はないので、＜＞で囲われるのがHTMLなんだなとか、スタイルシートってなんなのかなとか、HEADに書くべきでBODYはだめだよとか、そういうレベルでOKです。なぜそのような表示になるのかまで覚えられれば使いこなせるようになっているでしょう。
色の知識は覚えておくと便利
先人の方々に感謝でしかないですが、コピペでカスタマイズでほとんどの事ができるようになります。ただそのスタイルが自分のブログにマッチしているとは限りません。だからこそ色の知識は覚えておくと便利です。「#FFF」は光の三原色でRGBの順番なんだなとか、REDと書けば赤色なんだなとか、「#FFF」は「#FFFFFF」の略で0～Fで表示される16進法（0123456789ABCDEF）なんだなとかそういうレベルでOKです。多分この項目が最も触るのではないでしょうか。
分からない言語でも「お行儀」は覚えておくと良い
強調表示を行う場合には本来は <strong> を使いますが、初心者の方々は大きくなるからと言う理由で「大見出し」のボタンを押しがちです。確かにぱっと見は大きな文字になりますが、見出しの以下に表れるのは段落というのが「お行儀」。つまり関連しない要素が入る不思議な記事が完成してしまいます。このように「見出し(<H>)の下に段落(<P>)ができる」だけでも覚えておくと便利です。「"」ボタンは引用とかですね。見たまま編集を使いがちですが、正しく表記していないと後々不便です。
