LivedoorBlogのスマートフォン版デザインをカスタマイズしてみました。

昨日、ブログのデザイン色を気晴らしにラベンダーからライトグリーンに変更してみました~という話を書きましたけれども、実はスマートフォン版のデザインも一緒にリニューアルしていたりします。

スマートフォン版の表示

こ~んな感じで♪箱庭的ピュアオーディオシステムの薦め”AUDIO STYLE”を昔からご覧になっている方にはお馴染みのデザインですよね(*^-^*) これ、Windows PCからGoogle Chromeでキャプった画像ですので、メイリオフォントで表示されるiPhoneやiPadではもっと美麗。これまではスマホ向けとしてLivedoorBlogが用意してるいくつかのテンプレートから選んで適用していただけなのですが、少々オリジナリティを出さねばと思い、2007年から2013年の初夏まで数年間にわたり箱ピュアブログの顔だったシルクCSSテンプレートをイメージして、カスタマイズしてみたのでありまする。↓

シルクCSSテンプレート

キャプチャの為に今現在のコンテンツへ無理矢理適用したら、盛大にレイアウトが崩れてる~(^^;シルクでは横幅可変が上手く出来なくて、七転八倒した挙げ句にベースデザインを変更したのですが、しっかしこの方が今よりも爽やかですね。。。元に戻すのもアリだわ~…。

今までもスマートフォン版デザインを何度か気まぐれで変更してはいたのですが、iPhoneやiPad、Androidタブレットの普及に伴い、スマートフォンからのアクセスが以前に比べて随分増え、今年後半はブログアクセス全体の1/5~1/4近くにまでなってます。ここまでくると流石に気まぐれ思いつきとか、ぞんざいなままではいけないよね~みたいな。

モバイルテーマ

LivedoorBlogのモバイルテーマの場合、カスタマイズといてもブログ本体のCSSを弄るのとは違って、専門知識が無くても上下レイアウトや背景画像、フォント色指定などを自由に設定できるような仕様になっています。といってもあくまで表示範囲が限られたシンプルなモバイルテーマですので、弄れる項目は限られていますけれども。

但し難があるのは広告バナー。自分が好きで貼った訳でも無い、コンテンツに無関係な大きなバナー広告が上下にちりばめられているのですが、これらをOFFにする為には月額945円のPUREプラン(注:2015年に無料化されました)へのアップグレードが必要。今でもPROで月額315円が必要なのに、アクセスが少ないモバイルテーマのみの為に月額630円アップは流石に辛すぎます。なんか普通に100円アップくらいで、スマートフォン版モバイルテーマの強制広告を消せるプランがあれば良いのにね~。。。Livedoor様おねがいしまするm(__)m

ラベンダー箱庭ライトグリーンCSSテンプレート

こうやって見比べると、3ヶ月使用したラベンダーのテンプレートって案外悪くないのかも。この色はLivedoorBlogが提供するテンプレートにデフォルトで入ってるんです。ライトグリーンは自家製。ライトグリーンの方がポジティブで明るく親しみやすい感じがすると思うのですが、アクセス解析を見てみると、色変更をしてからの直帰率がカクッと5%悪化してるのでぇ。ラベンダーの方がもしかしたら無意識に好まれてる色なのかもだ。

でもラベンダーにして以降、何故かコメント欄に書き込みする人が全く居なくなりましたので、色的には取っつきにくいのかもと思ってました。そもそも、オーディオとかPC家電サイトにピンク系って、WEB制作のセオリーとしては禁じ手だと思うんですが、ここらへん実際はどうなんでしょうね?直帰率が改善しないようでしたら、また別の色に変更せざるを得ないかもにゃ~。

コバルトブルー箱庭

尚、夏の間に使っていたデフォルト指定のコバルトブルーのテンプレートは好きなのですが、暗くて寒々しい印象の為か、色々とアクセスデータが悪化する不思議色だったりもするw 大手まとめサイトさんなんかでは良く使われているのですけれども…にゃはは♪(´,_ゝ`)/

ペールブルー箱庭

こんな色のテンプレートも自作していたりします。ペールブルー?クリーンでノーブルな感じがする。昔、英国LAURA ASHLEYでコーディネートした筆者宅のインテリアみたいな雰囲気。以前に3日間だけテストしたのですが何故かお蔵入り(・・・理由は忘却)。冬場はこれが案外似合うかも!?う~ん悪くないな・・・むしろ良いかにゃ?記事を書きながらなんですが、早くもペールブルーに変更したくなってきた~…。

昔からデタラメCSSで継ぎ接ぎカスタマイズ大爆発の私が云うのもなんですが、LivedoorBlogの有料コースでブログを長くやるのでしたら、CSS+HTML関連の基礎知識は有った方が良いです。最近流行のWord Pressなんかでは更にCSSが必須知識ですのでd(^_-)

後日注:2014年以降は↓こちらのデザインに変更しています。
スマートフォン版Blogデザインをリニューアル♪そのディスプレイ、実は背景潰れてませんか?


PC家電ブログランキングに投票する←割とこんな些末なことに半日かけていたりする♪

  • URLをコピーしました!

コメント一覧 (2件)

  • 未明ですけどこんばんは!
    ペールブルー?好きです。アクセス増につながると良いのですが~。

  • もはや早朝ですけれど、まだ真っ暗なのでおはこんばんわ~♪
    リクエストにお応えして(ぇ ペールブルーにしてみました。好きな色ですし、自分もこれが一番私のブログにはマッチしていると思ったり(^^)ゝ
    単純にアクセス数とかビジネスSEO的な事を狙う場合、サイトのテーマカラーやバナーリンクカラーは、黄色っぽいオレンジ色系統や黄緑系統はクリックされやすいと言われています。あと目を引くのが楽天の赤。流行のダークブルー系は知性のイメージですが、経験的にかなり機会逸失しやすい色かな~と。
    テキストリンクは濃いめのブルーが業界セオリーらしいです。私は敢えて薄めにしてますけれども。はるか昔、リンク色がオレンジだった頃が実は一番クリックされてのはここだけのヒミツ。だから一般論なんて所詮なんだかな~なのです。

コメントする