はてなブログを初めて少し経ってくるとなんとなくブログのデザインが淋しいなと感じたり、自分の好きな雰囲気にカスタマイズしたいなと思うことが出てきます。
私もブログを書きながらもブログ自体の雰囲気を変えてみたいなという気持ちが芽生え、ネットで検索しながら試行錯誤していました。
この記事では、そんなブログのカスタマイズについて、ブログ初心者である私が参考にさせていただいたおすすめのブログをご紹介します。
- はてなブログのデザインカスタマイズで初心者が参考にしたブログ一覧
- ブログ編集でよく聞くＣＳＳとは
- はてなブログ見出しのカスタマイズ
- 太文字をマーカーにする
- はてなブログの目次をカスタマイズする
- PCのCSS変更をスマホに反映させる
- グローバルメニュー（グローバルナビゲーション）追加
- スマホ画面にトグルメニューを追加
- パンくずリストの追加
- リンクを別窓で開く
- はてなブログのヘッダーメニューを消す
- はてなブログPROの紹介
- 終わりに
はてなブログのデザインカスタマイズで初心者が参考にしたブログ一覧
試してみたいけど難しそうで中々手が出ないのがはてなブログのデザインのカスタマイズ。特に私たちブログ初心者からすると、設定が難しそうに思えたり、いざ調べてみても、「CSS」や「HTML」といったよく分からない専門用語が沢山できて困ってしまったりということもあります。
私も全くそのような知識が無く、今でも全然分からないのですが、様々なブロガーの方々が書いてくださった記事を参考に、何とかデザインを変更していくことができました。
この記事ではそんな全くの初心者でも、「この記事だけ参考にすればブログのデザインをカスタムできる」をテーマに、おすすめブログをご紹介したいと思います。
ブログ編集でよく聞くＣＳＳとは
デザイン変更のために一つ知っておきたいことが、ＣＳＳとは何かということです。私も実は良く分からないのですが、はてなブログのＣＳＳというところに、コードを入力することで、ブログのデザインをカスタムすることができるものだそう。
コードは色々勉強する必要があるそうなのですが、私はコードを公開してくださっているブロガーの皆様のコードを使用させていただいています。
ＣＳＳを編集する場所ですが、ブログのトップページの左側に「記事を書く」、「記事を管理」などのボタンがあるのですが、その下のほう、「デザイン」というところをクリックします。下の写真の赤丸部分です。
クリックすると、「公式テーマ」が出てくるのですが、そのパレットマークの右側にスパナのマークがあるのでクリック。「背景画像」、「背景色」などの項目の一番下に「デザインＣＳＳ」というところがあるのでそこをクリック。下の写真の赤丸のところです。
クリックすると、下の写真の様な記号を入れるスペースが開きますので、ここにＣＳＳコードを貼り付けていくことになります。
ちなみに下の写真では｢グローバルメニュー」のコードが入力されています。
はてなブログ見出しのカスタマイズ
私は、はてなブログを始めて１０記事ほど書いたときに初めてデザインのカスタマイズをしました。
初めてのカスタマイズは「見出し」の変更でした。
見出しというのは、記事を書くときに文字を大きくできる機能のことで、段落のタイトルになる部分です。下の写真の青い矢印がついてる部分が見出しです。
一つ目の矢印は見出しで、見出しの下側に赤いラインが自動的に引かれる設定に変更してあり、二つ目の矢印は中見出しで、見出しの左側に縦線が自動で出るように設定してあります。
この設定をブログに入力するのに参考にさせていただいたのが「さるかわ様のページ」です。
こちらのページは、見出しのカスタマイズのデザインを例示してくださっており、一目でデザインが分かるのでとてもありがたい記事です。記事を読みながら自分の使いたいデザインを選ぶことができました。
また、どの見出しがどういう印象を受けるのか、などのコメントも書いてあり選ぶ時にもとても参考になりました。
デザインごとのCSSのコードも公開してくださっていて、コピーして自分のブログのCSS編集のところに貼り付けるだけで見出しを明るくカスタマイズすることができます。
※さるかわ様のページはこちら
太文字をマーカーにする
続いて太文字を黄色のマーカーにするという技です。
こちらは「ringocat様のブログ」を参考にさせていただきました。強調したい所を太文字にすると、黄色のマーカーで線を引いたようなデザインになり、ブログが明るくなります。
下の写真の青矢印のところがマーカーが引かれた部分です。
このＣＳＳをご紹介してくださったringocat様のブログは上から順番にブログの通り進めていけばちゃんとマーカーを引けるようになるのでお勧めです。
※ringocat様のブログはこちら
はてなブログの目次をカスタマイズする
続いて目次のカスタマイズ。
目次ははてなブログで記事を各ページのタイトル入力欄の下にある「見出し」部分の右の右の右の右の右の右、引用と脚注の間のマークをクリックすると、「見出し」で太くした部分が勝手に目次として表示される機能です。
下の写真のようになるのですが、このままだと、下の写真の矢印部分の「目次」という文字は表示されません。
この「目次」という文字を自動的に出現させることができるようになるために参考にしたのが、「八千草 蛍様のブログ」です。
こちらのブログの通りに進めていけば「目次」という文字を出したり、目次全体を枠で囲ったりといったデザインカスタムができるようになります。
※八千草 蛍様のブログはこちら
PCのCSS変更をスマホに反映させる
ＰＣで色々なＣＳＳの編集を実施したのですが、実はそれだけではスマホの表示が変わりませんでした。
ＰＣの変更をスマホに反映させるために参考にさせていただいたのが「メタラーまとん様のブログ」です。
このやり方を知っているだけで、ＰＣで自分好みに変更したデザインをスマホでも表示させることができるようになります。
※メタラーまとん様のブログはこちら
グローバルメニュー（グローバルナビゲーション）追加
グローバルメニューというのは、ブログの上のほうにあるメニュー画面のこと。正式名称はグローバルナビゲーションというそうです。
私のブログだと、下の写真の矢印の部分のこと。
この部分をクリックすると、色々なカテゴリーが出てきてクリックしたカテゴリーに飛ぶことができるシステムです。
グローバルメニューを作るときに参考にさせていただいたのが、「ゆきひー様のブログ」です。
こちらのブログで紹介されているやり方を上から順番に辿っていくだけでグローバルメニューを設置することができました。また、色のカスタマ時などのやり方も説明してくださっているので、初心者にとってとてもありがたいブログです。
※ゆきひー様のブログはこちら
スマホ画面にトグルメニューを追加
グローバルメニューの設置が終って思うことが、スマホにも同じようなメニューがほしいということ。ただ、スマホの画面は小さいので同じ大きさのグローバルメニューを設置するのはとても難しいです。
そこでまたまたゆきひー様のブログで説明されている方法を試してみました。
設置するのはトグルメニューというメニュー。下の写真の「編集」ボタンの下にある「MENU」と描いてある部分。
MENUをクリックすると、カテゴリーがメニューになって出てきます。下の写真の様な雰囲気になります。
このトグルメニューの作り方もゆきひー様のブログを参考にさせていただきました。
パンくずリストの追加
続いてパンくずリストの追加です。
パンくずリストというのはよく名前を耳にするのですが、何のことか分かっていませんでした。このパンくずリストについて教えてくださったのが「421miyako様のブログ」です。
パンくずリストというのは、下の写真の矢印の部分。グローバルメニューの下に出てくるこの記事がどのカテゴリーに属するのかを表示してくれるもののことを言います。
このカテゴリー部分をクリックするとカテゴリーに属する記事を見ることができるという仕組みです。
※421miyako様のブログはこちら
www.421miyako.com
リンクを別窓で開く
自分の記事に別の記事のリンクを貼っている場合、リンクをクリックしてもらったら自分の記事からリンク先の記事にページが切り替わるのですが、そうすると元の記事を最後まで読んでいただくことができなくなる場合があります。
そんな時に試したいのが、リンクを別窓で開く設定です。
この設定についても「421miyako様のブログ」を参考にさせていただきました。
※421miyako様のブログはこちら
はてなブログのヘッダーメニューを消す
ヘッダーメニューというのは下の写真の矢印部分（ブログの一番上）に表示されるはてなブログのメニューのこと。このブログではこのメニューを消しており、全体的にすっきりさせてみました。
ヘッダーメニューがあっても全然問題ないのですが、なんとなく無いほうが綺麗かなーという感じで消してみました。
参考にさせていただいたのは「DATA SCIENCE NAVI様のブログ」です。すごくシンプルに分かりやすく紹介してくださっているのでとても参考になりました。
※DATA SCIENCE NAVI様のブログはこちら
www.torikun.com
はてなブログPROの紹介
はてなブログには無料ブログと有料プランのはてなブログPROがあります。
初心者の場合は最初は無料ブログでブログを書きながら、収益化などを図りたいと思った場合にはてなブログPROへ切り替えるのがおすすめ。
私も最初は無料ブログで初めて今ははてなブログPROを使っています。
良いところとして、
・自動広告が表示されない（自分で広告をつけて収益化できる）
・カスタマイズの幅が広がる
・メンテナンスフリーなので書くことに集中できる
・はてなブロガーさんとのつながりができる
という4つがあります。
私としては無料ブログでやっていたころよりもはてなブログProに変えたほうが使い勝手がよく、サブブログも作りやすいのでお勧めです。
ブログをこれまでよりもさらに良くしていきたい、将来的には収益化も考えているという場合に特におすすめですので是非ご検討ください。
※はてなブログProの登録はこちら
※はてなブログProの詳細はこちら
終わりに
この記事では、はてなブログ初心者である私がブログのデザイン変更のために参考にさせていただいたブログを紹介しました。
ブログをより自分の好きな雰囲気に変えたいと思ったときにとても分かりやすくてお勧めのブログばかりですので、今回ご紹介したブログを参考に、是非一度はてなブログのデザイン変更に挑戦してみてください。
※はてなブログの連続投稿が途切れた時の対処方法はこちら
にほんブログ村
