2019年4月11日TwitterSharePocketHatenaLINEコピーするどうも。カエルブロガーのケロ蔵です。ブログで重要なポイントを読者に伝えたい時ってどのような方法を使っていますか?文字を大きくしたり色を変えるといった方法があるとおもいます。たしかにそのような方法を使うのもいいんですが、文字を装飾しすぎてしまうと読みにくくなってしまうんです。そこで使うのがボックスを使ったカスタマイズです。ポイントボックスを上手に使いこなせれば、このような内容もわかりやすく伝えることが出来るようになります。そこで今回はWING(アフィンガー5)のボックス機能がどれほど使いやすいか紹介していこうと思います。アイナこの記事を読んだらWINGがどれだけユーザーに配慮されたテーマなのかがわかるようになってきますよ。WINGテーマでボックスのデザインを自由にカスタマイズできるのが魅力の1つワードプレスを使って1からボックスのデザインを作成するのって思っているよりも難しいんですよね。HTMLの勉強をして作り上げるだけでも何日も掛けて作成しなければならないので、最終的に諦めてしまうかもしれません。プラグインを用意してみるというのも1つの手ですが、数ある中で目的のプラグインを探すだけでも大変です。現在販売されている有料テーマはどのワードプレスのテーマでも、ボックスが簡単に呼び出すことが出来るようになっているので、それほど苦労はしないでしょう。ボックスデザインって最初から用意されているテーマがほとんどで、自分で自由にカスタマイズが出来るワードプレスのテーマってあまり多くありません。見出しを変えたいけど、変更できないのかな?テーマ開発者「すいません。ボックスデザインはあらかじめ用意されているものからお使いください。してもデザインを変えたい場合は、CSSをカスタマイズしてご利用願います。こちらではカスタマイズに関してのサポートはしておりません。」このような対応って意外に多いです。いいテーマなのにも関わらず、自由にカスタマイズが出来ないのってもどかしいですよね。WING(アフィンガー5)ではボックスのデザインを利用者の自由にカスタマイズが出来るように、ショートコード化されているので、利用者が思い描いているボックスデザインを自由に変更することが出来るようになっています。アイナWINGは利用者の事を第一に考えている使いやすいテーマです!ピョン太...なんか売り込み臭がしなくね?WING(アフィンガー5)で使えるボックスデザインWINGでは標準で使えるボックスデザインが沢山用意されています。はじめのうちはカスタマイズをせずにそのまま使うだけでも十分見た目のいいボックスを使いこなすこともできますよ。それでは最初から用意されているボックスを紹介していきます。ここで紹介しているボックスはごく一部なので、他にどのようなデザインがあるのかは実際に買ってみてから確認しましょう。他にWINGを紹介している人がいるから、そこで確認してもいいかもな。注意はてなはてなポイントポイントメモメモボックスデザインのデザインカスタマイズも簡単に変更可能WINGはボックスタグを呼び出すときに下のようなショートコードが生成されます。0"/st-myboxこのショートコードを書き換えてボックスデザインをカスタマイズしていきます。コレを見て「なんのこっちゃ?」と思っている人も使っていくうちに徐々に理解していくのがWINGのいいところです。僕も最初のうちは同じように思ってました。bordercolor="#BDBDBD"という所だけ抜き出して説明すると、borderは日本語で線のことを指しており、colorは色ですね。bordercolorというのは線の色ということです。"#BDBDBD"というのは色の種類を指しています。カラーコードと呼ばれている色の種類を記号のようなコードに変換しているんです。[カラーコード]で検索してみると様々な色を使うことが出来るんですよ。(クリック)カラーコードとは?色を表現するために用いられる文字の羅列からなる符号。groundの略で、背景の色ということですね。アイナタグの意味がわかるようになれば、カスタマイズも楽しくなってきますよ。カラーコードを使わなくても色の変更が可能!?カラーコード以外にも"red"や"blue"といった馴染みのある色を英語で表記することでもカスタマイズをすることができます。試しにbgcolorをredと入力するとこうなります。ポイントredと入力したボックス背景の赤が濃すぎて文字が読みにくいですね。「tomato」という色に変えてみると...ポイントtomatoと入力したボックス結構見やすくなったのではないでしょうか。tomatoというのはこの記事を作るときに調べた色の名称です。tomatoのカラーコード#ff6347でも同じ色を設定することができますよ。原色大辞典というサイトを参考にしてみてください。色の名称とカラーコードを同時に参照できるのでオススメですよ。tomatoのカラーコード#ff6347でも同じ色を設定することができますよ。ケロ蔵ボックスの便利なカスタマイズボックスを挿入するだけでも十分目立ちますが、それでも物足りないという方のために少しだけボックスを使ったカスタマイズを紹介していきます。ここで紹介しているカスタマイズ以外にも様々な使い方が存在するので、自分で見つけて使ってみるのもいいかもしれませんね。ボックスデザインのカスタマイズを教えてやるから上手く使いこなすんだぞ。太アイナピョン太さん。ボックスの横サイズを小さくする方法ボックスタグ自体に横サイズを変更するショートコードは無いようなので、別のショートコードと併用することによって、ボックスサイズを小さくすることができます。レイアウトのタグを使うことによってボックスサイズが変更可能です。【レイアウト】を選択。【全サイズ左右free%】を選択。テキストエディタに切り替える。50%;">右側のコンテンツ%</div>の部分を削除。50%;">の50%の数値を書き換え以下のショードコードをコピーして使えばる。ビジュアルエディタに切り替える。『左側のコンテンツ%』にボックスタグを挿入する。『左側のコンテンツ%』を削除。左右を分割して左側の部分のサイズを自由に変更すればボックスの横サイズを自由に短くすることが出来るようになります。最後に『左側のコンテンツ%』は最後に消すようにしてください。最初に消してしまうと、タグも一緒に消えてしまいレイアウトが崩れてしまいます。しても先に消したいのでしたら、テキストエディタで消せばレイアウトが崩れずに問題なく使うことができますよ。ボックスアイコンに動きをつけるボックスアイコンのタイトルにはアイコンが表示されているタグがあります。このアイコンに動きをつけることによって読者の目に止まりやすい効果があるので、積極的に使ってみてください。ポイントWINGではこのようにアイコンを動かすことができます。適当なボックスタグを挿入。(枠のみは除く)fontawesome="fa-check-circle"のeと"間をクリック。(fa-check-circleはアイコンのタグ)【タグ】を選択。【ショートコード補助】を選択。【アニメーション(クラス)】を選択。使いたいアニメーションを選択。fontawesomeはアイコンのタグを指定しており、このタグの後ろにアニメーションのタグを入れることによってアイコンに動作を支持することが出来るようになります。あとはWINGの標準機能を使うだけで、見出しアイコンに動きをつけることが出来るようになるんです。使いすぎると、落ち着きのないブログになってしまうから、適材適所で使いましょう。ケロ蔵WING(アフィンガー5)でボックスタグを使いこなそうWING(アフィンガー5)でボックスのデザインについて紹介しました。重要な部分をボックスで囲むことによって、読者に見てほしいポイントを伝えやすくなるので、使う価値は大いにあります。ボックスを使うだけではなく記事の内容にあったデザインを選択すれば、視覚的に見やすい記事に変わりますよ。(Wing)アフィンガーの会話吹き出し機能の効果的に使ってみよう!どうも。カエルブロガーのケロ蔵です。通常のテキストとは違って、会話形式でやり取りをすることができるので、状況によって結構使えるんですよね。(Wing)初心者はシリウスとワードプレスどっちを使えばいい?アフィリエイトに興味があっていろいろと調べていくうちにシリウスやワードプレスという名称を見たことがあると思います。(Wing)アフィンガーでyoutubeのショートコードを使って軽くするための対策どうも。カエルブロガーのケロ蔵です。最近はブログでも動画を使って紹介している人が多くなってきましたね。berg)を使いこなせばブログが楽しくなる!こんにちは。最近はこのブログの更新頻度も落ちてきていますが、ブログそのものは現在も継続していますので、ご安心ください。(Wing)WPテーマWINGだとアイコンや画像のアニメーションも設定できるどうも。カエルブロガーのケロ蔵です。ブログの記事って静的な物が多く、動的な記事ってほとんど見かけません。休日は外に出かけず、1日中家にこもりっきりのインドア派。30代後半でブログで稼げるというのを知り、少しずつアクセスが増えはじめて本当に稼げるものだと実感している日々です。