スマートフォン版ブログデザイン@LivedoorBlogをカスタマイズ&リニューアルしました♪

たぶん殆ど誰も読まないかも知れないブログデザインとCSS弄りネタですけれども、ブログの歴史というか備忘録なので本日もメモ書きなのれす~。大体、いつも管理人の体調が宜しくなくなって、文章が書けなくなってくる度にはじめるのが、お茶を濁すためのブログデザイン弄りです。コメントに返信しないと~とか、なんか書かなきゃ~と思いつつ、懈くて、なんとなく管理画面と睨めっこしている内に、なんでかCSSとかHTML弄りに逃げ出してしまう自分がいる・・・。このあいだの3連休は、まともにエントリ投稿をせずに、NEC LifeTouch Lと睨めっこしながら、結局はこんな事をしているのでありんす・・・orz

Index

LivedoorBlogのデザインをリニューアル&カスタマイズしてみました。

先日、2014年7月の初旬くらいかな・・・普通に真っ白だった現在の半カスタム・ペールブルーカラーのブログCSSの背景に、思いつきでほんのりあっさりとテクスチャを挿してみたのは。。。

LivedoorBlog2014カスタマイズ@ペールブルー

大昔に購入したホームページ製作ソフトに入っていた素材を更に加工して作った、薄いエンボス調の壁紙テクスチャなのですけれども、これがあると文字が微妙に浮き立って立体的に見えるのと、背景トーンがほんのり暗くなるので、輝度が落ちて読みやすくなるような・・・気がする・・・・みたいな。。

それと少しだけ仄かな高級感が出ると思いませんか?弱点があるとすると、現在のデザイントレンドでは、背景を入れるとどうしても微妙に素人臭くなるというか、90年代後半に良くあった素人製作ホームページの雰囲気になってしまうような気がしなくもない所・・・。でもそれもまた、なんとなく昭和世代の薫り漂う辺境オーディオ界隈っぽくて良いかな~?なんてね…( ³△³ ).。o

尚、この壁紙テクスチャは細かくて薄いので、PCのD-Sub出力の性能及び、ディスプレイモニタ側の描画性能/表示性能が良くない場合、なんと殆ど見えません。D-Sub接続などアナログ接続のモニタやパソコンの一部では、表示がびっくりするくらい単なる真っ白背景で、壁紙の存在がさっぱり判らないという衝撃の事実!※いくつか余所様のモニタで確認しました。皆さんが今これを読んでいるそこのモニターディスプレイ、きちんと背景が描写出来ていますでしょうか?

アナログD-Sub接続よりデジタルHDMI,DVI,DisplayPortの方が高画質です

実はうちのASUS UL20FTでも、3台のトリプルディスプレイ(EIZO L695/L685)のうち一台が都合アナログD-Sub接続なのですけれども、このモニタだけテクスチャのエンボス加工が見えてませ~ん…。。ぱっと見、他の2つのデジタル接続側と比べて、解像度とか色再現性、文字のクッキリ感にあまり違いは無い気がするにも関わらず、実はこんな所に落とし穴があったと云う・・・。

でもって解決方法は簡単です♪もし皆様の環境で↑みたいな端子のD-Sab接続ケーブルを使われていて、箱ピュアブログのテクスチャが溶けて単なる白背景になってしまっている状況でしたら、画質向上のためデジタル接続のディスプレイケーブルに交換される事をお薦めします注:あくまでディスプレイ/モニタとPC側出双方に、DVI若しくはHDMIなどのデジタル入出力端子がある場合です。ちなみにPC本体に元々デジタル映像出力が無いよ~って場合でも、USBディスプレイアダプタを介して接続すればデジタル高画質になりますよ~V(^_-)

※尚、DVIとHDMI(ミニHDMI)のコネクタは、相互変換可能です

スマートフォン向けのBlogデザインも変更

ここからはスマートフォン向けデザイン変更の話。PC版のサイトデザインを昨年12月以降少しずつ弄っている間に、iPhoneやAndroidでの表示に使っていたスマートフォン版のデザインとイメージが乖離してしまいましたので、デザイン意匠をPC版の表示に似せるべく、今回そちらもリフォーム&カスタマイズしました。

LivedoorBlog2013スマートフォン表示

こちらもぱっと見は以前のスマートフォン版デザインと大差なく見えるかも知れませんが、メインPC版のデザインで採用した背景テクスチャを導入し、コンテンツ部分には、透過色でうっすらラベンダー色のシャドーを被せています。よ~くみると、Aeroっぽい立体感を仄かに醸し出す感じで・・・あくまで、あくまで、控えめに~゜゜(´□`。)°゜。

更に今回、長年トップ画像に使って来たONKYO A-1VLとC-1VLのコンビ画像から、自宅のCREEK AudioQUAD L-ITE2の画像に差し換えています。ただ、iPhoneなどの小さなスマートフォンでは左右のスピーカーが見えないです・・・(T_T)。大画面のAndroidタブレットやiPadでスマートフォン版表示にした場合は全画面表示できるのですけれども、どうもLivedoorBlogのスマートフォン版は、背景画像のアップロードサイズとか位置調整が意味不明気味で、上手く表示サイズを合わせるのが大変。いつもリサイズを繰り返しつつトライ&エラーの繰り返しです。今回は適当に撮った画像の使い回しですので、またそのうち差し換えるかも。

LivedoorBlogスマートフォン表示ギャラリー形式

あと、スマートフォン版では、今年の2月くらいから記事タイトルを羅列した昔風の表示から現在のトレンドである画像を最大化した表示に変更しています。プレビュー画像の画質が良くないですし、タブレットで表示するには大きすぎますので、本当は画面サイズに応じてこの1列表示と、ギャラリー表示という大画面タブレット向けの2列表示を画面サイズ別に自動で切り替えたいのですけれども、Livedoorブログでは未だそこまではカスタマイズできません。スマート版表示は文字も少し小さ過ぎますよね。。。

大画像一列表示の場合、記事タイトルと本文の色が個別に設定変更できず、同じ色になってしまうのも困ったもの。。。今のところLivedoorBlogのスマートフォン版は、WordPressと違って未だ色々と自由にカスタマイズができない仕様ですので、痒いところに手が届かないのです。あと頼むからライブドア側で勝手に載せてるスマートフォン広告を非表示にさせて欲しい・・・その分、少しなら月額料金が値上がりするプランになっても構いませんので、中の人達には是非とも機能改善アップデートをお願いしたいところなのです♪

まとめ。箱ピュア管理人としては訪問して下さる皆様にはなるべくPC版の表示画面でブログを愉しんで欲しいのが本音だったりしますけれども、いかんせんこのブログは重量級ですので、スマートフォンだったり、表示が遅いAndroidタブレットお使いの場合には、シンプルなUIのスマートフォン版で閲覧されると表示が軽くなって見やすくなると思いますので、つまるところ皆様お好きな方でどうぞ♪みたいな感じで御座いますです、はい(。・ω・)ノ゙

o-greenLivedoorBlogのデザインテンプレートを数年ぶりに変更してみました
o-greenLivedoorBlogのスマートフォン版デザインを弄ってみました。

PC家電ブログランキングに投票する←微妙に観やすくなったのでクリックしておく♪

  • URLをコピーしました!

コメントする

CAPTCHA

Index