＃020　WordPressの囲み枠の作り方

イントロダクション

裏でやっているトレース実習に手間取っている為、省エネ記事となります。

誠に申し訳ございません。

そういう訳で、すぐ終わりそうな講習として今回はWordpressにおける『囲み枠』とやらの使い方を教えて頂ける事になりました。

囲み枠というのは文字通りテキストを囲んで装飾するもので、視覚的に注目を集めたい文章に使うと効果的なものだそうです。

↑こんな感じのやつですね。

最も、別に使わなくても困らないので今まで教えてこなかったらしいですが。

とりあえず、視覚効果的にはあった方がいいとは思いますので覚えてみようと思います。

WordPressにおける囲み枠の使い方

さて、この囲み枠の具体的な使い方ですが、まずCSSの追記とHTML入力という2つのハードルを越えねばいけないらしいです。

使用したい囲み枠のCSSをネット上で探してきて、Wordpressに追記をするのが1つ目のハードル。

そのCSSに対応したHTMLを記事内に記述するのが2つ目のハードルだそうです。

うん、予想を超える面倒臭さですね。

もうちょっと、ボタン一つで何とかなるようにならなかったんですか？

ともあれ、それが仕様だというのなら仕方がありません。やるだけやってみます。

と、いう事で今回使用させて頂く囲み枠のCSS＆HTMLは↑上記のサイト様からお借りしました。

気に入った囲み枠のCSSをCocoonの子テーマに追記し、ついでに色を青系にしてタイトル名も変えておきます。（使用したCSSは後述しておきます）

これまでの講習だとこれで終わりだったんですけど、ここから2つ目のハードルであるHTMLとやらの記述をしなければなりません。

記事内で使いたい場所に『カスタムHTML』というブロックを追加して先程のCSSに対応したHTMLをコピペします。

で、このHTML内の特定の場所にテキストを書くと下記のように反映されるようです。

何というか……効果の割に工程数が多すぎじゃないですかね？

う～ん。カッコイイ事はカッコイイんですけど、あんまり積極的に使いたいとは思えないような面倒すぎる機能です。

時間に余裕が出来たら暇潰しに追加するかも知れませんが、当面は今日作った分だけで良いような気がします。

※追記。現在は新しいフォーマットになっておりますので使用しておりません。

今回使用したCSS＆HTML

①『今回の記事作成時間』のCSS＆HTML

ＣＳＳ

/* 飾り枠01今回の記事作成時間 / 
.mybox01{ border: 1px solid #0099FF; / 線の太さ・種類・色 / 
border-radius: 5px; padding: 45px 10px 10px 10px; / 内側の余白 上・右・左・下 / 
position: relative; 
z-index: 0; 
} 
.mybox01:before{ 
background-color: #0099FF; / タイトル部分背景色 / 
border-radius: 5px 5px 0px 0px; color: #fff; / タイトル部分文字色 / 
content: '今回の記事作成時間'; 
font-weight: bold; height: 25px; / タイトル部分高さ / 
padding: 5px 10px; 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
z-index: 2;
 } 
.mybox01:after { 
border-style: solid; 
border-width: 10px 10px 0 10px; 
border-color: #0099FF transparent transparent transparent; / 吹き出し三角部分の色 */
content: "";
position: absolute;
top: 35px;
left: 10px;
width: 0px;
height: 0px;
z-index: 1;
}

対応HTML

<div class="mybox01"><font size="6" color="#ff0000"><strong>約100時間</strong></font></div>

見た目は下記のような感じになります。

②『今回の支出＆記事作成時間』のCSS＆HTML

ＣＳＳ

/* 飾り枠02今回の支出＆記事作成時間 */
.mybox02{ border: 1px solid #0099FF; / 線の太さ・種類・色 / 
border-radius: 5px; padding: 45px 10px 10px 10px; / 内側の余白 上・右・左・下 / 
position: relative; 
z-index: 0; 
} 
.mybox02:before{ 
background-color: #0099FF; / タイトル部分背景色 / 
border-radius: 5px 5px 0px 0px; color: #fff; / タイトル部分文字色 / 
content: '今回の支出＆記事作成時間'; 
font-weight: bold; height: 25px; / タイトル部分高さ / 
padding: 5px 10px; 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
z-index: 2;
 } 
.mybox02:after { 
border-style: solid; 
border-width: 10px 10px 0 10px; 
border-color: #0099FF transparent transparent transparent; / 吹き出し三角部分の色 */
content: "";
position: absolute;
top: 35px;
left: 10px;
width: 0px;
height: 0px;
z-index: 1;
}

対応HTML

<div class="mybox02"><font size="6" color="#ff0000"><strong>支出100,000円　/　作成時間100時間</strong></font></div>

見た目は下記のような感じになります。

③『現在までの累計支出＆総制作時間』のCSS＆HTML

ＣＳＳ

/* 飾り枠03現在までの累計支出＆総制作時間 */
.mybox03{ border: 1px solid #0099FF; / 線の太さ・種類・色 / 
border-radius: 5px; padding: 45px 10px 10px 10px; / 内側の余白 上・右・左・下 / 
position: relative; 
z-index: 0; 
} 
.mybox03:before{ 
background-color: #0099FF; / タイトル部分背景色 / 
border-radius: 5px 5px 0px 0px; color: #fff; / タイトル部分文字色 / 
content: '現在までの累計支出＆総制作時間'; 
font-weight: bold; height: 25px; / タイトル部分高さ / 
padding: 5px 10px; 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
z-index: 2;
 } 
.mybox03:after { 
border-style: solid; 
border-width: 10px 10px 0 10px; 
border-color: #0099FF transparent transparent transparent; / 吹き出し三角部分の色 */
content: "";
position: absolute;
top: 35px;
left: 10px;
width: 0px;
height: 0px;
z-index: 1;
}

対応HTML

<div class="mybox03"><font size="6" color="#ff0000"><strong>支出100,000円　/　制作時間100時間</strong></font></div>

見た目は下記のような感じになります。

今回の経費＆記事作成時間

と、言う事でせっかく作ってみましたが、現在は新フォーマットに差し替えておりますので使用していなかったりします。

※新たな囲み枠の作り方は↑こちらからどうぞ。

個人的には、もうメンドイのでCSSには触りたくないなーと思う今日この頃。

しかし、この後も色々と改修する事になる事をこの時の私は知りませんでした。

では、恒例の累計出費＆記事作成時間を発表して今回は終わりにしましょう。

最後まで読んでくださった方はありがとうございました。

この投稿をInstagramで見る

神音の社(@shionnoyashiro)がシェアした投稿

※フォーマット統一用のリライト作業済みの記事です。