Yurika BLOG

Yurika BLOG

結婚2年目転勤族妻です。美容オタクの元金融サラリーマン。 つらい節約はしたくないけど、賢く家計管理して、日々の暮らしも楽しみたい!を叶えたいブログ。興味関心は美容、お金、子育てなどなど。

超初心者だけどスマホ版のブログデザインカスタマイズしてみました

 

f:id:yurikablog:20170529164210j:image

こんにちは。ゆりか(@yurikablog)です。

ブログ開始もうすぐ3か月、読者100人ブログ継続日数30日越えを達成しました。30日連続で書けたのは初めてです~!これからも頑張ってブログ書きます~!これからもよろしくお願いします!

 

そして最近グーグルアドセンスに通りました。なんか二次審査のコード貼るところ間違って一回落ちましたが、直して再申請したら1日で通りました!やったー!

グーグルアナリティクスなるものも始めたのですが、このブログのアクセスはほとんどがスマホからなのにびっくり。というわけで、スマホのカスタマイズにも挑戦してみました。ネット上の神々のおかげで、はてなpro歴3週間ちょっとの超ド素人でもカスタマイズすることができました。感謝!!

今日は自分の覚書も兼ねてスマホカスタマイズの記録をします!

 

こんな感じになりました!

f:id:yurikablog:20170529155023j:plain

わ~い!!見た目がスッキリ読みやすくなりました!!はてなブログ感がなくなった!

 

 

①ヘッダー部分をすっきりさせた

f:id:yurikablog:20170529155626p:plain

  • デフォルトのはてなリンクを消した
  • アイコン画像を外した
  • ブログ説明を消した

はてなブログ感がなくなって、知り合いに見られたらちょっと恥ずかしい顔アイコンも外せました!!ごちゃごちゃするのでブログ説明も消しちゃいました。

参考にさせていただいたのはこちらのブログです。

www.junpeihazama.com

スマホももちろんですがPC表示のブログもとってもおしゃれ!!初心者でもわかりやすい説明で簡単にカスタマイズできました。ありがとうございました。

 

 

②トップページの記事一覧を見やすくした

f:id:yurikablog:20170529155516p:plain

  • 記事一覧のアイキャッチ画像が大きく見やすくなりました
  • 日付のデザインを変えました

記事一覧のアイキャッチ画像にメリハリがつくだけで記事に興味を持ってもらえるかもしれないし、とっても大満足です。見た目が格段に良くなった^^

参考にさせていただいたのはこちらのブログです。

tsukuruiroiro.hatenablog.com

とってもおしゃれなブログ!!他にも、デザインやレイアウトについてのテクニックの記事など、とても勉強になります。

 

 

③色変更した

html-color-codes.info

HTMLのカラーコードはこちらのサイトから拾って、色変更しました。このサイト使いやすかったです。

f:id:yurikablog:20170527130254p:plain

 

 

④スマホ表示の目次を設定した

スマホの目次ってただのリンクっぽくてなんか見づらい・・・。

〈Before〉➡〈After〉

f:id:yurikablog:20170529161534j:plainf:id:yurikablog:20170529161635j:plain

囲み背景と目次タイトルつけて見やすくなりました!!

参考にさせていただいたのはこちらのブログです。

mshitech.hatenablog.com

目次はスマホで自分の記事読むこと少ないから盲点でした・・・。とても参考になりました!ありがとうございます!

 

 

⑤忘れちゃいけない、読者登録ボタンを設置した

スマホ表示って読者になるボタンないんですね!!知らなかった(´;ω;`)トップページのグローバルナビの下と、記事下にも設置しました。(がめつい)

 

👇これです!!

  

参考にさせていただいたのはこちらのブログです。ありがとうございます。

shiromatakumi.hatenablog.com

シロマティさんのカスタマイズは種類豊富で、いつかチャレンジしてみたいです。

 

 

これからもよろしくおねがいします!!

 

今までは記事を毎日書く!ということ優先だったけど、これからはちゃんと読み手の読みやすさも考えていかないとな~と思いました。

 

これからもYurika BLOGをよろしくお願いします~!