前回のダークスキンからガラッと変わって、マウスホバーが派手な「カラフルライン」というスキンを作ってみました。
この記事では、標準から変更した項目を中心に書いているので、参考にしてください。
カラフルラインのカスタマイズについては、こちら。
Cocoonスキン 見出し
まずは、見出しです。
H2～H6の見出しは次の通り。
見出し（H2）
H2の見出しです。
見出し（H3）
H3の見出しです。
見出し（H4）
H4の見出しです。
見出し（H5）
H5の見出しです。
見出し（H6）
H6の見出しです。
ページネーション
ページネーションの「次のページ」ボタンはちょっと変わった形をしていますが、マウスを乗せると、ボタンの形に変わります。
「コメント」の送信ボタンなども同じです。
ページ番号は、カレントの番号を除いて、「赤」、「緑」、「青」の順番で並びます。
※下の「次のページ」や「ページボタン」を押してもページ移動はしません。
目次
目次はオーソドックスなもので、リンクにマウスを乗せると背景色が変わるようにしました。
上にある目次で実際の見た目や動きを確認できます。
テーブル
テーブルはこんな感じ。
| ヘッダー | ヘッダー |
|---|---|
| 項目左１ | 項目右１ |
| 項目左２ | 項目右２ |
| 項目左３ | 項目右３ |
| 項目左４ | 項目右４ |
引用
引用も変更しています。
Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。
見た目はシンプルですが、初めての方でも感覚的に使えるように便利な機能を織り込んで作りました。
100％GPLテーマなので自由にご利用いただけます。
インデックスページのエントリーカード
僕がスキンを作る時に一番こだわるのがエントリーカードです。
今回は、エントリーカードにマウスを乗せると、カードの右下からスルスルっと「Read More」が表示されるようにしました。
また、カードの背景色は「赤」、「緑」、「青」の順番で変わっていきます。
トップページか、下の関連記事で動きが確認できます。
ウィジェットの変更
サイドバーの「新着記事」や「人気記事」などのウィジェットは、マウスを乗せた時にアイキャッチの上を斜めに光が横切るようにしました。
カレンダー
カレンダーはサイドバーを見てもらうとわかるように、曜日の見出しをカラフルにしてみました。
フッター
フッターの背景は、3色を使って立体的なものにしました。
モバイルだとわかりづらいですが、PCで見たときには立体的な背景になっているのがわかるかと思います。
すぐ下のフッターで確認できます。
グローバルメニュー
グローバルメニューの下には色違いのボーダーが表示されるようにしました。
ボーダーの色は「赤」、「緑」、「黄」の順番となっていて、メニューが増えるたびにこの順番で繰り返し表示されます。
グローバルメニューにマウスを乗せると、ちょっとおもしろい動きをします。
ブログカード
ブログカードにマウスを乗せると、「Read More」がどこからともなく現れて右下に表示されます。
カラフルラインのカスタマイズ
カラフルラインは結構カスタマイズのやりがいがあるスキンです。
自分好みにカスタマイズしたい方は、こちらを参考にしてください。
スキンの不具合について
スキンに不具合などあれば、Cocoonのフォームからお願いします。
コメント