便利な装飾が簡単にできる「スタイル」をみてみよう!

Cocoon

Cocoonの使いやすさの1つとして「スタイル」ボタンがあります。

正直便利すぎます!以前使っていたテーマでは、テキストモードで、コードを入力していたことが、簡単にできてしまう。

このスタイルを上手に使う事で、読んでいただく方に、より分かりやすい記事にすることが可能です(上手につかうってところがポイントです)

 

使いかたは簡単♪

装飾したい箇所を選択して「スタイル」の中から好きなスタイルをえらぶ!超簡単ですよね。

どんなスタイルがあるかみていきましょう。

スポンサーリンク

Cocoon「スタイル」インライン

太字

赤字

赤太字

赤アンダーライン

青太字

緑太字

打ち消し線

キーボードキー

 

Cocoon「スタイル」マーカー

黄色マーカー

赤色マーカー

青色マーカー

黄色アンダーラインマーカー

赤色アンダーラインマーカー

青色アンダーラインマーカー

 

3色しかつかえないのは寂しいですよね。カスタマイズして好きな色でマーカーをしましょう!
詳しくは⇒⇒⇒マーカー・アンダーマーカーのカスタマイズ

 

Cocoon「スタイル」ボックス(アイコン)

ボックスはたくさん種類が用意されています。他のブログとかでも良く見かけます。効率よくポイントを見極めてつかいたいとこですね。

補足説明(i)
補足説明(?)
補足説明(!)
補足説明(メモ)
補足説明(OK)
補足説明(NG)
補足説明(GOOD)
補足説明(BAD)
補足説明(プロフィール)

Cocoon「スタイル」ボックス(案内)

プライマリー(濃い水色)
サクセス(薄い緑)
インフォ(薄い青)
ワーニング(薄い黄色)
デンジャー(薄い赤色)

 

Cocoon「スタイル」ボックス(白抜き)

灰色
黄色
赤色
青色
緑色

 

 

Cocoon「スタイル」ボックス(タブ)

これは使われがちなボックスですよね。このボックスは色も選ぶようになります。

など。他にもいろいろあるので、確認してみてください。

 

Cocoon!「ボックス」タブのローマ字表記をカタカナに変える方法

ここで気になるのは左上のボックスの表記がアルファベッドということです。

【CHECK】【COMMENT】【POINT】のところ

このブログのテーマは自分よりも初心者の方にわかりやすく!というものですので、この部分の表記を「カタカナ」に変更しようと思います。

Cocoonの製作者のわいひら様のHPにカスタマイズ方法がでていました。

スタイルシートに以下のコードをはりつけてください。

スタイルシートへの貼り付けがわからなければこちらの記事をごらんください
⇒⇒⇒スタイルシートへコード貼り付けてカスタマイズする方法

.bb-check::before{
  content: "\f00c  チェック";
}

.bb-comment::before{
  content: "\f075  コメント";
}

.bb-point::before{
  content: "\f0eb  ポイント";
}

.bb-tips::before{
  content: "\f19d  ティップス";
}

.bb-hint::before{
  content: "\f0f3  ヒント";
}

.bb-pickup::before{
  content: "\f005  ピックアップ";
}

.bb-bookmark::before{
  content: "\f02e  ブックマーク";
}

.bb-memo::before{
  content: "\f040  メモ";
}

.bb-download::before{
  content: "\f019  ダウンロード";
}

.bb-break::before{
  content: "\f0f4  休憩";
}

.bb-amazon::before{
  content: "\f270  アマゾン";
}

これでカタカナ表示に変更しました。確認してみましょう!

ボックス(チェック)灰色
ボックス(コメント)黄色
ボックス(ポイント)赤色
ボックス(ティップス)青色
ボックス(ヒント)緑
ボックス(ピックアップ)灰色
ボックス(コメント)黄色
ボックス(ブックマーク)
ボックス(メモ)
ボックス(ダウンロード)

 

などなど。自分のブログにはカタカナが良いかなと思っています。

 

Cocoon「スタイル」ボックス(付箋風)

ボックス(付箋風)
ボックス(付箋風)
ボックス(付箋風)
ボックス(付箋風)
ボックス(付箋風)

 

Cocoon「スタイル」バッジ

バッジ(オレンジ)

バッジ(レッド)

バッジ(グリーン)

バッジ(ブラウン)

 

Cocoon「スタイル」ボタン(B機能)

 

レッド(小)

レッド(小)

レッド(小)

パープル(小)

パープル(中)

パープル(大)

など(他にも色あり)

 

Cocoonのスタイルはやっぱりすごい!

Cocoonに標準で搭載されている「スタイル」を確認していましたが、本当にすごいテーマだと思います。

1番先にも言いましたが、前使っていたテーマでは、このあたりの装飾はすべて、テキストモードで、コードをうたなければ表示されなかったのです。

無料テーマ「Cocoon」おそるべしですね。

今まで書いてきた記事を修正していく事をリライトと言います。ここぞという箇所で上記の装飾をいれて、さらに閲覧者さまに情報をとどけていきたいです。

この記事を読んだら、ぜひ過去の記事をリライトしてみてはいかがでしょうか?