ブログのモバイルデザインを変更してみた

ページ

 

ブログのモバイルデザインを変更してみた

2015年10月22日木曜日
キセノンテンターのブログ

ブログのモバイルデザインを変更しました。とはいっても、このブログとは別に存在する「キセノンテンター」というブログのモバイルデザインです。

主に変更したのは「タイトル」と「アイキャッチ」の場所を変更。「ソーシャルボタン」を記事上部と記事下部に設置した感じです。

軽く簡単に説明したいと思います。

モバイルデザインを変更

記事上部はこんな感じ

記事上部はこんな感じ

キセノンテンターをモバイル機器でアクセスすると、上記のような表示になります。哀歌ッチは、左右にmarginをとらず、100%縁無しで一杯一杯表示するようにしています。

その下には「カテゴリ」や「日付」などのメタ情報が表示される。

そして、記事タイトル(H1)がはいり、その下部にSNSボタンを3つ設置しました。これらは画像などではなく、レスポンシブに対応できるボタンを設置。SNSには「Facebook」「Twitter」「LINE」を選択しました。

様々なモバイルサイトの活動状況を観察すると、「Google+」や「はてなブックマーク」を設置しているサイトが少なかったので、この3つを選択させて頂きました。

あとは本文がチラチラ。

ココで見てもらうとわかるところは、アイキャッチは端まで表示されるのに対して、ブログメタ情報からは両端に余白をもうけました。そうすることで、画像がなんか目立ったら良いなとか言う感じです。

本文が終ると

SNSのボタン


本文が終れば、「タグ一覧」と「SNSシェアボタン」が用意されています。コチラのボタンも画像ではなくCSSで作成したレスポンシブなボタンです。SNSボタンは、日本式のwebフォントを利用していますのでLINEのボタンも表示されるようにしました。

ここで使われているSNSボタンも、アイキャッチ下部同様に3つのSNSです。ある程度シェアされる可能性があるようです。

狙いとしては「タグ」で、他の記事も見て頂いたらなーという下心です。

その下は「記事一覧」がWPのプラグインで表示されます。とくに考えては置いていません。

誘導ボタンを設置

記事一覧のあと
記事一覧の後には、ブログの「各種情報」を手に入れられるボタンを設置しています。というか、「押してよ」と言わんばかりに設置しました。FeedlyでRSSボタンと、キセノンテンターのFacebookページボタンとTwitterアカウントへの誘導をしました。

あとは関連記事がいくつか紹介される感じです。

ただ、このボタンに効果があるかはわかりません。

この設置でどうなったか

シェアボタンを2ヶ所に設置したことで、多少なりともシェアされる可能性が増えました。また、記事下部にあるボタンを3つに絞り、押しやすい感じにしたのでシェアしやすくなったのかも知れません。(以前は4つ)

キセノンテンター自体がエンタメメディアな感じなので国内国外のエンタメサイトを参考にした結果、今回のこのようなサイトデザインにしました。コレカラよろしくお願いします。

ちなみに、むだに横画面にしてもボタンサイズが変わるようにしました。


この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで喫茶店の部屋をフォローしよう!

 

▶ 関連する新着記事