【STORK(ストーク)】2カラムや3カラムで表示させる方法と中央揃え時のポイント

どうも、あらやんです。

今回はWordPress用テーマ「STORK(ストーク)」をお使いの方やこれから導入を考えている方へ向けて、2カラムや3カラムで表示させる方法と中央揃え時のポイントについて説明します。

自分好みのページを作成しようと思った時に投稿ページ内を2カラムや3カラムで表示したいと思ったことってないですか?私はあるんですが以前使っていたテーマでは気軽にできなかったんですよ。

STORKならショートコードを使うことで簡単に2カラムや3カラムで表示させることができるので重宝しています。この記事ではそういった2(3)カラム表示のやり方について説明していきますね。

 

ショートコードを活用する

STORKで2(3)カラム表示をさせる時はショートコードを使うのがお手軽なのでおすすめです。

やり方は2(3)カラム表示させたいところでショートコードを挿入するだけですね。そのショートコードは

  • 2カラム表示の場合

[colwrap]
[col2]1カラム目[/col2]
[col2]2カラム目[/col2]
[/colwrap]

  • 3カラム表示の場合

[colwrap]
[col3]1カラム目[/col3]
[col3]2カラム目[/col3]
[col3]3カラム目[/col3]
[/colwrap]

となります。

 

気になるポイント:中央揃えをする時

例えば2カラムで画像や文字を表示させたとしますね。

そのまま表示させると左右それぞれのカラム内では左寄せになります。分かりますかね。

これ、何となく気になりませんか?私はこういう細かいところが気になる人なので何とか中央揃えにしたいんです。ただ、ビジュアルエディタでドラッグアンドドロップで範囲を指定して中央揃えのボタンをクリックしただけでは中央揃えにならないんですね。

そういう時はどうしたらいいかと言うと、それぞれのカラムに対して中央揃えを行うことで対処できます。

先ほどの2カラムで画像を表示させる時に使ったコードは

[colwrap]
[col2]画像ファイルのURL[/col2]
[col2]画像ファイルのURL[/col2]
[/colwrap]

なのですが、この[col2]~~~[/col2]それぞれに対して中央揃えを適応することでそれぞれのカラム内の画像や文章を中央揃えにすることができます。テキストエディタにして、~~~が中央揃えのタグで囲まれるようにすればOKということですね。

[colwrap]
[col2]<p style=”text-align: center;”>画像ファイルのURL</p>[/col2]
[col2]<p style=”text-align: center;”>画像ファイルのURL</p>[/col2]
[/colwrap]

そうすると以下の画像の様にそれぞれのカラム内で中央揃えされます。

どうでしょうか。ちなみにこれは3カラム表示でもやることは同じです。

ぜひ自由自在に2カラムや3カラム表示を使いこなし、自分の思い描いた通りのページを作れるようになっていきましょうね。

カスタマイズ記事まとめ

他のSTORK(ストーク)カスタマイズ記事をお探しの方はこちらからどうぞ

あらやん公式メルマガはこちら

無料のメルマガに登録して頂くとメルマガ会員限定のメンバーズサイトに無料でご招待しています。

メルマガやメンバーズサイトでは

  • 自由なライフスタイルを実現するための具体的な方法
  • 理想を現実にするための思考法・マインドセット
  • より成果を出すための作業のマネジメント

などなど、自由なライフスタイルを実現するための様々な情報を発信していきます。

あなたも自由なライフスタイルを実現し、家族や恋人、友人などの大切な人とニコニコ笑顔で過ごしていけるようなそんな人生を歩んでいきませんか?もしそんな人生に興味や憧れがあるのなら、ぜひこのメルマガに登録して下さいね。

あなたが理想のライフスタイルを実現できるように私も頑張って情報を発信していきます!