シェリーさんち

妊活から妊娠へ アラサー主婦のブログ

はてなブログでオリジナルの見出しを作る!先頭に好きなマークを表示させる方法

f:id:family-blog:20180218104832j:plain
こんにちは。シェリーです。

はてなブログの「見出し」をカスタマイズしていると、使っているブログデザインにもともとついていた画像を消すことができないという問題に直面することがあります。

私は「Handwriting」というブログデザインを使っているのですが、見出しの先頭に勝手に「水色のリボンのマーク」がつく設定になっていました。

可愛いかったのですが、見出しをカスタマイズしようとした時に問題になりました。リボンマークが消えず残ってしまったからです。

結果としては、もともとついていたリボンマークを消し、新たに自分の好きなリボンマークを表示させることができました。

この記事では、私が行った具体的な方法について説明します。

 

見出しの先頭に表示される画像を消す

一つ前のブログにも書きましたが、ブログデザインをカスタマイズする手順です。

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

私のように、見出しをカスタマイズしたのにリボンマークが消えずに残ってしまった人は、該当するデザインCSSの{ }内に一行挿入して、下記のコードを加えてみて下さい。


background:transparent

 

これは、背景を透明にする(初期設定)CSSです。

CSSの中には、「背景が設定してある」ものと「ない」ものがあります。 背景の設定がないCSSは、もともとついていた画像が残ってしまうので、透明にする(初期設定に戻す)CSSを追加しないといけません。

背景の設定があるかどうかは、CSSの中に「background」という単語が入っているかどうかで見分けられます。

ちなみに、私が使っている大見出しの「ステッチ風」には背景の設定がされていましたが、中見出しの「下線」には背景の設定がされていませんでした。

見出しに自分の好きな画像を表示させる

私は、もともとついていた水色のリボンマークを消しただけではなく、「中見出し」に自分で選んだリボンマークを表示させるように設定しました。 

f:id:family-blog:20180217194143p:plain

↑元画像です。

f:id:family-blog:20180217173820p:plain

↑実際使っている大きさの画像です。

私が使っている中見出しのデザインCSS


.entry-content h4{
font-size:115%;
line-height: 20px;
padding-left: 30px;
background:url('https://cdn-ak.f.st-hatena.com/images/fotolife/f/family-blog/20180217/20180217173820.png') no-repeat 0;
position: relative;
}
.entry-content h4{
border-bottom: solid 5px #FFF0F5;
}

これが、私が使っている中身だしのCSSです。可愛く仕上がったので気に入っています。使いたい方は、コピペして使ってOKです。

見出しにオリジナルの画像を表示する手順

下記は、オリジナルの見出しを作りたい方に向けた手順です。

  1. 好きな画像(イラスト)を選びます。できるだけ小さくシンプルなデザインのものが良いです。自分オリジナルのイラストがなければ、無料画像サイトからダウンロードします。
  2. 画像は、見出しの先頭に表示するサイズにするために、かなり小さくする必要があります。私は30×19ピクセルにしました。小さくしてもはっきり見えるようなデザインを選ぶと良いです。
  3. サイズを小さくしたら、png形式で保存します。
  4. 画像をブログにアップします。これは、ブログに写真をアップするのと同じ要領で記事の編集画面から「+写真を投稿」ボタンを押してアップします。
  5. 4を行うと画像にURLがつきます。URLは、「編集オプション」のアイキャッチ画像の右側を見ることで確認できます。
  6. CSS5行目の「URL」の部分(「'」から「'」の間)にそのURLを貼り付けます。

background:url('URL') no-repeat 0;
position: relative;
}

これで、自分の好きな画像を見出しの先頭に表示させることができました。

下線の太さや色は、11行目で変更することができます。


border-bottom: solid 5px #FFF0F5;
  • pxの前=下線の太さ
  • 「#」から「;」の間=色 

見出しのフォントサイズを変える


font-size:115%;

中見出しのCSSの2行目のCSSです。これはフォントサイズを設定するCSSです。

フォントサイズ100%というのは、本文の文字の大きさのことを指しているようです。このCSSを加えることで、「:」〜「%」の間の数字を自分の好きな値に変更できます。私は115%にしました。

「Handwriting」の場合、初期設定では大見出し=140%、中見出し=130%になっていました。

まとめ

私はこういうの得意じゃないと思っていましたが、ブログカスタマイズが思いの外面白かったです。Webデザインを勉強をしてみようかなと悩むほどです。

もし、見出しのカスタマイズやってみたいけど難しそうだから躊躇している人がいたら、是非この記事を読みながらカスタマイズしてみて欲しいと思います。