AFFINGER5

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

 

・ボックスをおしゃれに作りたい!

・どうやってカスタマイズすればいいかわからない!

 

こんな疑問を解決します。

 

この記事を書いた人

・ブログ歴7か月の大学生ブロガー。初心者ブロガーに役立つ記事を作成中!

・AFFINGER5(アフィンガー)の悩み解決記事も量産!

Twitter(@Blog624renoru)はこちら!

 

さて、今回は【初心者向け】AFFINGER5(アフィンガー)でボックスを簡単にデザインする方法というテーマで書いていきます。

 

この記事を通して、おしゃれなボックスのデザインの作り方を習得しましょう!

 

この記事のマネをするだけで出来るよ!

 

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

 

 

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

 

ボックスの手順は以下の通りです。

 

ボックス作成の手順

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

 

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

マイボックスをクリック!

はじめにマイボックスをクリックしましょう。

クリックすると、下の画像のようなショートコードが記入されます。

 

マイボックスをクリックすると打ち込まれるコード

 

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

こんな感じ。

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

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

 

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

 

まずはコードの意味を軽く覚えましょう。

どのコードに挿入すると、どんな変化があるかを把握しよう!

 

覚えておくべきコード

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

color=""  / 文字のカラー

bordercolor=""  / 枠のカラー

bgcolor=""  / 背景カラー

borderwidth=""  / 枠の太さ

borderradius=""  / 枠の丸さ加減

 

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

 

サンプル

サンプル

サンプル

サンプル

 

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

 

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

 

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

手順通りマイボックスをクリックして、枠で囲った部分にコードを打ち込みます。

 

実際にカスタマイズ!

 

上の画像をプレビューしてみましょう!

 

こんな感じで、枠にカラーを付けて背景を白にしました!

 

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

 

初心者の方はカラーコードがわからないかもしれません。

でも安心してください。

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

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

 

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

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

 

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

 

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

 

今回はここまで。

 

 

 

  • この記事を書いた人
  • 最新記事

れのる

読書&アウトドアが好きな大学生ブロガー。 関西の大学に通いながら、ブログを運営中! ブログ運営&書籍レビューをメインに発信しています。 書籍レビューはこれまでにない、学べて面白さが伝わるレビュー記事になっています。気になる方は見てね!

-AFFINGER5

© 2021 renolog Powered by AFFINGER5