たぬき猫マロン

大怪我を負った保護猫の記録と働く主婦の雑記ブログ

【初心者向け】はてなブログ デザインテーマカスタマイズ その4《見出し編》

ご訪問ありがとうございます。

マロニーです。

 

先日ブログのリニューアルをしました。

 

Webデザインど素人の私でもコピペだけでカスタマイズがある程度できましたので、初心者の方向けに私のカスタマイズを記事にしていきます。

 

今回はその4《見出し編》です。

f:id:marondiary:20200628152709p:plain

前回のその3《フォントサイズ・ブログアイコン編》の記事の次回予告は『その4《目次編》』とお伝えしていましたが、その4は《見出し編》とさせていただきました。

すみません。

見出しと目次はセットなので、初めに見出しからご説明しますね。

はじめに

この度ブログテーマを『Minimalism』に変更しました。

 

このブログははてなブログpro(有料版)を使用しています。

無料版の場合、できない範囲があるかもしれません。

あらかじめご了承ください。

 

また、先日ブログテーマ変更直後に不具合がいくつか生じました。

詳細を記事にしています↓

www.marondiary.com

原因は不明でその後すぐアクセス数も戻ったので、テーマ変更は関係ないかもしれません。

 

ただ、検索するとワードプレスの方でテーマ変更によるアクセス減少が起きたという記事もありますので、変更は自己責任の上お願いいたします。

 

必ず今のデザインcssをコピーしてテキストファイル等に保存しておくことを強くお勧めします。

 

また、はてなブログは追加料金なしで複数のブログを開設することができます。

無料版で3つ、有料版で10つまで。

テスト用ブログを開設して、練習をしたり色々試してから気に入ったものを決めてメインブログを変更していくといいでしょう。

 

詳しくは準備編をご覧ください↓

www.marondiary.com

 

見出しをつけよう

短い日記調の記事以外の時は見出しは付けた方がいいでしょう。

記事を書くときに見出しを付けると読み手も書き手もわかりやすいです。

また、見た目もバランスが取れて視界的にも読みやすくなります。

 

SEO(検索エンジン最適化)対策にもなります。

検索エンジンにキーワードをアピールできるので読まれる確率も上がりますので是非見出しを付けた記事を書くことをおすすめします。

 

見出しとは

↑↑このことです。

文章を読みやすくするためのナビゲーションというか、文章ってある程度起承転結があると思うんですけど、そのタイトルというか。

 

短い日記型のブログは見出しは不要かもしれませんが、ある程度文字数がある文章は文字がずっと続くと、読み手は読む気がしなくなります。

 

重要な箇所だけ読みたいという読者もいるので、その部分をナビゲーションしてくれます。

 

記事上ではデザインによりますがたいてい大きな文字で帯のような形になっています。

はてなブログでは見出しは3種類。

  • 大見出し
  • 中見出し
  • 小見出し

f:id:marondiary:20200618000451p:plain

文章に合わせて見出しを設定していきます。

 

私のブログの場合はこんな感じ。

f:id:marondiary:20200628134905p:plain

 

見出しカスタマイズ

Minimalismの標準カスタマイズなしだと、見出しはデザインがなく、フォントの太さや大きさが変わるくらい。

つまらないし、見づらいです。

f:id:marondiary:20200628135945p:plain

上の画像がカスタマイズなし、下の画像がカスタマイズありです。

f:id:marondiary:20200628140246p:plain

いかがでしょうか。

見栄えが全然違いますよね。

 

それではカスタマイズしていきましょう。

見出しを選ぶ

私はこちらのおおまめさん (id:oomametomame)のブログを参考にさせていただきました。

おおまめさん、ありがとうございます。

www.oomametomame.com

サルワカさんの記事はいつもおしゃれで情報がいっぱいでこちらもおすすめです。

saruwakakun.com

見出しのデザインコードは人様の記事なので私がここで表示するわけにいきませんから、上記のブログからいただいてくださいね。

見出しデザインをはてなブログに設定する

好みのデザインが見つかったら、早速自分のブログに設定していきましょう。

 

各ブログでご紹介されている好きなデザインのコードをコピーして『デザインcss』に貼り付けるだけです。

 

①ダッシュボード

②デザイン

③スパナのマーク

④一番下の『デザインCSS』

⑤デザインCSSのをクリックすると難しいCSSが並んでますね。

ただ単に一番下の行にコピーしたPC、スマホ分のCSSをそれぞれ貼り付けるだけ!

(うまく反映されない場合は一番上に貼り付けると反映される場合があるそうです)

⑥変更を保存する

f:id:marondiary:20200628143822p:plain

 

デザインcssを書き換える際の注意点

f:id:marondiary:20200628145515j:plain

元データは必ず取っておく

先ほどもお伝えしたように、元のcssはきちんと取っておいてくださいね。

万が一崩れてしまった時に戻せなくなると困るので。

カスタマイズしたcssはどこの行に入れたか控えておく

デザインcssをクリックすると編集モードになって、左側に行番号が出てきます。

〇行目~〇行目:フォントサイズ

〇行目~〇行目:見出し

 など、別のテキストメモに記録しておくと

「やっぱりこのデザインにしよう」とか、

「この部分が気になるからもう一度やってみよう」

と後々気が変わった時にわかりやすくて壊れにくいですよ。

 

 

まとめ

いかがでしたでしょうか。

 

見出しをカスタマイズすることでブログ全体の雰囲気も変わってきますね。

たくさんデザインがあるので迷っちゃいますね。

 

色はカラーコードで変更することもできますので、さらに色も自分好みにカスタマイズしてみるのも楽しいですよ。

www.colordic.org

 

次回はその5《目次編》の予定です。

 

今日のにゃんこ♪マロンコーナー

昨日の夜、走り回った後に急に様子がおかしくなったマロン。

お腹が大きく早く脈打って、鼻がヒクヒク、口を開けてハァハァ呼吸していました。

あまりに様子がおかしかったので病院に連れて行こうかとも思いましたが、数分で元気になったので様子を見ました。

お腹のヒクヒクはしばらく続いてましたが、今朝は治まってて食欲も元気もありいつものマロンでしたので安心しました。

 

猫飼いさん、こういうことってありますか?経験ある方いらしたら教えてください。

 

f:id:marondiary:20200711065703j:image

f:id:marondiary:20200711065700j:image

 

今日もお読みいただきありがとうございました。

よい週末をお過ごしください♪

 

 

にほんブログ村 猫ブログへ
にほんブログ村  

 

にほんブログ村 主婦日記ブログへ
にほんブログ村