Cocoon スキン「ほんわかライトニング」を公開します

プロフィール
著者

映像系が本業のフリーランス・3児のパパブロガー。
車関連、Wordpress関連の事をよく記事にします。
イラストは下手なりに頑張って描いてますが、全く上手くなりません(笑)

ライトニングをフォローする

WordPressに移行して早4年経ち、当初よく分からず使っていた無料テーマ”STINGER5”(実際はSTINGER3から始めた)も流石に古く感じられてきたので、今回思い切って、新しいテーマ「Cocoon」に移行しました。

この無料テーマ「Cocoon」は、同じく無料テーマ「Simplicity」の後継にあたるそうです。よく見るとライトニングが使っていた「STINGER5」とほぼ同時期にスタートしているんですね!(知らなかった)

実は色々他の無料テーマも模索していたんですが、Cocoonを選んだ決め手は”スキン”機能です。

調子に乗ってオリジナルスキンを作成した(と言うよりは、このサイトのベースとした)ので、恥ずかしながら公開させて頂きます。

SPONSORED LINK

WordPressのカスタマイズは大変

Cocoonを導入してみると……

Cocoonのスキンを入れてない状態

Cocoonでスキンを何も入れていない状態

こんな感じで、あまりにもさっぱりし過ぎています!(笑)

WordPressの場合、いくらでも自分好みでカスタマイズできるのが醍醐味のため、カスマイズ慣れしている人であれば、作り込まれたテーマだと修正するのが逆に大変になるという事からCocoon作成者のわいひら氏もテーマ自体はできるだけシンプルにしていると言っています。

このテーマのデフォルトスタイルを、あまり凝ったものにしていない1番の理由は、ユーザーさん一人一人が思い思いのカスタマイズをしやすいようにです。

当テーマでは、なるべくカスタマイズがしやすいように、カスタマイズ対象となりやすいところは、基本的に以下のスタイルしてしか行なっていません。

引用:Cocoonのデフォルトスタイルをシンプルにしている理由 | Cocoon

しかし今まで無料ブログサービスを使っていた人たちからしたら、カスタマイズはかなり大変な作業なんです!!!

カスタマイズは難しい

それを補えるのが「スキン」機能!

提供されているスキンであれば、設定画面でポチッと切り替えれば、とりあえずのデザインが導入されます(便利!)

という事で、せっかく自分のブログのカスタマイズをしたので、汎用できるようにSKINを作成してみました。

SKIN「ほんわかライトニング」導入方法

Cocoon-SKIN「ほんわかライトニング」

我ながらネーミングセンスがない事をしみじみ感じますが、まあこれも個性ということで(笑)

導入すると、こんな感じのデザインになります。詳しくはデモサイトを作成したのでご確認ください。

ダウンロード

まずは上記からZIPファイルをダウンロードします。

SKINフォルダ

ダウンロードしたら解凍して、FTPソフト等でフォルダごと子テーマのSKINフォルダにぶち込んでください。

スキンの設定

管理画面→Cocoon設定→スキン に「[Child]ほんわかライトニング[作者:ライトニング]」と表示されるのでラジオボタンをチェックして「変更をまとめて保存」すれば導入されます。

2018.6.27追記

Cocoon 0.7.4版以降に同SKIN「ほんわかライトニング」が同梱されました(感謝!)

同梱されいているSKINは「ほんわかライトニング ver1.0.7」(style.cssに記載されています)です。

ほんわかライトニング同梱版

管理画面→Cocoon設定→スキンで親SKINとして選択する事ができます。

※こちらのページではさらに改良版がアップロードされていますので、お手間でなければ最新版をインストールすることをオススメします

外観の変更箇所

細かいところは説明を省略しているところもあります。

全体的にSimplicity/Cocoonの特徴である行間の広さがあまり私には好みが合わないので、全体的に詰めています。

背景

どうせ個人個人好きな背景を設定すると思いますが、背景を指定してないとSKINの特徴がわかりにくいのでライトニングが作った背景画像を同封しています。「外観」→「カスタマイズ」→「背景画像」で自分の好きなものを設定してください。(もちろん そのまま使ってもらっても構いません)

基本文字

フォントはWindowsでもmacでも表示できる「メイリオ」

基本の文字色はデフォルトでは真っ黒なのですが、キツイ印象になるので少しグレーぽい色に変えています。

黒い文字

グレーぽい色

リンク文字は標準だと少し濃い色だったので少し薄くしました。

メニュー

意外に種類が多いです。フッターメニューはいじっていません。

ヘッダーメニュー

PCサイズ

SKIN-menu-PC

スマホサイズ

SKIN-menu-SP

サイドバー

SKIN-sidebar-menu

スマホ スライドインメニュー

スライドイン時のメニュー

見出し

SKIN-見出し

一応H6まで設定しています。

アピールエリア

SKIN-apeal-area

プロフィール

SKIN-profile

ほぼそのままですが、SNSボタンの色とか少しいじりました。

ちなみにCocoonのウィジェットはタイトルの先頭に「!」を付けると表示されなくなります。意外に知っていると便利!

目次

SKIN-TOC

