MR-SKY’s diary

仕事と育児と日常と

意外と簡単に出来た!目次と見出しのデザイン変更

皆さんは、ブログのデザイン変更とかしていますか?

と言っても、皆さんのブログを拝見しているとき、会話風のデザインに変更したり、目次や見出しの変更をされて、ブログがどんどん育っていく状況をよく見てきました。


しかし!私はあまり他の方のコピペはしたくない!自分のオリジナルを作るんだ!!って思っていました。

しかし

ブログ上級者の方に言わせると、
『自分で勉強して1から始めるならかなり時間がかかるし、はっきり言って無駄。ネットの世界では良いものはコピーして使うのは当たり前!良いものはどんどん取り入れなくちゃ』

と言われたので、少しブログの目次や見出しを変更しました。

実際にやってみると、コードをコピペして簡単に出来ました。

今回わかったことは次のことです。

デザイン変更するときはPCを使うこと

スマートフォンでデザインCSSを変更しようとしても、上手くコードを貼ることが出来ません。
とくにスマートフォンでCSSのコードを貼り付けるために長押ししても画面が拡大されたりして思うとおり出来ません。はっきり言ってストレスが溜まるだけです!
パソコンなら簡単でした!

ブログの記事タイトルもデザイン変更出来る!

はてなブログで使用する見出しは
h3~h5タグ
を使います。
しかし参考にしたコードが『h1タグ』で作られていました。
そのままh1タグでコードを貼り付けて変更したら、次のようにブログの記事タイトルが変更されてました。

f:id:MR-SKY:20200113224451p:plain
h1 コード貼り付け前

f:id:MR-SKY:20200113224613p:plain
h1 コード貼り付け後

目次の変更

次に、目次を変更しました。

目次の参考先
www.papico405.com

f:id:MR-SKY:20200113230245p:plain
目次 変更前

f:id:MR-SKY:20200113230454p:plain
目次 変更後

これもコピペ一発!
(コピペ~いっぱぁーつ!って心の中で叫ぶのも自由です)

見出しの変更

見出しの参考先
uni-ism.com

参考コードは、h1タグで作られています。
この『h1』のどころを『h3』に書き換えたら大見出しが変更できます。
例えば、この様なコードです。

f:id:MR-SKY:20200113231549p:plain
ここのタグを変更

f:id:MR-SKY:20200113232709p:plain
大見出し 変更前

f:id:MR-SKY:20200113232751p:plain
大見出し 変更後

まとめ

あくまでも今回のは初期設定値でのコピペです。
もう少し慣れてきたときに、小さい数値の変更を行っていきます。
そして、
・使いやすい
・見やすい
・自分が気に入っている
ことが理想ですね。そんなブログに少しずつ近づけて行きたいと思います。

やはり、まずは私自身が楽しまないと、記事を読んで頂いた方も楽しくないですよね。

後は、引用マークと蛍光マーカーでの下線、更新日時表示等を順次変更していこうと思います。

私も皆さまのブログのデザインが変わっているのを見て、色々と変更していこうと思いました。
この記事を読んで頂いた方の参考に少しでもなれたらと思います。