目次こんにちは、ジュン@jun3010meです。今回は、当ブログでも利用しているWordPressで、スマホ(スマートフォンやiPhone)でも見やすいようにカスタマイズしてみました。レスポンシブデザインに対する私見レスポンシブって?最近、「レスポンシブ」と書かれたWordPressのテーマが多くなりました。レスポンシブとは、サイトを表示しているデバイスの画面の横幅やウィンドウサイズに応じて、サイトのデザインを調整して、見やすくしようというものです。PC、タブレット、スマートフォン、それぞれで同じサイトにアクセスしても、レスポンシブデザインなテーマにしておくことで、それぞれで見やすいデザインに切り替わるわけですね。当ブログのアクセス状況これは、当ブログを見てくださった方のモバイルである割合です。この円グラフを見ると、アクセスしてくださる方の63%の方がモバイルからのアクセスであることがわかりました。スタバのカスタマイズ系の記事をご覧になっている方は、ほぼ全ての人がスマホからのアクセスであることもわかりました。このブログはスタバでメニューを注文する際に参考にしていただいているわけですね。当ブログは、大きく分けるとiPhoneなどのガジェット系の記事と、スタバのカスタマイズ系の記事があります。ガジェット系の記事のほとんどは、PCで読まれています。スタバのカスタマイズ系の記事のほとんどは、モバイルで読まれています。皆さんのストレス軽減に大きく関わるわけですね。これを見過ごすわけにはいきません。真のレスポンシブとはもう一度書きますが、最近のWordPress用テーマで、レスポンシブ対応が増えてきました。その多くは、デバイスの画面の幅によって表示するデザインを変えます。そのほとんどは、PC用のデザインに配置されている内容を、モバイルの幅で快適に見る為のものです。CSSで再配置するわけですね。全てのデバイスに最適なデザインを提供することができるとは思います。当ブログの場合は、スマホからアクセスする人と、PCからアクセスする人で、見たい内容が違います。スマホからアクセスしてくださる人は、スタバのカスタマイズ例が見たいんです。PCからアクセスする人は、iPadに最適なタッチペンがどれなのかを知りたいわけです。本当のレスポンシブとは言えないんじゃないかと思うようになりました。有名ブロガーさんのスマホデザインさて、ここで有名ブロガーさんのスマホ向けデザインがどんな感じなのかをここで見ておこうと思います。goryugo.comブログ合宿で何度もお会いさせていただいているgoryugoさんのブログのスマホデザインです。nori510.comこちらはごりゅごさんの弟であるnori510さんのブログのスマホデザインです。Stinger3をここまで編集した例は僕としては見たことがありません。拡張現実ライフアクセス解析の講座を開いてくださった、akioさんのブログのスマホデザインです。小さなサムネイルに記事にタイトルがあり、見やすく一覧になっていることです。今回はこのブログトップを主に変えたいと思います。Fourteen」という新しいテーマが入っていました。Fourteen」はレスポンシブに対応しており、ウィンドウ幅を変えると、こんな感じになったわけです。様々なテーマを試していた時に、「これだ!!!」と思いました。今回はこのテーマの、スマートフォン向けの表示をカスタマイズして、スマホからのアクセスの時のみ表示するようにしていきました。Switcher」を利用しました。iPhoneやiPad、Androidもタブレットと分かれています。当ブログで利用しているテーマがレスポンシブな為、スマートフォンからの表示のみを変更しました。́▽`=)ノ普通にブログを書いている人は、もうこれだけで満足できると思います。Thumbnail」を利用しているので、テーマを変えるだけだと、こんな感じに同じ画像がタイトルを挟んで2枚表示されてしまいました。ううむこれは何とかして解決したい。Fourteen」ではトップページも記事ページもcontent.phpを使って書き出しているので、サムネイルを表示する部分を消すと、トップページのサムネイルも消えてしまいました。これでは本末転倒です。content.phpを少し書き換えたここで、content.phpを少し書き換えました。:twentyfourteen_post_thumbnail();endif;?>に書き換えました。「トップページとアーカイブページならサムネイルを表示する」という条件分岐を追加しました。この内容で更新することで、こんな感じに記事ページのサムネイルを非表示にすることができました。同じようにcontent.phpを編集することで編集できると思います。Switcher」を利用して、WordPressをスマホでも見やすいようにカスタマイズしてみました。お気づきの方もいると思いますが、このブログではこの記事以上にカスタマイズしています。SNSボタンなどがそれですね。今回の内容では敢えて触れませんでした。解決していただきたいと思ったので載せました。高等学校教諭で『教師のiPad仕事術』の著者。白無刻印、HHKBケーキの人。コーヒーは生豆から焙煎。Podcast「さおとめおとらいふ」始めました。金曜日ブログ考察この投稿へのコメントコメントはありません。コメントを残すメールアドレスが公開されることはありません。メールマガジンブログには書けないような話を毎週水曜日に配信しています。学校のDX化を進めたい人にはもちろん、学校で新しい取り組みをしたい教師には、改革を進めるためのヒントがぎっしり詰まっている。Amazon.co.jpで購入する学事出版のサイトで購入するiPadとアプリの活用で時間と空間をスマート化!“仕事ができない教師"から脱出した筆者が「現場で本当に使えるiPadアプリ」や「アナログツールとの効果的な併用法」を紹介。