おはこんばんにちはコーキです。
先日、英語関連用に固定ページを作っていたんですが、各カテゴリへのリンクバナーを配置した際に、スマホ表示がどうしてもうまくいかないという事態が起きました。
リンクバナーの大きさのみをいじくって表示させていたので、PC上ではうまく二列表示させることができてもスマホ上ではサイズが大きく一列表示になってしまっていました。
そこで僕は、「PC用とスマホ用でそれぞれサイズ指定して分けて表示させちゃえばええやん。」と思い、あれこれやってみました。
ということで、今回はPC用、スマホ用ページそれぞれから不要な要素を非表示にして「疑似レスポンシブ対応」させてみたいと思います。
[toc]追加用カスタムCSSを使う！
投稿ページと固定ページ、どちらも編集画面下部に追加用カスタムCSSの欄があります。
こちらにPC上で表示させるコンテンツとスマホ上で表示させるコンテンツの「ON・OFFスイッチ」の要素を書き込みます。
以下のコードをこの「カスタムCSS」の中にコピペしてください。
/*PCの場合*/
.pc { display:inline!important; }
.mb { display:none!important; }
@media screen and (max-width: 768px) {
/*タブレット、スマホの場合*/
.pc { display:none!important; }
.mb { display:inline!important; }
}
これで「ON・OFFスイッチ」を入れるとそれに応じた表示が行えるようになりました。
次に、どうやって「ON・OFFスイッチ」を切り替えるかをやっていきましょう。
本文中に「ON・OFFスイッチ」の条件を書き込む！
それでは「表示させたいコンテンツ」と「表示させたくないコンテンツ」の部分にスイッチを書き込んであげます。
僕の場合、各カテゴリページに飛べるバナーリンクをPC用とスマホ用に作り、その二つを各デバイスで表示させるか非表示にするかを選択させます。
僕が固定ページで実際に使っているコードを載せます。
僕は「Affinger5(Wing)」という有料テーマを使っています。そのため、違うテーマを使っている方はバナーや左右均等表示をさせるためのコードは使えません。
もし「同じように表示させたい方」や、「SEO対策を充実させたい方」がいらっしゃいましたら「Affinger5(Wing)」強くお勧めいたします！
まずはPC用！
<div class="pc"> <div class="clearfix responbox50"> <div class="lbox"></div> <div class="rbox">slang/スラング
</div> </div> <div class="clearfix responbox50"> <div class="lbox">trivia/トリビア
</div> <div class="rbox">日常英会話フレーズ
</div> </div> </div>間違えやすい英語
次にスマホ用！
<div class="mb"> <div class="clearfix responbox50 smart50"> <div class="lbox"></div> <div class="rbox">slang/スラング
</div> </div> <div class="clearfix responbox50 smart50"> <div class="lbox">trivia/トリビア
</div> <div class="rbox">日常英会話フレーズ
</div> </div> </div>間違えやすい英語表現
この二つを固定ページ内に書き込んでいます。
一行目にある「<div class="pc">～最後の</div>」と「<div class="mb">～最後の</div>」で、その間に挟まれたコードに属性を与えています。
実際に表示させて見よう！
いかがでしたでしょうか？
見やすいページのほうがサイト内の周遊率も上がります。
そうすることでSEO的にもいい結果を得られます。
コンテンツがもっと充実してきたらもっと見やすく細部までチェックできる固定ページにしようと思っているので、その時はまた改めて記事を書かせていただきますね！
