どうも。カエルブロガーのケロ蔵です。
突然ですが、ブログを運営しているあなたは画像や広告を横並びにしたいと思ったことはありませんか？
比較をするために画像を横並びにしたいと思っていても、どうやってやればいいの分からず最終的に縦にして並べ、妥協したことはあるのではないでしょうか。
WINGでは画像を横並びにするためのショートコードが標準搭載されているので、使い方さえわかれば誰にでも画像や広告を横並びにすることが出来るようになります。
そこで今回はレイアウトを変えるための方法について紹介していこうと思います。
記事を横並びにするのに便利なレイアウトのショートコード
画像を横に並べて見たいと思ったことは誰しもあると思います。
そんなのときにすごく使える便利なショートコードがこの『レイアウト』です。
レイアウトはこのメインコンテンツの構成を分割して表示することが出来るようになり、画像を横に並べることだって出来るようになるんですよ。
ちなみにスマホでは画面の大きさが小さいので縦に並んでいます。
ケロ蔵
アイナ
ピョン太
このように一列に画像を最大で３つ並べることが出来るので、比較画像を同時に表示させたいときに便利です。
しかも難しい知識は必要なく、あらかじめ用意されているものを選ぶだけで誰でも使うことが出来るようになっています。
レイアウトの種類
WINGで使えるレイアウトのショートコードは以下です。
レイアウト一覧
- PCとTab3分割
- PCとTab左右40:60%
- PCとTab左右50%
- 全サイズ左右30:70%
- 全サイズ左右50%
- 全サイズ左右free
他にもありますが、メインで使うのはコレぐらいでしょう。
このレイアウトを変更するためのショートコードを使って画像や広告を横並びにすることが出来るようになります。
左右のバランスを自分で決めたい場合の対応
あらかじめ用意されているレイアウトのサイズに該当しない場合は【全サイズ左右free】のショートコードを使えば、自分で左右のバランスを指定することができます。
全サイズ左右freeのショートコード
<div class="clearfix responboxfree smartfree">
<div class="lbox" style="width: 50%;">
左側のコンテンツ%
</div>
<div class="rbox" style="width: 50%;">
右側のコンテンツ%
</div>
</div>
このタグに２箇所ある『50%』という部分の数値を書き換えるだけで左右のバランスを変更することができます。
最初の50%は左側、最後の50%は右側に対応しているので好きなようにいじってみましょう。
ちなみに100%を超えて入力するとレイアウトが崩れてしまうので、100%以内になるように調整してください。
スマホなどの小さい画面ではどのように表示される？
PCやタブレットのような画面の大きいデバイスなら問題なく表示されるようになりますが、スマートフォンのような小さい画面だと正常に反映されないこともあります。
全サイズの指定をしてあげれば、スマホでも横並びに表示することもできますが、画像は画面に合わせて縮小されて表示されるので、大きく見せたいときにはレイアウトの変更はしないほうがいいでしょう。
全サイズ左右50%のショートコードを使った場合は上のような表示になります。
スマホで画面を確認してみてください。
レイアウトの分割を効果的に使うための応用技
このレイアウトの分割は画像や広告を横並びにするだけではありません。
他のショートコードと組み合わせることによって、さらに記事のデザインを良くすることが出来るようになるので、ぜひ使ってみてください。
ボックスの横サイズを小さくする
ボックスを挿入すると横に広がってしまうので、テキストの量とのバランスが悪くなってしまいます。
このレイアウトショートコードと組み合わせれば、ボックスの横幅を短くする事もできるようになりますよ。
ボックスの横サイズを変更する方法
- 【タグ】を選択。
- 【レイアウト】を選択。
- 【全サイズ左右free%】を選択。
- テキストエディタに切り替える。
<div class="rbox" style="width: 50%;">右側のコンテンツ%</div>の部分を削除。<div class="lbox" style="width: 50%;">の50%の数値を書き換え以下のショードコードをコピーして使えばる。- ビジュアルエディタに切り替える。
- 『左側のコンテンツ%』にボックスタグを挿入する。
- 『左側のコンテンツ%』を削除。
左右を分割して左側の部分のサイズを自由に変更すればボックスの横サイズを自由に短くすることが出来るようになります。
最後に『左側のコンテンツ%』は最後に消すようにしてください。
最初に消してしまうと、タグも一緒に消えてしまいレイアウトが崩れてしまいます。
どうしても先に消したいのでしたら、テキストエディタで消せばレイアウトが崩れずに問題なく使うことができますよ。
-
-
難しいとは言わせない！？『WING（アフィンガー５）』でボックスタグを使いこなす
どうも。カエルブロガーのケロ蔵です。 ブログで重要なポイントを読者に伝えたい時ってどのような方法を使っていますか？ 文字を大きくしたり色を変えるといった方法があるとおもいます。 たしかにそのような方法 ...
続きを見る
アドセンス広告を横並びにする
Googleアドセンスでアドセンスコードを左右のレイアウトにそれぞれ貼り付ければ、広告を横並びにすることが出来るようになります。
- PCとTab左右50%もしくは全サイズ左右50%でレイアウトを分割。
- 左右それぞれにアドセンスコードを貼り付ける。
基本的な使い方はこれだけです。
この方法を知っているだけでもアドセンスを横並びに表示させることができます。
レイアウトを組み合わせれば可能性は無限大
WINGでレイアウトを分割する方法について紹介しました。
まとめ
- タグを選択
- レイアウトを選択
- 任意のレイアウトを選択
サイズを変更したいときはテキストエディタに切り替えて、数値を書き換える。
これだけ覚えておけば画像を横並びにすることが簡単に実行することができるようになります。
あとはアイデア次第でいろんな使い方を探してみましょう。