Shortcodes Ultimateを使って記事本文を2・3カラムに分割する方法

Shortcodes Ultimateを使って記事本文を2・3カラムに分割する方法

ブログを書いていて、以下のように本文の途中を分割して表示させたい、なんて思ったことはないでしょうか?

2カラム表示
 
 
上の場合、本文の途中を2カラム(2分割)に変更しています。
たったこれだけのレイアウト変更でも、記事の印象がガラッと変わりますよね。
なんだか、雑誌の一コマみたいです。

WordPressではプラグインを使うことで、上のように本文を2カラム、もしくは3カラムに簡単に分割することができます。
今回は、その具体的な方法を解説していきますので、気になった方はぜひ試してみてください。
 
 

スポンサーリンク

Shortcodes Ultimateをインストール

今回は、「Shortcodes Ultimate」というプラグインを使って本文の分割を行います。

まず、プラグインをインストールしましょう。

WordPressの管理画面から『プラグイン新規追加』という順にクリックして進み、
プラグイン検索ページで「Shortcodes Ultimate」と検索します。

するとShortcodes Ultimateのプラグインがヒットしますので、
これを『今すぐインストール』し、有効化すればOKです。

プラグインのインストール方法を詳しく知りたい方は、こちらの記事も参考にしてみてください。

参考記事:プラグインのインストール方法
 
 

本文を分割する方法

プラグインをインストールしたら、早速本文を分割してみましょう。

まず、WordPressの記事作成ページを開きます。

ツールバーに『ショートコードを挿入』というボタンが追加されていますので、こちらをクリックします。

『ショートコードを挿入』ボタンをクリック
 
 
以下のようなウィンドウが開きます。
この中の『』をクリックしましょう。

『行』をクリック
 
 
ウィンドウが切り替わります。
ショートコードを挿入』ボタンをクリックしましょう。

『ショートコードを挿入』ボタンをクリック
 
 
これで、本文が分割されます。
デフォルトで入力されている「コンテンツ」という部分を、表示させたい文字や画像に変更しましょう。

3カラム表示のコード
 
 

スポンサーリンク

色んなパターンで分割する

ここでは、応用編として以下のパターンの分割方法を解説していきます。
 

  • 2カラム
    1/2 + 1/2
    1/4 + 3/4
    1/5 + 4/5
    2/5 + 3/5
  •  

  • 3カラム
    1/3 + 1/3 + 1/3
    1/2 + 1/4 + 1/4
    2/3 + 1/6 + 1/6

 
 
それぞれサンプルコードを記載しているので、コピーして本文中に貼って使ってみて下さい。
 
 

2カラム

1/2 + 1/2

2カラム(1/2 + 1/2)表示  
 

1/4 + 3/4

2カラム(1/4 + 3/4)表示  
 

1/5 + 4/5

2カラム(1/5 + 4/5)表示  
 

2/5 + 3/5

2カラム(2/5 + 3/5)表示  
 

3カラム

1/3 + 1/3 + 1/3

3カラム(1/3 + 1/3 + 1/3)表示  
 

1/2 + 1/4 + 1/4

3カラム(1/2 + 1/4 + 1/4)表示  
 

2/3 + 1/6 + 1/6

3カラム(2/3 + 1/6 + 1/6)表示  
 

スポンサーリンク

スマホ&タブレットでの表示のされ方

今回解説した方法で分割した本文は、PCとスマホ&タブレットでそれぞれ表示のされ方が違います。
PCでは、上記で解説した通りに表示されますが、スマホ&タブレットでは以下のように表示されますので注意してください。
 
 

2カラムの場合

左側にあったものが上、右側にあったものが下に表示されます。

左側にあったものが上、右側にあったものが下に表示される
 
 

3カラムの場合

左・中・右に配置されていたものが、上・中・下の配置で表示されます。

左・中・右に配置されていたものが、上・中・下の配置で表示される
 
 

まとめ

今回は、プラグイン「Shortcodes Ultimate」を使って、WordPressの記事を2カラム・3カラムに分割する方法を解説しました。

解説したように、Shortcodes Ultimateを使えば、特に難しいコードを記入しなくても簡単に本文を分割することができるので、気になった方はぜひ試してみてください。
 
 

スポンサーリンク








Shortcodes Ultimateを使って記事本文を2・3カラムに分割する方法