ブログ収益化

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

AFFINGER Customize

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


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

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

カスタマイズ前

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

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

プログラミングの知識が全くない人でも簡単にできるので安心してください。

アフィンガー5をまだ使っていない人は先にインストールしてください
AFFINGER公式サイト

関連記事
WING(AFFINGER5版)
有料テーマWING・AFFINGER5(アフィンガー5)をレビュー【超おすすめ】

続きを見る

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

カスタマイズ後(青)

この記事の内容

  • 【アフィンガー5カスタマイズ】ボックスの枠線を破線にする方法
  • 【アフィンガー5カスタマイズ】ボックスの枠線のカラー変更方法
  • 【アフィンガー5カスタマイズ】ボックスの枠線を点線にする方法

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

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

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

マイボックス(カスタマイズ箇所)

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

ショートコード

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

カスタマイズ前

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

そのほかの「まるみ」や「参考」なども、同じ [ st-mybox ] というコードを使っているので、今回のカスタマイズで破線にすればすべて破線になります。

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

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

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

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

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

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

ワードプレス(カスタマイズ1)

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

ワードプレス(カスタマイズ2)

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

ワードプレス(カスタマイズ4)

/**********************/
/****マイボックス****/
/**********************/

上記は何のCSSをカスタマイズしたかわかるようにするためのメモです。(なくてもOK)

/**/という記号で文字を囲うことでコメントを残しておくことができます。

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

カスタマイズ結果を確認

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

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

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

ショートコード (枠のみ1)

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

ショートコード (枠のみ2)

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

【アフィンガー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」プレゼント中です!

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

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

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

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

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

\この記事はどうでしたか?/

-ブログ収益化
-, ,

© 2020 Yuta Life Blog Powered by AFFINGER5