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

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

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

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

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

ピョン太

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

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

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

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

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

半分の横幅

1/3ぐらいの横幅

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

ケロ蔵

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

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

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

アイナ

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

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

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

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

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

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

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

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

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

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

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

レイアウトのタグを使えばボックスだけでなく会話アイコンや広告を横並びにすることができますよ。

ケロ蔵