AFFINGER5

AFFINGER5(アフィンガー5)に破線ボックスを表示させる方法を解説!

本記事を書いた人

<img class="alignnone wp-image-4850 size-full" src="https://imai-fun-life.com/wp-content/uploads/2020/09/img_0063-1-e1601026073626.jpg" alt="" width="800" height="418" />

みなさんこんにちは!あーる(<a href="https://twitter.com/aru20R">@aru20r</a>)です。

本記事では「AFFINGER5(アフィンガー5)に破線ボックスを表示させる方法を解説!」というテーマでご紹介していきます。

こんな人に読んで欲しい

悩む人
AFFINGER5で破線ボックスを使いたい
悩む人
プログラミングの知識が無い・・・。
悩む人
簡単に破線ボックスを出す方法が知りたい。

アフィンガー5には、「タグ」という機能があります。

タグ機能の中に、「<span class="st-mymarker-s">ボックス(枠線のみ</span>)」というデザインがあります。
<div class="box1">
<p style="text-align: center;">ボックス(枠線のみ)</p>

</div>
上のボックスを使う人が多いのですが、ちょっと地味じゃないですか?

<span class="st-mymarker-s">枠のみのボックスより、破線ボックスを使いたい。</span>と思っている人も多いはず。
<p style="text-align: center;">

</p>
<p style="text-align: center;"><strong>破線ボックス</strong></p>
<p style="text-align: center;">
</p>
今回は、<span class="st-mymarker-s">ちょっと地味な”枠だけボックス”を、おしゃれな破線ボックスに変えるカスタマイズ方法</span>をご紹介していきます。

「枠のみボックス」→「破線ボックス」に変えたいと悩んでる人の参考になれば嬉しいです。

あーる
プログラミングが分からないという人でも、簡単に装飾できますよ!

<a href="https://www.infotop.jp/click.php?aid=389467&amp;iid=75194">→→AFFINGER5のダウンロードはこちらから</a>
<h2 id="ooo">AFFINGER5(アフィンガー5)に破線ボックスを表示させる方法</h2>
&nbsp;

<img src="https://images.unsplash.com/photo-1587620962725-abab7fe55159?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80" alt="テーブルの上になっている黒いラップトップコンピューター" />

今回ご紹介する破線ボックスは、ただCSSを追加するだけでは表示できませんが、手順をしっかりと守れば表示させることができます。

<span class="st-mymarker-s">”AFFINNGER5”で破線を表示させたい人は、本記事の手順をそのまま真似してみましょう</span>。

破線を表示する手順


<ol>
<li>破線ボックスのCSSコードをコピー</li>
<li>追加CSSに”破線のCSSコード”を入力する</li>
<li>”枠のみボックス”のコードをカスタマイズする</li>
<li>”AddQuicktag”を使用し、より簡単に表示する</li>
</ol>

&nbsp;
<h3>破線ボックスのCSSコードをコピーする</h3>
破線ボックスのCSSコードは、”<a href="https://saruwakakun.com/html-css/reference/box">サルワカ</a>”というサイトからコピーすることができます。
<div class="box1">

<img class="alignnone wp-image-4525 size-full" src="https://imai-fun-life.com/wp-content/uploads/2020/09/7919693937ab5531158492d6f2332a79.png" alt="" width="784" height="605" />

</div>
<span class="st-mymarker-s">”サルワカ”というサイトに行くと、「破線ボックス」という項目があります</span>。

破線ボックス項目の下にある、「<span class="st-mymarker-s">+コードを表示</span>」をクリックすることで、<span class="st-mymarker-s">”HTMLコード”と”CSSコード”</span>が表示されます。

そうしたら、<span class="st-mymarker-s">”CSSコード”をコピー</span>しましょう。

&nbsp;
<h3>追加CSSに”破線CSSコード”を挿入する</h3>
続いては、追加CSSに”CSSコード”を挿入します。

追加CSSの開き方

「ダッシュボード」→「外観」→「カスタマイズ」→「追加CSS」

手順通りいくと、追加CSSを開くことができます。

<span class="st-mymarker-s">下記の画像が、追加CSS画面</span>になります。
<div class="box1">

<img class="aligncenter wp-image-4529 size-full" src="https://imai-fun-life.com/wp-content/uploads/2020/09/83133ba19d9144db0550393381da1173.png" alt="" width="299" height="549" />

</div>
そうしたら、「サルワカ」にある”CSSコード”を挿入していきます。

サルワカのCSSコード

