小ネタひとつまみ

閲覧数: 30(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閑話, 公開タグ, ,
ページナビのテキスト
2021年4月1日

記事ページの下部に前後の記事(投稿)へのリンクが表示される仕様なのだが、「カテゴリーに制限」をかけて  続きを読む

閲覧数まとめ
blank
2021年3月25日

閃きついでに総合計と週合計をフラグで制御する方式に変更してみた。これまではベタに関数をまるまるコピー  続きを読む

閃きは大事だw
blank
2021年3月23日

このサイトは、あくまでもCMSであるWordPressの構築やクラウドであるAWSの運用ノウハウ取得  続きを読む

ElasticPress 3.5.6
blank
2021年3月19日

マイナーバージョンアップにも関わらず、検索スコアリングのパラメータが微調整された結果、期待する検索結  続きを読む

管理画面を制限する
blank
2021年2月22日

このサイトではネット上のさまざまな攻撃からの防御のため、Wordfenceプラグインの無料版を使用し  続きを読む

検索精度を高める
blank
2020年11月1日

検索ネタを連発するのはElasticsearchやElasticPressがバージョンアップした時の  続きを読む

スポンサーリンク

コメントを残す

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