デザイン確認ページ

デザイン

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

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

見出し2のタイトルです

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

見出し3のタイトルです

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

見出し4のタイトルです

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

見出し5のタイトルです

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

見出し6のタイトルです

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

リストのデザインについて

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

ulタグ

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

  • リストタグの装飾
  • リストタグの装飾
  • リストタグの装飾

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

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

  • Cocoonデフォルトのリスト
  • Cocoonデフォルトのリスト
  • Cocoonデフォルトのリスト

olタグ

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

  1. リストタグの装飾
  2. リストタグの装飾
  3. リストタグの装飾

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

dlタグ

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

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

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

SNSアイコン

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

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

SNSアイコンにブランドカラーを適用する

SNSアイコンにモノクロを適用する(元に戻す)

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

divタグ

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

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

文字の装飾

文字の装飾は記事作成画面の上にある各種ボタンのことです。

キーボードの装飾デザインです。手順を説明するのにも使えますね。
投稿投稿一覧から記事を作成します。

ブログカード

インデックスのデザインについて
インデックスのデザインについて紹介します。 以下のボタンを押すと、エントリーカード(デフォルト)のデザインを確認することができます。 エントリーカード(デフォルト)のデザインをチェックする ただし抜粋がないと寂しいかもしれ...

プロフィール欄(記事を書いた人)

以下のフォローボタンは、サンプルサイト用にすべてのアイコンを出しています。
インスタグラムやFacebookページは存在していません。

コメント

  1. たなかま たなかま より:

    管理者コメントのテスト

  2. ユーザーのコメントテストです。

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