【Cocoon】装飾が簡単!記事を書くときに「スタイル」機能がとにかく便利!

パソコン Cocoon

こんにちは。今回は、WordPressテーマ【Cocoon】の便利機能の一つ、「スタイル」をご紹介したいと思います。

▼スタイルを使うと、たとえばこんな装飾が簡単にできちゃうんです!
※これらはほんの一部です!

————————————————–

初めてスペインに行くなら、ぜひおすすめしたいのがバルセロナ。

ガウディ建築のほとんどはこのバルセロナに建っているんです。
バルセロナでおすすめのバックパッカー向けホテル10選
————————————————–
「スタイル」を使えば、こんな風に背景色を敷いたり、いろいろな囲み枠なんかも簡単に入れることができます。
こういった装飾を取り入れることで、記事が見やすくなったり、上級者っぽいページにすることができますよね。
プラグインを入れなくても、この機能だけで十分便利に使うことができます。
では、詳しくみていきましょう。

文字の装飾

スタイルをクリックすると、こんなふうにたくさんの機能が表示されます。
文字の装飾は、上から3つ、「インライン」「マーカー」「フォントサイズ」を使用します。

スタイルをクリック

インライン

1.装飾したい文字をドラッグして選択します。

変えたい文字を選択

 

2.まずは太字にしてみましょう。【インライン】→【太字】をクリック。

太字

3.すると…太字になりました!
太字になった
文字の装飾系はわかりやすいので、サクッといきますね。
他にはこんなこと↓ができます。よく使うのは、「太字」「赤太字」「青太字」とかでしょうか。
「インライン」でできること

マーカー

では次に「マーカー」機能をご紹介します。

マーカー機能

 

マーカーは6種類ありますので、それぞれどんな風になるかを見てみましょう。

マーカー機能

色は3色で、背景色と太めのアンダーラインになっています。優しい色合いなので見やすいですよね。

フォントサイズ

フォントサイズも変えることができます。デフォルトでは「18px」になっています。

フォントサイズ

囲み枠

ボックス(アイコン)

これはとてもおすすめです!囲み枠なのですが、「ボックス(アイコン)」の中でもいろいろな種類があるので、ひとつずつ見ていきましょう。

ボックス(アイコン)

 

まずはこの3種類です。

補足情報囲み枠

一気に画面が明るくなりますね!文字だけよりもグッと読みやすくなるし、大切なポイントを押さえてもらいやすい効果もあります。情報の内容に合わせて使い分けましょう。

 

次にこちら。

ボックス(アイコン)2

OK NGなど
こちらも使える場面が多そうですよね。アイコンがついているので一気に上級者風。
これがクリック一つでできるなんて、本当に便利!

ボックス(案内)

こちらも囲み枠ですが、アイコンはついていないシンプルなものです。色は8種類あります。
ボックス(案内)
背景色のみの囲み枠
背景色のみの囲み枠2
「ライト(白色)」がちょっと見にくいですが…この色は、「スキン」を変更するなどして、背景色が白色じゃない場合に映えますね。
背景色のある囲み枠というだけでなく、文字色も自動で変わるんですよ。

ボックス(白抜き)

次はこちらの「白抜き」の囲み枠です。背景色があるものに比べるとすっきりした印象になります。
白抜き囲み枠

ボックス(タブ)

こちらは種類がとても多いんです。

ボックス(タブ)
種類を選んで、さらに色を選ぶことができますので、いくつか抜粋してご紹介していきます。
ボックス(タブ)
ボックス(タブ)
こんな風に、アイコンつきのタブ風ボックスになっています。いろんな用途に使えます。

ボックス(付箋風)

付箋風のボックスもあります。アクセントになりますね。

ボックス(付箋風)

バッジ

バッジは「参考」や「出典」などに使いやすいです。
例)参考 acbdef.com
色もたくさんあって、全9色から選べます。
バッジ

マイクロコピー

最初は使い方がよくわからなかったのですが、リンクやボタン周りに表示させて使うようです。キャッチコピーを添えるような感覚のような感じがします。
マイクロコピー
【テキスト 上 中央】だとこんな感じ。
マイクロコピー 真ん中
「左寄せ」「右寄せ」「下につける」こともできます。
左寄せと右下
また、【吹き出し 上】にするとこんな感じになります。
吹き出し 真ん中

ボタン

先程マイクロコピーで使用したものも、この「ボタン」を使用しました。こちらも色とサイズを選ぶことができます。

ボタン

この「ボタン」、カーソルをのせると色が変わるんです!そして、色はなんと18色から選べます!

レッド(小)   ピンク(中)   パープル(小)

ディープパープル(大)

インディゴ ライトブルー イエロー オレンジ ブラウン

 

文字にリンクをつけておけば、ボタンとしての機能もバッチリです!

ちなみに、「囲みボタン」も見た目は同じですが、こちらを使うとアフィリエイトリンクなどでもコード改変しないでボタン化することができます。

囲みブログカードラベル

最後はブログカードラベルです。ブログカードというのはこういうやつです。

初心者でも簡単!WordPressブログ構築におすすめのレンタルサーバー【エックスサーバー】の登録手順を解説します。
今回はWordPressブログの開設に必要な、レンタルサーバーの登録手順について、図解でご紹介していきます。「サーバーって何?」ということにも触れていますので、細かいことがわからない方でも大丈夫です!まずは、WordPressを始めるために必要な、サーバーの準備をしていきましょう。
囲みブログカードラベル
ブログカードをさらに囲む枠が囲みブログカードラベルと呼ばれています。
関連記事や人気記事など、いろいろな種類から選ぶことができます。
ブログカード
ちなみに投稿画面ではこんな感じ。リンクさせたい記事のURLを入れればOKです!
これが、下書き保存をしてプレビューを見ると↑上の画像のように表示されます。
投稿画面
いかがでしたか?「スタイル」だけでこの充実の機能。そのときどきに合ったものを選んで、ぜひ見やすいブログ作りの参考にしていただけたらうれしいです。