※切り替えないと、他のスキンが選択されている場合があります。
WordPressの高機能な無料テンプレートCocoon。
Cocoonは有料のテンプレートと比べても全く見劣りしない機能満載のテンプレートです。（いやむしろ勝ってると思う）
そのCocoonのスキンを作ってみました。
スキンの名前は『Calm（カーム）』
ブラウザにIEを使うと、インデックスのカードタイプが「タイルカード（2列、3列）」の場合に、隣のエントリカードと重なることがあります。
IEは他のブラウザと比べて、レイアウトが崩れる傾向があるので、IEではなくEdgeをおすすめします！
『Calm＝穏やか』という意味ですが、作っている途中からそのイメージからどんどん離れてしまって、どちらかというと派手なスキンになってしました。
Cocoon用のスキン Calm（カーム）の変更点
Calm（カーム）の変更点は次の通り。
カテゴリーラベル
一番目につく変更点がエントリーカードのカテゴリーラベル。
こんな感じで、斜めにしてみました。
そして、エントリーカードにマウスを乗せると、カテゴリーラベルがギュイーンって感じで中央に寄っていきます。
マウスを乗せた時の動きは、トップページで確認できますよ。
なお、このスキンはカードタイプ縦3列は非推奨。
カテゴリーラベルについては他にも注意点があるので、詳しくは次の記事からどうぞ。
見出し
見出しはこんな感じ。
見出し（H2）
H2の見出しです。
見出し（H3）
H3の見出しです。
見出し（H4）
H4の見出しです。
見出し（H5）
H5の見出しです。
見出し（H6）
H6の見出しです。
ページネーション
ページボタンは卵のような形に変更。
カレント以外のページボタンにマウスを乗せると、ふわっと浮きます。
※下のボタンでクリックしても、画面は移動しません。
目次
本を開いたイメージにしたつもりですが、凝りすぎたかも。
ウィジェット（新着記事、人気記事）
ウィジェットの新着記事、人気記事や、おすすめメニュー、カルーセルなどにマウスを乗せると、奥の方にパタンとちょっと倒れます。
右のサイドバーで、その動きを確認できます。
トップページ、ボックスメニュー
Cocoonは、ポチポチっと設定だけで、トッページをいわゆるサイト型のトップページに簡単に変更できます。
そのトップページの、一覧形式とカテゴリー形式とも、スキンにあわせて修正しています。
また、ボックスメニューも修正しています。
テーブル
テーブルはこんな感じ。
| ヘッダー | ヘッダー |
|---|---|
| 項目左１ | 項目右１ |
| 項目左２ | 項目右２ |
| 項目左３ | 項目右３ |
| 項目左４ | 項目右４ |
引用
意外と引用を使うので、ちょっと変更。
引用は読者に読んでほしい部分なので、青っぽい色で目立つようにしました。
Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。
見た目はシンプルですが、初めての方でも感覚的に使えるように便利な機能を織り込んで作りました。
100％GPLテーマなので自由にご利用いただけます。
その他細かい変更
- スキンは全体的に落ち着いた茶系統の色にしました。
- エントリーカードやブログカードに影をつけて、浮いているようにしました。
- プロフィールウィジェットの背景を派手にしました。（サイドバー参照）
- その他、細かい変更。
スキン（Calm）のダウンロード
ひとまず完成しました。
使ってみたい方は、下のリンクからスキン（zip圧縮）をダウンロードしてください。
ブラウザにIEを使うと、インデックスのカードタイプが「タイルカード（2列、3列）」の場合に、隣のエントリカードと重なることがあります。
IEは他のブラウザと比べて、レイアウトが崩れる傾向があるので、IEではなくEdgeをおすすめします！
コメント