還暦Gちゃんブログ

「ひとを勇気づける・ひとが元気になる」を発信するブログ

読みやすさアップ!はてなブログにおしゃれな見出しを取りつける方法

f:id:gblog60:20210701194656j:plain

 

ブログにおしゃれな見出しを取りつける方法を知りたい

おはようございます!
魔太郎Gちゃんです。

今回はブログの記事の途中に「見出し」を取りつける方法をお伝えします。
そうすると、記事全体にメリハリがつき、読みやすくなるブログが出来上がります。

なお、方法を説明するうえで専門用語がどうしても出てきます。ここでは用語の解説は最小限にして、見出しを取りつける手順にポイントをおきます。

見出しの設定を一度おこなっておけば、あとは簡単に見出しが取りつけられる 仕組み に「はてなブログ」が出来ていますから安心してください。

 

前置きが長くなりました。さっそくスタートです。

 

  

そもそも「見出し」ってどんなもの?

例として魔太郎のブログでご説明しますね。

【60歳からのサイクルライフ】サイクリング初心者の用途と目的編 - 還暦Gちゃんブログ

青地に白抜きの文字になっている部分です。

f:id:gblog60:20210629085740j:plain

つまり見出しとは記事に中にタイトルのような役割になるものです。

そしてこの見出しを作るものを「hタグ」といいます。

おやおや意味の分かりづらい専門用語が出てきましたね。ここでは「hタグ」を使っておしゃれな見出しを作ると覚えればいいでしょう。

 

ブログの文字だけの記事が見出しがつくことで メリハリ がつきます。

 

はてなブログの見出しの仕組み

それでは具体的に見出しの取りつけ方ですが、その前に見出しにする仕組みを解説。

はてなブログには見出しを簡単に作れる機能があります。左上の「見出し」をクリックします。

f:id:gblog60:20210630164326j:plain

するとこうなります。

f:id:gblog60:20210630164410j:plain

ここで覚えて欲しいのは「見出し」と「hタグ」との関係です。
「hタグ」は見出しをつくるためのタグでした。

大見出し ⇒ h3
中見出し ⇒ h4
小見出し ⇒ h5

 

3種類の見出しの作ることができます。 

 

では、いよいよ本題です。最初に見出しのデザインを決めます。

 

見出しのデザインの変更の仕方

まずは見出しのデザインを選びます。

ここでは「サルワカ」さんのサイトから選びます。

「サルワカ」さんのサイトを開いて、気に入ったデザインを決めてください。

たくさんのデザインがありますので、まずはじっくり観察して選んでください。

saruwakakun.com

 

今回は空色の下地に黒文字のデザインを選びました。「コードを表示」をクリックしてください。h1から始まるコードが出てきます。

f:id:gblog60:20210630201750j:plain

 

そして表示された h1からのコードを範囲指定(ドラッグ)しコピー します。

コピー先はブログの「デザインCSS」というところに貼りつけます。ここからが魔太郎のようなパソコン初心者には難しいところです。いきますよ。

 

はてなブログの下書きの画面から、クリックする流れは下記のようになります。

 「アカウント名」
⇒「デザイン」
⇒「カスタマイズ」
⇒「デザインCSS]


画像で説明しますよ。

①「アカウント名」をクリックする。ここでは「還暦Gちゃんブログ」になってます。
そして開いた画面の「デザイン」をクリックします。

f:id:gblog60:20210630203313j:plain

 

②「カスタマイズ」をクリックします。スパナという工具のようなものです。

f:id:gblog60:20210630204110j:plain

 

③開いた画面から「デザインCSS」クリックします。

f:id:gblog60:20210630205715j:plain

 

④すると次の画面が開きます。

f:id:gblog60:20210630205815j:plain

 

⑤開いた画面をクリックします。すると次の画面が開きますので、空いている行に「サルワカ」さんのサイトで選んだ見出しのコードを貼りつけます。

f:id:gblog60:20210630212508j:plain


するとこうなります。

f:id:gblog60:20210630210546j:plain

 

⑥貼りつけができたら、「h1」を「h3」に書き換えます。
最後に「変更を保存する」をクリックして完了です。

f:id:gblog60:20210630211058j:plain

 

 

見出しタグのつけ方

見出しのデザインが決まりましたね。
それでは例文「なりたい自分をイメージする」を大見出しにする方法で説明しますよ。

①ブログの下書きに「なりたい自分をイメージする」と入力します。
 つぎに「なりたい自分をイメージする」範囲指定します。(マウスでドラッグする)

f:id:gblog60:20210630192837j:plain


②左上の「見出し」をクリックする。

f:id:gblog60:20210630193226j:plain

するとこうなります。

f:id:gblog60:20210630164410j:plain

一番上の「大見出し」をクリックすることで「なりたい自分をイメージする」が見出しに設定されました。プレビューで確認をしてください。

 

読みやすさアップ!はてなブログにおしゃれな見出しを取りつける方法:まとめ

この記事では「はてなブログ」の記事に、おしゃれな見出しを取りつける方法をお伝えしました。

正直にいうと、魔太郎は見出しが取りつけられるようになるまでに 何度も失敗 しました。なので、画像をたくさん使って詳しく解説を心がけましたが、それでもパソコン初心者には簡単ではないと思います。

でもね、頑張った分あなたのブログが読みやすく変わりますよ。

 

それから今回は「h3」タグだけを変更しましたが、「h4」「h5」タグや「目次」 の取りつけ方は、あえて省きました。情報量が多すぎます。
まずは「大見出し」が取りつけられる方法をマスターしてください。

そして次の「h4」「h5」タグや「目次」は検索をしてください。検索の方法のコツをお伝えします。それは、「はてなブログ **」で検索することです。

たとえば

「はてなブログ 見出し 作り方」

「はてなブログ 目次 作り方」

 

です。「はてなブログ」をつけることで、はてなブログ用の作り方のサイトが見つけやすくなりますよ。

いくつかのサイトを見ていくうちに概要がつかめて来ますので、それまでは 努力が必要 です。

大変だけど頑張って!!

最後まで読んでくださり、ありがとうございます。

では、またね!!

追伸:魔太郎

見出しを設定するにはたくさんの手順があります。このようなときは、タブレットやスマホ画面などを見ながらやると作業がしやすいです。
魔太郎はこの方式でずいぶん作業がはかどりました。

f:id:gblog60:20210701202242j:plain

クリックしていただけると嬉しいです

にほんブログ村 シニア日記ブログ 60歳代へ
にほんブログ村