【AFFINGER5】ボックスを破線にするカスタマイズ、AddQuickTagにタグ登録

ムロ

マイボックスのしかくを点線で囲ったしかくにします。

こんな感じになります。

これを使うと便利なボックスタグの紹介します。

『点線ボックス』こんなボックスだと目立ってわかりやすいですよね。

これは、AFFINGERでのツールにはないのでプログラミングをいじって作らなければいけないのです。

追加CSSにコードを挿入するんですが、めっちゃ簡単ですので。ビビらないで、やってみましょう！

ムロ

今回、初心者でも使えるようにマニュアルを作りました。この記事を読んでもらえればAFFINGER５の使い方がよくわかります。【最新版2021年】AFFINGER5の使い方とインストール方法、補足マニュアルと不具合の修正を紹介本ブログの人気記事です。

AFFINGER5破線ボックスタグの作り方

まずは、

外観→カスタマイズ→追加CSS

ここで新しくプログラミングして機能を追加できます。

コードと呼ばれるものマークアップ言語を使ってカスタマイズしていくのですが。ＷＰの良いところは、自分で機能や新しい技術を上書きして使いやすいツールにできることなんです。

しかし、これには高度な技術や知識が必要です。

あまり、やり過ぎたり初期設定を、いじったりするとプログラミングが壊れて取り返しのつかないことにもなるので十分理解したりてやりましょう。

破線ボックスはカスタマイズから追加CSSに追記

『外観』→『カスタマイズ』を選択し、追加CSSの項目をクリック。

既に追加CSSのを導入したことがある場合は、CSSコードが乱雑になってしまわないように『/*コメント入力*/』を行って、『/*しかくボックスCSS*/』などとコメントしておけば良いでしょう。

このコメントはプログラミング言語やマークアップ言語を使用するときのコメント方法で、入力をした文字をCSSコードとして認識させない効果があります。

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

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

そうすることによって、AFFINGER5のマイボックスに対しての処理としてCSSを反映させることが出来るようになるので、変更忘れがないように注意してください。

既存のしかく（枠のみ）のコードをカスタマイズ

先ほどのCSSを追加しただけだと、単純に枠が破線デザインになるだけで、色の変更等はされていないはずです。

そのため、色の変更は既存のしかく（枠のみ）のコードに直で記入する必要があります。

既存のしかく（枠のみ）のコードはこちら。

 tag

 


線の色なしコード

※ボックスデザインが反映されないように、開始タグと閉じタグを1文字ずつ削除しています。

続いて、破線ボックスの場合はこちら。

 tag

 


線の色ありコード

既存のしかく（枠のみ）のコードをカスタマイズするために、ボーダーの色と背景色をそれぞれ変更。

このように変更することで、上記のようなボックスデザインに変更することが可能になります。

AddQuickTagにタグ登録しボックスを作る

そこで、AddQuicktagというプラグインを使用します。

AddQuicktagはWordPressサイドバーの『プラグイン→新規追加』にて追加可能です。

プラグインのAdd Quick Tagを利用して点線ボックスタグをボタン１つで入力できるようにしていきます。

AddQuickTagの登録になります。

先ほど作成した、こちらのコードをAddQuickTagに登いきます。

• ボタン名は自分がわかりやすい名前を入力
• 開始タグと終了タグをそれぞれ入力
• ビジュアルエディター・postにチェックを入れる

AddQuickTagが記事作成画面で表示されない場合に関しては、画像の右側に表示されている『ビジュアルエディター』と『post』にチェックを入れてもらえれば表示されると思うので、内容を更新後確認してみてください。

まとめ:AFFINGER5で点線ボックスを作る

cssでカスタマイズして点線ボックスを作るのは難易度が高いです。

しっかりとバックアップをとり行うようにしましょう。

一度作ってしまえば、後はボタン一つで呼び出すことができるのですごく使いやすいです。

 コチラも読まれています

＞＞【AFFINGER５】ブログのトップページをカスタマイズするやり方

＞＞【AFFINGER5】スライドボックスを作り、枠で囲む作り方

＞＞【AFFINGER5】バナーリンクの作り方、ブログはオシャレになる【バナーリンク】