アフィンガー5 (Wing)

難しいとは言わせない!?『WING(アフィンガー5)』でボックスタグを使いこなす

2019年1月5日

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

ブログで重要なポイントを読者に伝えたい時ってどのような方法を使っていますか?

文字を大きくしたり色を変えるといった方法があるとおもいます。

たしかにそのような方法を使うのもいいんですが、文字を装飾しすぎてしまうと読みにくくなってしまうんです。

そこで使うのがボックスを使ったカスタマイズです。

ポイント

ボックスを上手に使いこなせれば、このような内容もわかりやすく伝えることが出来るようになります。

そこで今回はWING(アフィンガー5)のボックス機能がどれほど使いやすいか紹介していこうと思います。

アイナ
この記事を読んだらWINGがどれだけユーザーに配慮されたテーマなのかがわかるようになってきますよ。

WINGテーマでボックスのデザインを自由にカスタマイズできるのが魅力の1つ

ワードプレスを使って1からボックスのデザインを作成するのって思っているよりも難しいんですよね。

HTMLの勉強をして作り上げるだけでも何日も掛けて作成しなければならないので、最終的に諦めてしまうかもしれません。

プラグインを用意してみるというのも1つの手ですが、数ある中で目的のプラグインを探すだけでも大変です。

現在販売されている有料テーマはどのワードプレスのテーマでも、ボックスが簡単に呼び出すことが出来るようになっているので、それほど苦労はしないでしょう。

ただボックスデザインって最初から用意されているテーマがほとんどで、自分で自由にカスタマイズが出来るワードプレスのテーマってあまり多くありません。

このボックスの枠線を別の色にしたいけど、どうやって変えればいいんだろう…?
ケロ蔵
ピョン太
見出しを変えたいけど、変更できないのかな?

テーマ開発者「すいません。
ボックスデザインはあらかじめ用意されているものからお使いください。

どうしてもデザインを変えたい場合は、CSSをカスタマイズしてご利用願います。

なお、こちらではカスタマイズに関してのサポートはしておりません。」

このような対応って意外に多いです。

せっかくいいテーマなのにも関わらず、自由にカスタマイズが出来ないのってもどかしいですよね。

WING(アフィンガー5)ではボックスのデザインを利用者の自由にカスタマイズが出来るように、ショートコード化されているので、利用者が思い描いているボックスデザインを自由に変更することが出来るようになっています。

アイナ
WINGは利用者の事を第一に考えている使いやすいテーマです!
ピョン太
…なんか売り込み臭がしなくね?

WING(アフィンガー5)で使えるボックスデザイン

WINGでは標準で使えるボックスデザインが沢山用意されています。

はじめのうちはカスタマイズをせずにそのまま使うだけでも十分見た目のいいボックスを使いこなすこともできますよ。

それでは最初から用意されているボックスを紹介していきます。
ここで紹介しているボックスはごく一部なので、他にどのようなデザインがあるのかは実際に買ってみてから確認しましょう。

ピョン太
他にWINGを紹介している人がいるから、そこで確認してもいいかもな。

スタイル

黄色ボックス

薄赤ボックス

グレーボックス

引用風

マイボックス

ポイント

基本

しかく(枠のみ)

まるみ

参考

参考

関連

関連

メモ

メモ

ポイント

ポイント

注意ポイント

注意ポイント

はてな

はてな

見出し付きボックス

見出し(全角15文字)

基本

注意

注意

はてな

はてな

ポイント

ポイント

メモ

メモ

ボックスデザインのデザインカスタマイズも簡単に変更可能

WINGはボックスタグを呼び出すときに下のようなショートコードが生成されます。

st-mybox title="ポイント" fontawesome="fa-check-circle" color="#757575" bordercolor="#BDBDBD" bgcolor="#ffffff" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"

/st-mybox

このショートコードを書き換えてボックスデザインをカスタマイズしていきます。

コレを見て「なんのこっちゃ?」と思っている人も使っていくうちに徐々に理解していくのがWINGのいいところです。

僕も最初のうちは同じように思ってました。
ケロ蔵

例えばbordercolor="#BDBDBD"という所だけ抜き出して説明すると、borderは日本語で線のことを指しており、colorは色ですね。

つまりbordercolorというのは線の色ということです。

そして"#BDBDBD"というのは色の種類を指しています。

カラーコードと呼ばれている色の種類を記号のようなコードに変換しているんです。
[カラーコード]で検索してみると様々な色を使うことが出来るんですよ。

+ (クリック)カラーコードとは?

色を表現するために用いられる文字の羅列からなる符号。

参考:wikipedia

 

