|WordPressノウハウ|スマホでも2カラム(横並び)表示させる方法

ブログ収益化
スポンサーリンク

WordPressでブログを書いていく内にパソコンやタブレット、スマホではブログの印象が大きく異なることに気付いてくると思います。

パソコンでは2カラム表示(画像などが2列表示されている)されていても、スマホでは1カラム表示されていてなんだかもっさりしてない?…なんて事もあると思います。

この記事ではWordPressテーマ「Cocoon」でパソコン、スマホともに2カラム表示を維持する方法について解説します。

今回は「Surface Go2」と「iphone8」で動作確認しました!

スポンサーリンク

やりたいこと

この記事でやりたいことは「パソコン、スマホで2カラム表示を維持する」ことです。

WordPressテーマであるCocoonでは画面の横幅によって表示を変えるレスポンシブル機能が予め設定されています。

このため、パソコンで2カラムの配置をさせても、スマホでは1カラムになります。

参考例を画像で示しておきますね。

▼パソコンでもスマホでも2カラムを維持

スマホでも

横並び!

今回は記事一つ一つでスマホで2カラム表示させる方法とブログ全体で表示させる方法の2パターンを紹介するよ!

スマホでも2カラムを維持する手順

では実際にスマホでも2カラムを維持するように設定していきましょう。

  • STEP1
    ブロックエディターで2カラムを準備する
    ブロックエディターを使って2カラムを選択します。
  • STEP2
    カスタムCSSにコードをコピーする
    WordPress編集画面の下にあるカスタムCSSにコードを貼り付けます。
    ※ブログ全体に反映したい場合は,テーマエディターか追加CSSにコードを貼り付けます。
  • STEP3
    動作確認
    ちゃんとブックマークにリンクされているか確認しましょう!

ブロックエディターで2カラムを準備する

まずはWordPressの記事編集画面で2カラムのブロックを準備します。

  1. [記事のブロックを選択するには「/」を入力]の右側にあるをクリック/タップしましょう。
  2. [COCOONレイアウト]の2カラムを選択して2カラムブロックを追加しましょう。
  1. ブロック内のカラムにそれぞれ表示したい画像などを挿入しましょう。

これで2カラムの準備は完了です。

下書き保存しておきましょう。

現在の状態では下の画像のようにスマホ表示させたときには1カラムで縦表示に並んでしまいます。

これを2カラム(横並び)表示させるためのCSSをコピペすることでスマホでも2カラム表示を維持できます。

カスタムCSSにコードをコピぺする

それではスマホでも2カラムを維持するコードを紹介します。

▼スマホで2カラムを維持するコードをコピーする

@media screen and (max-width: 768px) {
.column-wrap{
        flex-direction: row !important;
}
}

▼コードをCSSに貼り付ける

1つの記事に反映させたい場合は、その記事の一番下にあるカスタムCSS』に貼り付けしましょう。

コードを貼り付けたら下書き保存しておきましょう。

これでスマホでも2カラムが横並びに表示されます!

表示例:

スマホでも

横並び!

こちらに書いた記事のように画像を横並びにするような内容だと2カラム維持の方がスッキリして見えると思います。

ブログ全体に反映したい時は

もしブログ全体でスマホでも2カラムを維持したい時は、先程のコードを『テーマエディター』か『追加CSS』に貼り付けましょう。

  • テーマエディターにコードを追加する場合
    1. WordPressの管理画面を開いて外観テーマエディターを選択しましょう。
      ※この時、編集するテーマは「Cocoon Child」にしましょう。
    2. 先ほどのコードをCSSにペーストしましょう。
      貼り付ける位置は一番最後が望ましいです。
      ※既に編集が加わっている場合、別のコードで2カラム表示が解除されてしまう可能性があるため。
  • 追加CSSにコードを追加する場合
    1. WordPressの管理画面を開いて外観カスタマイズ追加CSSを選択しましょう。
    2. 先ほどのコードを追加CSSにペーストしましょう。

ブログ全体に適用すると見た目が変わってしまうこともありますので、おかしなところがないかチェックしましょう。

まとめ

WordPressの無料テーマ「Cocoon」ではスマホでの表示を見やすく最適化するために、パソコンで2カラムに設定していてもスマホでは自動的に1カラムになるようにレスポンシブル化されています。

とても便利な機能ですが画像を並べて表示する時などは2カラムの方が見やすいこともあります。

特定の記事で2カラムを維持したい時はカスタムCSSにこの記事のコードを貼り付けましょう。

コメント

タイトルとURLをコピーしました