うみうしの下書き ~清書はこれから~

今日中に下書きします、先生!

うみうし、ブログをレスポンシブデザインにするの巻

よくこのブログに来てくださる方はもうお気付きかもしれませんが、ブログのデザインを変更しました。レスポンシブデザインです!

 

1.レスポンシブデザインとは

レスポンシブデザインは、パソコンからでもスマホからでも同じように表示してくれるデザインのことです。パソコンとスマホで別々にデザインの設定をしなくてもいいのが便利です!

 

私のブログは、以前までデフォルトのデザインをいじっただけのもので、レスポンシブではありませんでした。レスポンシブデザインというのを、ブログをデザインした後で知りまして、レスポンシブにすれば良かったかな…と思いつつもせっかく頑張って設定したんだし…という気持ちもあったので、そのままのデザインにしていました。

 

でもやっぱりレスポンシブの方がいろいろとメリットがあるみたいなので、レスポンシブデザインにすることに決めました!

 

2.テーマの変更

CSSに入力してあったコードをバックアップしておいて、その後レスポンシブデザインに変更しました。広告のコードやお問い合わせフォームのリンクなどもバックアップした方がいいのかと思ったら、その必要はありませんでした。CSSの部分以外は消えなかったので。でももしものことを考えてバックアップしておいても損はないですね。

 

デザインは、"Minimalism"と"Written"と"Blank"の3つの中のどれにしようか迷ったんですけど、最終的に"Written"にしました。サイドバーのデザインがかわいかったのが決め手です。シンプルかつかわいいって最高ですね!

 

3.スマホでのレイアウト崩れ

最初、デザインをレスポンシブのものにしてレスポンシブの設定をONにしたら、スマホでの表示がおかしくなってしまいました。記事とサイドバーが重なってしまってごちゃごちゃした状態になっていたので、慌てて設定をOFFにしました。こういう時って焦りますよね…。

 

でもこの問題はすぐに解決しましたよ!CSSに、/* Responsive: yes */と入力するだけです。確認したら、スマホでもきれいに表示されていました。

 

4.ブログタイトルのフォント

ブログタイトルのフォントを変更することができなくて手こずりました。前に設定していた"Rounded Mplus 1C"というフォントを気に入っていたので、またそのフォントにしようと思ったのに、CSSに入力したコードが反映されなかったんです。

 

この問題の原因は私のケアレスミスでした。コードが正しく入力されていませんでした。調べたり考えたりするのを小一時間続けていたので、拍子抜けです。CSSに入力しても反映されなかったら、まずは入力間違いを疑った方がいいですね。確認するだけなら簡単ですし。

 

私の場合は入力し間違えたためでしたが、あとはコードの優先順位の問題だったり古いキャッシュが残っていたり、原因はいろいろあるようです。

 

5.ブログタイトルのフォントのサイズ

スマホ表示だとブログタイトルが大きすぎる気がします。タイトルが長めなせいで改行されてしまっているのも気になります…。

 

思い切ってヘッダー画像を作るのもいいかも?と思いましたが、ペイント以外にイラストを描くソフトを持っていないんでした…。一応ペイントは元々パソコンに入っています。でもペイントで描くと、画質がひどくなりますよね。画像を作るのは断念しました。

 

ブログを見る時に真っ先に目に入ってくるのがブログのタイトルなのに、微妙な感じのままにしたくないので、調べまくってフォントの問題を解決しようと思います!

 

うみうしの一言

ブログのデザインを変更して、良い気分転換になりました。髪をばっさり切った時の気持ちに似ています。たまにはこういうのも良いですね!