アルバトロスの使い方。ショートコードで記事内のカラム表示も簡単にできる!

スポンサーリンク
2016-07-02_152528

アルバトロスはアホウドリ

WordPressの有料テーマである「アルバトロス」。アホウドリです。カラスではありません。

 

アルバトロスの専用ショートコードを使えば簡単にカラム表示も出来ます。

HTMLとかCSSとか分からなくても全然OK。

 

 

カラムって何だ?

そもそもカラムとはなんぞや。

 

カラムはエクセル(Excel)でいうと「列」です。縦方向。

2016-07-02_130636

縦は「列」

 

  • 列の数

2カラムは2列、3カラムは3列です。

ブログではメインコンテンツを中心に、左右にサイドバーが来ます。

 

もちろん、私は「行」と「列」が、どっちか分からなくなる時が頻繁にあります。(^o^)

 

 

アルバトロスは2カラム

ブログは3カラムまでありますが、アルバトロスはシンプルな2カラムがデフォルトになっています。

 

アルバトロスはスマホに対応しているので、「パソコンでは2カラム表示」で「スマホでは1カラムで表示」してくれます。

2016-07-02_141737

スマホではサイドメニューは下に

 

 

PCでは2カラム表示。

2016-07-02_150222

PC版はサイドメニューが右。

 

 

スマホでは縦長の1カラム表示に。

2016-07-02_142503

スマホ版はサイドメニューが下に来る。

 

何もいじらなくても、デフォルトでこの設定になっているのがポイント。

 

記事内で2カラム表示できる

メインコンテンツ内での2カラム表示を、ショートコードを使って簡単できます。

 

注意点

  • 記事内のカラム機能は、スマホやタブレットでは1カラムで表示されます。

 

パソコンとスマホ表示の違い

パソコンでは2カラム表示されても、スマホやタブレットでは1カラム表示になります。

 

パソコンでは横並びだったものが、スマホでは縦並びになってしまうので注意。

 

  • イメージ映像
2016-07-03_091448

スマホでは横並びが縦になる

 

スマホ表示の場合は、ブログ自体も「1カラム化」。

記事内も「1カラム化」するということなのです!

 

 

ブログ記事ではこのように表示されます。

  • パソコン表示は2カラム。
2016-07-02_102846

パソコン表示では良いが・・・

 

スマホでは1カラム表示に。

2016-07-02_104416

矢印が意味不明になる

 

1カラムと化した2カラム。

 

2カラム表示のやりかた

本編。

 

  • 2カラムのサンプル。
PAK85_enjinahirucyan_TP_V
1カラム目
PAK88_amazonst_TP_V
2カラム目

 

 

 

2カラムの入力方法はこちら。

[colwrap][col2]画像 1カラム目[/col2][col2]画像 2カラム目[/col2][/colwrap]

 

 

記事内の2カラムは、ワード(Word)でいうと「段組みと段区切り」のようなもの。

2016-07-02_095917

真ん中でバッサリ

 

 

カラムの調整

アルバトロスは画像がデカくても、ブログからはみ出たりはしません。

画像のサイズをブログの横幅に合わせて自動で調整してくれます。

 

 

ちなみに、画像が小さいとこうなります。

スポンサーリンク
PAK85_enjinahirucyan_TP_V1カラム目
PAK88_amazonst_TP_V2カラム目

 

 

 

画像のサイズが小さいと文字がうまく下に入らないので、画像の下に改行(Shift+Enterなど)を入れたほうが安定します。

画像や文字だけを中央揃えにしたいときは、改行を混ぜると良いです。

 

  • 入力サンプル
[colwrap][col2]

画像

1カラム目[/col2][col2]

画像

2カラム目[/col2][/colwrap]

 

 

  • 中央揃えサンプル。

PAK85_enjinahirucyan_TP_V
1カラム目

PAK88_amazonst_TP_V

2カラム目

 

 

比較や解説に使うのが有効かも。

PAK85_enjinahirucyan_TP_V

←このひよこたちはゴーストカミカゼアタックを決めようとしているぞ!気をつけろおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお

 

スポンサーリンク

 

3カラム表示

3カラム表示もショートコード入れれば簡単に出来ます。

 

入力方法はこちら。

[colwrap][col3]1カラム目[/col3][col3]2カラム目[/col3][col3]3カラム目[/col3][/colwrap]

 

 

  • 3カラムのサンプル。
PAK85_enjinahirucyan_TP_V
1カラム目

←作戦会議。

作戦開始。→

2カラム目

PAK88_amazonst_TP_V

3カラム目

 

 

注意点

  • 記事内のカラム機能は、スマホやタブレットでは1カラムで表示されます。

 

 

ショートコードの入力は「AddQuicktag」と組み合わせると非常に便利です。

アルバトロス

関連記事:『WordPress』 ショートコードとかの面倒な入力とかが楽になるプラグイン【AddQuicktag】

 

よしぼっち
ゲームと漫画が大好きな30代です。

熱しやすく冷めやすいので、ブログは気まぐれ更新です。

発達障害を味方につけて、ネットでご飯を食べています。

詳しいプロフィールはこちら→ プロフィール

お問い合わせこちら→ お問い合わせ

メールマガジンはこちら→ メールマガジン

LINE@始めました\(^o^)/

友だち追加
スポンサーリンク

この記事が気に入ったら
いいね!しよう

Twitter で


発達障害の攻略本を無料プレゼント

発達障害の社会不適合者がこの先生き残るための方法をを伝授します\(^o^)/

コメントを残す

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