同じようにbgcolor="#ffffff"bgというのはback groundの略で、背景の色ということですね。

アイナ
タグの意味がわかるようになれば、カスタマイズも楽しくなってきますよ。

カラーコードを使わなくても色の変更が可能!?

カラーコード以外にも"red"や"blue"といった馴染みのある色を英語で表記することでもカスタマイズをすることができます。

試しにbgcolorをredと入力するとこうなります。

ポイント

redと入力したボックス

背景の赤が濃すぎて文字が読みにくいですね。
では「tomato」という色に変えてみると…

ポイント

tomatoと入力したボックス

結構見やすくなったのではないでしょうか。

tomatoというのはこの記事を作るときに調べた色の名称です。

tomatoのカラーコード#ff6347でも同じ色を設定することができますよ。

一般的に知られている色だけだと数が限られてしまう上に濃い色になってしまうので、他の色を使ってみたい場合にはWEB色見本 原色大辞典というサイトを参考にしてみてください。

色の名称とカラーコードを同時に参照できるのでオススメですよ。

tomatoのカラーコード#ff6347でも同じ色を設定することができますよ。
ケロ蔵

ボックスの便利なカスタマイズ

ボックスを挿入するだけでも十分目立ちますが、それでも物足りないという方のために少しだけボックスを使ったカスタマイズを紹介していきます。

ここで紹介しているカスタマイズ以外にも様々な使い方が存在するので、自分で見つけて使ってみるのもいいかもしれませんね。

ボックスデザインのカスタマイズを教えてやるから上手く使いこなすんだぞ。
ピョン太
アイナ
ピョン太さん。言い方が悪いですよ。

ボックスの横サイズを小さくする方法

ボックスタグ自体に横サイズを変更するショートコードは無いようなので、別のショートコードと併用することによって、ボックスサイズを小さくすることができます。

レイアウトのタグを使うことによってボックスサイズが変更可能です。

ボックスの横サイズを変更する方法

  1. 【タグ】を選択。
  2. 【レイアウト】を選択。
  3. 【全サイズ左右free%】を選択。
  4. テキストエディタに切り替える。
  5. <div class="rbox" style="width: 50%;">右側のコンテンツ%</div>の部分を削除。
  6. <div class="lbox" style="width: 50%;">の50%の数値を書き換え以下のショードコードをコピーして使えばる。
  7. ビジュアルエディタに切り替える。
  8. 『左側のコンテンツ%』にボックスタグを挿入する。
  9. 『左側のコンテンツ%』を削除。

左右を分割して左側の部分のサイズを自由に変更すればボックスの横サイズを自由に短くすることが出来るようになります。

最後に『左側のコンテンツ%』は最後に消すようにしてください。
最初に消してしまうと、タグも一緒に消えてしまいレイアウトが崩れてしまいます。

どうしても先に消したいのでしたら、テキストエディタで消せばレイアウトが崩れずに問題なく使うことができますよ。

ボックスアイコンに動きをつける

ボックスアイコンのタイトルにはアイコンが表示されているタグがあります。

このアイコンに動きをつけることによって読者の目に止まりやすい効果があるので、積極的に使ってみてください。

ポイント

WINGではこのようにアイコンを動かすことができます。

アイナ
アイコンがふわふわ動いてかわいくないですか~?

ボックスアイコンを動かす方法

  1. 適当なボックスタグを挿入。(枠のみは除く)
  2. fontawesome="fa-check-circle"のeと"間をクリック。
    (fa-check-circleはアイコンのタグ)
  3. 【タグ】を選択。
  4. 【ショートコード補助】を選択。
  5. 【アニメーション(クラス)】を選択。
  6. 使いたいアニメーションを選択。

fontawesomeはアイコンのタグを指定しており、このタグの後ろにアニメーションのタグを入れることによってアイコンに動作を支持することが出来るようになります。

あとはWINGの標準機能を使うだけで、見出しアイコンに動きをつけることが出来るようになるんです。

あまり使いすぎると、落ち着きのないブログになってしまうから、適材適所で使いましょう。
ケロ蔵

WING(アフィンガー5)でボックスタグを使いこなそう

WING(アフィンガー5)でボックスのデザインについて紹介しました。

重要な部分をボックスで囲むことによって、読者に見てほしいポイントを伝えやすくなるので、使う価値は大いにあります。

ただボックスを使うだけではなく記事の内容にあったデザインを選択すれば、視覚的に見やすい記事に変わりますよ。

アイナ
ボックスの中に会話吹き出しも入れることが出来るので、使い方は無限大です!

-アフィンガー5 (Wing)
-,

Copyright© アフィノート , 2020 All Rights Reserved.