【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カスタマイズ記事を活用して下さいね。

ブログのカスタマイズはもちろん大事なことですが、ブログを運営する上で一番大事なことは読者さんに読んでもらえること(アクセスがアップすること)です。たくさんカスタマイズして思い通りのブログが作れたのに全然読者さんが来ないんじゃ残念ですよね。

私の運営している無料のメールコミュニティではブログではお伝えしていないブログのアクセスアップノウハウやネットビジネスでお金を稼ぐためのノウハウ、自由を実現するためのマインドセットなどを無料でお伝えしています。

STORKブログをカスタマイズしてたくさんの読者さんに読んでもらいたい方はぜひ無料のメールコミュニティに参加して下さいね!


無料会員制のメールコミュニティへご招待しています

無料で参加できるメールコミュニティ、その名も「ニコニコスマイルコミュニティ」にご招待しています。

このコミュニティではブログでお伝えしきれなかった内容やコミュニティ参加者限定のコンテンツをプレゼントしています。ネットビジネスでお金を稼ぐ力を身に付け、自由なライフスタイルを実現して大切な人とニコニコ笑顔で暮らしていけるような人生を創造していきたいのなら、あなたも無料のコミュニティに参加して仲間になりませんか?