無料WordPressテーマ Cocoonのスキン『旅カメラ』を作りました。
コンセプトは、旅行写真。
旅行ブログをもっと楽しくワクワクさせたい！と思って作りました。
▼ 旅カメラ デモサイト
▼ これまで作ったスキン
旅カメラの特徴
インデックスページ（一覧ページ）
上画像はインデックスページのキャプチャです。
旅ブログでは写真が主役になるし、読者は写真を見て『ここ、行ってみたい！』と直感的に感じるはず。ですから、旅カメラでは写真が目立つように特に意識しました。
Cocoonデフォルトでは、画像＋タイトル＋抜粋文字がワンセットになってカードタイプになっていますが、旅カメラでは以下を加えて画像のみ独立させた雰囲気を作っています。
・画像の影
・画像にカーソルを合わせると浮き出します。
・中央寄せの小さなタイトル文字
・抜粋文字はCocoon設定で０に指定しています。
投稿・固定ページ
旅ノートボックス
旅の記録を書くというアナログな雰囲気を出したくてノート風ボックスを作りました。
編集画面のスタイルーボックス（アイコン）の中にある補足情報（メモ）を選択することで使えます。
旅のしおり
旅のしおり 懐かしい響きですよね。中学の修学旅行のときにワクワクしながらしおりを見ていた記憶があります。
修学旅行の途中でエロ本を購入して全校生徒の前で体育教官にボディーブローをかまされたのまで思い出してしまいました。
目次を旅のしおりに見立てています。
目次タイトルはCocoon設定で変更できますのでお好きな言葉にするといいですね。『旅のしおり』『旅の計画表』『日程表』など。
旅がテーマのスキンですがもう一つ『レトロ』という隠しテーマで作っています。
アンティークなカメラにちょっと古紙。今回のスキンも画像は使わずにCSSのみで構成しています。
目次階層はH3までがおすすめです。
インスタント写真
投稿ページに画像を挿入するとき、キャプションってありますよね？ そこに文字を入れると上画像のようなインスタント写真が出来上がります。
手紙風プロフィール
エアメール封筒に見立てたプロフィールボックスにしてみました。全部囲むとちょっとゴチャゴチャしたので上だけ。
固定ヘッダー
実は一番やりたかった、小さなヘッダー。出来るだけメインコンテンツを邪魔しないようにしたかったのでフォントも小さめ。
スクロールしても固定して表示しています。サイトブランディングするにはしっかりとサイトタイトルを覚えてもらうのがいいですよね。
旅カメラ ロゴは160-40pxの小さな画像をcanvaで作っています。
いつも苦労するのがロゴ画像を作ったときのヘッダー設定。レイアウトがうまく行かなかったり、ロゴ画像のサイズがモバイルだと崩れたり。
今回は結構うまく行ったと思います。その設定を載せます。
おすすめヘッダー設定
キーカラー
前回までスキンテーマカラーごとにスキンを分けていましたが今回は自分でテーマカラーをいつでも自由に変更出来るようになっています。
設定例
スキンのおすすめ設定方法
その他の細かな設定はこちらのページに記載しております。スキン適用後にこちらを見ながら設定していただけるといいかと思います。
旅専用スキン 旅カメラの利用方法
旅ブログと聞くと旅行に行かないと駄目！というふうに感じるかもしれませんが、
アンティーク雑貨好きの雑貨ブログ
ミニマリスト生活ブログ
ニートの生活術ブログ
などテイストが合えば使えると思います。
ぜひいろんな方に使っていただいてご感想をお待ちしております。（掲載OKでしたら追記の形でご紹介させてください。）
コメント