【Cocoon】カスタムCSSの使用例

CocoonのカスタムCSSの使用例を紹介します。

使用例

この枠はカスタムCSSで作成しました。

実装手順

上記の表示は以下のようにして実装しました。

  1. カスタムHTMLに <p id="test">この枠はカスタムCSSで作成しました。</p> を入力
カスタムHTMLへの入力

カスタムHTMLの入力欄は「プロックの追加」から追加します。

  1. カスタムCSSに以下のCSSコードを入力
p#test {
  border-style: solid;
  border-width: 2px;
}
カスタムCSSへの入力

カスタムCSSの入力欄は投稿画面の下部にあります。

説明

カスタムCSSに入力した内容は、<style></style>に挟まれた後、<head></head>内に挿入されるようです。

このようなイメージですね。

<html>
<head>
...
...

<style>(カスタムCSSへの入力内容)</style>
...
</head>
<body>
...
...
</body>
</html>

styleタグには自動的に挟まれるので、カスタムCSSの入力欄へはstyleタグの入力は不要です。

おわりに

CocoonのカスタムCSSの使用例を紹介しました。
「このページだけスタイルを変更したい」というときに便利ですね。

では。


YouTube: ミサキさん

問い合わせ先
Mail: caprico.aries@gmail.com
Twitter: https://twitter.com/caprico_aries(無言フォローもお気軽に)

コメント

タイトルとURLをコピーしました