AFFINGER

AFFINGER5に点線ボックスを作り、タグに保存する方法

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

 

こんな感じになります。

 

 

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

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

 

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

 

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

 

点線ボックスタグの作り方

 

まずは、

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

 

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

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

 

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

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

カスタマイズから追加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
 
線の色ありコード

 


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

 

  • bordercolor="#ccc"→bordercolor="#5b8bd0"
  • bgcolor="#ffffff"→bgcolor="#f0f7ff"

 

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

 

AddQuickTagにタグ登録する

 

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

 

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

 

 

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

 

AddQuickTagの登録になります。

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

 

 

 

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

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




  • この記事を書いた人
  • 最新記事
アバター

ムロ

サイト管理人のムロです。 【趣味のブログがいつの間にかお金を稼いでくれた】月間5万PV達成 ➡️8ヶ月でブログ収益は月20万円 ➡️ 本業と副業で年収は1000万超え➡️ブログでは、SEO・アフィリエイト・動画配信・AFFINGER・転職について書いています

人気記事一覧

1

ムロ  2020年最後の転職に向けて、一体どこのサイトで転職活動をしたら良いのか。どこの転職エージェントがいいのか教えて欲しい       こんな悩みにお答えしていきます。   こ ...

2

悩んでる人アフィリエイトで稼ぐコツが知りたい。いま、個人ブログを運営しているけど月1,000円未満です・・月5万円を目指したい。   こんなお悩みを解決します。 この記事を書いている人はこん ...

オリジナリティー 3

  ムロどうもこんにちは、ブログのオリジナリティって何なんですかね? Googleが求めていることは、オリジナリティコンテンツだ!! とありますが「オリジナリティ」「個性」「独自性」とはどこ ...

4

悩んでる人ブログの書き方がわかりません、どうすれば良い記事が書けるようになるんでしょうか   今回はこんなお悩みに答えていきます。   この記事を書いている人はこんな人 ムロです。 ...

-AFFINGER

Copyright © MUROBLOG , All Rights Reserved.