WordPressの高機能な無料テンプレートCocoon。
Cocoonは有料のテンプレートと比べても全く見劣りしない機能満載のテンプレートです。（いやむしろ勝ってると思う）
そのCocoonのスキンを作ってみました。
スキンの名前は『Calm（カーム）』
V1.4の変更点
・ページネーションのカレント番号が大きすぎたので修正。
・目次の傾きが大きすぎたので修正。
2020.10.04アップデート
V1.5の変更点
・メインカラムやサイドバーの影や枠線を削除。
『Calm＝穏やか』という意味ですが、作っている途中からそのイメージからどんどん離れているような。
ま、いいか＾＾
Cocoon用のスキン Calm（カーム）の変更点
Calm（カーム）の変更点は次の通り。
カテゴリーラベル
一番目につく変更点がエントリーカードのカテゴリーラベル。
こんな感じで、斜めにしてみました。
そして、エントリーカードにマウスを乗せると、カテゴリーラベルがギュイーンって感じで中央に寄っていきます。
マウスを乗せた時の動きは、トップページで確認できますよ。
なお、このスキンはカードタイプ縦3列は非推奨。
カテゴリーラベルについては他にも注意点があるので、詳しくは次の記事からどうぞ。
見出し
見出しはこんな感じ。
見出し（H2）
H2の見出しです。
見出し（H3）
H3の見出しです。
見出し（H4）
H4の見出しです。
見出し（H5）
H5の見出しです。
見出し（H6）
H6の見出しです。
ページネーション
ページボタンを変更。
ちょっと形にこだわったけど、なんかNHKのロゴみたいになってしまった。
カレント以外のページボタンにマウスを乗せると、ふわっと浮きます。
グローバルメニュー
メニューにマウスを乗せると、中央からゆっくり反転していくだけのシンプルなものにしました。
本当はサブメニューになんかアクションをつけたいけど、難しくて手が出せない。
目次
本を開いたイメージにしたつもりですが、凝りすぎたかも。
SNSフォローボタン
SNSのボタンにマウスを乗せると、くるっと反転します。
それだけ＾＾
ウィジェット（新着記事、人気記事）
ウィジェットの新着記事、人気記事にマウスを乗せると、アイキャッチが拡大しながら斜めになります。
右のサイドバーで確認できます。
テーブル
テーブルはこんな感じ。
| ヘッダー | ヘッダー |
|---|---|
| 項目左１ | 項目右１ |
| 項目左２ | 項目右２ |
| 項目左３ | 項目右３ |
| 項目左４ | 項目右４ |
引用
意外と引用を使うので、ちょっと変更。
引用は読者に読んでほしい部分なので、青っぽい色で目立つようにしました。
Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。
見た目はシンプルですが、初めての方でも感覚的に使えるように便利な機能を織り込んで作りました。
100％GPLテーマなので自由にご利用いただけます。
その他細かい変更
- スキンは全体的に落ち着いた茶系統の色にしました。
- エントリーカードやブログカードに影をつけて、浮いているようにしました。
スキン（Calm）のダウンロード
ひとまず完成しました。
使ってみたい方は、下のリンクからスキン（zip圧縮）をダウンロードしてください。
スキンをアップロードしてCocoonで使えるようにする
ダウンロードしたスキンをCocoonで使えるようになるには、サーバーへのアップロードとスキンの切り替えが必要です。
以下の記事に詳細な手順を書いているので、参考にしてください。
コメント