サイトが手書きテイストになる「てがきノート」スキンを追加

スキン
この記事は約3分で読めます。

ゆうそうとを運営されているゆうそうとさんが作成されたてがきノートスキンを5種類同梱させていただきました。

スキン「てがきノート」の特徴
スキン「てがきノート」はアナログな手書き風をイメージした少し抜けのあるスキンです。ゆうそうと書くことを楽しんでいただきたいと思い、このようなスキンを作りました。スキン「てがきノート」は全部で5種類のカラーを用意しております(ダークモードあり

このスキンを利用すると、アナログ手書きされたような風合いになるので、全体的にやわらかい印象のサイトにすることができます。

\お得なキャンペーン実施中!/
エックスサーバーキャンペーン

「てがきノート」スキン

今回同梱したスキンは、以下の5種類になっています。

  1. ブルーコーラル
  2. グリーンオレンジ
  3. ピンクレモン
  4. ホワイトバナナ
  5. ダークスカイ

それぞれの見た目はこちら。

ブルーコーラル

tegakinote-blue-coral

グリーンオレンジ

tegakinote-green-orange

ピンクレモン

tegakinote-pink-lemon

ホワイトバナナ

tegakinote-white-banana

ダークスカイ

tegakinote-dark-sky

レイアウト

「てがきノート」スキンの特徴となりそうな部分をいくつか紹介します。

全部は紹介できないので、ライトスキンから「ブルーコーラル」、ダークスキンから「ダークスカイ」のデザインを紹介させていただきます。

見出し

フリーハンドで書いたような見出しになります。

てがきノートスキンの見出し

ダークスカイの見出しがこちら。

てがきノートスキンの見出し(ダーク)

引用

引用もCocoonとは大きくデザインが違います。

てがきノートスキンの引用デザイン

ダークスカイの引用がこちら。

てがきノートスキンの引用(ダーク)

シェア・フォローボタン

本文下のシェア・フォローボタンがこちら。

てがきノートスキンの本文下シェア・フォローボタン

ダークスカイのものがこちら。

てがきノートスキンのシェア・フォローボタン(ダーク)

目次

目次も目を惹くものになっています。

てがきノートスキンの目次

ダークスカイの目次がこちら。

てがきノートスキンの目次(ダーク)

アイコンボックス

頻繁に利用するアイコンボックスのような装飾もリデザインされています。

てがきノートスキンのアイコンボックス

ダークスカイのアイコンボックスがこちら。

てがきノートスキンのアイコンボックス(ダーク)

案内ボックス

てがきノートスキンの案内ボックス

ダークスカイの案内ボックス。

てがきノートスキンの案内ボックス(ダーク)

ブログカード

てがきノートスキンのブログカード

ダークスカイのブログカード。

てがきノートスキンのブログカード(ダーク)

エントリーカード

てがきノートスキンのエントリーカード

ダークスカイのエントリーカード。

てがきノートスキンのエントリーカード(ダーク)

サイドバーウィジェット

サイドバーのウィジェットは、穴どめノート風になっています。

てがきノートスキンのサイドバーウィジェット

ダークスカイのものがこちら。

てがきノートスキンのサイドバーウィジェット(ダーク)

検索フォーム

てがきノートスキンの検索フォーム

ダークスカイの検索フォーム。

てがきノートスキンの検索フォーム(ダーク)

こんな感じで、「手書き」という世界観で統一されたデザインになっています。

ただでさえ手の込んでいるスキンなのに、それに加えてダークスキンもあるなんて、かなりの労力がかかっていることが推測されます。

オリジナル機能あり

その他に以下のようなスキン独自のオリジナル機能もあります。

  • ロゴテキストや見出しなどのフォント
  • 背景パターン
  • ロゴテキストの傍点

オリジナル機能は、テーマカスタマイザーから変更できます。

てがきノートスキンのテーマカスタマイザー

上記はフォント設定画面。フォントを設定することにより、より手書き感のあるサイトに仕上げることも可能です。

機能について詳しくはこちらを参照してください。

スキン「てがきノート」のオリジナル機能について
外観 > カスタマイザー からスキン「てがきノート」のデザイン設定を変更できます。変更できる箇所は以下の通りです。ロゴテキストや見出しなどのフォント背景パターンロゴテキストの傍点ロゴテキストや見出しなどのフォント変更ロゴテキストや見出

その他にも、style.cssで手軽にキーカラーを変更できるようになっているので、詳しくは以下をご参照ください。

【てがきノート】プライマリーカラー・セカンダリーカラーなどの色は一箇所で変更できます
てがきノートでは、プライマリーカラー(メインカラー)・セカンダリーカラーなどの色をCSS変数で制御しています。CSS変数を使うと繰り返し使う色などを一か所で定義し管理することができるため、例えばプライマリーカラーを一箇所を変更するだけでプラ

設定方法

今回紹介したスキンは、Cocoon親テーマに同梱されています。

利用するには、Cocoon設定の「スキン」タブからスキンを適用して保存してみてください。

てがきノートスキンの設定

スキンの詳細はこちら。

スキン「てがきノート」の特徴
スキン「てがきノート」はアナログな手書き風をイメージした少し抜けのあるスキンです。ゆうそうと書くことを楽しんでいただきたいと思い、このようなスキンを作りました。スキン「てがきノート」は全部で5種類のカラーを用意しております(ダークモードあり

デモサイトはこちら。

SKINデモサイト
Cocoonスキンのデモサイトです
タイトルとURLをコピーしました