【Cocoon】タイトル付ボックス(JIN風)を作ってみよう

Cocoon タイトル付のボックスを作る Cocoon

こんにちは、ikuzo(いくぞう)です。

 

Cocoon(コクーン)をお使いのみなさま、今回はタイトル付のボックスを作ってみましょう。

タイトル付ボックスとはこんなやつですね。

タイトル付のボックスの見本

Cocoonはあらかじめいくつかのボックスが用意されていますが、タイトル付のボックスはありません。

なので「タイトル付のボックスが使いたい!」という方も多数いらっしゃると思います。

今回はそんなあなたに、コピペで使えるタイトル付ボックスをご用意しました。

色などをアレンジして是非使ってみて下さい。

 

なお、記事のタイトルには「Cocoon」と入ってますが、Cocoon以外でも使えます(笑)

それでは早速いってみましょう!

スポンサーリンク

タイトル付ボックス(JIN風)

今回作ったボックスはWord Pressのテーマ「JIN」で使われているボックスを参考にしました。

というか、ほぼ同じです(笑)

パソコンで見るとこんなふうに表示されます。

JIN風のタイトル付ボックス(PC表示)

スマホだとこのように表示されます。

JIN風のタイトル付ボックス(スマホ表示)

パソコンでの表示はタイトルがボックスの左上に、

スマホでの表示はタイトル部分とボックスの幅を同じにして、タイトル文字もセンターに配置されるようにしました。

幅399px以下のデバイスで、スマホのボックスに切り替わります。

切り替えの幅は任意の値に変更可能です。

タイトル付ボックスのCSSを貼り付ける場所

私がブログを始めたばかりのころですが、こんな記事を書いたことがありました。

【WordPress】初心者向け ボックス(囲み枠)のカスタマイズ

 

ブログ開始2ヶ月後に書いた渾身の意欲作です。

作ったころは、だーれも見てくれませんでしたが、

現在は12,000PVを超え、今では「全米が泣いた超話題作」となりました(数字だけ本当)。

 

上の記事では、HTMLのタグの中にCSSを書き込んでボックスを作りましたが、

今回はCSSを「スタイルシート」、もしくは「カスタムCSS」に貼り付けてボックスを作ります。

これは、好きな方で構いません。

 

今回作るボックスを多用するようであれば「スタイルシート」、

今回作るボックスをその記事だけに使うのであれば「カスタムCSS」がいいと思います。

 

WordPress初心者の方で、「スタイルシートをいじるのがこわいのよ!ikuzoさん!

という人は、カスタムCSSに貼り付けましょう。

「カスタムCSS」なら貼り付けに失敗しても他のページには一切影響が出ないので安心です。

スタイルシートに貼り付け

今回作るボックスをいくつかの記事に多用する人は、こちらに貼り付けましょう。

WordPressの「外観」→「テーマエディター」をクリックします。

ダッシュボードの「外観」→「テーマエディター」をクリック

お使いのテーマがCocoonでしたら、スタイルシートが「Cocoon Child」になっていることを確認します。

もし別のものになっていたら「Cocoon Child」を選択して下さい。

スタイルシートが「Cocoon Child」になっていることを確認

そして、ここにCSSを貼り付けます。

スタイルシートのCSSを貼り付ける場所

この場合だと18行目あたりにカーソルを合わせて貼り付けるといいですね。

カスタムCSSに貼り付け

投稿ページ(記事のページ)の一番下の方に「カスタムCSS」という欄があります。

WordPressの「カスタムCSS」

初心者の方、もしくは今回のボックスをその記事限定で使うのであれば、こちらに貼り付けましょう。

スポンサーリンク

タイトル付ボックスのCSS

このCSSをすべてコピーして「スタイルシート」か「カスタムCSS」に貼り付けて下さい。

@media (min-width: 400px){
.title-box1{
margin: 3em auto 2.5em;
padding: 40px 25px 5px;
width: 90%;
}
}

@media (max-width: 399px){
.title-box1{
margin: 3.5em auto 2em;
padding: 50px 20px 5px;
width: 100%;
}
}

@media (max-width: 399px){
.title-box1-title{
left: 0!important;
right: 0!important;
text-align: center;
}
}

.title-box1{
position: relative;
color: #333333;/*文字の色*/
}

.title-box1:before {
position: absolute;
content: "";
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #aaaaaa;/*背景色*/
opacity: 0.12;/*背景色の濃さ*/
border-radius: 4px;/*ボックスの角の丸み*/
box-sizing: border-box;
z-index: 0;
}

.title-box1-title{
position: absolute;
line-height: 18px;
font-size: 18px;/*タイトル文字の大きさ*/
color: #ffffff;/*タイトル文字の色*/
background: #57b3ba;/*タイトル部分の背景色*/
left: 20px;/*タイトルの位置(左右)*/
top: -18px;/*タイトルの位置(上下)*/
padding: 10px 15px;/*タイトル部分の大きさ*/
border-radius: 2px;/*タイトル部分の角の丸み*/
letter-spacing: 0px!important;
}

 

後ろにコメント(説明書き)がある箇所はカスタマイズ可能です。

ご自身でオリジナルのボックスを作ってみて下さい。

CSSの書き方や変更方法は、こちらの記事が参考になると思います。

【WordPress】初心者向け ボックス(囲み枠)のカスタマイズ

 

ブログを始めて2ヶ月後に書いた記事なのでかなり見にくいかもしれませんが…

というか、2年たった今も大して進化してないですけどね。

 

補足としては、PCとスマホ表示を切り替える幅の設定は、ここを変更します。

PCとスマホ表示を切り替えるCSS

400px以上でPC表示、399px以下でスマホ表示になるように設定してあります。

ここは任意の値に変更して下さい。

スポンサーリンク

テキストエディタでボックスを作る

では、いよいよボックスを作りましょう。ここまでくれば、あとは簡単です。

下のHTMLをテキストエディタに貼り付けて、タイトルとボックス内の文章を変更するだけです。

<div class="title-box1">

これはタイトルのついたボックスの見本です。
<div class="title-box1-title">好きなタイトル</div>
</div>

JIN風のタイトル付ボックス(PC表示)

PC表示でタイトル部分を太字にするには、次のCSSを「スタイルシート」もしくは「カスタムCSS」へ追加します。

@media (min-width: 400px){
.title-box1-title{
	font-weight: 700
}
}

タイトル部分を太字にしたボックス

ボックス内はドラッグできないので、本文を太字にするには本文を「strongタグ」で囲んで下さい。

<div class="title-box1">

<strong>これはタイトルのついたボックスの見本です。</strong>
<div class="title-box1-title">好きなタイトル</div>
</div>

本文を太字にしたボックス

ボックスが完成したら、スマホでも確認してみましょう。

タイトル付のボックス(スマホ表示、本文は太字)

実際に完成したタイトル付ボックス

実際に先ほどのCSSを「カスタムCSS」に貼り付けて表示しているのが、下のボックスです。

これはタイトルのついたボックスの見本です。

好きなタイトル

 

あれ?表示されないぞ」という時はプレビュー画面で確認してみて下さいね。

プラウザの幅を399px以下にすれば、スマホでの表示も確認できます。

無事に表示されましたか?

今回は以上です。おつかれさまでした。

コメント