【Cocoonスキン】変な食べ物

食において青色は「食欲減退色」なんて虐げられておりますが、私は青色含む「通常の色でない食べ物」に興奮を禁じ得なかったりします。

ピンクのワインであったり、青色のカレーであったり、黒いハンバーガーであったり、緑の麺であったり、白いラーメンであったり、紫のチョコバナナであったり、虹色のショートケーキであったり……。

珍しい色にはどうしたって魅せられちゃうんですけど、話すとだいたい理解が得られなかったり。

さてさて、最近遅ればせながらCocoonと言うWordPressテーマに触れました。

そのテーマ中にスキンという着せ替え機能があり、私もしてみんとてするなりと隙間時間を利用して作ったスキンこそが「変な食べ物」です。

もともと名前はどうでも良かったのですが他のスキンはみな

・名前に色を入れている
・他と被らないユニークな名前のものが多い

のでその文化を踏襲した次第です。

お口に合えば幸いです。



デモ

デモサイトは固定ページを使用しているため、投稿ページとは多少雰囲気は異なりますが、だいたい同じ感じです。

変な食べ物たちをクリックすれば各色のデモに飛びます:)

カスタマイズ要件






1完全なフラットデザインからセミフラットデザインにしました。

ところどころちょっと影とか出たりします。ヘッダーとかトップへ戻るボタンとかモバイルメニューとか。






2キャッチフレーズに吹き出しつけたりしました。

Cocoonの設定でキャッチフレーズ(サイト説明)を表示する設定にすると吹き出しで囲われます。






3ヘッダーを追従するようにしました(スマホでは追従しません)。

モバイルだと下に固定メニュー出る仕様で上にも追従あったら鬱陶しいのでPCのみ追いてきます。






4記事ホバー時にちょっと浮かぶようにしました。

記事一覧ページでマウスを乗せると浮かぶやつです。






5通知エリアをグラデーションにしました。

最近廃れつつありますがグラデ好きなので……。プロフィールを設置した場合も適用されます。






6空白増やしました。

デザインは余白とフォントが全てらしいので……。






7モバイルメニューをちょっと変更しました。

特に申し上げることありません。






8アイキャッチ画像を記事ページでぼかすようにしました。

アイキャッチ作るの面倒じゃないですか?私アイキャッチ作り好きでなくどうせ手抜いて作るならぼかしてしまえと。アイキャッチ画像てクリックされる前のインプレッション時に大切なのであって個別ページでは別になくていいような気がしてならないのもあって。

なのでインデックス時にはボヤかさず、個別ページではボヤかしてます。






9見出しデザイン変更しました。

シンプルが好きなので極力シンプルです。多分子テーマのcssの方が優先度高いでしょうから変更したい方はそちらからどうぞ。






αコメント欄を吹き出しにしました。

割とポップにしました。

注意点

他にも色々変更した箇所はあるかと思いますが、枚挙にいとまがないので割愛します。

何かエラーやレイアウト崩れ、ご要望、フィードバック等等ございましたら、気軽にお知らせいただければ幸いです〜。

当ブログのお問い合わせフォームから『スキンについて』といったタイトルでご連絡いただくかTwitterのDMでお知らせいただけると助かります:)

https://twitter.com/tkskds

カラーバリエーション

緑の蕎麦

lightseagreen(#20b2aa)という色です。

下の緑の蕎麦をクリックするとデモ見れます。

青いカレー

lightskyblue(#87cefa)という色です。

デモは下の青いカレーから。

ピンクワイン

lightpink(#ffb6c1)という色です。

デモは下の……。

白いラーメン

whitesmoke(#f5f5f5)という色です。

デ、デモは……。

黒いハンバーガー

#292929です。こちらだけ色の名前がないのですが、肉肉肉って感じでハンバーガー感あるなって。

デ……。

利用規約

スキン使用による様々な問題は自己責任でお願い致します。

基本責任以外は何でもござれですが、のちに変更するかもしれませんのでその点のみご了承くださいませ。