【Simplicity2カスタマイズ④】スマホ表示で「記事を読む」ボタンと本文抜粋を非表示にする方法

Simplicity2_カスタマイズ④ WordPress

前回は「記事を読む」ボタンを装飾して、さらにボタンの位置を右側へ移動するというカスタマイズをしました。

【Simplicity2カスタマイズ③】「記事を読む」ボタンを装飾して位置を右側に移動する方法
今回行うカスタマイズは、「記事を読む」ボタンの装飾です。 「記事を読む」ボタンを装飾して目立たせてみましょう! ついでに、「記事を読む」ボタンの位置を変更してみたいと思います。 ↓こんな感じです。 「記事を読む」ボタ...

 

PCで表示する場合は画面が広いため色々な情報が表示されていても問題ないのですが、スマホで表示する場合は画面が狭いため、多くの情報が詰まっていると見づらくなってしまいます。

そこで今回は、スマホ表示の場合に「記事を読む」ボタンと本文の抜粋を表示しないようにするカスタマイズをしたいと思います。

 

これでスマホ表示がだいぶすっきりしますよ!

 

↓スマホ表示でこのように「記事を読む」ボタンと本文抜粋が非表示になります。

Simplicity2_カスタマイズ03

スマホ表示で「記事を読む」ボタンを非表示にしよう!

前回までと同じように、Simplicity2の子テーマを編集しますが、今回はスマホ表示の場合だけに変更を反映させるため、スタイルシート(style.css)ではなくmobile.cssにコードを追加します。

 

WordPressのメニュー「外観」の「テーマの編集」をクリックします。

Simplicity2_カスタマイズ④01

 

画面右上の「編集するテーマを選択」が「Simplicity2 child」であることを確認して、下の「mobile.css」をクリックします。

Simplicity2_カスタマイズ④02

 

そして、mobile.cssに次のコードを追加してください。

/*「記事を読む」を表示させない*/
.entry-read a{
 display:none;
}

 

これでスマホ表示の場合のみ「記事を読む」ボタンが表示されなくなりました。

 

同じように、関連記事の「記事を読む」ボタンも非表示にする場合は次のコードを追加しましょう。

/*関連記事の「記事を読む」を表示させない*/
.related-entry-read a{
 display:none;
}

 

スマホ表示で本文抜粋を非表示にしよう!

つづいて、本文の抜粋を非表示にします。

「記事を読む」ボタンを非表示にしたときと同じように、mobile.cssを編集します。

 

スマホ表示で本文の抜粋を非表示にするには次のコードを追加します。

/*本文抜粋を非表示*/
.entry-snippet{
  display:none;
}

 

これでスマホ表示の場合のみ本文の抜粋が非表示になりました。

 

同じように、関連記事の本文抜粋も非表示にする場合は次のコードを追加しましょう。

/*関連記事の本文抜粋を非表示*/
.related-entry-snippet{
  display:none;
}

 

まとめ

今回はスマホ表示の場合に画面をすっきり見せるカスタマイズをしました。

簡単なカスタマイズでもグッと見やすくなりましたね!

 

ブログは読んでもらってなんぼですから、見る人の立場にたって少しでも読みたいと思ってもらえるように工夫することが大事ではないでしょうか。

 

次回も簡単にできるカスタマイズを紹介したいと思います。

次回は見出しタグの変更とサイドバーと関連記事の見出しを装飾する方法について解説します。

【Simplicity2カスタマイズ⑤】見出しタグとサイドバーと関連記事見出しの装飾を変更する方法
前回に引き続き、Simplicity2でブログをカスタマイズしていきます! 今回行うカスタマイズは次の2点です。 見出しタグの変更 サイドバーと関連記事の見出しの装飾 やり方は前回までと同様、Simplicity...

 

当ブログで行ったカスタマイズのまとめはこちら↓

【Simplicity2カスタマイズ】WordPress初心者が行った6つの方法【まとめ】
WordPressテーマ『Simplicity2』を愛用している私が行ったカスタマイズ方法をまとめて紹介します!WordPress初心者でも簡単にできるカスタマイズばかりですよ♪

コメント