レスポンシブ対応テンプレートを使っての、既存ホームページ改造体験日記（その３）です。
テンプレートは、「テンプレートキング」さんの「会社案内系ベーシックデザインC02」を使わせていただいてます。直接このページにいらした閲覧者様には、初回記事からご覧いただけるとうれしいです。
今回は、サイドバーに対する体験を記載します。
スポンサーリンク
サイドバーについての対処
サイドバーについても、メインエリアと同様に、とりあえず公開ページのサイドバーデータをテキストウィジェットにコピペし、どのように表示されるかを確認して、具合の悪いところを調整する方法で取り組みます。
右サイドバー
表示は、左下の画面のようになりました。
タイトルの背景表示と、リストの体裁が整っていませんが、公開ページのCSSをコピペすれば多分OKになるでしょう。
コピペしたCSSを微調整して完了。右下の画面のように整い、タイトルの背景は左サイドバーにも反映されました。
レスポンシブ対応のためには、1箇所、領域幅を width:200px と固定値でしている所があったので、そこは 100% 指定に直しています。
＜右ウィジェット前＞
＜右ウィジェット後＞
左サイドバー
＜左ウィジェット後＞
左サイドバーに入れる項目は、「外部リンク」を除き全て既成のウイジェットです。
「最近の投稿」「アーカイブ」「検索」「Count Per Day（訪問者計数）」と入れて、左のPC画面では特段気になる乱れはありません。
スマホモードでチェック
さあ、スマホモードの画面ではどのように映るでしょうか。
下に示すとおり、3件ばかり気になる映りがありました。
タイトルの背景が飾られていないこと、カウントパーデイの表示が画面一杯に広がっていること、サイドバーに登録されていないウィジェットが表示されていること、の原因を調べて対策が必要です。
＜見出し背景＞
＜カウントパーデイ＞
＜不要ウィジェット＞
検討・対策
このうち、「タイトルの背景が飾られていないこと」については、笑い話ですみません。上記のサイドバーデータをコピペする時、何気なくブレークポイント指定行の後段に貼り付けていました。
スマホだろうがPCだろうが、全てのデバイスに対して効力を効かせたいなら、前段に記載しないとダメでしたよね。お恥ずかしい限りです。
レスポンシブ対応作業では、ブレークポイント指定行がどこにあるかを常に意識していなければならないこと、あらためて肝に銘じました。
カウントパーデイ対策
カウントパーデイ（CPDと略記）はプラグインなので、お仕着せですから手の出しようがないかなと思いましたが、念のためソースコードを確かめました(*)。
すると、CPDには、「ul」タグに「cpd」クラスが、「li」タグには「cpd-l」クラスが用意されていましたので、ありがたく幅調整と間隔調整に利用させてもらいました（表示数値は暫定）。これなら、さらに文字色や大きさなども調整できますね。
「手作り千両」の場合はPC画面の時は、デフォルト表示のままでよいので、スマホ画面用にセットしたクラス値はブレークポイント指定行の後段で元に戻しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
＜前段記載＞ /* カウントパーデイ */ ul.cpd { width: 85%; margin-left: 20px; } .cpd li { margin-bottom: 10px; } ＜後段記載＞ /* カウントパーデイ リセット*/ ul.cpd { width: auto; margin-left: 0px; } |
＜CSS＞
＜カウントパーデイOK＞
＊： ブラウザ、IEなら、メニューの「表示」／「ソース」で、Firefoxなら画面の適当なところで右クリック、「ページのソースを表示」でソースコードが表示されます。
ウィジェット非表示対策
このテンプレートはフッターエリアにもウィジェットが設けられていて、親切な作りになっているのですが、ウィジェットに何か表示しないとデフォルトのウィジェットが表示され、つまり、いつも何かを表示する仕様になっています（用途がなければ、広告バナー用にでもどうぞということかも？）。
でも、「手作り千両」の場合はこれが不要なので消したいのですけど、消し方が説明されていません。しからば、トップページを映している「home.php」を弄くりながら、奮闘してみます。
下から2行目「get_sidebar( ‘footer’ )」がフッターウィジェットを映しなさいという命令文だと思います。
ここを消せば不要領域全部が消えると思ったのですが、背景まで消えたものの、左と中の本文はまだ表示されたままです。フーン、そういう作りなんだ。
いや、待てよ。 経験によれば、この手の表示乱れは当該文をコメントアウト(*2)して消したつもりになった時に起きる現象かも知れないんですよね。ファイル上からこの一行を完全に削除してみます。
結果、OKになりました。下のようにウィジェット表示を消すことができました。
＜ビフォー＞
＜アフター＞
でも、消えたのはトップページ分だけですから、投稿ページなら「single.php」、固定ページなら「page.php」と、該当ページすべてについて同じ処置が必要になりますね。
では、また次回。
＊2： html言語なら、 ＜！－－ －－＞（半角文字で） を文頭、文末に付記。
スポンサーリンク
- 投稿タグ
- ウェブ
