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