
でもプログラミングとかコードとかよくわかんないし簡単にできる方法ないかな?
こんな悩みを解消します!
当ブログで使用しているWordPressテーマ「AFFINGER5(アフィンガー5)」は、ボタンひとつで簡単に以下のようなボックスを設置することができます。

記事の中でこのボックスをよく使うんですが、ちょっと味気なくないですか?
なので今回はアフィンガー5を使っている人向けに簡単におしゃれボックスにする方法を解説します。
プログラミングの知識が全くない人でも簡単にできるので安心してください。
アフィンガー5をまだ使っていない人は先にインストールしてください
→AFFINGER公式サイト
-
-
Contents
有料テーマWING・AFFINGER5(アフィンガー5)をレビュー【超おすすめ】
続きを見る
この記事を参考にすると以下のようなおしゃれなボックスが簡単に使えるようになりますよ。
-1200x153.jpg)
この記事の内容
- 【アフィンガー5カスタマイズ】ボックスの枠線を破線にする方法
- 【アフィンガー5カスタマイズ】ボックスの枠線のカラー変更方法
- 【アフィンガー5カスタマイズ】ボックスの枠線を点線にする方法
【アフィンガー5カスタマイズ】ボックスの枠線を破線にする方法
「カスタマイズ」というとなんか設定が難しそうと感じますが、全然そんなことないので安心してください。
今回カスタマイズするのはアフィンガーの「タグ>ボックスデザイン>マイボックス」にあるショートコード です。
-1200x594.jpg)
例えばこの中の「しかく(枠のみ)」を選択するとエディタにはこんなショートコードが自動で入力されます。

これをプレビューすると以下のようなシンプルな「しかくの枠のみ」が表示されるわけですね。

上記ショートコード の中にある [ st-mybox ] がアフィンガーでボックスを表示するためのコードになるので、この部分をカスタマイズしてあげればOKです。
そのほかの「まるみ」や「参考」なども、同じ [ st-mybox ] というコードを使っているので、今回のカスタマイズで破線にすればすべて破線になります。
では早速カスタマイズ方法を解説していきます。
カスタマイズ用のCSSコードをコピーする
まず以下のCSSのコードをすべてコピーします。
.st-mybox {
background: #f0f7ff;
border: dashed #5b8bd0;
}
ワードプレスのカスタマイズCSSにコードを貼り付ける
ワードプレスのメニューから「外観>カスタマイズ」を選択します。
-194x600.jpg)
一番下にある「追加CSS」をクリックします。
-293x600.jpg)
追加CSSを開いたら空白部分にコピーしたCSSコードを貼り付けます。
-294x600.jpg)
/**********************/
/****マイボックス****/
/**********************/
上記は何のCSSをカスタマイズしたかわかるようにするためのメモです。(なくてもOK)
/**/という記号で文字を囲うことでコメントを残しておくことができます。
CSSコードの貼り付けができたら、上段にある「公開」をクリックして保存しましょう。
カスタマイズ結果を確認
エディタを開いて確認してみましょう。
マイボックスの中から「しかく(枠のみ)」を選んでみます。
-1200x594.jpg)
下のようなコードが自動的に入力されるので「bordercolor」と「bgcolor」の値(#cccと#ffffff)を消します。
-1200x279.jpg)
消した後はこのような形になります。
-1200x277.jpg)
プレビューすると青色の破線の枠が完成です!
【アフィンガー5カスタマイズ】ボックスの枠線のカラー変更方法
本記事ではボックスのカラーはブルーで設定しましたが、もちろんカラーは自由に変えることができます。
ボックスカラーの変更方法
ショートコード のbordercolorとbgcolorの値を変えるだけ
bordercolor="#000" bgcolor="#fff"
bordercolor="#5b8bd0" bgcolor="#f0f7ff"
bordercolor="#d05d5d" bgcolor="#fff0f0"
bordercolor="#d05db0" bgcolor="#fff0fa"
bordercolor="#d8ce40" bgcolor="#fff9f0"
bordercolor="#7ed05d" bgcolor="#f0fff0"
【アフィンガー5カスタマイズ】ボックスの枠線を点線にする方法
破線ではなく、点線にするカスタマイズ方法も解説しておきます。
カスタマイズCSSを以下のように変更するだけ。
・border: dashed; (破線)
↓
・border: dotted; (点線)
ボックスの枠線を点線にするCSS
ボックスの枠線を点線にしたい人は以下のCSSをコピペすればOKです。
.st-mybox {
background: #f0f7ff;
border: dotted #5b8bd0;
}
まとめ|AFFINGER5(アフィンガー5)のボックスを破線にするのは超簡単
いかがでしたでしょうか。
シンプルなしかくのボックスも破線や点線にするだけで印象がかなり変わります。
アフィンガーは機能が豊富なのでおすすめテーマNo.1です。
>> AFFINGER5(アフィンガー5)の機能を詳しく見る
今なら【特典】「STINGERタグ管理プラグイン3」プレゼント中です!
※いつ特典プレゼントが終わるかわからないのでお早めに
せっかくブログを運営しているならデザインにも拘りたいですよね。
気に入ったらぜひカスタマイズしてみてください!