小ネタひとつまみ

閲覧数: 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閑話, 公開タグ, ,
ページナビのテキスト

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

タイトルを抜粋する
blank

関連記事プラグインを使って、記事本文の下に「関連記事」を表示している。情報としては、タイトル、画像、  続きを読む

閃きは大事だw
blank

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

ElasticPress 3.5.6
blank

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

管理画面を制限する
blank

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

緊急事態宣言で外出自粛になり...
blank

せっかくのゴールデンウィークなのに、2年連続で緊急事態宣言下となり、外出自粛中。暇なので小ネタで遊ぶ  続きを読む

スポンサーリンク

コメントを残す

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