元気!こぞうたんのコツコツ日記

コツコツ(読書など)やっていることや努力(勉強)していることを記載し、たま~に前向き(ポジティブ)になれる話題を話してます!笑

ブログのデザインを一新してみた!

おはようございます!!今日も元気なこぞうたんです。

くまっちです!よろしくです。

今日はブログのデザインを一新したので、そのことについて話そうと思います。

お~ブログのデザインを前から大きく変えたんだね。

そうそう!具体的には憧れだったカード型になる下記のテーマに変更したんだよ!

blog.hatena.ne.jp

へ~黒と茶色をベースにしたテーマで落ち着いた雰囲気があるね!

だよね~!滅茶苦茶気に入ってるんだ~!笑

でも、テーマ変更するって色々大変だったんじゃないの?

うむ!昨日はブログの設定ばっかり修正してたんだけど、テーマ変更時の注意点や変更点なども書き残しておこうと思う!

テーマ変更時の注意点

私がテーマ変更時に注意した点「失敗したな」と思う点は下記です。

  1. デザインCSSが消えてしまう。⇒メモなどで一時保存必須
  2. レスポンシブデザイン対応の確認⇒携帯画面の設定が自身で必要か確認
  3. デザインCSSの内容を把握する⇒テーマ変更後にどの部分を貼り付けるか確認
  4. デザインCSSでの変更部分がおかしくなっていないかテーマ変更後に確認

 上記「1.」はテーマ変更する際に忠告されるため、きちんと対応してれば問題ないかと思います。

 また、上記「2.」もテーマ選定時にレスポンシブデザインか否か明記されているため、選定時に自然と目に入ると思います。

 ただ、上記「3.」と「4.」は、私が失敗したなと思っていた点ですね。

 デザインCSSをメモに一時保存したまでは良かったのですが、あまり内容を理解せずに全部コピーし、そのまま貼り付けてしまいました。

 そうすると、おかしな点が多々出てきてしまい、必死にデザインCSSで変更している箇所を確認する作業が入ってしまいました・・・

具体的にはどんな現象が発生したの?

テーマを上記「cappuccino」にしたのに変更前のデザインCSSを貼り付けると元のテーマ「afternoon」に戻ってしまったんだ!笑
他には目次部分の背景が白色なのに、文字も白色で全く見えなくなってしまったね。笑

テーマ変更後の修正点

今回テーマ変更したことで、下記部分を変更してみました。

  1. グローバルメニューの追加
  2. 記事下に読者登録ボタンを追加
  3. 記事下にブックマークなどのボタン追加(ボタンデザインを一新)
  4. 番号付きリストのデザイン変更

このテーマにして大きく変わった点上記「1.」のグローバルメニューを追加したことですね。具体的には、下記画像の赤枠部分です。

f:id:kozotan:20210913062651p:plain

それぞれの項目をクリックすることで関連する記事に飛べるようになっています

その他の上記「2.」~「4.」はせっかくデザインを一新するだからということで、自身で取り組んだ内容です。(テーマ変更しなくても変更可能です。)

グローバルメニューで、興味がある記事を色々見てもらえると嬉しいな~

でもさ・・・・

?????

デザインを一新して記事を見てもらっても、内容がダメだと話にならなくない?笑

痛いところ突いてくるんじゃない!!笑

----------------------------------------------
今日も見ていただいてありがとうございます。
はてなスター等を頂けると励みになります。
また、ブログ村、人気ブログランキングにも登録しておりますので、よろしければこちらもポチっとお願いいたします。

ブログランキング・にほんブログ村へにほんブログ村

30代サラリーマンランキング

----------------------------------------------