Love&Peace

ハッピーをお届けするライフマガジン

自分のブログ確認してますか?~スマホ・PCチェック編~

      f:id:love-musicflavor0928:20150722172720j:plain

 

 

はじめに

私はPCでのブログ更新を終えてから、スマホでの見え方をチェックしています。それは最近やり始めた事です。今までは公開する前に、プレビューだけでチェックして終わりでした。しかしスマホでの見え方までは、チェックしていなかったので様々な発見があったのです。

 

 

スマホ版に読者登録のボタンがなかった

これ致命的ですよね・・・。「読者を増やしたい!」という希望があってもボタンが無かったら元も子もないです(汗)不要なものを削除する為のカスタマイズをしたは良いけど、まさか読者ボタンがなくなっていた!なんて気が付いてなかったんですw

 

気づいてなくって、1ヶ月が経とうとしている所でした。最近は、スマートニュースにも載る様になったのでほとんどがスマホからの集客なのです。だからこそ、このボタンがついてないとまずいじゃん!と思ったのでした。

 

改善策として、読者登録ボタンを2つ設置しました。

f:id:love-musicflavor0928:20150705003059j:plain

 2つ目のは、下段の最新記事の上辺りです。

f:id:love-musicflavor0928:20150705003406j:plain

なぜ読者ボタンがなくなっていたのか?その原因をよく考えてみた。そうだ!ヘッダーとフッターのスマホカスタマイズで、不要なものを非表示にした時からだった!どんなカスタマイズでも、スマホでの見え方はチェックした方が良さそうですね(^_^;) 

TOPページの記事一覧にアルファベットが表示されてしまう

こうなっていました。

f:id:love-musicflavor0928:20150705000404j:plain

 

印を付けた部分ですね。この「&amp....」っていうアルファベット。はてなブログでよくある現象らしいのです。先日、くつみやさんが検証されていました。

kutsumiya.hatenablog.com

 これ、スマホにすると横にはみだしちゃってデザインが少し崩れるんですよ(汗)そんなズレちゃった図がこれです。↓

f:id:love-musicflavor0928:20150705000950j:plain

あ〜気になりますよね?このズレ。下にスクロールしようとしたら、横にズレてしまうアレです(泣)後から設定の編集オプションにある「記事の概要」を編集してみたのですが一向に改善せず。このアルファベットの消し方、分かる方いたら教えて下さいm(__)m

 

 PCでは真ん中にある矢印がスマホだと右寄りに

これがPCの見え方↓

f:id:love-musicflavor0928:20150705193120j:plain

 

こちらがスマホの見え方↓

f:id:love-musicflavor0928:20150705193804j:plain

 どうですか?矢印の位置が右にずれ込んでいますよね??こういう現象が起きてしまうんですねぇ。何か良い方法あったら誰か教えて下さい〜(切実)あ、もういっその事左寄りにしちゃえば良いんじゃない?

という事で一旦、左寄りにしてみました。

f:id:love-musicflavor0928:20150705195649p:plain

f:id:love-musicflavor0928:20150705195755p:plain

こんな感じで収まりました。違和感はありませんかね??むしろ矢印自体ない方がいいのかな?!(汗)

 

 記事一覧にアイキャッチ画像がなくてバランスが悪い(スマホ)

この記事一覧はアクセス数順に設定してあるのですが、「4.NHKオンライン〜データなび〜番組」の記事だけが画像設定してないんです。他はちゃんとしてるのに、この記事だけなんか寂しく見えて来たのです。

f:id:love-musicflavor0928:20150705202541j:plain

なんか寂しくないですか?しかも、なんかタイトルが変!!今、画像貼ってて気が付きました(爆)「〜」の入れ方が明らかにおかしいですね(^_^;)これも画像を入れてみましょう。

こうなりました↓

f:id:love-musicflavor0928:20150705202612j:plain

これで少しはバランス良く見えますかね?^^

 

 スマホ版で最近カスタマイズした事

記事一覧のアイキャッチ画像の周りを丸にしてみました。

f:id:love-musicflavor0928:20150705203515p:plain

このやり方は、こちらの記事から学びました。AppismのTARA(id:tarapple)様のカスタマイズの記事です。教えて頂き、ありがとうございますm(__)m感謝です。

www.tarappism.com

この丸い感じがかなり気に入っています。周りの枠は消してしまいましたが、スッキリしていい感じにまとまりました。

 

お役立ち情報

私がお気に入りのWebサイト「Webクリエイターボックス」より新着情報が発信されましたので、ここで紹介いたします。Webページのデザインも綺麗なので、好きです!!

www.webcreatorbox.com

twitter.com

今回の情報は、”Webデザインの勉強をはじめる人が幸せになれるツール&サービス”というタイトルでとても興味深い記事となっています。Webクリエイターボックスでは、本当にわかりやすく"Webデザイン"について解説しているのでどの記事も参考になるものばかりです。みなさんも是非ご活用下さい。尚Twitterでフォローすると新着情報などをいち早くキャッチ出来ますよ~♪

 

さいごに・・・

いかがでしたか?この間のフォントカラー編でも書きましたが、やはり自分のブログやホームページを客観的に見たりするのってなかなか機会がないんですね。だからこそ見え方をチェックするのって、改めて大切なんだって思いました。気が付いてない事が多いこと多いことw

見え方ももちろんですが、文章もチェックしておいた方が良さそうです。特に「誤字脱字」なんかがあると検索ワードに引っかからなかったりして”SEO”にも悪影響を及ぼすようなので、気をつけてチェックしてみた方が良さそうです。

みなさんも一度スマホの見え方をチェックしてみてはいかがでしょうか?何か、面白いものが見えてくるかもしれませんよ( ´艸`)

それではまた・・・♪