むねさだブログ

またの名を「わんぱくブログ」食・写真・ガジェットを使用した感想や情報を発信中!!

ブログのスマホ用デザインをカスタマイズしたぞ!

   

  • Pocket
  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • LINEで送る

ブログのカスタマイズが楽しくなってきました、むねさだ(@mu_ne3)です。
IMG_8081

HTMLとかCSSとかほとんど分からなかった私ですが、ブログを始めて少しずつですが分かるようになってきました。

ということで、今回は心機一転、というかずっと気になっていたスマートフォン用のブログのデザイン変更を行いましたのでご紹介したいと思います。


スポンサード リンク

これまでのデザイン

これまでは、使っている人も多い「WPtouch」というプラグインをベースに、ヘッダー(画面上部)の背景色を緑に変更して、自分のアイコンを置く様なカスタマイズを行っていました。
IMG_2168

ただ、基本的に色だけしか変えていないので、他のWPtouchユーザーのサイトと同じ様な雰囲気でしたし、PC版の印象と違うため、変更したかったんですよね。

 

ちなみに、PC版のデザインは、6月に大幅リニューアルしています。
むねさだブログのデザインリニューアルを行ったぞ! | むねさだブログ

PC版は本当にごっそりとデザイン変更しましたが、今回は現在使っているWPtouchをベースにしつつ印象を変えるように変更しました。

 

新しいデザインはこちら!

デザイン変更したイメージがこちらです。
IMG_8081

PC版の雰囲気に合わせて、ロゴデザインをしっかりと画面上部に配置。

要素を囲っていた角丸の枠は取り除き、「Read This Post」という表示も削除。
文章の中の見出しも、PC版の旧バージョンデザインに合わせていたのですが、それを新PCデザインに合わせて黒い板を敷いたデザインに。
IMG_8083
全体的にシンプルで落ち着いた印象のブログデザインになったと思います。

読みやすくしつつ、一番上にはしっかりとブログのロゴを見せるという方向にしてみました。

 

わんぱくブロガー的まとめ

現在、うちのブログを見てくれている人のうちの半分以上はスマートフォンおよびタブレットから見てくれているようです。

それだけに、しっかりとスマホ用のデザインもPC版の印象と合わすことが出来て良かったです。

スマホから見てくれている人は見やすくなったでしょうか?

と、言う事で今後も少しずつスマホ用のデザインもいじって行こうと思いますのでお楽しみに。

 - ブログカスタマイズ

        
  • Pocket
  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • LINEで送る
コメントはこちら。

  関連記事

bnd48-kokuchi-eyecatch
【告知】10/30はブロネクオンエアー#48 「STINGERユーザー交えてブログテーマのお話してみるネク!」だぞ! #ブロネク

むねさだブログを毎日更新し始めて、2年半以上になります。むねさだ(@mu_ne3 …

描画をサクサクに!ブログのサーバーをロリポップからWPXサーバーに移転した手順をメモしておくぞ!

むねさだブログを開設して、もうすぐで3年が経過します、むねさだ(@mu_ne3) …

【ブロガー必見!】GoogleAnalyticsで自分のブログへの被リンクが分かる「トラックバック」機能が便利だぞ!

他の人のブログで、自分のブログが紹介されていると嬉しくなります、むねさだ(@mu …

ブログ記事を大量に丸パクリされたのでGoogle先生に報告しておいたぞ!

一応、毎日ブログ更新をしていますむねさだ(@mu_ne3)です。 日曜日の昼下が …

【初心者でもできる!】ブログに「パンくずリスト」を追加するプラグイン「Prime Strategy Bread Crumb」を設定してみたぞ!

HTMLとかCSSは全く知識が無いのでブログをカスタマイズする時は恐る恐るな、む …

超基本のhtmlタグ <h2>の使い方をずっと間違えてたぞ・・・

このむねさだブログを書き始めて後数日で半年が経とうとしています。 前のブログから …

stinger5ver20141011_のカスタマイズ_—_WordPress 2
ブログのテーマをSTINGER5にしてまず最初にいじった設定をまとめたぞ!

HTMLとかCSSとかほとんど理解せずにブログ書いてます、むねさだ(@mu_ne …

むねさだブログのデザインリニューアルを行ったぞ!

HTMLとかCSSとか知識はほとんどありません、むねさだ(@mu_ne3)です。 …

STINGER5_TOP2
STINGERってこんなにカンタンなの!?お試しのつもりが即適用!ブログのテーマが気がついたら変わっていたぞ! #ブロネク #stinger5

ブログを毎日更新し続けて950日以上が経ちました、むねさだ(@mu_ne3)です …

初心者から上級者まで!「できる100ワザWordPress 必ず集客できる実践・サイト運営術」には確かにブログ・サイト運営のノウハウがつまっていたぞ!

WordPressの難しい設定とか、とんと分からないままブログを運営しています。 …