.box6 {
padding: 0.5em 1em;
margin: 2em 0;
background: #f0f7ff;
border: dashed 2px #5b8bd0;/*点線*/
}
.box6 p {
margin: 0;
padding: 0;

「サルワカ」には、上記の”CSSコード”が表示されていますが、このままだと”AFFINGER5”には上手く表示できません。

上記の”CSSコード”にあるに記載されている<span class="st-mymarker-s">『.box6』→『.st-mybox』</span>に変更する必要があります。

変更後のCSSコード

.st-mybox {
padding: 0.5em 1em;
margin: 2em 0;
background: #f0f7ff;
border: dashed 2px #5b8bd0;/*点線*/
}

.st-mybox p {
margin: 0;
padding: 0;
}

『.box6』→『.st-mybox』することによって、<span class="st-mymarker-s">”AFFINGER5”のボックスに対しての処理としてCSSを反映させることが出来るようになる</span>ので、変更をし忘れないようにしましょう。
<div class="box1">

<img class="aligncenter wp-image-4533 size-full" src="https://imai-fun-life.com/wp-content/uploads/2020/09/d5dde958910efacc1e326ffbed25a6f8.png" alt="" width="299" height="542" />

</div>
追加CSS画面を開いたら、<span class="st-mymarker-s">”CSSコード”を挿入して「公開」</span>をクリックすることで準備完了です!

ポイント

『.box6』→『.st-mybox』

&nbsp;
<h3>”枠のみボックス”のコードをカスタマイズする</h3>
先ほどの”CSSコード”を追加しましたが、それだけでは破線デザインが表示されません。

そのため、元々ある<span class="st-mymarker-s">”</span><span class="st-mymarker-s">枠のみコード”</span>を変更する必要があります。

<span class="st-mymarker-s">”枠のみボックス”のコードはこちらです</span>。
<pre class="st-pre">[st-mybox title="" fontawesome="" color="#757575" bordercolor="#ccc" bgcolor="#ffffff" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]

[/st-mybox]</pre>
<span class="st-mymarker-s">破線ボックスのコードはこちらです</span>。
<pre class="st-pre crayon-selected">[st-mybox title="" fontawesome="" color="#757575" bordercolor="#ef857d" bgcolor="#fdede4" borderwidth="2" borderradius="2" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]

[/st-mybox]</pre>
&nbsp;


<ul>
<li>bordercolor="#ccc"→bordercolor="#ef857d"</li>
<li>bgcolor="#ffffff"→bgcolor="#fdede4"</li>
</ul>

<span class="st-mymarker-s">上記のようなボーダーと背景色にすることによって、赤色の印象の枠にすることができました</span>!

<span class="st-mymarker-s">「bordercolor」と「bgcolor」</span>のカラーを変更することによって好みの枠を作ることができますよ♪

不明な点があれば、僕のTwitterに連絡ください。

<a href="https://twitter.com/aru20R">→→あーるのTwitterはこちら</a>

&nbsp;
<h2 id="ooo">”AddQuicktag”を使用すると簡単に挿入できる</h2>
<img src="https://cdn.pixabay.com/photo/2015/04/20/13/17/work-731198_960_720.jpg" alt="仕事, 入力, コンピュータ, ノートブック, プログラミング, ビジネス, 技術, インターネット" />

プラグイン”<a href="https://ja.wordpress.org/plugins/addquicktag/">AddQuicktag</a>”に登録することで、先ほど作成した破線ボックスを簡単に挿入することができます。

”AddQuicktag”は、上記のURLからダウンロードすることができます。

<span class="st-mymarker-s">”AddQuicktag”を起動したら、先ほど作成した破線ボックスのコードを挿入していきます</span>。
<div class="box1">

<img class="alignnone wp-image-4599 size-full" src="https://imai-fun-life.com/wp-content/uploads/2020/09/bedc07f09549fc054e3164538d0dfa48-1.png" alt="" width="800" height="249" />

</div>
”AddQuicktag”を開くとこのような画面になります。
<div class="box1">

<img class="alignnone wp-image-4602 size-full" src="https://imai-fun-life.com/wp-content/uploads/2020/09/f5f41379c4f6e995f23be57a8220de52-1.png" alt="" width="800" height="248" />

</div>
入力する項目は3箇所あります。


<ol>
<li>ボタンのタイトル→分かりやすければなんでもいいです。</li>
<li>開始タグと終了タグ→”破線コード”を入力します。</li>
<li>チェックマーク→チェック項目にレ点を入れます。</li>
</ol>

上記の真似をするだけで表示することができるので、よく分からない人は真似してみましょう!

不明な点があれば、僕のTwitterに連絡ください。

<a href="https://twitter.com/aru20R">→→あーるのTwitterはこちら</a>

あーる
以上、破線ボックスを”AddQuicktag”で簡単に表示させる方法でした!

&nbsp;
<h2 id="ooo">AFFINGER5(アフィンガー5)で破線を表示:まとめ</h2>
<img src="https://cdn.pixabay.com/photo/2015/05/26/23/52/technology-785742_960_720.jpg" alt="技術, キーボード, コンピューティング, 周辺機器, 点灯, Mac, ぼかし, 入力, ブログ, 開発者" />

ここまで見ていただきありがとうございました!

本記事では「AFFINGER5(アフィンガー5)に破線ボックスを表示させる方法を解説!」というテーマでお話をしてきました。

破線を表示する手順


<ol>
<li>破線ボックスのCSSコードをコピー</li>
<li>追加CSSに”破線のCSSコード”を入力する</li>
<li>”枠のみボックス”のコードをカスタマイズする</li>
<li>”AddQuicktag”を使用し、より簡単に表示する</li>
</ol>

&nbsp;

”サルワカ”というサイトは上記の手順でやれば、破線じゃないボックスも使うことができるので、好みのボックスを探して見てくださいね♪

&nbsp;

あーる
ありがとうございました♪

&nbsp;

こんな人に読んで欲しい

<a href="https://imai-fun-life.com/header-title-centered/">→→【アフィンガー5】ヘッダータイトルを中央に寄せる方法とサイズ変更【基本設定】</a>

<a href="https://imai-fun-life.com/blog-tool-to-start/">→→【有料級】ブログをはじめる人は絶対に入れるべきツールを無料で教えます。</a>

  • この記事を書いた人

あーる

-AFFINGER5

© 2020 RIABLOG Powered by AFFINGER5