エマノンシリーズで[デザイン囲み枠]を追加する方法

かつっぺ

みなさん、こんにちは。
web上でCSSなどのプログラムを公開されているプログラマーにあこがれているかつっぺです(^^;

今回もWordPressテーマ“Emanon（エマノン）”シリーズのプチカスタマイズについてお話しします。

本記事で分かることCSSコードを追加して、エマノン・シリーズでデザイン囲み枠を使う方法

検索順位トップ10へ中小企業様に“エマノン・ビジネス”をお勧め
 エマノンシリーズで簡単に[吹き出し機能]を使う方法

Emanon（エマノン）標準の囲み枠は二種類

WordPressテーマのどの比較サイトを見ても、エマノンのマイナス点は「デザインが地味」だと。

反論できません(>_<)。だって地味なんですもん。

でも、SEO対策も施されていて使いやすいのでテーマを変更する気はありません。

とはいえ、あまりにも機能がシンプルすぎて、記事の見た目がどうしても単調＝地味になるのが残念。

Emanon Blocksという拡張プラグインを使えば、めちゃめちゃかっこいいページが作れるのですが、名前の通り、ブロックエディタでしか使えません。
私のようにクラシックエディタで記事を書いているユーザーは使えません。

さて、本記事の主題である囲み枠。

エマノンで標準装備されている囲み枠は二種類。

この補助説明枠と

こちらの注意説明枠

ある意味シンプルで綺麗なページにできますが、読者さんの目は引きにくいですね。

Emanon（エマノン）の記事内でデザイン囲み枠を使う方法

便利な時代になりましたね。

webで検索したら答えがすぐ見つかります。

プラグインを使うか、使いたい囲み枠に対応したCSSコードをテーマに追加し、セットとなっているhtmlタグを記事内で使うだけ。

コードを公開してくださっているプログラマーの方に感謝ですm(__)m。

できればプラグインは使いたくなかったので、CSSコード追加で使えるものを探しました。

Purple Lifeさんこれはやわらかなピンクのボックスです。

Purple LifeさんのCSSコードを利用させていただいています。ありがとうございます、

やっぱり目を引きますよね。

囲み枠コードの追加方法とHTMLタグの使い方

①Purple Lifeさんの“【CSS】シンプルな囲み枠（ボックス）コピペですぐ使える”ページから使いたい囲み枠のCSSコードをコピー。

ちなみに、上記ピンクのボックスのCSSコードはこちら↓

/* タイトル付　枠（影）2　*/
.kakomi-box13 {
position: relative;
margin: 2em auto;
padding: 1.2em;
width: 90%;
color: #555555; /* 文字色 */
background-color: #fff;
border: 2px solid #f09199; /* 枠線の太さ・色 */
box-shadow: 0 0 5px 2px #fce2c4 inset;/* 影の色 */
}
.title-box13 {
position: absolute;
padding: 0 .5em;
left: 20px;
top: -15px;
font-weight: bold;
background-color: #fff; /* タイトル背景色 */
color: #f09199; /* タイトル文字色 */
}
引用元: Purple Lifeさん

②上記CSSコードをエマノン（テーマ）に追加。

WordPress管理画面から「外観→カスタマイズ→追加CSS」とクリックしていきます。

「追加CSS」にコピーしたCSSコードを貼り付けます。

③このCSSコードとセットになっているhtmlタグを記事内に貼り付ける。

<div class=“kakomi-box13”><span class=“title-box13”>タイトル</span>テキスト</div>
引用元: Purple Lifeさん

「<span class=“title-box13”>タイトル</span>」この部分をカットすれば、タイトルなしの囲み枠として使えます。

こんな感じ
CTA機能付きWordPressテーマ Emanon

htmlはプラグイン「AddQuicktag」に登録しておくとボタン一つでいつでも使えます。

Purple Lifeさんのページで「AddQuicktag」への登録の仕方も丁寧に解説してくれています。

まとめ

いかがでしたか？

CSSとかhtmlとかが出てくると難しく思われるかもしれませんね(>_<)

でも、手順通りにすればよいだけなので初心者でもあっという間に使えるようになります。

このデザイン囲み枠を使うだけでもエマノンのページもかなり見栄えが良くなりますよ。

しかも、ちょっとプログラマーになったような気分も味わえちゃうかもですよ(^^)

簡単にカスタマイズできるので、WordPressテーマ選びでお悩みの方は是非“エマノン・シリーズ”も候補に入れてくださいね。