28歳独身女、手に職をつける

読者です 読者をやめる 読者になる 読者になる

28歳独身女、手に職をつける

手に職をつけたいと願いながら色々と手を出すアラサー女のブログ

スマホ版のデザインをオシャレにカスタマイズしました!!

アフィリエイト・パソコン

こんにちは、うさみです。

 

 

昨日ブログのデザインをがらっと変更しました!

 

 

パソコンで記事を書いてレビューを確認するので、どうしてもパソコンの見た目を重視しがちになって、スマホの見た目は二の次になってました(^_^;)

スマホから読んでくださる方が多いのに・・・)

 

 

 

スマホ版の見出し

昨日記事をアップしたのをスマホで確認したら、

なんか変・・・。

 

 

なにかと思ったら、見出しでした。

 

f:id:create-crema:20160906154750j:plain

 

 

大見出しがただ太字になっているだけ。

これじゃぁどれが見出しかわかりません(-_-メ)

 

なので、こんな感じに変えました!

 

f:id:create-crema:20160906182651j:plain

 

よくある感じの

左に線が入ってて、背景がグレーの見出しです。

これでだいぶ見やすくなりました(^^)

 

 

デザインテーマ

 

次にPCのデザインテーマを

『レトロポップ』

から

『Afternoon』に変更しました。

 

ブログを立ち上げた時から『レトロポップ』を使っていたんですが、当初とは内容が変更してきたりしたので『Afternoon』の方がイメージと今の気分にしっくりきます(^^)

 

このナチュラルな感じ、気に入ってるんですが、一つだけ気に入らない所があります。

記事とサイドバーがぎゅって真ん中に寄ってるんです。

左右の余白が多い。

もっと画面全体を使ってくれていいんだけど(笑)

 

コードを加えて少し広げたんですが、これが限界みたい。

まぁしょうがないのかな~。

 

スマホ版デザイン

PCのデザインを変えたのを機にスマホ版も一新しました。

 

Before

f:id:create-crema:20160906210928j:plain

 

After

f:id:create-crema:20160906210957j:plain

 

わかりやすく変わったのはタイトルの所ですね。

PC版と同じタイトル画像を入れたので、

PCとスマホで統一感が出ました!

 

 

あとは細々と変えた所があるんですが、自分でもどうやったのか覚えてません。

2度と同じことはできません(笑)

 

 

スマホのカテゴリ表示

あとこれ、すっかり忘れてました(^_^;)

 

スマホ版ではカテゴリをプルダウンで表示してるんですが、新しくカテゴリを作った時とかカテゴリ同士を統合した時は、その都度自分でhtmlを書き加えなきゃいけないんです・・・。

(自動で追加するようにすることもできるみたいです!が、ちょっと疲れたのでまた今度w)

 

それをすっかり忘れていたためにうまく動作されずにエラーが出てる状態でした。

 

スマホ直帰率を下げるためにと導入したカテゴリなのに・・・

やらかした(/_;)

 

なのでカテゴリの整理も踏まえてちゃんと直しました!

 

 

参考にさせてもらった先輩方

今回の変更で助けてもらった先輩方はこちらです。

ド素人なので本当に助かりました(>_<)

ありがとうございました!

 

www.ituore.com

 

 

shiromatakumi.hatenablog.com

 

 

 

最後に

今回に限らずなんですが、これだけの変更なのに半日がかりの作業でした。

htmlは中途半端に少しだけわかるんですが、CSSは全く意味不明です。

調べても応用が自分でできないので、

調べて、試して、調べて、試して、戻して、調べて・・・みたいな繰り返しですごく時間がかかります。

 

CSSとかはブログやアフィリエイトをやる上で絶対に必要な知識ではないのかもしれませんが、身に付けておくと良い知識ではありますね。

時間がもったいないです(^_^;)

 

 

 

毎回記事をPCでもスマホでも確認してるんですが、その時は気にならなくても後からあれって思うことあるんですよね。

 

めっちゃ読みにくいじゃん!

って思うことあります。

 

 

なので読者目線で読んでみるのは良いことですね(^^)

こういう積み重ねがきっと大事なんだろうな~☆

 

 

今回のカスタマイズは、はてなProじゃないとできない事も多かったので、独自ドメインとってProにしてよかったなぁと今更ながら思いました(*^。^*)

 ⇒ドメイン取るならお名前.com

 

 

 

 

 

関連記事 

www.usamiblog.net

www.usamiblog.net