小ネタひとつまみ

閲覧数: 29(0)

なんかねパソコンでこのサイトを見ると横幅があり過ぎて読みにくいって指摘がありまして、そもそもWindows(Macもそうだけど)ってのは自分で見たいサイズにウインドウを調整出来るのが最大の利点なんだけど、最近の若者って常にウィンドウを「最大」に「固定」して使うんだよね〜w 固定画面しかなかったDOSを知らない世代なんだろうから仕方ないけど何だかなぁ、、、画面比率が4:3の頃はそれでも良かったけど、最近の16:9の画面だと最大化すると横幅が広すぎるのは当然のこと。エクセルで表計算するにはちょうど良いけどワードで文章を打つには広すぎるし2ページ表示にするには狭いときてるw

でどうするかと言うと子テーマで調整に挑戦です。横幅を決めているのは「content-area」でこれは一覧表示の時とシングル表示の時で同じクラス名を使っている「コアの一部」なので直接このクラス名の幅を狭くすると一覧表示も狭くなり横に3連記事の現在の表示が2連となってしまいます。そこで追加のクラス名を作りモバイルの時とパソコンの時とで使い分けることでパソコンでシングル表示の時だけ幅を狭くします。

        <div id="primary" class="content-area">
<?php if ( !wp_is_mobile() || is_tablet() ) :?>
        <div id="primary" class="content-area2">
<?php  else : ?>
        <div id="primary" class="content-area">
<?php endif; ?>

追加のクラス名は「content-area2」として「max-width: 768px」より大きいレスポンシブ対応のセクションに以下のコードを追加します。「max-width: 1600px」と「max-width: 2000px」も念のため追加しました。

@media only screen and (max-width: 1199px) {
        .content-area2 {
                width: 750px !important;
                display: block;
                clear: both;
                margin-right: auto;
                margin-left: auto;
        }

キャッシュに残っていると狙った表示が実現できているのか確認が出来なかったので一時的にサーバー上のキャッシュプラグインを止めてスマホとパソコンで交互に表示して見て確認する。パソコンのブラウザでレスポンシブ機能を使って画面サイズを擬似スマホサイズにした時は問題なかったのに実機のスマホでは表示が固定されたままとかいろいろ不具合があるのでそんな時はパソコンでもスマホでもキャッシュのクリアがオススメです。

カテゴリーIT閑話, 公開タグ, ,
パンくずリスト詳細
2020年5月12日

テーマの「マイナーチェンジ」に伴って「パンくずリスト」の仕様を若干変更しました。一つ前のテーマではパ  続きを読む

カテゴリーを制限する
blank
2020年5月11日

過去に何度も書いた「カテゴリー制限」の話、元はと言えば初期に書かれた「非公開」の記事が原因です。トッ  続きを読む

マイナーチェンジ
blank
2020年3月23日

かれこれ一年近くほったらかしだったので、気合をいれて「テーマ変更」と思っていたのですが、、、いろいろ  続きを読む

6月の検索ワードまとめ
blank
2019年6月30日

6月の検索ワードのまとめです。 意外なところで「zabbixダウングレード」が複数回検索され、単独の  続きを読む

アクセシビリティ対策
blank
2019年6月23日

テーマカスタマイズの一環で、トップページに一覧表示されている「写真を左右交互に表示する」ようにした際  続きを読む

dockerとproxy
blank
2019年6月18日

dockerやdocker-composeをプロキシ環境下で使うのに苦労したので忘れないようにメモし  続きを読む

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください