アフィンガー5 (Wing)

WING(アフィンガー5)でボックスの横幅を簡単に短くする方法

どうも。カエルブロガーのケロ蔵です。

ボックスは使っていますか?

ボックスを設置すれば注目してもらいたいポイントを目立たせることができるので、アフィリエイトをやるうえでは欠かせない機能ですね。

ただ普通に使っていた場合だとボックスの横幅が長くなってしまい、見栄えが悪くなってしまうので、どうにかして短く出来ないかな~と探していた所、偶然見つけた方法を紹介しようと思います。

ピョン太
ボックス内のテキストが短いとボックスの横幅が長くなるから気になってしまうんだよな。

WINGでボックスの横幅を短くする手順とは?

WINGの機能をそのまま使ってボックスタグを設置した場合、以下のように表示されます。

ポイント

サンプル1
サンプル2
サンプル3

ボックスの中に入れるテキストが短い場合、ボックスの横幅が長く見えてしまい、右側の空白が気になってしまいます。

ショートコード内にHTMLタグを含める方法もありますが、実はWINGの機能だけを使って簡単にボックスの幅を変更することができるようになるんですよ。

半分の横幅

ポイント

サンプル1
サンプル2
サンプル3

 

1/3ぐらいの横幅

ポイント

サンプル1
サンプル2
サンプル3

WINGのショートコードだけを組み合わせて編集しています。
ケロ蔵

このようにボックスの横幅を狭めることがあっという間にできちゃう裏技を紹介します。

ココに注意

この方法を使う際にはPC・スマホ共にプレビューで正常に反映されているか確認してください。

テキストをリスト化すると文字崩れがしやすいみたいです。

まずはじめにボックスを置きたい箇所を選択して「タグ」→「レイアウト」→「全サイズ左右free%」を選択します。

このタグを使うことによって左右に並べてレイアウトを変えることができるようになります。

アイナ
全サイズを対象にするとスマホ画面もボックスが小さくなってしまうので、PCとTab左右50%に置き換えるだけもいいかもしれませんね。

 

次にボックスタグを設置しますが、左側のコンテンツ%と表示されている下にタグを入れましょう。

左側のコンテンツ%を先に消してしまうとタグが崩れてしまい、上手く表示されなくなりますので、あとから消すようにしてください。

 

これでボックスタグの設置は完了しました。

 

最後に邪魔になった右側のコンテンツ枠を削除します。

テキストエディタに切り替えたら、右側のコンテンツタグである

<div class="rbox" style="width: 50%;">

右側のコンテンツ%

</div>

この部分を一気に消してください。

これで横幅が短いボックスを設置することができました。

 

パソコン環境によっては文字入力ができない場合もあります。

そんな時はテキストエディタに切り替えることによって、テキストを打つことができますよ。

横幅をもう少し長くしたい場合は、style="width: 50%;"の数値を増減することで自由に横幅を長くしたり短くしたりすることができます。

レイアウトのタグを使えばボックスだけでなく会話アイコンや広告を横並びにすることができますよ。
ケロ蔵
WPテーマ『WING(アフィンガー5)』で画像を横並びにする方法

どうも。カエルブロガーのケロ蔵です。 突然ですが、ブログを運営しているあなたは画像や広告を横並びにしたいと思ったことはありませんか? 比較をするために画像を横並びにしたいと思っていても、どうやってやれ ...

続きを見る

-アフィンガー5 (Wing)

Copyright© アフィノート , 2019 All Rights Reserved.