SANGOカスタマイズ 横並び2列表示の幅比率を変えてみる 【WordPress】

横2列カスタム

WordPressのテーマ SANGOにはショートコードで横並び2列表示、3列表示ができますが、列の幅を指定することができません。

個人的に横並び2列表示を使うときは、左側に画像、右にコメントを入れることが多いので少し画像の表示が大きくなるよう、比率を調整できるようにしてみました。

ビフォーアフター

約2:1の比率で、左側が画像、右に吹き出しを配置して吹き出しを少し画像にかぶせています。

カスタマイズの流れ

ステップ1
functions.php
子テーマ内の「functions.php」を開いて、コードを挿入します。
ステップ2
for menのコードをコピペ
ショートコード box2 を吹き出しにカスタマイズしたコードをコピペします。
ステップ3
style.css
子テーマの「style.css」にコードをコピペします。
ステップ4
AddQuicktagに登録
ショートコードを簡単に挿入できるプラグイン「AddQuicktag」にコードを登録して、表示を確認しましょう。

for menの記事を流用してカスタマイズしています。
Link SANGOで2列用の吹き出しボックスをカスタマイズで作成for men

function.php を編集

注意
functions.php のカスタマイズに失敗するとWordpressの表示ができなくなります。必ずバックアップを取ってもとに戻せるようにしましょう。

子テーマの functions.php をFTPソフトなどで開いて以下のコードを挿入します。

functions.phpへの追記は以下に」より下に入れてください。

functions.php

functions.php
//2列表示
add_shortcode('yokorate','table_yokorate');

function table_yokorate($atts , $content = null) {
	$layout = ($atts && $atts[0] == "responsive") ? "tbrsp" : "";
	$content = do_shortcode( shortcode_unautop( $content ) );
	if($content) {
		return '
'.$content.'
'; } }

style.css を編集

子テーマ内の「style.css」に下のコードを挿入します。ちなみに右側を吹き出しにしない場合は、このコードは不要です。

style.css
/*--------------------------------------
自作の吹き出し(2列用)
--------------------------------------*/
.box2 {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  border: solid 4px #25D2FC;/*吹き出しの枠線*/
  border-radius: 10px;
  }
  .box2:before {
  border-right: 23px solid #25D2FC; /*吹き出しの枠線*/
  border-bottom: 20px solid transparent;
  border-top: 20px solid transparent;
  top: 30%;
  content: '';
  position: absolute;
  left: -23px;
  }
  .box2:after {
  content: '';
  position: absolute;
  border-right: 24px solid white;
  border-bottom: 20px solid transparent;
  border-top: 20px solid transparent;
  top: 30%;
  left: -17px;
  }
  @media screen and (max-width: 600px){/*モバイル表示*/
  .box2:before {
  border-bottom: 20px solid #25D2FC; /*吹き出しの枠線*/
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  top: -40px;
  content: '';
  position: absolute;
  left: 40%;
  }
  .box2:after {
  border-bottom: 20px solid white;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  top: -34.5px;
  content: '';
  position: absolute;
  left: 40%;
  }}
  .shtb2 .cell {
  vertical-align: middle;
  }

さらに、その下にこのコードを挿入します。width値を変更することで比率を変えることができます。表示が少しずれる可能性があるので適宜修正してください。

style.css
/*横2列表示 2:1*/
.yokorate {
  width: 100%;
  margin: 1.5em 0;
}
.yokorate .cell {
  display: table-cell;
  vertical-align: middle;
  width: 66%; /*左列のサイズ*/
}

.yokorate .cell:last-of-type {
  padding-left: 5px;  /*吹き出しを画像にかぶせない場合は20px*/
  width: 34%; /*右列のサイズ*/
}

 @media screen and (max-width: 600px){ /*モバイル表示*/
.yokorate .cell {
display: table;
width:100%;  /*左列のサイズ*/
}
.yokorate .cell:last-of-type {
width: 100%; /*右列のサイズ*/
margin:0 auto; /*中央寄せ*/
margin-top:5px; /*吹き出しを画像にかぶせない場合は15px*/
}
}

AddQuicktag にタグを登録

編集画面から簡単に挿入できるように、「AddQuicktag」に登録しましょう。

AddQuicktag
[yokorate responsive][cell]■[/cell][cell][box class="box2"]■[/box][/cell][/yokorate]

表示を確認して完成

パソコンで表示した時に、画像がより大きく表示できるようになりました。モバイルでの表示は特に変わりません。

左列が少し広くなったことにより、左に画像を配置して右に文章を書くのにちょうどいい感じになりました。ショートコードの使い分けによっていままでの1:1表示と、この2:1表示の併用ができるので試してみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です