デザイン確認ページ

シンプルペーパースキンでデザインしているパーツの一覧です。

目次はデフォルトのデザインよりも、左右幅を広くしています。
目次の左右幅をいっぱいにすると、スマホでスクロールしにくいので、右側に適度な余白を持たせて調整しました。
また、背景色をつけています。

見出し2のタイトルです

見出しは極力シンプルにしています。
その上でゆったりとした余白を持たして、品の良い雰囲気を作り出しています。

見出しは極力シンプルにしています。
その上でゆったりとした余白を持たして、品の良い雰囲気を作り出しています。

見出しは極力シンプルにしています。
その上でゆったりとした余白を持たして、品の良い雰囲気を作り出しています。

見出しは極力シンプルにしています。
その上でゆったりとした余白を持たして、品の良い雰囲気を作り出しています。

見出しは極力シンプルにしています。
その上でゆったりとした余白を持たして、品の良い雰囲気を作り出しています。

リストのデザインは、ul・olだけでなく、dlもデザインしています。

ulタグの装飾は、class名にsimpleを付けてください。
classがない場合は、Cocoonデフォルトのデザインになります。

かなりゆったりとしたレイアウトにしています。
強調したい時などに使うと良い感じです。

classがない場合は、Cocoonデフォルトのデザインになります。

olタグの装飾は、class名にsimpleを付けてください。
classがない場合は、Cocoonデフォルトのデザインになります。

こちらもゆったりとしたレイアウトにしています。

dlタグは、定義・説明のためのタグです。
dtタグで定義した文に対して、ddタグで説明を書きます。

例えば以下のような使い方ができます。

シンプルペーパースキンの特長（dtタグ）: 見た目がゆったりとしたシンプルなブログに合います。（ddタグ）; 心地良いスペースにこだわり、品のあるブログに見せます。（ddタグ）
対応（dtタグ）: WordPressの無料テーマCocoon専用スキンです。（ddタグ）

このサイトのSNSアイコンは、Cocoon設定の「モノクロ」になっています。
Cocoon設定→SNSシェア（フォロー）→ボタンカラーから選びます。

通常はブランドカラーになっていますので、お好みでお選びください。
以下のボタンでブランドカラー適用時のデザインを確認できます。

実際の運用時は、Cocoon設定から変えてください。

divタグで枠を付けるには、class名にinfo-box-solidを付けてください。
以下のサンプルは、olタグに対し、divタグのinfo-box-solidクラスで囲んでいます。

olタグをdivのinfo-box-solidで囲む
class名info-box-solidは、青い枠線を付ける装飾です。これを付けると、本文の文章と差別化する区切りができます。
olタグをdivのinfo-box-solidで囲む
class名info-box-solidは、青い枠線を付ける装飾です。これを付けると、本文の文章と差別化する区切りができます。