アフィンガー6

アフィンガー6でボックスの作り方を解説

わたしがアフィンガー6を購入して、真っ先にやりたかった事

・きれいなボックスを作りたい
・きれいなタイトル付のボックスを作りたい

って思ったので購入しました。

が、

初期状態ではボックスがないのです。

ググりまくってわかった事は、プラグインの

Advanced Editor Tools (旧名 TinyMCE Advanced)←クラシック版の段落とも言う。

が必要だった事を知り、さっそくインストールする。

クラシック版段落からタグに入って、いろいろなボックスメニューがあって
さすがアフィンガー6だなって思います。

なぜボックスが必要なのか

文字だけの記事って、読むのがイヤになってきませんか?

それでもボックス内の文字って、

何か重要な事が書かれているって、読者に感じさせる事ができます。

なので、ボックス内の文章は基本的には箇条書きです。

ひとつのボックスデザインを選んで、表示させると

あれっ!

なにやら、難しそうなプログラミング言語が現れた。

一瞬、不安がよぎる。

しかし

プレビュー表示させてみると、しっかりとボックスができていた。

関連

そういう事かー。

タイトル付ボックスを分解してみた

アフィンガー6で、出来上がっているボックスを使う事ができますが
それをカスタマイズしてお好みの色や、文字にかえる事ができます。

その為には、ショートコードと言われるコードの意味を知らなければいけません。

title="" ボックスのタイトル名が入る

忘れ物リスト

title="忘れ物リスト"


 

webicon=タイトル名横のアイコンのコードが入る
    タグ>ショートコード補助>WEBアイコン(クラス)の中の記号たち

見出し

webicon="st-svg-heart" WEBアイコンからハートをえらんだ


 

bordercolor=ボックスの枠色

ポイント

bordercolor="#4CAF50"

ショートコード補助>HTMLカラーコード>"#4CAF50"(緑)を選んだ

 

color=""=見出し文字の色

はてな

color="#424242"

ショートコード補助>HTMLカラーコード>"#424242"(黒)を選んだ


 

bgcolor=""ボックス内の背景色

bgcolor="#E1F5FE"

ショートコード補助>HTMLカラーコード>"#E1F5FE"(青薄)を選んだ


 

色コードは原色大辞典からでも確認できますが

アフィンガー6内のクラシック版段落からも確認ができます。

タグ > ショートコード補助  > HTMLカラーコード  で17色のコードが確認ができます

アフィンガー6の色コードはとっても便利です

ブログ記事を書いている時に色コードを使う時ってあると思います。 特に背景色で使う事が多いのではないでしょうか。 STINGERタグに登録しておくのも一つの手段ではありますが もっと手軽に アフィンガー ...

続きを見る

 

まとめ

アフィンガー6では、デフォルトでも十分なボックスの種類がありますが

それだけでは他の人と被ってしまう可能性が大きくなります。

ネットの世界では、オリジナリティがとても大切な要素になるので
ぜひ、いろいろと試してみて下さい。

アフィンガー6はカスタマイズがしやすいように設計されているテーマです。

アフィンガー6の色コードはとっても便利です

ブログ記事を書いている時に色コードを使う時ってあると思います。 特に背景色で使う事が多いのではないでしょうか。 STINGERタグに登録しておくのも一つの手段ではありますが もっと手軽に アフィンガー ...

続きを見る

 

-アフィンガー6