2018.09.24前回は「記事を読む」ボタンを装飾して、さらにボタンの位置を右側へ移動するというカスタマイズをしました。今回行うカスタマイズは、「記事を読む」ボタンの装飾です。ついでに、「記事を読む」ボタンの位置を変更してみたいと思います。「記事を読む」ボタ...queseraselife.com2016.11.30PCで表示する場合は画面が広いため色々な情報が表示されていても問題ないのですが、スマホで表示する場合は画面が狭いため、多くの情報が詰まっていると見づらくなってしまいます。そこで今回は、スマホ表示の場合に「記事を読む」ボタンと本文の抜粋を表示しないようにするカスタマイズをしたいと思います。これでスマホ表示がだいぶすっきりしますよ!↓スマホ表示でこのように「記事を読む」ボタンと本文抜粋が非表示になります。目次スマホ表示で「記事を読む」ボタンを非表示にしよう!スマホ表示で本文抜粋を非表示にしよう!まとめスマホ表示で「記事を読む」ボタンを非表示にしよう!前回までと同じように、Simplicity2の子テーマを編集しますが、今回はスマホ表示の場合だけに変更を反映させるため、スタイルシート(style.css)ではなくmobile.cssにコードを追加します。WordPressのメニュー「外観」の「テーマの編集」をクリックします。child」であることを確認して、下の「mobile.css」をクリックします。mobile.cssに次のコードを追加してください。display:none;}これでスマホ表示の場合のみ「記事を読む」ボタンが表示されなくなりました。同じように、関連記事の「記事を読む」ボタンも非表示にする場合は次のコードを追加しましょう。display:none;}スマホ表示で本文抜粋を非表示にしよう!つづいて、本文の抜粋を非表示にします。「記事を読む」ボタンを非表示にしたときと同じように、mobile.cssを編集します。スマホ表示で本文の抜粋を非表示にするには次のコードを追加します。display:none;}これでスマホ表示の場合のみ本文の抜粋が非表示になりました。同じように、関連記事の本文抜粋も非表示にする場合は次のコードを追加しましょう。display:none;}まとめ今回はスマホ表示の場合に画面をすっきり見せるカスタマイズをしました。簡単なカスタマイズでもグッと見やすくなりましたね!ブログは読んでもらってなんぼですから、見る人の立場にたって少しでも読みたいと思ってもらえるように工夫することが大事ではないでしょうか。次回も簡単にできるカスタマイズを紹介したいと思います。次回は見出しタグの変更とサイドバーと関連記事の見出しを装飾する方法について解説します。今回行うカスタマイズは次の2点です。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。新しい投稿をメールで受け取るホームブログWordPress管理人のプロフィールけせらせライフは、三十路の男2人が会計士試験からエンタメ情報まで気ままに発信するブログです。管理人に聞いてみたいことなどがありましたら、お問い合わせページからお気軽にどうぞ!~がく~30代4児の父。Twitterやってます。@queseraselife12~ひさ~30代1歳児の新米パパ。管理人のプロフィールけせらせライフは、三十路の男2人が会計士試験からエンタメ情報まで気ままに発信するブログです。管理人に聞いてみたいことなどがありましたら、お問い合わせページからお気軽にどうぞ!~がく~30代4児の父。Twitterやってます。@queseraselife12~ひさ~30代1歳児の新米パパ。Element.Events.load),!0}},t.addEvent("load",function(){r=!0})}(window,document);。