小ネタひとつまみ

なんかねパソコンでこのサイトを見ると横幅があり過ぎて読みにくいって指摘がありまして、そもそも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;
        }

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