シェリーさんの妊活

妊活しながらキレイになる!アラサー主婦の妊活日記

はてなブログの「目次」と「見出し」を、簡単に可愛くカスタマイズする方法

f:id:family-blog:20180217112551j:plain

こんにちは。シェリーです。

一昨日、一人の方に読者登録をして頂いてから、一気に読者数が増えてビックリしました。読者登録をして下さった皆様、ありがとうございます!

それでやる気が出て、ずっと気になっていたブログの「見出し」をカスタマイズしてみることにしました。私はCSSとかよく分からないブログ初心者ですが、とても満足のいく仕上がりになりました。

そこで、私が行った具体的な方法について紹介したいと思います。

 

無料版のカスタマイズ

無料版でもカスタマイズできます

私は現在、はてなブログの無料版を使っています。「無料版だとあまりカスタマイズできないんじゃないか?」と思っていましたが、そんなことはありませんでした!

(スマホ版の場合は、有料版しかカスタマイズできません)

Handwriting

私が、現在使っているブログデザインは「Handwriting」です。その名の通り、記事のタイトルが手書き風の文字になっています。背景は自分で選ぶことができ、私は無料画像サイトよりダウンロードして使っています。

カスタマイズに挑戦したキッカケ

「Handwriting」の場合、「大見出し」と「中見出し」の見た目がほとんど同じです。それだと、読みやすさが半減してしまう気がして、カスタマイズに挑戦することにしました。

カスタマイズの手順

  1. ダッシュボード 
  2. デザイン
  3. カスタマイズ(工具のマーク)
  4. {}デザインCSS
  5. 4に、好きなデザインCSSを追加していきます。

ここで大事なのが「追加」するということです。デザインCSSには複数のCSSを追加することができます。以前設定したCSSがあれば、それの後に続くように新しいCSSを貼り付けていきましょう。

目次のカスタマイズ

私は、「見出し」をカスタマイズする前に、「目次」のカスタマイズをしていました。

kimixさんのブログから、CSSをそのままコピペさせてもらいました。すごく分かりやすかったです。初心者の方必見です!

私が使っている目次は、「目次サンプル5」です。ハートの形がとても可愛らしくて気に入っています。私は妊活中なので、ハートとかピンクとかを積極的に取り入れて女性ホルモンアップを狙っています。

ただ、大見出ししか表示されないようになっており、中見出しもよく使う私としては、今後また新しいカスタマイズを試してみようかなと思っています。

ゆくゆくは、自分でCSSを編集できるようになれたら良いな〜と思ってます。

見出しのカスタマイズ

見出しのカスタマイズは、Skt.Coさんのブログを参考にさせてもらいました。こちらでは、可愛い見出しのCSSがたくさん紹介されています。

私はいつも「大見出し」と「中見出し」を使うので、今回はその2つだけをカスタマイズしました。

「小見出し」もカスタマイズしたい人は、「大見出し」と「中見出し」と同じ要領で好きなデザインを選び「h3」→「h5」にすれば設定完了です。

大見出し

大見出しには、「ステッチ風」を使わせてもらいました。すごく可愛いですよね。ちなみに、このブログの大見出しの部分は、「無料版のカスタマイズ」、「カスタマイズの手順」、「目次のカスタマイズ」、「見出しのカスタマイズ」、「まとめ」の部分です。

ただ、原因はわからないのですが、そのままCSSをコピペしたところ、背景や文字が白くなってしまい、大見出しが見えなくなってしまいました。以下のCSSを先頭に加えたところ、その問題を解決することができました。


.entry-content 

↑の一行です。これだけだと、私のような初心者の人は何のことを言っているのか訳がわからないと思うので、こちらだけ私がアレンジを加えて使っているCSSをそのまま貼り付けさせてもらいます。Skt.Coさん、すみません(><;)!!


.entry-content h3{
color: #ffffff;/*文字の色*/
border: 2px dashed #ffecef;
background: #F9B8CD;/* 背景の色 */
border-radius: 8px;
box-shadow: 0 0 3px 3px #F9B8CD;
margin: 0 0 1.5em;
padding: 0.5em 0.8em;
}

もし、私と同じようにそのままCSSを貼り付けたら大見出しが見えなくなってしまった人は、このコードを「{}デザインCSS」に貼り付けてみて欲しいと思います。

中見出し

大見出しのカスタマイズが終わったら、次は中見出しです。中見出しは、あくまで大見出しの中の一部しなので、主張控えめのデザインを選ぶと良いです。ちなみに、このブログの中見出しの部分は、「Handwriting」、「大見出し」、「中見出し」、「色のカスタマイズ」の部分です。

私は、Skt.Coさんが紹介してくださっている「下線」の色にアレンジを加えて使わせてもらいました。

詳細はこちらの記事をご覧ください↓

注意することは、大見出しに「h3」タグを使ったので、中見出しでは一つ階層を下げて「h4」タグを使うことです。

CSSの「h3」と書かれている箇所を「h4」に変更して、「h4」の前に「.entry-content 」を付け加えれば中見出しのカスタマイズ完了です。

色をカスタマイズ

私は、中見出しの色を自分の好きな色に変更しました。その方法を、大見出しのCSSを例に説明します。


color: #ffffff;/*文字の色*/

CSSの2段目の、「#」〜「;」の間の文字を好きな色のコードに変えるだけです。

カラーコード一覧はこちらのサイトがとても使いやすいです。カーソルを当てると、その色がサイトの背景に表示されます。

まとめ 

私のような初心者の方にも分かるように簡単にまとめたつもりですが、かなりの長文になってしまいました。気になった方は、読みながら少しずつカスタマイズしてみて欲しいと思います。

まだまだ、これからもブログをカスタマイズしていきたいと思うので、また新しい発見があったらアップしますね。

スマホで読んで下さってる方は「?」だと思います。スマホだと、全然カスタマイズされていないブログが表示されているからです。

スマホもカスタマイズができる、有料版の「はてなブログPro」すごく気になります。