WordPressテーマSimplicityのスマホサイト・デザインをカスタマイズ。スマートフォンだけ大きなエントリーカードに変更する。

このところブログのデザインの見直しをやっていました。

Googleがモバイルファーストインデックス(MFI)に移行したのが分かったので、今までおざなりにしていたスマートフォンのデザインをしっかりしたものにしたいという気持ちに駆られたからです。

このブログは「Simplicity」というWordPressテーマを使っています。
様々なカスタマイズが設定だけで出来る優れものです。

参照 Simplicity

しかし、「スマートフォンだけエントリーカードを大きくしたい」というような場合、PHPを修正せざるをえません。

やってみると比較的簡単だということが分かりました。

スポンサーリンク
AdSence

スマートフォンだけエントリーカードを大きくしたい

「Simplicity」はその名の通り、シンプルなデザインが気にいっています。

ヘッド部分にイメージ画像を入れることも出来ますが、私のブログでは、あえてロゴマークだけにしてあります。

今まで、スマートフォンでは、さらにシンプルになっていて、ロゴマークも入っていませんでした。

それでは、あまりにも中途半端な感じでしたので、ロゴマークを入れて、エントリーカードを大きくすることにしました。

……

「Simplicity」には元々「大きなエントリーカード」という設定があります。

しかし、スマホだけではなくPCサイトも変わってしまいます。

スマホだけ大きくするためには以下のようにPHPを修正します。

entry-card-content.phpの修正

エントリーカード内の文章を作成している「entry-card-content.php」を修正します。

■変更前

■変更後

違いは5行目です。

通常のエントリーカード以外の判定「is_list_style_large_cards()」を「is_mobile()」に変更します。

スマホの場合は全て大きいカードの内容にするためです。

……

(中略)以降は、スマホで「記事を読む」を改行しないようにするために修正しました。

list.phpの修正

次にエントリー一覧を作成している「list.php」を修正します。

■変更前

■変更後

15行目の判定を「} else if ( is_mobile() ){//大きなエントリーカードの場合」に変更します。

たったこれだけの修正でスマホのみ大きなエントリーカードになってくれます。

デザインの比較

CSSも修正して、既に元に戻すことが難しくなってしまったので、姉妹ブログとデザインを比較してみます。

■変更前のトップページ(通常のエントリーカード)

■変更後のトップページ(大きなエントリーカード)

このようにずいぶん見やすくなりました。

「Simplicity」の大きなエントリーカードはカードっぽく枠でくくられていません。
CSSで設定しました。(結局、枠が煩わしく感じて、とってしまいました)

CSSについては説明を省略します。
好きなデザインになるように設定してみてください。

(実は他にもいっぱい修正したので、エントリーカード関連のCSSだけ抜粋することが難しくなりました。すみません。)

© bluelady.jp

スポンサーリンク
AdSence
AdSence

シェアする

フォローボタン