これまでいろんなスキンを作ってきて、Cocoonに同梱させてもらいました。
以下が、同梱済のスキンです。
同梱済のスキン
- サムライブルースキン（勝色／無印）
- ミックススキン（レッド／グリーン／ブルー）
- ダークスキン（エンジ／カモノハ／ルリ）
- カラフルライン
この同梱済のスキンは、Cocoonをインストールすれば「Cocoon設定」にある「スキン」から選択するだけで、ブログ（サイト）に適用されます（デザインが変更される）
この記事では、上記同梱以外に「追加したスキン」を紹介したいと思います。
追加したスキン
追加スキンはCocoonに同梱されていないので、使いたい場合は自分でサーバーにスキンのファイルをアップロードする必要があります。
使う場合は、以下の記事を参考にサーバーへのアップロードをお願いします。
追加スキンの種類
追加スキンには、同梱済スキンの別バージョンと、新規に作成したスキンの２種類があります。
追加スキン（同梱済スキンの別バージョン）
- カラフルラインA
- ミックススキンA（ミックスレッドA／ミックスグリーンA／ミックスブルーA）
- ダークスキン（レッド／シアン／イエロー）
追加スキン（新規作成スキン）
- エッジスキン（レッド／グリーン／ブルー）
- リーフ（サクラ）
- バブルスキン（ブルー／ピンク／グリーン／ブラウン／ブラック）
スキンの切り替え
このサイトでは、画面右のサイドバーにある「スキン切り替え」のプルダウンメニューからスキンを選択することで、リアルタイムにそのスキンに切り替えることができます。
確認したいスキンがあれば、「スキン切り替え」のプルダウンメニューから対象のスキンを選択してください。
スキンの確認
「スキン切り替え」のプルダウンメニューからスキンを切り替えたら、以下の「本文の見出し」以降で、各パーツの確認ができます。
本文の見出し
まずは、本文の見出しです。
H2です
↑はH2です。
H3です
↑はH3です
H4です
↑はH4です
H5です
↑はH5です
H6です
↑はH6です
テーブル（表）
| ヘッダー | ヘッダー |
|---|---|
| 項目左１ | 項目右１ |
| 項目左２ | 項目右２ |
| 項目左３ | 項目右３ |
| 項目左４ | 項目右４ |
引用
Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。
見た目はシンプルですが、初めての方でも感覚的に使えるように便利な機能を織り込んで作りました。
100％GPLテーマなので自由にご利用いただけます。
ブログカード、関連記事カード
↓はブログカードで、ホバー（マウスを乗せる）の動きが確認できます。
関連カードは、記事の下の「関連記事」にあります。
グローバルメニュー
グローバルメニューは、ページの上にあるメニューです。
このメニューで、ホバー（マウスを乗せる）の動きが確認できます。
※スマホの場合はグローバルメニューは表示されません。
おすすめカード
おすすめカードは、グローバルメニューの下に表示されているカードです。
こちらも、ホバー（マウスを乗せる）の動きが確認できます。
SNSボタン（シェア、フォロー）
SNSのシェア／フォローボタンは、この記事の上や下にあるので、ホバー（マウスを乗せる）の動きが確認できます。
また、右のサイドバーにあるフォローボタンも同様に確認できます。
ページネーション
以下のページ番号で、ホバー（マウスを乗せる）の動きが確認できます。
目次
目次は、この記事の上で確認できます
人気記事（ランキング）
右のサイドバーから、人気記事に表示される「ランキング」の表示を確認できます。
小さいカードや大きいカードでのランキングがあります。
トップページ（タブやエントリーカードなど）
以下のリンクからトップページにジャンプすると、エントリーカードやタブ（「新着記事」～「ダウンロード」への切り替えリンク）のデザインやホバーを確認することができます。
トップページ（別ウィンド） Cocoonスキン確認サイト
各スキンの特徴
以下の記事では各スキンの特徴を簡単にまとめているので、詳しく知りたい場合はそちらを参照ください。
カラフルラインA Cocoonスキン「カラフルライン」の別バージョンを作ってみた
ミックススキンA Cocoonスキン「ミックススキン」の別バージョンを作ってみた
バブルスキン Cocoonスキン『バブルブルー』を作ってみた
追加スキンのダウンロード
追加したスキンは以下のページよりダウンロードしてください。
冒頭でも書いているように、Cocoonに同梱していないスキンなので自分でサーバーにアップロードする必要があります。
コメント