こんにちは、ベーやんです。
当ブログはWordPressの無料テーマ「Cocoon」を使っています。
無料のテーマでありながら、豊富な機能が最初から備わっており、カスタマイズもしやすく、非常に使い勝手が良いので愛用しています。
Cocoonに備わっている機能でも十分にカスタマイズすることはできるのですが、「より自分好みのデザインにしたい!」ということでスキンを自作しました。
今回は自作したCocoon用のスキン「Simpleシリーズ」の特徴を紹介したいと思います。
可能な限りシンプルに仕上げたスキンです。アニメーションも必要最低限にとどめいています。
ブログというよりはWebサイトに近いようなスキンになっています。
「Simpleシリーズ」の見出し
まずは見出しを紹介します。
H2〜H5の見出しは次の通りです。
見出し(H2)
H2の見出しです。
見出し(H3)
H3の見出しです。
見出し(H4)
H4の見出しです。
見出し(H5)
H5の見出しです。
テーブル
テーブルはこんな感じです。
![](https://karasu-hc.com/wp-content/uploads/2020/05/747ca68f8b0a0f312374110fd4794072-1024x277.png)
ページネーション
ページネーションはこんな感じです。
シンプルな円形で、マウスカーソルが当たると背景とテキストの色が反転するようにしました。
(下のボタンを押してもページは変わりません)
ブログカード
ブログカードにマウスカーソルが当たると、ブログカードの背景が白くなるようにしました。
(下記は画像です。)
![](https://karasu-hc.com/wp-content/uploads/2020/05/card-1024x320.jpg)
ヘッダー
ヘッダーもシンプルなデザインにしています。
レスポンシブにした際にロゴがヘッダーの上下中央に揃うように調整しています。
(下記は画像ですので、上のヘッダーをご覧ください)
![](https://karasu-hc.com/wp-content/uploads/2020/05/header-4-1024x213.jpg)
フッター
フッターもシンプルなデザインですが、フッターのテキストが上下中央に揃うようにしています。
(下記は画像ですので、下のフッターをご覧ください)
![](https://karasu-hc.com/wp-content/uploads/2020/05/footer-1-1024x168.jpg)
サイドバー
サイドバーの見出しにはあえて色を入れず、黒枠で囲むだけのすっきりとしたデザインにしました。
(下記は画像ですので、右のサイドバーをご覧ください)
![](https://karasu-hc.com/wp-content/uploads/2020/05/sidebar-435x1024.jpg)
シェアボタン
シェアボタンはデフォルトのスタイルよりも丸みを無くして、スタイリッシュなデザインにしました。
真四角ではキツイ印象になるので1pxだけ丸くしています。
検索ボタン
検索ボタンは丸みを帯びたスタイルにしています。
カテゴリ、タグ
投稿記事に合わせて表示されるカテゴリやタグのスタイルも変更しています。
テーマに合わせたカラーリングにして統一感を出しています。
コメントのタグも同様のデザインにしています。
トップへ戻るボタン
トップへ戻るボタンはデフォルトでは四角っぽいデザインになっていますが、こちらでは真ん丸のデザインにしています。
![](https://karasu-hc.com/wp-content/uploads/2020/05/top-1.jpg)
フォント
ベースのフォントには英字が「Avenir」、日本語が「游ゴシック」を採用しています。
ただし、ブラウザやスマホによっては上記のフォントが使えない場合がありますので、サブフォントとして英字が「Helvetica neue」、日本語が「Hiragino Kaku Gothic ProN」も加えています。
以上がCocoonのスキン「Simpleシリーズ」の特徴です。
元々のCocoonの良さを活かしつつ、シンプルでスタイリッシュなレイアウトに変えたつもりです。
「Simpleシリーズ」が使いやすいスキンになっていれば嬉しく思います。
最後までご覧いただきありがとうございました。
コメント