Cocoonスキン『カラフルライン』の特徴

Cocoonスキン「カラフルライン」カラフルライン
このページは「カラフルライン」について書いているので、サイドバーの「スキン切り替え」から「カラフルライン」を選択してください。

前回のダークスキンからガラッと変わって、「カラフルライン」というスキンを作ってみました。

マウスオーバーの動きが派手なスキンとなっています。

標準から変更した項目は以下の通り。

Cocoonスキン 見出し

まずは、見出しです。

H2~H6の見出しは次の通り。

 

見出し(H2)

H2の見出しです。

 

見出し(H3)

H3の見出しです。

 

見出し(H4)

H4の見出しです。

 

見出し(H5)

H5の見出しです。

 

見出し(H6)

H6の見出しです。

 

 

ページネーション

ページネーションの「次のページ」ボタンはちょっと変わった形をしていますが、マウスを乗せると、ボタンの形に変わります。

「コメント」の送信ボタンなども同じです。

ページ番号は、カレントの番号を除いて、「赤」、「緑」、「青」の順番で並びます。

※下の「次のページ」や「ページボタン」を押してもページ移動はしません。

目次

目次はオーソドックスなもので、リンクにマウスを乗せると背景色が変わるようにしました。

上にある目次で実際の見た目や動きを確認できます。

テーブル

テーブルはこんな感じ。

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

引用

引用も変更しています。

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

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

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

インデックスページのエントリーカード

僕がスキンを作る時に一番こだわるのがエントリーカードです。

今回は、エントリーカードにマウスを乗せると、カードの右下からスルスルっと「Read More」が表示されるようにしました。

また、カードの背景色は「赤」、「緑」、「青」の順番で変わっていきます。

トップページか、下の関連記事で動きが確認できます。

ウィジェットの変更

サイドバーの「新着記事」や「人気記事」などのウィジェットは、マウスを乗せた時にアイキャッチの上を斜めに光が横切るようにしました。

カレンダー

カレンダーはサイドバーを見てもらうとわかるように、曜日の見出しをカラフルにしてみました。

フッター

フッターの背景は、3色を使って立体的なものにしました。

モバイルだとわかりづらいですが、PCで見たときには立体的な背景になっているのがわかるかと思います。

すぐ下のフッターで確認できます。

Cocoonスキン「カラフルライン」のフッター背景

グローバルメニュー

グローバルメニューの下には色違いのボーダーが表示されるようにしました。

ボーダーの色は「赤」、「緑」、「黄」の順番となっていて、メニューが増えるたびにこの順番で繰り返し表示されます。

グローバルメニューにマウスを乗せると、ちょっとおもしろい動きをします。

ブログカード

ブログカードにマウスを乗せると、「Read More」がどこからともなく現れて右下に表示されます。

スキンの公開について

現在、動作確認段階で、最終的にはCocoonに同梱を予定しています。

2020.05.11 公開
※Cocoon 2.1.5.1で同梱されました!

スキンの不具合について

スキンに不具合などあれば、Cocoonのフォームからお願いします。

コメント

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