こんにちは、うさみです。
昨日ブログのデザインをがらっと変更しました！
パソコンで記事を書いてレビューを確認するので、どうしてもパソコンの見た目を重視しがちになって、スマホの見た目は二の次になってました(^_^;)
（スマホから読んでくださる方が多いのに・・・）
スマホ版の見出し
昨日記事をアップしたのをスマホで確認したら、
なんか変・・・。
なにかと思ったら、見出しでした。
大見出しがただ太字になっているだけ。
これじゃぁどれが見出しかわかりません(-_-メ)
なので、こんな感じに変えました！
よくある感じの
左に線が入ってて、背景がグレーの見出しです。
これでだいぶ見やすくなりました(^^)
デザインテーマ
次にＰＣのデザインテーマを
『レトロポップ』
から
『Afternoon』に変更しました。
ブログを立ち上げた時から『レトロポップ』を使っていたんですが、当初とは内容が変更してきたりしたので『Afternoon』の方がイメージと今の気分にしっくりきます(^^)
このナチュラルな感じ、気に入ってるんですが、一つだけ気に入らない所があります。
記事とサイドバーがぎゅって真ん中に寄ってるんです。
左右の余白が多い。
もっと画面全体を使ってくれていいんだけど（笑）
コードを加えて少し広げたんですが、これが限界みたい。
まぁしょうがないのかな～。
スマホ版デザイン
ＰＣのデザインを変えたのを機にスマホ版も一新しました。
Before
After
わかりやすく変わったのはタイトルの所ですね。
ＰＣ版と同じタイトル画像を入れたので、
ＰＣとスマホで統一感が出ました！
あとは細々と変えた所があるんですが、自分でもどうやったのか覚えてません。
２度と同じことはできません（笑）
スマホのカテゴリ表示
あとこれ、すっかり忘れてました(^_^;)
スマホ版ではカテゴリをプルダウンで表示してるんですが、新しくカテゴリを作った時とかカテゴリ同士を統合した時は、その都度自分でhtmlを書き加えなきゃいけないんです・・・。
(自動で追加するようにすることもできるみたいです！が、ちょっと疲れたのでまた今度w）
それをすっかり忘れていたためにうまく動作されずにエラーが出てる状態でした。
やらかした(/_;)
なのでカテゴリの整理も踏まえてちゃんと直しました！
参考にさせてもらった先輩方
今回の変更で助けてもらった先輩方はこちらです。
ド素人なので本当に助かりました(>_<)
ありがとうございました！
最後に
今回に限らずなんですが、これだけの変更なのに半日がかりの作業でした。
htmlは中途半端に少しだけわかるんですが、ＣＳＳは全く意味不明です。
調べても応用が自分でできないので、
調べて、試して、調べて、試して、戻して、調べて・・・みたいな繰り返しですごく時間がかかります。
CSSとかはブログやアフィリエイトをやる上で絶対に必要な知識ではないのかもしれませんが、身に付けておくと良い知識ではありますね。
時間がもったいないです(^_^;)
毎回記事をＰＣでもスマホでも確認してるんですが、その時は気にならなくても後からあれって思うことあるんですよね。
めっちゃ読みにくいじゃん！
って思うことあります。
なので読者目線で読んでみるのは良いことですね(^^)
こういう積み重ねがきっと大事なんだろうな～☆
今回のカスタマイズは、はてなＰｒｏじゃないとできない事も多かったので、独自ドメインとってＰｒｏにしてよかったなぁと今更ながら思いました(*^。^*)
関連記事