WordPressこのブログはWordPressのSTINGER3という有名なテーマを使わせていただいております。先日、STINGER5がリリースされてレスポンシブ対応になったのですが、当ブログはいろいろカスタマイズしていたせいもあって、アップデートしないでいました。そこで休日に思い切って、カスタマイズしたSTINGER3をレスポンシブにしてみました。STINGER5にアップデートしてからカスタマイズするよりも、カスタマイズしたSTINGER3をレスポンシブにしたほうが楽かなという考えです。このブログは記事ページを1カラムにしていたりと、大幅に変えてしまっていたので。ブレイクポイントレスポンシブデザインは、画面の幅によって、デザインを変えることができます。最近は流行っているみたいで、色々なサイトでよく見ます。STINGER3はPCとモバイルで読み込むCSSファイルを変えるようになっています。そこで、CSSは1つにして、画面のサイズでデザインを変えるように修正しました。・}というように、600pxと768pxをブレイクポイントとして切り替わるようにしています。Plusの解像度次第では、変えるかもしれません。スマホ用のブレイクポイントは480pxぐらいが一般的なのかもしれませんが、少し広めにしました。IE8対応@mediaがIE8に対応していないとのことなので、header部に以下の記述を追加しました。?>/css3-mediaqueries.js"></script><![endif]-->これで、IE8からもHTML5のタグとCSS3の@mediaタグが有効になります。html5shiv.min.jsとcss3-mediaqueries.jsはダウンロードして、自分のサーバーに上げました。ダウンロード先はググれば一番上に出てきました。レスポンシブのGoogleアドセンスせっかくなので、Googleアドセンスもレスポンシブのサイズをお試しで使ってみることにしました。記事タイトル直下の広告がそれになります。ブラウザの幅を変えると、広告のサイズが変わりますね~。効果は様子見たいと思います。ビッグバナーよりもレクタングルのほうがいいかもしれないので。終わりにこれで当ブログのレスポンシブ対応することができました。ブラウザの幅を変えるとデザインが変わるのが、かっこいいですね笑CSSファイルが1つになるので、メンテナンスがしやすくなるといいなと思います。SEO的なことはあまり期待してないです。CSSファイルが1つであろうとなかろうと、見た目は同じですし。この記事をSNSでシェアするツイートシェアLINEカテゴリWordpressタグWordPress前の記事CDNのcloudflareで522エラーがよく出ます。Postの順番が投稿順になっていた。解決方法発見!takkaaaaaの日記トップページへ関連コンテンツこの記事を書いた人いつも読んで頂いてありがとうございます。管理人のtakkaaaaaです。北海道の十勝出身で、今は横浜に住んでいます。職業はシステムエンジニア・プログラマー(大手SIer→自社サービス開発)を10年以上やってます。投資や税金や節約にも関心があり、FP3級と日商簿記3級を取得しました。趣味は音楽鑑賞でaikoのファンクラブにも入ってます。園芸・ガーデニングも好きで、観葉植物やイチゴやバジルなどを育てたりしてます。このブログは2013年から書き始めました。読んでくれた方に少しでもお役に立てればいいなと思って発信しています。2019.11.29~誕生日や紅白出演決定後のライブでお祝いしました投資・株JTから株主優待の品物(サンジェルマンのジャム詰め合わせ)が届きました(2019年6月権利獲得分)。ジャム美味しい!aiko立川談春とaikoのライブ「玉響(たまゆら)」に行ってきました~落語と音楽のコラボに感動!投資・株すかいらーくからも株主優待が来た~!3000円分のカードが嬉しい。~サーモスの保温弁当箱は神!お昼ご飯が楽しみになりますよ。aikoaikoの「湿った夏の始まり」感想~新しさと懐かしさを感じるアルバムで私も湿ってますWordpressカテゴリの他の記事WordPressをバージョン5にアップデートしました。投稿エディタ以外は影響少ない?wordpress4.7.9、PHP7.2の環境でcount関数のエラーが発生。descriptionがない記事が原因か。takkaaaaaの日記このブログについてサイトマップ全記事一覧プライバシーポリシーお問い合わせ。