AFFINGER5 ブログ運営

【初心者向け】AFFINGER5(アフィンガー)でボックスを簡単にデザインする方法

 

こんにちは、れのる(@Blog624renoru)です

 

初心者の方の中には、ボックスが上手くデザインできない!といったことがあるかと思います。

この記事では、初心者の方がすぐに実践できるボックスデザインをシンプルに解説していきます。

簡単にできるので、ぜひマネしてみてね!

 

こんな悩みを解決!

・AFFINGER5を導入したけど、ボックスデザインの使い方がわからない

 

さっそくやっていきましょう!

 

好きなボックスを作成しよう

 

ボックスの手順は

  1. マイボックスをクリック
  2. 好きなようにカスタマイズ
  3. 完了

これだけです。

 

手順①:マイボックスをクリック

画像の赤枠で囲ったマイボックスをクリック。

すると青枠のようなコードが打ち込まれます。

難しくないので焦らないでね!

 

これをプレビューしてみると・・・

こんな感じ。

何とも味気ないですよね。

なのでカスタマイズ(カラー&枠)していきます。

 

手順➁:好きなようにカスタマイズ

まずは、コードを軽く覚えましょう!

と言っても書いてある通りです。

覚えておくべきコード

st-mybox tiyle""  / 枠のタイトル

color=""  / 文字のカラー

bordercolor=""  / 枠のカラー

bgcolor=""  / 背景カラー

borderwidth=""  / 枠の太さ

borderradius=""  / 枠の丸さ加減

 

この "" の間に自分の好きなコードを打ち込むと、カラーや枠の太さ etc が反映されます。

 

サンプル

サンプル

サンプル

サンプル

 

言葉だけじゃ難しいと思うので、画像を使って解説していきますね。

 

実際にコードを入力してみよう

試しに青色の枠を作ってみましょう。

はじめに「マイボックス」をクリックします。

緑色の枠で囲った部分にコードを打ち込みましょう。

 

これをプレビューで確認してみると・・・

こんな感じ。

上手くカスタマイズできました!

 

ポイント:カラーコードはここから選ぶ

でもカラーコードがわからないよと思うかもしれません。

安心してください。

初心者の方にぴったりのカラーコード一覧がありますよ!

「タグ」→「ショートコード補助」→「HTMLカラー」→「カラーコード」をクリック。

 

これだけで、好きなカラーを選択できるようになっています。

バリエーションはあまり多くないですが、初心者の方には十分かなと思います。

他の色も使いたくなったら、HTMLカラー一覧で好きなものを探してみてください。

 

誰かの役に立てればうれしいです。

 

今回はここまで。

 

 

 

-AFFINGER5, ブログ運営

© 2020 renolog Powered by AFFINGER5