Cocoonスキン『Calm(カーム)』の特徴

無料テンプレートCocoon用のスキン『カーム(Calm)』 カーム
この記事は、カーム(Calm)の特徴について書いているので、サイドバーの「スキン切り替え」でカームに切り替えてから読むことをおすすめします。

WordPressの高機能な無料テンプレートCocoon。

Cocoonは有料のテンプレートと比べても全く見劣りしない機能満載のテンプレートです。(いやむしろ勝ってると思う)

そのCocoonのスキンを作ってみました。

スキンの名前は『Calm(カーム)』

ダウンロード Cocoonスキン Calm(カーム) Ver1.2

『Calm=穏やか』という意味ですが、作っている途中からそのイメージからどんどん離れているような。

ま、いいか^^

Cocoon用のスキン Calm(カーム)の変更点

Calm(カーム)の変更点は次の通り。

カテゴリーラベル

一番目につく変更点がエントリーカードのカテゴリーラベル。

こんな感じで、斜めにしてみました。

無料テンプレートCocoonスキンカーム(Calm)のカテゴリーラベル

そして、エントリーカードにマウスを乗せると、カテゴリーラベルがギュイーンって感じで中央に寄っていきます。

マウスを乗せた時の動きは、トップページで確認できますよ。

なお、このスキンはカードタイプ縦3列は非推奨

カテゴリーラベルについては他にも注意点があるので、詳しくは次の記事からどうぞ。

見出し

見出しはこんな感じ。

見出し(H2)

H2の見出しです。

見出し(H3)

H3の見出しです。

見出し(H4)

H4の見出しです。

見出し(H5)

H5の見出しです。

見出し(H6)

H6の見出しです。

ページネーション

ページボタンを変更。

ちょっと形にこだわったけど、なんかNHKのロゴみたいになってしまった。

カレント以外のページボタンにマウスを乗せると、ふわっと浮きます。

グローバルメニュー

メニューにマウスを乗せると、中央からゆっくり反転していくだけのシンプルなものにしました。

本当はサブメニューになんかアクションをつけたいけど、難しくて手が出せない。

無料テンプレートCocoonスキンカーム(Calm)のグローバルメニュー

目次

本を開いたイメージにしたつもりですが、凝りすぎたかも。

無料テンプレートCocoonスキンカーム(Calm)の目次

投稿ナビ(『前へ』、『次へ』リンク)

投稿ナビもちょっとだけ変更。

マウスを乗せると、『<』、『>』の文字が大きくなります。

動作は下の投稿ナビで確認できます。

無料テンプレートCocoonスキンカーム(Calm)の投稿ナビ

SNSフォローボタン

SNSのボタンにマウスを乗せると、くるっと反転します。

それだけ^^

ウィジェット(新着記事、人気記事)

ウィジェットの新着記事、人気記事にマウスを乗せると、アイキャッチが拡大しながら斜めになります。

右のサイドバーで確認できます。

無料テンプレートCocoonスキンカーム(Calm)のウィジェット

テーブル

テーブルはこんな感じ。

テーブルのキャプション
ヘッダーヘッダー
項目左1項目右1
項目左2項目右2
項目左3項目右3
項目左4項目右4

引用

意外と引用を使うので、ちょっと変更。

引用は読者に読んでほしい部分なので、青っぽい色で目立つようにしました。

Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。

見た目はシンプルですが、初めての方でも感覚的に使えるように便利な機能を織り込んで作りました。

100%GPLテーマなので自由にご利用いただけます。

その他細かい変更

  • スキンは全体的に落ち着いた茶系統の色にしました。
  • エントリーカードやブログカードに影をつけて、浮いているようにしました。

スキン(Calm)のダウンロード

ひとまず完成しました。

使ってみたい方は、下のリンクからスキン(zip圧縮)をダウンロードしてください。

ダウンロード Cocoonスキン Calm(カーム) Ver1.2

スキンをアップロードしてCocoonで使えるようにする

ダウンロードしたスキンをCocoonで使えるようになるには、サーバーへのアップロードとスキンの切り替えが必要です。

以下の記事に詳細な手順を書いているので、参考にしてください。

同梱されていない独自のCocoonスキンをアップロードする
WordPressの無料テンプレートでよく使われているのがCocoon。 Cocoonには、見栄えを簡単に変更することができる「スキン」が同梱されています。 Ver1.7.0では全部で31種類のスキンが用意されているので、Coc...

コメント

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