PCとスマートフォンのデザインはどう切り替えているの?何をしているの? 晒します。#ブロネク

ブロネク。楽しませて頂きました。「ブログデザイン」熱いテーマでした。夢中になってtwitterにつぶやいていたら、タムカイ@切り抜きジャックさんに紹介されてしまいました。ちょっと慌てましたおおひがしです。こんにちは。

みなさんはブロネク見られましたか?まだっという方は是非。僕は勉強になりました!

放送後のまとめをむねさださんが書かれています。

放送後のまとめを大谷大さんが書かれています。

つぶやき

Blog20130405

レスポンシブだけど中で分岐を書いています。

これは「レスポンシブだからといって、スマートフォンもPCのデザインテーマをそのまま使えるわけではないよね」 との流れ中で、つぶやきました。

スゴイことをしてそうに見えてしまうのが、言葉の怖いところですね。いや、アドセンスの差し替えと表示位置を切り替えているだけなんです。

どう切り替わっている?

おおひがしはTwentyTwelveをすこしだけカスタマイズして使っています。このテーマは”レスポンシブ・デザイン”・”モバイルファースト”です。

このテーマのままでも、モバイル(スマートフォンなど)でも読みやすいカタチで表示できます。ただ、丸々そのままでOKなのか?というと、そう簡単にはいきません。

たとえば、アドセンスのユニットはモバイルの場合だからと、都合良く自動で切り替わってくれません。本当と切り替わって欲しいですが。

実際にiPhoneで見てもらうと、PCの時にサイトタイトルの上に表示されている728×90の広告が無くなります。その代わりに、タイトル下に300×300の広告が表示されます。

これはWordPressの「wp_is_mobile」関数を使っています。使い方はこちらにまとめました。

[箱] wp_is_mobile関数を使いPCとモバイルで表示を切り替え

wp_is_mobile関数を使えば、カンタンにモバイルとPCでの切替できます。ほんとカンタンにできるので助かっています。ただし、タブレット端末もモバイルとして判定されるので、これを分かった上で使う方が良いと思います。

[箱] wp_is_mobile関数を使ってi分かったこと!iPadはモバイルと判定されていた | WordPress

どんな風に表示されるの?

iPhone

Iphone

iPad

Ipad

GALAXY note

Galaxynote

このようになります。もっと工夫したいのですが、その前にコンテンツそのものがあれで、カテゴリーがカオスで、筆が遅くて、スタバのお姉さんかわいいし、と色々あるので、ここまでやっとできた!というのが本音です。

最後に

紹介した以外のところでも、そっと切り替えているところがあります。お時間のあるときに見つけてみてください。それなりに考えて切り替えています。あっソースは見ないで、、、お後がよろしいようで。

皆さんはデザインどう向き合っておられますか? こんどゆっくりお話ししましょう。

無料メルマガにぜひご登録ください

ブログより日常を書いています。
ものくろキャンプ メルマガ
購読登録フォーム
Eメール  *
お名前(姓)  *
お名前(名)  *

講座・ワークショップ 開催予定

2022-10-13 19:00 – 22:00
木曜夜開催【東京 ブログ】グループセッション 10月13日
詳細・お申し込みはこちら

2022-10-14 19:00 – 20:30
金曜夜:こころの発酵 マインドフルネス瞑想会+軽食
詳細・お申し込みはこちら

2022-10-21 19:00 – 22:00
第4金曜日開催 オンライン【ブログ】グループレッスン 10月21日※10月は第3金曜日
詳細・お申し込みはこちら

2022-10-22 11:00 – 12:00
オンライン【あみだす発酵アカデミー】手作り濃口醤油仕込みクラス+年間サポート付き
詳細・お申し込みはこちら

2022-10-22 14:00 – 15:15
オンライン「”料理が面倒な人のための”クラス」発酵調味料でパパっとメイン1品+作り置き3品
詳細・お申し込みはこちら

2022-10-23 11:00 – 12:30
日曜昼:こころの発酵  マインドフルネス瞑想会+ランチ
詳細・お申し込みはこちら

2022-12-10 18:00 – 21:00
2022 あみだす望年会っ
詳細・お申し込みはこちら

2022-12-30 10:00 – 18:00
リアル・オンラインどちらもOK!ものくろ流WordPressスタートアップ講座 -第42期- 講師 ものくろ
詳細・お申し込みはこちら

  • ブックマーク

【案内板】

このブログをはじめて読んだあなたへ
ぜひ読んでもらいたい記事を用意しました。

オンラインショップあります

↓ 下のバーナーをクリックすると移動します。