ブログを始めた頃、いろんな方のブログを読み、かっこいい装飾などを見て真似したいな、と思った経験はありませんか。
私はそんな経験ばかりで、調べてもみても、英数字を並べた暗号を張り付ければ簡単にできます、といった難しいことをいうブログに行きついてばかりで、いつも諦めてしまいます。
WordPressのテーマ「cocoon」を使えば、簡単に文章を囲う枠を表示させることができるので、その方法と種類を紹介します。
もちろんプログラミングの知識は不要です。
Cocoonで使える枠の表示方法
白抜きボックスを例にして文章を枠で囲ってみます。
枠の表示方法
まず枠を作ります。
ブロックの右側の「+」をクリック→「Cocoonボックス」→「白抜きボックス」の順番でクリックしてください。
この手順で枠を表示させると、枠の中にさらにブロックができるので、ここに文章を記入すれば完成です。
枠の中にブロックができます。
枠の色を変更することも可能です。
枠の色を変える方法
枠となっているブロックをクリックすると、右側に色の選択肢が表示されます。
枠の色、枠の中の色、枠内の文字の色を変更できます。
↑こんな感じ。
Cocoonで使える枠の種類
Cocoonで使える枠の種類を紹介します。
白抜きボックス
先ほどの例でも紹介した「白抜きボックス」です。
案内ボックス
先頭文字を多くく表示させたりできる「案内ボックス」。
先頭文字を大きくさせることで注目されやすくなりそうですね。
「ドロップキャップ」というところをonにするとできます。
文章が1行だけだと大きくなった文字が枠からはみ出てしまいます。
アイコンボックス
アイコンを表示してくれます。アイコンも複数選べて便利です。
付箋風ボックス
付箋風にメッセージを伝えるために使えますね。色が選択できます。
黄色
緑色
タブボックス
タブの付いたボックスです。タブ内のアイコンも変更可能です。
ポイント
ピックアップ。もちろん色も変更可能です。
見出しボックス
見出しボックスです。デフォルトではありませんが、アイコンを選択することもできます。
アイコンの種類が豊富です。
タブ見出しボックス
タブ見出しボックスです。
タブボックスではアイコンと文言がセットになって決まっていましたね。
タブ見出しボックスではタブ内のアイコンと文言が自由に決めることができます。もちろん色の変更可能です
ラベルボックス
ラベルボックスです。
タブ見出しボックスのタブがないバージョンですね。
枠にタイトルを記入できる感じです。
Cocoonで使える囲み枠：まとめ
今回はCocoonで使える囲み枠の表示方法と種類を紹介しました。ブロックエディターを使い慣れていれば簡単ですね。
Cocoonではブロックの選択要素がまだまだたくさんあり、いろんな機能を知るたびに、これが無料で使えていいのかと驚かされます。
本当にありがとうございます。
では(^^)
コメント