h2だけ太字で下線を入れました。

ブログカード

SKIN-ブログカード

全体の横幅の制限、文字の大きさ修正、タイトルに座布団を追加。

ランキング

SKIN-ranking

サイドバー用も含めてバランスの調整をしました。

キャプションあり写真

SKIN-キャプションあり写真

吹き出し風のキャプションにしました。

シェアボタンのタイトル

関連記事

SKIN-関連記事

縦型カード3列を標準としてカスタマイズしています。

投稿-関連記事設定

「Cocoon設定」→「投稿」→「関連記事設定」で「縦型カード3列」を選択。さらに「カードの枠線を表示する」にチェック。

ページ送り

ボタン風にしました。

コメント欄

吹き出し風にしました。

管理者コメントは少し緑っぽくなります。

ウィジェット:人気記事

SKIN-人気記事

順位マークの色、PV数の位置を修正しました。

ウィジェット:最近のコメント

SKIN-最近のコメント

色のバランス、該当記事の配置を修正

アニメーション追加

SKIN-スムーズスクロールGIF

JavaScript(JQuery)で、同記事リンクを押した時にスムーズにスクロールするようにしてあります。

最後に

と、お恥ずかしいながらもスキンを公開してみました。

今後、カスタマイズの記事も少し書いて見ようと思います。

というのは、4年間Wordpressを使って分かったのですが、カスマイズした内容を記録しておかないと数年後に全く分からなくなる!(笑)

今後スキンで導入したカスタマイズも書いていこうと思います

更新履歴

ver更新内容
1.1.2 人気記事ウィジェットにおいて、大きなサムネイルを使用するとデザインが崩れるのを修正
1.1.1 Pinterestなどを利用した際、サムネイルのサイズが異常になる症状を修正。
※これは作者の勘違いだったのでv.1.1.2で修正
1.1.0 スマホ時のインデックス表示を調整
インフォメーションBOXなどの横幅、文字サイズ修正
1.0.7Cocoon 0.7.2バージョンアップに伴いサイドバー非表示を削除しました
1.0.5Cocoon 0.7.1バージョンアップに伴い重複しているアイキャッチのカスタマイズを削除しました
1.0.4公開

コメント

  1. とこちゃん より:

    はじめまして、
    ただいまCocoonを使ってサイトを作成してます。
    ライトニングさんのスキンが気に入り使いたいと思います。
    しかし自分が作ろうとしているサイトの色に何となく合わせづらく配色など少し変更を入れたいと思います。
    そこで確認ですが、細かな変更(色など)はやってもよろしいでしょうか?

    • とこちゃんさん
      こんにちは

      気に入って頂きありがとうございます。
      もちろん変更して使ってもらって大丈夫です。
      SKINのファイル自体で変更しても良いと思いますし、子テーマでstyle.cssを追記しても良いかと思います。
      言われて気づきましたが、子テーマで色調整できるstyle.cssのサンプルとか公開しておけば良かったですね(反省)

  2. とこちゃん より:

    癖で名前を書いてしまいました。
    ご面倒ですが、消しておいて下さい。
    ちょっとだけ変更させてもらいます。

  3. chan より:

    ライトニングさん、こんにちは。

    スキンを使わせて貰っています! 人気記事で文字がおかしくなっています。

    対処方法を教えていただけると助かります。

    該当記事はこちらです。
    https://chan-bike.com/sunbolt

    • chanさんこんにちは
      拝見させて頂きました。
      スキンの方で調整もできるのですが、そもそもサムネイルがちゃんと設定されていないのではないかと思われます。
      サムネイル自体が前のテーマで作成したものではないでしょうか?
      大きい画像になっているので、表示速度を上げるためにサムネイルを作り直した方が良いと思います。
      一度
      https://wp-cocoon.com/regenerate-thumbnails/
      こちらの記事にそってサムネイルを再生成してみ頂けますか?

  4. chan より:

    ライントニングさん、回答ありがとうございます。

    実は、サムネイル生成の記事のものは一度、cocoonのver1.00になった時にしています。
    再度、実行したほうが良いでしょうか?

    このスキンだけ、サムネイルの大きさが違って見えますね。

    • 詳細調べてみないと分からないのですがpinterestの場合、サムネイル表示ではなくなっているのかもしれませんね。
      修正してみますが、ちとデスクトップが壊れたのと、現在仕事で地方に来ているので少々お時間ください

    • 修正した物をv1.1.1としてアップしました。
      如何でしょう?

  5. chan より:

    ライトニングさん、はやい!

    画像の文字がきれいにならびました!

    ただ、画像がデェフォルトの大きさになっています。

    表示タイプを大きなサムネイルにも、いつの日か対応していただけると嬉しいです。

    • chanさん
      うわ!そういうことか!
      すごい勘違いしてました。
      大きなサムネイルの時にデザインが崩れるんですね!
      修正しました!

  6. chan より:

    ライトニングさん、おはようございます。

    ばっちりです!

    これからも、よろしくお願いします。

    • 良かったです。
      該当URL貼って頂いたので、問題を修正しやすかったです。
      何か問題があれば またお気軽にご連絡ください