本当は新年度の4月からリニューアル!っていきたかったんだけど
仕事の合間にちまちまと作ってたらずいぶん予定オーバーに(汗)。

今回は特別に何か新しい要素や技術を入れるわけでもなく、
単純にデザイン変更が主な目的です、はい。

つーてもデザインの根本はリニュ前と変わらず同じなまま、
流行に乗って色数を減らしシンプルでフラットにしてみました〜♪
まぁ、後は記事の文字を大きくした程度です。

リニューアル作業の当初は、
これまた流行のレスポンシブデザインに挑戦しようと思ったのだけれど、
な〜んかレスポンシブって中途半端で中止にしました(苦笑)。

ブレイクポイントが「画面サイズ」を起点にしてくれれば良いんだけどね〜。
どーにも「ウィンドウサイズ」ってのが気になって仕方がない…。
iPadなんかは1024pxもあるから、ウインドウサイズがそれ以下だと、
PCなのにタブレット用の画面を表示してしまう罠(汗)。

そこでWordPressで便利なのが「wp_is_mobile」の関数!
ただ、この関数はタブレットもモバイル扱いなので「functions.php」に…

function is_mobile () {
$useragents = array(
‘iPad’,
‘Android’,
);
$pattern = ‘/’.implode(‘|’, $useragents).’/i’;
return preg_match($pattern, $_SERVER[‘HTTP_USER_AGENT’]);
}

と書いてタブレットのみ別なCSSを読み込ませるようにしました。
後は「header.php」に…

<?php if (is_mobile()) : ?>
<link rel=”stylesheet” href=”<?php echo get_stylesheet_directory_uri(); ?>/css/tablet.css”>
<?php endif; ?>

とか書いてタブレット用のCSSな「tablet.css」を用意するだけ。
レスポンシブデザインもUserAgentの分岐なら好みかも♪

って、ここまでして「tablet.css」でやったことは文字の調整のみ(笑)。
カラムが変更されレイアウトが変わったりメニューが移動したり…
な〜んてレスポンシブ的な何かは全くぜんぜん無いです(苦笑)。
いやー、本格的にやるとメンドーでリニューアルする気が無くなるし。

さて、今回のリニューアルでスマホには対応してないです、まだ(?)。
そーいう心意気での上記のwp_is_mobile関数の分岐です。
パソコン用画面とタブレット用に文字調整をした程度… かな。

スマホ用はそのうち時間が出来たら、
作る時に考えるでメンドーの先延ばしです(笑)。

一応、WordPress版 soraizm ver.2の完成♪♪

amazonで商品情報を見る
いちばんやさしい WordPress の教本いちばんやさしい WordPress の教本インプレスジャパン(発売日:2013年10月)
WordPress Perfect GuideBook 3.x対応版WordPress Perfect GuideBook 3.x対応版ソーテック社(発売日:2014年1月)
2014年 04月 16日(水)
WordPresscomments 0

comments 0

コメントを残す

・メールアドレスは非公開です。
・htmlタグは使えません。
・nameとcomment( * )は必須です。