【Simplicity2】一覧リストのスタイルをPCとモバイル別々の設定にする方法

Simplicity2

こんにちは。Simplicity2愛用ブロガーの葵翼です。

WordPressの超有名無料テーマ「Simplicity2」。

僕自身超絶忘れっぽい性格(?)なので、Simplicity2の細かいカスタマイズを備忘録として残していくことにしました。

今回は、Simplicity2における一覧リストのスタイルを、PCとモバイル別々の設定にする方法について解説していきます。

例えば…

・PC表示→サムネイル大

・モバイル表示→エントリーカード

といった具合にしたいという場合です。

それでは解説していきまーす。

(“Simplicity2に関する話題何でも”という掲示板にて発言されていた「technote」さんの発言を参考にさせていただきました)

一覧リストのスタイルをPCとモバイル別々の設定にする手順

①PC/モバイルそれぞれのスタイルを決める

まずは、PC表示とモバイル表示それぞれどのようなスタイルで一覧リストを表示させたいか決めておきましょう。

PC表示は、ある程度大きなモニターで閲覧することを想定した「タイル2列」や「タイル3列」がオススメです。

モバイル表示は、スマートフォンの小さな画面での閲覧に適している「エントリーカード(デフォルト)」がオススメです。

自分のブログやサイトに適したスタイルをあらかじめ選定しておきましょう。

②テーマのための関数(functions.php)にコードをコピペ

テーマ?関数??functions.php???

・・・安心してください。簡単ですよ(° ꈊ °)✧キラーン

まずは、「外観」→「テーマの編集」→「テーマのための関数(functions.php)」の一番下に以下のコードをコピペしてください。

ちなみに「テーマのための関数(functions.php)」は

php

③コピペしたコードの一部をスタイルに合わせて変更する

この作業もいたって簡単な作業なのでご安心くださいませ。

コピペしたコードの一部を、先ほどあなたが決めたPC表示とモバイル表示のスタイルに合わせて変更します。

変更するのは以下に示したマーカー部分です。

add_filter(‘theme_mod_list_style’, function(){
return is_mobile() ? ‘cards‘ : ‘large_thumb‘;
});

左側(cardsの部分)がモバイル表示で、右側(large_thumb)がPC表示の部分です。

したがって、このままファイルを更新ボタンを押すと「スマホ→エントリーカード」「PC表示→大きなサムネイル」となります。

変更したい方は、マーカー部分をスタイルに合わせて変更していきましょう。

エントリーカード(デフォルト)→cards

大きなエントリーカード→large_cards

本文→bodies

最初だけ本文→body_just_for_first

大きなサムネイル→large_thumb

タイル2列表示→tile_thumb_2columns

タイル3列表示→tile_thumb_3columns

タイル2列表示(画像縦横比保存)→tile_thumb_2columns_raw

タイル3列表示(画像縦横比保存)→tile_thumb_3columns_raw

簡単簡単~~~(´。✪ω✪。`)

いろいろ試してみちゃってください!

④崩れたデザインの微調整をする

「PCとモバイルを別々の設定にすることはできたけど、デザインが変になってもうた~~~」って方、一定数いらっしゃると思います。

デフォルト表示をそのままタイル2列表示へ変更したりすると、デザインがどうしても崩れてしまうんですね。

そこで簡単に微調整を行っていきます。

(微調整が必要ない場合この工程は行わなくて良いです)

■サムネイルのサイズ変更

サムネイルが大きすぎてデザインのバランスが崩れた場合などの微調整に使います。

「外観」→「テーマの編集」→「スタイルシート(style.css)」の一番下に以下のコードをコピペしてください。

コピペしたら「width(幅)」だったり「height(高さ)」の数値を適当にいじってください。

ちなみに記事タイトルの位置も微調整できるようにコードを用意しました。

もし数値を変更しても変化が見られなかった場合は、コピペしたコードを「外観」→「カスタマイズ」→「追加css」に移動させてみてください。

(僕は変化しなかったので追加cssに移動させてます)

■記事タイトルの大きさを変更する

記事タイトルが大きすぎて縦書きになってしまった場合などの微調整に使います。

「外観」→「テーマの編集」→「スタイルシート(style.css)」の一番下に以下のコードをコピペしてください。

コピペしたら「font-size」の数値を適当にいじってください。

ちなみに色も変えられるように「color」も用意しました。

もし数値を変更しても変化が見られなかった場合は、コピペしたコードを「外観」→「カスタマイズ」→「追加css」に移動させてみてください。

(僕は変化しなかったので追加cssに移動させてます)

まとめ

【Simplicity2】一覧リストのスタイルをPCとモバイル別々の設定にする方法

①PC/モバイルそれぞれのスタイルを決める

②テーマのための関数(functions.php)にコードをコピペ

③コピペしたコードの一部をスタイルに合わせて変更する

④崩れたデザインの微調整をする

想定していたデザインになりましたでしょうか。

お役に立てたのであれば嬉しいです。

なにか不備等ありましたらお知らせください。

おわり。