Affinger/アフィンガー SEO/ブログ運営

【Affinger】固定ページから不要なものを非表示にしてスマホ用にレスポンシブ対応させる。【コピペOK!】

2020-02-02

おはこんばんにちはコーキです。

 

先日、英語関連用に固定ページを作っていたんですが、各カテゴリへのリンクバナーを配置した際に、スマホ表示がどうしてもうまくいかないという事態が起きました。

リンクバナーの大きさのみをいじくって表示させていたので、PC上ではうまく二列表示させることができてもスマホ上ではサイズが大きく一列表示になってしまっていました。

 

コーキ
こんな感じ。二列にまとまってたほうがきれいで見やすいよね!

 

 

そこで僕は、「PC用とスマホ用でそれぞれサイズ指定して分けて表示させちゃえばええやん。」と思い、あれこれやってみました。

 

 

ということで、今回はPC用、スマホ用ページそれぞれから不要な要素を非表示にして「疑似レスポンシブ対応」させてみたいと思います。


追加用カスタム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">

slang/スラング

</div> <div class="rbox">

trivia/トリビア

</div> </div> <div class="clearfix responbox50"> <div class="lbox">

日常英会話フレーズ

</div> <div class="rbox">

間違えやすい英語

</div> </div> </div>

 

次にスマホ用!

<div class="mb">
<div class="clearfix responbox50 smart50">
<div class="lbox">

slang/スラング

</div> <div class="rbox">

trivia/トリビア

</div> </div> <div class="clearfix responbox50 smart50"> <div class="lbox">

日常英会話フレーズ

</div> <div class="rbox">

間違えやすい英語表現

</div> </div> </div>

この二つを固定ページ内に書き込んでいます。

 

一行目にある「<div class="pc">~最後の</div>」と「<div class="mb">~最後の</div>」で、その間に挟まれたコードに属性を与えています。

コーキ
「これがPC用、こっちがスマホ用」みたいな感じ。

 


実際に表示させて見よう!

コーキ
スマホ用バナーのせいでサイドバーが消えとる!w

コーキ
すっきりしたよ!

いかがでしたでしょうか?

見やすいページのほうがサイト内の周遊率も上がります。

そうすることでSEO的にもいい結果を得られます。

コンテンツがもっと充実してきたらもっと見やすく細部までチェックできる固定ページにしようと思っているので、その時はまた改めて記事を書かせていただきますね!

コーキ
おつかれさまでしたー。

 

 

 

  • この記事を書いた人
コーキ

コーキ

ドイツ在住20代。音楽制作のかたわらブログサイトを運営してます_(:3」∠)_ 基本何でも独学。英語学習、ワーホリ、ドイツ、音楽について「役立つ情報」を発信しています。よろしくね。

-Affinger/アフィンガー, SEO/ブログ運営

Copyright© BASE of KACE , 2020 All Rights Reserved.