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

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

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

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

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

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

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に登録後、編集画面で利用するとこのような感じになります↓

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

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

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に登録するHTMLコードはこちら↓

<div class="d-wrap">
<div class="d-img">画像</div>
<div class="d-text"><p>テキスト</p></div>
</div>

CSSはこちらです↓

.d-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 2em;
}
.d-img {
  width: 50%; /* 画像ボックスの幅 */
  margin-right: 10px;
}
.d-img img {
  width: 100%;
  box-shadow: 0 2px 7px rgba(0,0,0,0.15), 0 5px 6px rgba(0,0,0,0.15); /* 画象のシャドウ */
}
.d-text {
  position: relative;
  width: 49%; /* テキストボックスの幅 */
  background: #fafeff; /* テキストボックスの背景色 */
  border: solid 2px #77cad2; /* テキストボックスのボーダー */
  border-radius: 13px; /* 角丸の大きさ */
  padding: 12px 10px;
}
.d-text p {
  margin: 1em 0; /* テキストの段落の幅 */
  line-height: 1.5em; /* テキストの行間 */
}
.d-text:before {
  content: '';
  border-right: 23px solid #77cad2; /* 吹き出し しっぽ外側 */
  border-bottom: 20px solid transparent;
  border-top: 20px solid transparent;
  position: absolute;
  top: 30%; /* 吹き出し しっぽ外側の位置 */
  left: -23px; /* 吹き出し しっぽ外側の位置 */
}
.d-text:after {
  content: '';
  border-right: 24px solid #fafeff; /* 吹き出し しっぽ内側 */
  border-bottom: 20px solid transparent;
  border-top: 20px solid transparent;
  position: absolute;
  top: 30%; /* 吹き出し しっぽ内側の位置 */
  left: -20px; /* 吹き出し しっぽ内側の位置 */
}
@media screen and (max-width: 600px){ /* スマホ用設定 */
.d-wrap {
  display: block;
}
.d-img {
  width: 100%;
  margin-right: 0;
  text-align: center;
}
.d-img img {
  width: auto;
}
.d-text {
  width: 100%;
  border-radius: 6px;
  margin-top: 7px;
}
.d-text:before { /* 吹き出し しっぽ外側 */
  border-bottom: 20px solid #77cad2; 
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
  top: -40px;
  left: 40%;
}
.d-text:after { /* 吹き出し しっぽ内側 */
  border-bottom: 20px solid #fafeff;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  top: -37px;
  left: 40%;
}
}

使い方はこんな感じになります↓
画像は正方形に近いほうがキレイに見えるかと思います。

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