無言の笑顔のこいつの頭の中は、こんなに高速回転している。

御朱印…スキ! 物書き…書くのも読むのもスキ! お出かけ、食べ物…スキダー!

目次付きのCSSを変更しようとして、お試し記事を書いたけど、公開したり引っ込めたりして、大変だから、一個それっぽい記事を書いてみた(長い)

 こんにちはー!

 絃永とかいてイトエと読みます。

 よろしくお願いしますー!

 

 今日はお休みで用事も済んだので、ブログの目次なんかのデザインをかえようとしまして!

 で、まずは、目次ってなんぞやってとこから始まり。

 ……ていうかね。ちょっとまえに、目次付きの記事を書いたのだけれど。

 あの時は、目次から見出しに飛ぶ方法を知らずに、HTMLをこねくり回して記事をかいたわけだ。

 でも、でも。今日、見つけた。

 見出しと小見出しの本当の使い方!←今までは文字の大きさ変えるだけじゃないの? って認識。

 

 で、見出しの有効な使い方を今から、お試し記事として書くのだ。

 お試しなので、ぐだぐだ書かずに1見出し200文字くらいですよ。

 ちなみにこの方法は、パソコンの見出し機能を使うので、携帯の人はパソコン表示に切り替える必要があるよ。

 うちの携帯の場合は↓こう。

 携帯の左上、時計の下ぐらいのやつ。

f:id:ito-e:20201016191707j:plain

で。

これ。

 

f:id:ito-e:20201016191728j:plain

 

 これでパソコンサイトで見れるはず。

 それぞれにやり方が違うだろうから、そこはグーグルさんにたずねて貰ったらうれしいかな。

 

↓これが、見出し(画像だからクリックしても飛びません(笑)。

f:id:ito-e:20201016181309j:plain

 

 何もしないと、枠線も何もない。あとからカスタマイズしたら、次の目次みたくなる。(方法は、はてなブログ目次CSSとかで検索したらでてきますー)

 

 で、これがほんとの見出し↓(カスタマイズ済み)

 

 

 

 目次の文字をクリックすると、読みたい場所まで飛んでくれる(凄い)

 

見出しとは。

↓写真のとおり、見出し、小見出し色々ある。

f:id:ito-e:20201016181454j:plain

 

 

 見出しを付けると、文章のひとくくりが出来あがって、読んでくれる人も読みやすいってもんなのだ。

 っても、めんどくさいときは、携帯でずらずら~だらだら~と文章書くけど(笑)

 目次を付けると、操作性の高いページとして、アドセンスの審査もいい感じらしいよ?

↑ほんとかな。経験者ではないので、なんとも言えない。

 

でここからが、今日学習したこと。

 

まずは記事を普通に書く。

 見出しとか関係なく、ダラダラ―と書いていく。

 目次になりそうな表題をかくけれど、特に何も意識せずに、見たまま編集モードでざくざくーって。

 次に目次に変更するので、表題だけ気を付ければ大丈夫。

 

目次になりそうな表題を小見出しに変える。

↓こんなかんじ。(今書いているやつでスクショを補おうとしているヤツ)

 見出しにしたい文字を指定。

 f:id:ito-e:20201016181631j:plain

 

 見出しボタン押す。

f:id:ito-e:20201016181652j:plain

 

 小見出しを選ぶ。

f:id:ito-e:20201016190327j:plain

 

 で、ここで気を付けたいのが、なんか文字の大きさが小見出しが小さいからって、中見出しをつかっちゃって、プレビューしてみると。

↓こんな変なリボンマークがでてくる。

f:id:ito-e:20201016181840j:plain

 

 これの原因がわからずに、なんでじゃなんでじゃと、30分くらい悩んだ。

 わかればなんてことないんだけど。

 中見出しを小見出しに変えたら、出なくなった。

 じゃ中見出しはどう使うんだって話は、宿題にするとして。

 

 最後に目次をおきたい場所で、目次ボタンを押す。

↓これ。

f:id:ito-e:20201016181934j:plain

 

 押すと、見たまま編集の画面に、こんなのがでてくる。

f:id:ito-e:20201016181955j:plain

 

 でも、プレビューするとcontentsとかいうのは見えなくなるので大丈夫。

↓これがプレビュー

f:id:ito-e:20201016182023j:plain

↑contentsはみえなくなった。

 

 

 で、無事に目次が出来ました。という訳だ。

 

 今日はここまでです。

 分かってしまうと簡単なことも、何もわからないところから始めると、えらい往生するなって、話でした(ぇ)

 最後までご覧いただきありがとでした!