AFFINGER

AFFINGER5でボックスをカスタマイズする方法【点線も可能】

2021年2月8日

 

ライオンのイラスト

悩む学生
AFFINGER5でおしゃれなボックスを作りたいんだけど、どうすればいいのか教えてほしい。有名なブロガーさんが使っているようなボックスにしたいです。

 

今回はこんな悩みを解決します。

 

AFFINGER5の強みの1つであるカスタマイズ性ですが、利用始めたてのころはなかなか扱いこなせないもの。

 

「あの有名なブロガーさんみたいなボックスを作りたいんだけどな~」みたいに思っても、ピンポイントで紹介している記事は多くなくどうすればいいのか悩みますよね。

 

そんな有名なブロガーさんみたなボックスを簡単に作りたいあなたに向けて、AFFINER5でのボックスカスタマイズ方法を紹介します。

 

ちなみに今回紹介するボックスのイメージはこんな感じ。

AFFINGER5ボックスデザイン①

AFFINGER5ボックスデザイン②

  1. サンプル
  2. サンプル

AFFINGER5ボックスデザイン③

  1. サンプル
  2. サンプル

 

この記事を見れば、AFFINER5でのボックスのカスタマイズ方法が分かり、あなたのブログがもっとおしゃれになりますよ。

 

AFFINER5のボックスカスタマイズ方法

AFFINER5のボックスカスタマイズ方法点線を使う(manablogさん風)

このボックスデザインはアフィリエイト先駆者的な存在でもあるマナブさんがよく使っているもの。

 

結論からいうと以下のCSSHTMLをコピーすればOK。これでマナブさん風なボックスをAFFINGER5でも再現可能になります。

 

 CSS
/*ボックス枠破線*/
.st-mybox {
border: dashed;/*点線*/
}
/*ボックス枠破線ここまで*/

 

 command
