【AFFINGER5】テキストエディターボタン「PCとTab左右50％」の使い方

有料テーマ 【WING（AFFINGER5）】 には便利なエディターボタンがたくさんあります。その中の１つ「PCとTab左右50％」ボタンの使い方ページです。

今回、新テーマに切り替えた操山労務管理事務所さんのサイトを参考に使わせて頂きまーす。

WING（AFFINGER5）ならではのエディターボタン

エディターボタンとは、投稿編集画面にあるボタンのことです。下↓はテキストエディター側のボタン。

このボタンが、AFFINGER5は豊富です。↑のサンプル画面ではボタンを少なくしています。

エディターボタンの表示設定

affinger5をインストール有効化すると、管理メニューの下の方に【AFFINGER5 管理】というメニューが追加されます。

【AFFINGER 管理】をクリック⇒【投稿・固定記事】をクリック！

画面を下げると1番下に【テキストエディタで非表示にしたいボタン】というのがあります。ここで、表示・非表示を設定してます。

使わないボタンは、チェックをいれ非表示にして、【SAVE】で設定を保存して下さい。

テキストエディタ側のボタンを少なくしているだけで、ビジュアルエディタ側から全部のボタンが使えます。

「PCとTab左右50％」ボタンを使うとレスポンシブデザインで美しくレイアウトできる！

このボタンを使ってレイアウトすると、パソコンやタブレットで見ると、↓のように左右均等な幅の並びで表示されます。

スマホで見ると、上下の並びに自動変換されて表示されます。

これを自分でCSS設定していこうとすると時間がかかりますが、 【WING（AFFINGER5）】 なら簡単ワンクリック！( ・ㅂ・)و ̑̑

「PCとTab左右50％」の使い方

テキストエディタ側がボタン1回クリックで簡単

タブ「テキスト」側を開き、レイアウトを配置したい場所にカーソルを置き、「PCとTab左右50％」ボタンを1回クリック！

本文内にタグがずらっと入ります。

「左側のコンテンツ50％」の部分に、左側に配置したい画像や文言をいれる。同じように、「右側のコンテンツ50％」の部分に右側に配置したい画像や文言をいれる。

これだけで、その人が見てるデバイスの横幅に合わせて、左右横並びか上下縦並びになります。なんて簡単っ！(๑•̀ㅂ•́)و✧

画像をいれる時は、大サイズで。

画像をいれる場合、パソコンから見たサイズ感だけで考えずに、スマホ（縦長）で見た時のサイズ感も考えて、大サイズでいれておくとキレイです。

メディアで画像を選択し、①配置は「中央」を選択、②リンク先は「なし」か「メディアファイル」を選択、③サイズは「大サイズ」を選択する。

「メディアファイル」を選択すると、画像をクリックした時に大サイズが表示されます。サイズは、「設定⇒メディア」やプラグイン【Imsanity】でアップロードサイズを設定できます。

大サイズを選択する理由

メディアのサイズを、中サイズ（横幅300px）にすると、スマホで見た時に下↓のような感じになります。

まぁこれでも悪くないけど、大サイズにしておけば、横幅ピッタリになりレイアウトが美しいです。＞お好みで中サイズか大サイズか選択して下さい。

行間は詰めなくてOK！

1回下書き保存や公開をすると、下↓のように文字の場合は上下に改行スペースが入ります。

表側を見れば分かりますが、余分な改行は入りませんので、この改行スペースは詰めなくて良いです。手動で詰めても、「更新」保存すれば、また入ります。

ビジュアルエディター側からの選択場所

ビジュアルエディター側からも「PCとTab左右50％」ボタンは選択できます。

タブの「ビジュアル」側を開いて、「タグ」⇒「レイアウト」⇒「PCとTab左右50％」を選択すれば、タグが入ります。ビジュアルエディタ側からだと枠線で見えます。

レイアウトには、他にもあります。使い方は同じです。パソコンからでもスマホからでもレイアウトが崩れないので、このレイアウトボタンを上手く使って見やすいサイトにしましょう！

ポラロイド風もワンクリックで！

ちなみに。①画像のタブ部分をドラッグして、②「ポラロイド風」をクリックすると、簡単にポラロイド風の画像になります。

画像のタグが、ポラロイド風の設定タグ＜div class="st-photofu"＞＜/div＞で囲まれました。これでOK！

タグを消さないように注意！

レイアウトが崩れる理由は、気づかないうちに＜/div＞などの締めタグを消してしまうことによって起こります。

＜div＞ではじまったタグは、必ず＜/div＞で締めます。レイアウトが崩れたら、このペアの数が合ってるか確認しましょう！