＃043　WordPressで新たな囲み枠を作ってみる

イントロダクション

以前の記事で過去記事のリライトをする事になったのはお話したと思いますが、どうせだったら経費＆記事製作時間等に使用している囲み枠も新規作成して、リライトの際に完全にフォーマットを統一した方が良いという話になりまして……

今回は、前に作った囲み枠↓の方を作り直してみる事になりました。

まあ、完全に作り方を忘れていますが、以前に作った記事を見直しながらやっている内に思い出すでしょう。……多分。

新たな囲み枠

以前の記事によると、囲み枠を作るには最初にCSSの追記して、記事を書く時にHTML入力をするという2つのハードルを越えねばいけないらしいです。

……ああ、そういえばそんな事をやってましたね。何か体感的には半年以上も前にやってたような気がしてますが、実はまだ実装から20日かそこらしか経過していない事に愕然としました。

それだけしか経ってないなら、別に無理して換装しなくても良いような気がしますが、師匠達から見づらいという苦情がきているので、もうちょっとシンプルなタイプにしてみる事にします。

ってな訳で、↑上記サイト様の記事を参考に新たな囲み枠を作成してみましょう。

ざっと見て、私の琴線に触れたのは27番目のやつでしたので、チョイチョイ改変してみます。

で、20分くらい適当に改修してみて出来たのが↑上記の囲み枠となります。

シンプルで見やすくするのが目的なので、内部の文字は太字にする程度にしてみました。

師匠達からも一応の及第点を頂いたので、さっそく今回から使用していこうと思います。

※過去記事の方もリライト品はこちらを採用していく事になります。

今回使用したCSS＆HTML

HTML

<div class="box01">
    <span class="box-title">ここにタイトル</span>
    <p><strong>ここに文章</strong></font></p>
</div>

CSS

/* 飾り枠04 */
.box01 {
    position: relative;
    margin: 2em 0;
	background: #fff8e8;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
    padding: 0.5em 1em;
    border: solid 3px #0099FF;
}
.box01 .box-title {
    position: absolute;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #0099FF;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box01 p {
    margin: 0; 
    padding: 0;
}

見た目はこちら↓

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

今回は休養日という事で過去記事のリライト作業を試しに行ってみました。

まあ、その時に今使っている囲み枠が見づらいとクレームがついたので、今日の記事で新造する事になった訳なんですけどね。

ってな訳で、最初の記事↑をリライトしてみたので宜しければ読んで頂ければ嬉しいです。

画像を加工して差し替えるのが地味に時間と手間がかかりました。

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

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