【AFFINGER5カスタマイズ】ボックスを破線にする方法【コピペでOK】

AFFINGER5使ってるけどボックス（四角枠）をもっとおしゃれにしたい！
でもプログラミングとかコードとかよくわかんないし簡単にできる方法ないかな？

こんな悩みを解消します！

当ブログで使用しているWordPressテーマ「AFFINGER5（アフィンガー5）」は、ボタンひとつで簡単に以下のようなボックスを設置することができます。

記事の中でこのボックスをよく使うんですが、ちょっと味気なくないですか？

なので今回はアフィンガー5を使っている人向けに簡単におしゃれボックスにする方法を解説します。

この記事を参考にすると以下のようなおしゃれなボックスが簡単に使えるようになりますよ。

【アフィンガー５カスタマイズ】ボックスの枠線を破線にする方法

「カスタマイズ」というとなんか設定が難しそうと感じますが、全然そんなことないので安心してください。

今回カスタマイズするのはアフィンガーの「タグ＞ボックスデザイン＞マイボックス」にあるショートコード です。

例えばこの中の「しかく（枠のみ）」を選択するとエディタにはこんなショートコードが自動で入力されます。

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

上記ショートコード の中にある [ st-mybox ] がアフィンガーでボックスを表示するためのコードになるので、この部分をカスタマイズしてあげればOKです。

では早速カスタマイズ方法を解説していきます。

カスタマイズ用のCSSコードをコピーする

まず以下のCSSのコードをすべてコピーします。

.st-mybox {
    background: #f0f7ff;
    border: dashed #5b8bd0;
}

ワードプレスのカスタマイズCSSにコードを貼り付ける

ワードプレスのメニューから「外観＞カスタマイズ」を選択します。

一番下にある「追加CSS」をクリックします。

追加CSSを開いたら空白部分にコピーしたCSSコードを貼り付けます。

CSSコードの貼り付けができたら、上段にある「公開」をクリックして保存しましょう。

カスタマイズ結果を確認

エディタを開いて確認してみましょう。

マイボックスの中から「しかく（枠のみ）」を選んでみます。

下のようなコードが自動的に入力されるので「bordercolor」と「bgcolor」の値（#cccと#ffffff）を消します。

消した後はこのような形になります。

プレビューすると青色の破線の枠が完成です！

【アフィンガー５カスタマイズ】ボックスの枠線のカラー変更方法

本記事ではボックスのカラーはブルーで設定しましたが、もちろんカラーは自由に変えることができます。

【アフィンガー５カスタマイズ】ボックスの枠線を点線にする方法

破線ではなく、点線にするカスタマイズ方法も解説しておきます。

ボックスの枠線を点線にするCSS

ボックスの枠線を点線にしたい人は以下のCSSをコピペすればOKです。

.st-mybox {
    background: #f0f7ff;
    border: dotted #5b8bd0;
}

まとめ｜AFFINGER5（アフィンガー5）のボックスを破線にするのは超簡単

いかがでしたでしょうか。

シンプルなしかくのボックスも破線や点線にするだけで印象がかなり変わります。

アフィンガーは機能が豊富なのでおすすめテーマNo.1です。

>> AFFINGER5（アフィンガー５）の機能を詳しく見る

今なら【特典】「STINGERタグ管理プラグイン3」プレゼント中です！

※いつ特典プレゼントが終わるかわからないのでお早めに

せっかくブログを運営しているならデザインにも拘りたいですよね。

気に入ったらぜひカスタマイズしてみてください！

人気記事　【SEO検索順位チェックツール】Rank Trackerが最強【無料プランあり】

人気記事　ブログアフィリエイトのおすすめツールとサービス10選【初心者はまずはこれを揃えよう！】