[st-mybox title="" fontawesome="fa-check-circle" color="#4072B3" bordercolor="#4072B3" bgcolor="#F6F9FD" borderwidth="1" borderradius="1" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
青囲み破線[/st-mybox]

これで理解できた人はもう大丈夫ですが、もうちょっと詳しく教えてくださいという人は続きも見てください。

 

まずはCSSの追加から説明します。先ほどのCSSをコピーしたら外観カスタマイズ追加CSSと進みましょう。

 

ここにコピーしたCSSを張り付ければ、点線ボックスを使う準備ができました。あとは実際に記事内で細かな装飾をおこないます。

 

記事編集画面に戻り、先ほどCSSを追加したボックスをタグボックスデザインマイボックス基本とクリックして呼び出します。

マイボックスを出す手順

何もいじったことがなければこんな感じのコードでボックスが出てくるはずなので、ここからは色や装飾を変えていきます。

 

 html
[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]

 

st-mybox titleタイトル名が変わります
fontawesomeアイコンが変わります
color文字色が変わります
bordercolor枠線の色が変わります
borderwidth枠線の太さが変わります(1に近いほど細い)
borderradius枠線の丸みが変わります(1に近いほど角っぽい)
titleweightタイトル文字の太さが変わります
fontsize文字の大きさが変わります

 

残りはデフォルトのままでOK。fantawesomeのアイコンに関してよく見かけるもののみを紹介しておきます。

  • fa-lightbulb-o
  • fa-bullhorn
  • fa-file-text-o
  • fa-gift
  • →fa-hand-o-right

 

あとは実際に手を動かしつつ確認してみてください。
うまく反映されてないときは一度テキストエディタのほうからも確認するとよいでしょう。

 

マナブさん風のカスタマイズ設定だけ念のため置いておきます。

 

 html
[st-mybox title="" fontawesome="fa-check-circle" color="#4072B3" bordercolor="#4072B3" bgcolor="#F6F9FD" borderwidth="1" borderradius="1" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
青囲み破線[/st-mybox]

 

AFFINER5のボックスカスタマイズ方法吹き出しを使ったボックスデザイン

 

こちらのボックスデザインもよく見ますが、有名な方だとNOJI BLOGさんが使っていらっしゃいますね。

 

当ブログでは利用していませんが、再現は可能なので紹介しておきます。

 

こちらのデザインですが、先ほどのようなCSSの追加は不必要になります。以下のHTMLをテキストエディタにコピペすればOK。

 html
[st-minihukidashi fontawesome="" fontsize="150" fontweight="150" bgcolor="#4072b3" color="#ffffff" margin="0 0 20px 0" radius="" position="" myclass="" add_boxstyle=""]AFFINGER5ボックスデザイン②[/st-minihukidashi]
<div class="maruno">
<ol>
<li>サンプル</li>
<li>サンプル</li>
</ol>
</div>

理解できない人は続きも読んでください。

 

まずは上の吹き出し部分の準備をします。吹き出し部分はタグテキストパーツミニ吹き出しで出てきます。

ミニ吹き出しを出す設定

 

数字付きのボックスの手順に関してはこちらの アフィンガー5でマル付き・番号付きリストを作成&カスタマイズする方法で詳細に解説していますので、概要だけ。

 

箇条書きにしたい範囲をドラッグで選択リストチェックリスト(番号なしリスト)番号なしリストでチェックマークの箇条書きにできます。

 

ここからはカスタマイズですが、いじるのは吹き出し部分のみです。

fontawesome先ほども紹介したアイコンをタイトルの前に表示させます
fontsize文字の大きさが変わります(150くらいが無難)
fontweight文字の太さが変わります(150にして太字にしましょう)
bgcolor吹き出しの背景色が変わります
color文字色が変わります
margin吹き出しの位置が変わります
radius丸みが変わります

 

カラーに関してはこちらのカラーコードのサイトを参考にするか、自分で手を動かしつつ確認してみましょう。

 

marginだけ少し難しいので解説しておきます。そもそもmarginとは余白のことで、この値を大きくするとその方向に余白が広がります。

 

そして、値を4つ設定した場合は左の値から「上→右→下→左」の余白の変更が反映されます。

 

ただ結論から言ってしまうと、この吹き出しに関しては上下に関してしか位置がいじれないようになっていますので、動かす値は1つ目と3つ目のみ。もっと言ってしまえばデフォルトの0 0 20 0の20をいじればいいだけです。

 

ここの値を動かしつつお好みに調節してください。

 

個人的には重なっている方が好みで、値は-5とかにするのがいいかなと。
リットン

 

AFFINER5のボックスカスタマイズ方法吹き出しを使ったボックスデザイン2つ目

 

次に紹介するのは当ブログで使用している以下のボックスです。

AFFINGER5ボックスデザイン③

  1. サンプル
  2. サンプル

 

先ほどのボックスとさほど変わりませんが、紹介しておきます。とりあえず作り方だけ教えてという方は、以下のHTMLをテキストエディタにコピーしてください。

 html
[st-minihukidashi fontawesome="" fontsize="150" fontweight="bolder" bgcolor="#4072B3" color="#ffffff" margin="0 0 -5px 0" radius="" position="" myclass="" add_boxstyle=""]AFFINGER5ボックスデザイン③[/st-minihukidashi] [st-cmemo fontawesome="fa-file-text-o" iconcolor="#4072B3" bgcolor="#ffffff" color="#333333" bordercolor="#4072B3" borderwidth="2" iconsize="300"]
<div class="st-list-no">
<ol>
<li>サンプル</li>
<li>サンプル</li>
</ol>
</div>
[/st-cmemo]

もっと詳しく知りたい人は続きもどうぞ。

 

上の吹き出し部分は先ほどと同じなので省略します。下の部分はタグテキストパーツクリップメモメモで表示させてください。

メモボックスを出す手順

 

デフォルトの状態ならこのようになっていると思います。

 html
[st-cmemo fontawesome="fa-file-text-o" iconcolor="#919191" bgcolor="#fafafa" color="#000000" bordercolor="" borderwidth="" iconsize=""][/st-cmemo]

ここからカスタマイズしていきます。

fantawesomeアイコンが変わります
iconcolorアイコンの色が変わります
bgcolorボックスの背景色が変わります
color文字色が変わります
bordercolorボックスの枠線が変わります
borderwidth枠線の太さを変えられます(21くらいが無難かと)
iconsizeアイコンの大きさが変わります(300くらいでOK)

 

あとは手を動かしつつ自分の好みに仕上げてください。箇条書きにする方法は1つめのパターンのときに紹介したので省略させてもらいます。

 

最後にもう一度だけ当ブログでの設定を紹介しておきます。

 html
[st-minihukidashi fontawesome="" fontsize="150" fontweight="bolder" bgcolor="#4072B3" color="#ffffff" margin="0 0 -5px 0" radius="" position="" myclass="" add_boxstyle=""]AFFINGER5ボックスデザイン③[/st-minihukidashi] [st-cmemo fontawesome="fa-file-text-o" iconcolor="#4072B3" bgcolor="#ffffff" color="#333333" bordercolor="#4072B3" borderwidth="2" iconsize="300"]
<div class="st-list-no">
<ol>
<li>サンプル</li>
<li>サンプル</li>
</ol>
</div>
[/st-cmemo]

 

AFFINGER5でボックスをカスタマイズしてブログをおしゃれにしよう

 

今回はAFFINGER5のボックスデザインのカスタマイズについてまとめました。

 

AFFINGER5は機能性が豊富です。カスタマイズについても初心者のころなら心が折れそうになることもあるかと思います。

 

しかし、有名なブロガーさんは細部にまでこだわっていますから、ぜひこの記事を参考にデザインのカスタマイズをしてみてください。

 

今回は以上です。ありがとうございました。

関連記事【AFFNGER5のレビュー】メリットとデメリットを使用者が解説

関連記事AFFINGER5でSNSボタンをカスタマイズする方法【完全版】

-AFFINGER

Copyright © Lytton Blog