社畜でも楽しく生きたい奴のブログ

会社や仕事、お金(ポイ活やキャッシュレス)、ゲーム(無双)を綴る雑記ブログ

MENU

【UnderShirt】はてなブログのデザイン一新しました!

f:id:dais10:20200614205357j:plain

どうもDaいすけです。

 

このたび、はてなブログのデザイン(テーマ)を

マテリアルぽっぷ」→「UnderShirt」に変更しました!

 

2週間ほどブログをさぼってた更新してなかったのは、正直このデザインを見直してたからなんです。

 

今回は、なんでこのタイミングでデザインを変更したのか?

何を変えたのか?を書いていきます。

 

デザインを変更した理由

まず変更した理由について、3つあります。

 

・CSSの整理ができてなかった
・CSSがうまく反映されなかった
・1年やってちょうどキリが良かった

 

それぞれ解説していきます。

CSSが整理ができてなかった

デザインに関してはほとんどコピペで簡単にカスタマイズできるのが非常に良いところなんです。

 

が、僕は後先考えずによさそうなデザインとかオプションをポンポンコピペしてたんですけど、CSSの整理や管理を怠ってました。

 

どういことかというと、どのCSSがどういうデザインに変更されるのかという履歴やオリジナルを取っていなかったのです。

 

それによって、どれがどういう風に変わるんだっけ?ってなってしまって完全に何がなんだかわからなくなりました。

 

しかもCSSって英文や記号なんかがずらーっといっぱい並んでるし、どこからどこまでが区切りなのかもわかりづらいので、調べるのも時間がかかるからもういっそのことデザイン一新した方がいいや!という考えにいたりました。

CSSがうまく反映されなかった

CSSの整理や管理がうまくいってないのもそうなんですが、それによって新たにCSSを入れようとすると、反映されないものも出てきました。

 

例えば、「強調するポイント」や「合わせて読みたい」などの枠がうまく表示されない、比較する一覧や表が表示されない、フォントが反映されないなど。

 

多分他のCSSと干渉したり、CSS順番がおかしい、デザインが対応してないなどの原因があったと思う。

 

その原因を探るのでも、CSSの順番を入れ替えるにしても、上記の整理や管理ができてないから、下手にいじれなくなったというのもデザインを変えようとした理由の一つです。

1年やってちょうどキリが良かった

ブログを始めてちょうど1年経って、キリもいいので上記のCSSの件もそうですし、カテゴリの整理、リライトも含めてデザインを一新しようと思いました。

 

デザインの何を変えたのか?

具体的に何を変えたのかと言うと、大きく分けて5つ 

 

・ブログのテーマ
・目次
・見出し(大見出し、中見出し、小見出し)
・囲み線関係
・表

 

 以下で解説していきます。

ブログのテーマ

冒頭でも書いた通り、ブログのデザイン(テーマ)を「マテリアルぽっぷ」→「UnderShirt」に変更しました。

 

「マテリアルぽっぷ」は記事のリンクがカードタイプで、最初から見出しやフォントなどある程度デザインが完成されていました。

 

が、その分自由にカスタマイズがやりづらく、少しブログが重いのが欠点でした。

 

今回の「UnderShirt」は記事リンクが同じくカードタイプで、かつシンプルなデザインでカスタマイズがやりやすそうなので選びました。

 

ブログが重いかどうかは現時点で様子見ですね。

目次

これもシンプルなものに変更しました。

見出し(大見出し、中見出し、小見出し)

見出しに関しても、以前の「マテリアルぽっぷ」のときはCSSがうまく反映されなかったんですが、ようやく今回変えることができました。

それぞれクセのないものを選んだ感じです。

↓例

大見出し

中見出し

小見出し

囲み線関係

正直この辺はいままであんまりいじってなかったので、始めての試みです。

っていうか1年経ってようやくデザインをいじるのって遅いかもしれないw

↓例

 

見出し付きの囲み枠


 

角丸の四角い塗りつぶし囲み枠

 

ポイントやまとめ 

 

点線の囲み枠

 

表や一覧 

Excelとかでよく見る表組みのことですね。

実際にExcelで表を作ってコピペするだけなので、簡単にできました。

テスト てすと
あいうえお かきくけこ
さしすせそ たちつてと
なにぬねの はひふへほ

 

さいごに

やっと大体思った通りにブログデザインのカスタマイズが出来てきました。

 

囲み線とか強調するところはまだ、主な記事に反映できてないのでそれはおいおいやっていくつもりです。

 

ちなみにまだ、やりたいことはあるんですけどね。(SNSのボタン設置とか文字の装飾とか)

 

やってみてわかったけど、凝るとかなりキリがないし、意外と時間がかかりますね、これ。

 

 

ある程度、デザインを変えることもできたし、改めてブログ2年目再スタートしようと思います。


それでは、以上!