Wait a moment...

見出しのすゝめ

nem20.22xem (11)
999
13
2018-10-16 20:49:33
見出しのすゝめ

こんにちは、ほなねむ@honanem)です。

今日は見出しのお話です。

 

 

見出しってそもそもなに?

こういう時はためらわず、Google先生に聞いていきます。

 

   みだし
【見出し】

1 新聞・雑誌の記事の標題など、それを一目見てそこの内容が分かるようにしたもの。

2 (検索のため)項目として示したもの。 「辞書の―数」

 

早い話、各項目の概要みたいなもんですかー。

 

 

見出しがあるとなにがいいのか

ここでは3点、挙げてみたいと思います。

 

  1. 読む人にわかりやすい
  2. 他の人と見た目で差別化できる
  3. Google先生が評価してくれる

 

 

読む人にわかりやすい

見出しは各項目の概要なので、あるのとないのでは大きな違いです。

内容の理解もしやすくなりますし、見た目という意味でもすっきりしして見やすくなります。

 

私は見出しだけざーっと読んで全体の流れを把握してから、頭に戻って文章を読むようにしています。

ブロックチェーン関係は難しいこと書いてる記事が多いから…見出しを先に読んでからじゃないと…僕の馬鹿な頭ではつらいよ!

 

 

他の人と見た目で差別化できる

見出しを修飾したり、色を変えることで、他の人の記事と違う見た目にできます。

イメージカラーを決めて、見出しをその色で統一して使うだけでかなり違うと思います。

 

 

Google先生が評価してくれる

しっかりと見出しを活用していると、Google先生が「これはいい記事だ」と判断して、検索上位に上げてくれやすくなるそうです。

しっかりした見出しの活用については後述。

 

 

見出しの正しい活用方法

上部メニューの『書式』から、『見出し』を選んでみましょう。

ひとえに『見出し』と言っても、いくつか種類があるのがお分かりになるかと思います。

見出し1が一番大きく、見出し6までありますね。

見出しにはどれを使っても良いのでしょうか?文字の大きさが違うだけなのでしょうか?記事のバランスを考えて、ちょうどいい大きさの見出しを…いいえ、それは間違った使い方です。

 

見出しは数字が小さいものから使っていかないとなりません。

そして基本的にこのような構成になります。

 

見出し1

┗見出し2 その1

 ┗見出し3 その1

 ┗見出し3 その2

┗見出し2 その2

 ┗見出し3 その3

 ┗見出し3 その4

 

このような階層構造になります。

『見出し2 その3』『見出し2 その4』…と続いていく場合も同じですし、『見出し3 その1』の下に、『見出し4 その1』『見出し4 その2』…と付いていく場合もあります。

 

ここで気をつけたいのが、『見出し1』は基本的に一記事で一つだけ使う、ということです。

別に絶対に複数使ってはいけないということもないらしいですが、まあ一つだけ使うのが無難なようです。

そして『見出し1』はnemlogを書き始めた時にすでに使われています。

記事タイトルです。記事タイトルはタイトルでありつつも、見出し1なのです。

 

ですので、見出し2から使っていくことになりますし、おそらく一番多用される見出しでしょう。

 

 

おしゃれな見出しサンプル

こちらのサイト様に書かれているコードをコピーして、ソースコードマーク<>を押し、そこに貼り付ければ、見出しを修飾しておしゃれにすることが可能です。

こちらのサイト様ではすべて『見出し3』になっているので、変えたい場合は文字を選択して、上記メニューの書式から各見出しに変更すればいいです。

またコードの一部をいじると以下のように色を変えたりする事が可能です。

 

NEMグリーン

 

NEMオレンジ

 

NEMブルー

 

 

上記サイト様に書かれている最初のコード、『のしめはないろ』を例に取ります。

のしめはないろ

<h3 style="border-bottom: 1px solid #426579;border-left: 10px solid #426579;padding: 7px;">ここにテキストを入力します</h3>

