目次＼(^o^)／
アルバトロスはアホウドリ
WordPressの有料テーマである「アルバトロス」。アホウドリです。カラスではありません。
アルバトロスの専用ショートコードを使えば簡単にカラム表示も出来ます。
HTMLとかCSSとか分からなくても全然OK。
カラムって何だ？
そもそもカラムとはなんぞや。
カラムはエクセル（Excel）でいうと「列」です。縦方向。
縦は「列」
- 列の数
2カラムは2列、3カラムは3列です。
ブログではメインコンテンツを中心に、左右にサイドバーが来ます。
もちろん、私は「行」と「列」が、どっちか分からなくなる時が頻繁にあります。(^o^)
アルバトロスは2カラム
ブログは3カラムまでありますが、アルバトロスはシンプルな2カラムがデフォルトになっています。
アルバトロスはスマホに対応しているので、「パソコンでは2カラム表示」で「スマホでは1カラムで表示」してくれます。
スマホではサイドメニューは下に
PCでは2カラム表示。
PC版はサイドメニューが右。
スマホでは縦長の1カラム表示に。
スマホ版はサイドメニューが下に来る。
何もいじらなくても、デフォルトでこの設定になっているのがポイント。
記事内で2カラム表示できる
メインコンテンツ内での2カラム表示を、ショートコードを使って簡単できます。
注意点
- 記事内のカラム機能は、スマホやタブレットでは1カラムで表示されます。
パソコンとスマホ表示の違い
パソコンでは２カラム表示されても、スマホやタブレットでは1カラム表示になります。
パソコンでは横並びだったものが、スマホでは縦並びになってしまうので注意。
- イメージ映像
スマホでは横並びが縦になる
スマホ表示の場合は、ブログ自体も「1カラム化」。
記事内も「1カラム化」するということなのです！
ブログ記事ではこのように表示されます。
- パソコン表示は2カラム。
パソコン表示では良いが・・・
スマホでは1カラム表示に。
矢印が意味不明になる
1カラムと化した2カラム。
2カラム表示のやりかた
本編。
- 2カラムのサンプル。
1カラム目
2カラム目
2カラムの入力方法はこちら。
[colwrap][col2]画像 1カラム目[/col2][col2]画像 2カラム目[/col2][/colwrap]
記事内の2カラムは、ワード（Word）でいうと「段組みと段区切り」のようなもの。
真ん中でバッサリ
カラムの調整
アルバトロスは画像がデカくても、ブログからはみ出たりはしません。
画像のサイズをブログの横幅に合わせて自動で調整してくれます。
ちなみに、画像が小さいとこうなります。
1カラム目2カラム目
画像のサイズが小さいと文字がうまく下に入らないので、画像の下に改行（Shift＋Enterなど）を入れたほうが安定します。
画像や文字だけを中央揃えにしたいときは、改行を混ぜると良いです。
- 入力サンプル
[colwrap][col2]画像
1カラム目[/col2][col2]
画像
2カラム目[/col2][/colwrap]
- 中央揃えサンプル。
1カラム目
2カラム目
比較や解説に使うのが有効かも。
←このひよこたちはゴーストカミカゼアタックを決めようとしているぞ！気をつけろおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお
3カラム表示
3カラム表示もショートコード入れれば簡単に出来ます。
入力方法はこちら。
[colwrap][col3]1カラム目[/col3][col3]2カラム目[/col3][col3]3カラム目[/col3][/colwrap]
- 3カラムのサンプル。
1カラム目
←作戦会議。
作戦開始。→
2カラム目
3カラム目
注意点
- 記事内のカラム機能は、スマホやタブレットでは1カラムで表示されます。
ショートコードの入力は「AddQuicktag」と組み合わせると非常に便利です。
関連記事：『WordPress』 ショートコードとかの面倒な入力とかが楽になるプラグイン【AddQuicktag】
コメントを残す