WordPressテーマこんばんは、しろもじです。ブログのテーマなどを選ぶ時に「レスポンシブデザイン」という言葉を、耳にしたことがある方もいるかもしれません。なんとなく「レスポンシブね、うんうん」と思いがちですが(笑)、今日はこのレスポンシブデザインとは何かというのを簡単に解説していきたいと思います。サイト運営者は何をすれば良いの?スポンサーリンクレスポンシブデザインとは?まず、レスポンシブデザインとは、どういうものなのかを簡単に解説していきます。Responsiveとは「すぐに反応する」という形容詞になりますが、Webデザイン的な言葉では「ブラウザの解像度に合わせて、デザインを変更する」というものになります。ウェブサイトを訪れる人のデバイスは、PCであったりタブレットであったりスマホであったり、様々です。重要なのが「横の解像度」で、基本的にウェブサイトは「下にスクロールして見ていく」わけですから、横にはみ出してしまうと閲覧性が悪くなりますよね。ウェブサイトを「横幅1200px(ピクセル)」で制作したとしましょう。PCのブラウザならば、作った通りに表示されるはずです。mini4でも768pxになります。これらのブラウザでウェブサイトを閲覧すると「横にスクロールしないと、全体が見えない」ことになってしまいます。そこで、ブラウザの解像度に合わせてウェブデザインを変えていくこと=レスポンシブデザイン、というものが登場しました。言葉で説明してもよく分からないかもしれませんので、実際に見ていきましょう。普通のPCなどで見た場合です。横枠を小さくしてみます。見た目が変わってきましたね。今度はスマホで見てみましょう。最近はスマホからご覧いただくことも多いかと思いますので、この画像の方が馴染みがあるのかもしれませんね。下2つの画像と、上2つの画像で、大きくデザインが変わっている箇所があるのですが、分かりますか?まず、ひとつ目は「サイドバーが消えた」ということです。正確には消えたわけではなく、一番下に移動しているのですが、アクセス時には見えなくなっていますよね。ひとつが、メニューの変化です。PC表示では10個並んでいたメニューが消えて、5つのものに切り替わっています。「menu」を押せば、メニューの一覧が出ますし「sidebar」を押せば、サイドバーが表示されるようになっています。これは、使っているテーマによって仕様は異なりますので、一概には言えませんが、だいたいこんな感じになっています。レスポンシブデザインと完全レスポンシブデザインの違いWordPressを使ってウェブサイトを作る場合テーマを選択しますが、どのテーマを使っても今時のものであれば、だいたいレスポンシブデザインには対応しています。不完全なものもあるの?」と混乱してしまいそうになります。この完全が付くかどうかと言うのは、テーマによって考え方が違いますし、最近では「完全」という言葉を敢えて使わないものも増えてきていますが、一応解説しておきます。前のウェブサイトデザインでは、アクセスしてきたブラウザを識別して「それは、このCSSを使ってね」というようにしていました。横道ちなみにCSSとは「カスケーディング・スタイル・シート」の略で、ウェブサイトのデザインを決定する記述のことになります。ウェブサイトはHTMLという言語で記述されていたのですが、徐々にデザイン性も重視されるようになり、HTML内にそれを記述できるようになってきました。その方法では、1ページ毎に同じ記述を繰り返さないといけないので、とても大変です。そこで「ウェブサイト本体の記述」と「デザインの記述」を分けようということになりました。前者がHTMLで、後者がCSSになります。これにより、CSSを変更すればウェブサイト全体のデザインを一括して変更できるようになり、管理がとても楽になりました。「PC用」と「タブレット用」と「スマホ(とかガラケーとか)用」にCSSを作っておき、ブラウザを「ユーザーエージェント」というもので識別して、それぞれのCSSを当てはめる、ということをやっていたのです。これも大変面倒になってきました。色々な端末が出てきて、いちいち対応していくのが難しくなってきたんですよね。そこで、同一のCSS内に「解像度ここまではこのデザイン、ここからここまではコレ、そこから下はこれね」という記述をしておくようになってきました。これを「完全レスポンシブデザイン」と、一般的には呼びます。今はユーザーエージェントというのがあってないようなものになっていますので、原則としては「レスポンシブデザイン=完全レスポンシブデザイン」と思って間違いありません。サイト運営者は何をすれば良いの?さて、それでは肝心のところ。これは非常に簡単で「レスポンシブデザインのテーマを採用しましょう」ということになります。先程書いたように、今時のWordPressテーマのほとんどはレスポンシブデザインに対応しています。あとは「見栄え」の問題になってきます。テーマを後から変更しようとすると、少し手間がかかることがあります。出来るだけ早い内に色々な端末で、どのように見えるのかを確認して、良さそうなテーマを選ぶことをおすすめします。今日も最後までご覧いただきまして、ありがとうございました。[投稿報告:『管理官と王女様』第15話]Prev関連記事WordPress5.0【Gutenbergエディタ】【ブロック概要】Gutenbergのブロックについて、ふわっと。LuxeritasのブログカードでURL表記が変になっていたのを(ひとまず)解決この解決方法が正しいのかどうかは不明WordPressにて画像サイズの管理を行う方法(Luxeritasでの設定方法)画像のリサイズや、アップロード時のサイズ調整など。コメントをキャンセルメールアドレスが公開されることはありません。FIELD@shiromoji_textしろもじを測定中・・・。セーフティを解除します。執行モード、リーサル・エリミネーター。排除を行ってください。StickでAlexaが利用可能に。