最初と最後のh3は、これが見出し3であることを示しています。メニューの書式からでなくても、ここの数字を変えることでも、見出しの種類を変えることが出来ます。

 

border-bottom: 1px solid #426579 は底の線を1pxの太さで、色を#426579にするという意味です。

border-left: 10px solid #426579 は左の線を10pxで、色を#426579にするという意味です。

padding: 7px は上下左右に7pxの余白を取るよ、という意味です。

こうやって見ると複雑に見えるコードも、実は結構簡単ですね。

 

このコードの色を#2cbaadに変えて、文字をNEMグリーンといれたものが、一番上のサンプルです。

おっと、文字は黒になるので、あとから上部メニューの『テキストの色』から、#2cbaadに変えました。

 

こんな風に割と好きなようにいじることができます。

 

 

雛形を作っておくと便利

このようにして作った見出しを並べて、雛形を作って、非公開状態で置いておくと便利です。

こんな感じ↓

これを丸々コピペするところが、私のnemlog記事作成のスタートです。らくちん!

 

 

終わりに

以上、『見出し』の話をしてみました。

個人的にはこうやってカスタマイズしていくの、楽しいんで結構好きです。

 

しかし、おすすめはしましたが、絶対にこれをやらないと書いちゃダメ!ってことは当然ありませんし、自分の好きなスタイルでやるのがいいと思います。

「見出しは使うけど修飾までは面倒だからやらない!」もありです。

記事によっても、見出しの必要性はケースバイケースですしね。数行で終わるような短い記事に見出しはいらないですよね。

まあ、気が向いたら色々遊んでみてください。

 

 

 

ではまた次回!レッツ ネンジョ〜イ!٩( 'ω' )و

なお、アイキャッチ画像は『身だしなみ』でした。

Comment
ほなねむ
ほなねむ
2019-09-13 01:42:29ID:147046

>>tikupoka::さん
ありがとうございます!
まさかそこを褒められる日が来るとは・・・感無量であります!

ちくぽか
ちくぽか
2019-09-13 01:09:05ID:147045

いまさらですが 
ブログもっと読みやすくしたいよと思ってたどり着きました。
身だしなみも秀逸ですが、囲み枠で穴熊のセンスに脱帽でした。

ほなねむ
ほなねむ
2019-05-04 08:58:34ID:113175

>>あるひ::さん
わーいヽ(=´▽`=)ノ、ありがとうございます!

あるひ
あるひ
2019-05-03 21:04:56ID:112977

例が沢山あってすごくわかりやすかったです!
見出し使ってみたいと思いますー

ほなねむ
ほなねむ
2019-03-31 00:32:19ID:93542

>>dafu::さん
ありがとうございます!見出しLOVEです!

DAFU@Nemlog-UF
DAFU@Nemlog-UF
2019-03-30 23:36:54ID:93529

めっちゃ見やすいです(´∀`*)

全Nemlogerに100万回読み返して欲しい...

ほなねむ
ほなねむ
2019-03-16 23:35:20ID:82270

>>サバトラ::さん
出来ると思います。一度書けば、それをコピペすれば楽なんですけど、スマホだとコピーも面倒ですからね~(´・ω・`)
まあ見た目のリッチさと、手軽さはトレードオフですからね…自分にとって一番ちょうどいいところを選択するのがいいですね!
装飾もやり始めたら際限がないですからね。

サバトラ
サバトラ
2019-03-16 21:47:23ID:82144

私も見出し入れてみたいけど、
普通でも遅いのに、なお遅くなるからなぁ〜
(๑>◡<๑)
と、その前にスマホでできるの?

ほなねむ
ほなねむ
2019-02-05 23:19:31ID:46258

>>BleRoom::さん
こちらこそ、ありがとうございます!

BleRoom
BleRoom
2019-02-05 21:48:34ID:46124

記事を引用させていただきました。
https://nemlog.nem.social/blog/13251#comment
ありがとうございます!

この記事を書いた人
我が名はほなねむ。 値無族随一の魔法の使い手にして、暴落魔法を操りし者。 『ナイアガラ・フォール』!!