WordPressプラグイン

【WordPress】AddQuicktagに登録しておきたいおすすめ装飾パーツ

WordPressはテーマによって異なる独自の機能で色んなボックスや装飾を挿入できますが、細かい部分までこだわりたい場合は自作したほうが早いです。

このブログで使用しているボックスやリストの表示方法についてリクエストいただいたので、今回は便利なプラグイン「AddQuicktag」で使えるコードを紹介したいと思います。

AddQuicktag の設定方法については多くの解説記事があるので、この記事では説明していません。分からない人はググってみてください。

テキスト・リスト用のシンプルボックス

まずはテキストやリストを囲むシンプルなボックスですが、通常の「番号なしリスト」だとこういう感じになります↓

  • リスト項目1
  • リスト項目2

番号付きリストにした場合はこのように↓

  1. リスト項目1
  2. リスト項目2

普通にテキストだけを入れてもオッケーです。

AddQuicktagに登録するHTMLコードはこちら↓

<div class="simple-box-blue custom-list">
<p>テキスト</p>
</div>

CSSに追加するコードがこちらです↓

.simple-box-blue {
  border: 2px solid #5ba6d6; /* ボックスのボーダー */
  background: #eff7fa; /* ボックスの背景色 */
  padding: 20px;
  border-radius: 10px;
}
.simple-box-blue ul li:before {
  color: #5ba6d6; /* 通常リストのアイコン色 */
}
.simple-box-blue ol li:before {
  background: #5ba6d6; /* 数字の背景色 */
  color: #fff; /* 数字の文字色 */
}
.custom-list p {
  margin: 0;
}
.custom-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.custom-list ul li:before {
  font-family: FontAwesome;
  content: '\f138';
  margin-right: 0.5em;
}
.custom-list ol {
  counter-reset: item;
  list-style: none;
  margin: 0;
  padding: 0;
}
.custom-list ol li:before {
  counter-increment: item;
  content: counter(item);
  display: inline-block;
  text-align: center;
  line-height: 20px;
  font-size: 15px;
  height: 20px;
  width: 20px;
  border-radius: 50px;
  margin-right: 0.5em;
}

通常リストのアイコンはFont Awesomeで表示していますので、お使いのテーマが対応していない場合は自力で設置するなど対応してください。

AddQuicktagに登録後、編集画面で利用するとこのような感じになります↓

編集可能なタイトル付きのボックス

次はタイトル部分が編集できるボックスです。

タイトル部分を自由に変更可能

  • リストを入れても
  • テキストだけでもOK

AddQuicktagに登録するHTMLコードはこちら↓

<div class="title-box-green custom-list">
<span class="box-title">タイトル</span>
<p>文章</p>
</div>

CSSはこちらです↓

.title-box-green {
  position: relative;
  padding: 1.2em;
  border: 3px solid #77c58a; /* ボックスのボーダー */
  border-radius: 10px;
}
.title-box-green .box-title {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-size: 19px;
  background: #FFF; /* タイトルの背景色 */
  color: #77c58a; /* タイトルの文字色 */
  font-weight: bold;
}
.title-box-green ul li:before {
  color: #77c58a; /* 通常リストのアイコン色 */
}
.title-box-green ol li:before {
  background: #77c58a; /* 数字の背景色 */
  color: #fff; /* 数字の文字色 */
}
.custom-list p {
  margin: 0;
}
.custom-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.custom-list ul li:before {
  font-family: FontAwesome;
  content: '\f138';
  margin-right: 0.5em;
}
.custom-list ol {
  counter-reset: item;
  list-style: none;
  margin: 0;
  padding: 0;
}
.custom-list ol li:before {
  counter-increment: item;
  content: counter(item);
  display: inline-block;
  text-align: center;
  line-height: 20px;
  font-size: 15px;
  height: 20px;
  width: 20px;
  border-radius: 50px;
  margin-right: 0.5em;
}

26行目の「.custom-list p 」以降は、最初に紹介したシンプルボックスと共通のコードになっているので両方使う場合は省略してもOKです。

他にも色々なデザインのボックスをオリジナルで作れば、ブログも個性的になっていくと思います。皆さんもぜひ「AddQuicktag」使ってみてください。

WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

comment

タイトルとURLをコピーしました