∇ テクリオ Δ

WordPressテーマ『Cocoon』のスキン『tecurio』を作りました!

WordPress
この記事は約3分で読めます。

僕が好きで愛用させてもらっているワードプレステーマの1つに『Cocoon』があります。

そして今回、Cocoon好きが高じてスキンを自作してしまいました。

はじめは完全に自分用に作っていたのですが、グラデーション選びの楽しさにハマり、自分がほぼ使わないデザインまで作ってしまった結果、せっかくなら誰かに使って頂ければということで、スキンならぬ粗キンを公開させて頂くことにしました。

スキンの名前はサイト名そのままの『tecurio』です。何のひねりもなくてすみません。

WordPress用テーマ『Cocoon』とは

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

ワードプレスを使っている方ならご存じの方も多いと思いますが、『Coccon』は動作が軽く、カスタマイズしやすく、ユーザーの意見や最新のテクノロジーを素早く取り入れて日々改良されているという大人気のテーマです。

しかも無料。こんな素敵なテーマを生み出し、日々大切に育て上げている作者のわいひらさんは僕が尊敬するおひと方です。

スキンを使うことで『Cocoon』の見た目を簡単に変えられます

Cocoon用スキン『tecurio』は全9種類

スキン『tecurio(テクリオ)』は現在のところ全9種類です。もし他にご要望のグラデーション等ありましたら(そして僕に時間があれば)増やしていけたらなと思っています。

tecurio earth(テクリオ・アース)

海と葉っぱをイメージしています。一番最初に作ったスキンです。

tecurio earth をダウンロード

tecurio lime(テクリオ・ライム)

ライムをイメージしたスキンです。

tecurio lime をダウンロード

tecurio mango(テクリオ・マンゴー)

大好きなマンゴーをイメージしたスキンです。

tecurio mango をダウンロード

tecurio peach(テクリオ・ピーチ)

白桃をイメージしたスキンです。

tecurio peach をダウンロード

tecurio grape(テクリオ・グレープ)

ブドウをイメージしたスキンです。

tecurio grape をダウンロード

tecurio sky(テクリオ・スカイ)

青空をイメージしたスキンです。

tecurio sky をダウンロード

tecurio sunset(テクリオ・サンセット)

夕焼けをイメージしたスキンです。

tecurio sunset をダウンロード

tecurio soil(テクリオ・ソイル)

土壌をイメージしたスキンです。

tecurio soil をダウンロード

tecurio moon(テクリオ・ムーン)

月をイメージしたスキンです。

tecurio moon をダウンロード

すべてのスキンを一括ダウンロード

上で紹介したスキンを一度にまとめてダウンロードしたい方はこちらからどうぞ

すべてのスキンをまとめてダウンロード

スキンの使い方

ダウンロードしたZipファイルを解凍し、出来たフォルダをFTPソフト等で『Cocoon』テーマフォルダの中にある「skin」フォルダ内にアップロードして下さい。アップロード後、Cocoon設定の「スキン」の項目に「tecurio」スキンが表示されるようになりますので、チェックを入れて「まとめて保存」を押すとスキンのデザインが反映されます。

おわりに

もしお使い頂ける際には下のコメント欄にご感想など頂けると励みになります。また、ご質問、ご要望などありましたらお気軽にコメント下さい^^

コメント

  1. 素晴らしいスキンですね。Moonが好みで速攻適用しました。才能に感謝

    • 風塵 ふーじん風塵 ふーじん より:

      チャンビアさんMoonを使って頂きありがとうございます!気に入って頂けて嬉しいです^^

  2. 素晴らしいスキンで先日から使わさせていただいているのですが、
    レスポンシブテストで表示した際に「by cocoon」という部分が日付と重なっているのでこちら修正していただきたいです。

    • 風塵 ふーじん風塵 ふーじん より:

      コメントありがとうございます&返信遅くなりました!
      ちょっと確認してみますのでしばしお待ち下さい。

    • 風塵 ふーじん風塵 ふーじん より:

      どの場所か特定できませんでしたのでトップページで確認してみたのですが、こちらの環境では正常に表示できているようです。(↓の画像の緑の箇所で合っていますか?)

      表示重なり箇所

      もし見ている場所が違うようでしたら、どのページの表示が重なっているのか、もう少し詳しく教えて頂けると助かります。宜しくお願いします!

  3. sin より:

    先日よりテーマを使わせていただいています。
    ありがとうござます。

    『テクリオ・マンゴー』を使用させて頂いていて、毎回記事の中に『表』を作って色付けしているのですが、表の中にまでオレンジになってしまいます。

    表の中の色の変更はできるのでしょうか?

    • 風塵 ふーじん風塵 ふーじん より:

      sinさん
      『テクリオ・マンゴー』を使って頂きありがとうございます!

      『表』=こちら↓のページのようなテーブル、としてお答えさせて頂きますね。
      https://tecurio.com/xiaomi-mi9-apn/#sim_apn_setting

      『テクリオ』ではテーブルの奇数行がテーマカラーになるように設定していますので、もしテーブルの背景をすべて白にしたい場合は、以下のCSSをコピペして頂けるとご希望の見た目になるかと思います。
      (コピペする場所はダッシュボードの「外観」→「カスタマイズ」→「追加CSS」です)
      —————————————–
      table td {
      border: solid 1px #ddd;
      }
      table tr:nth-of-type(2n+1) {
      background-color: unset;
      }
      —————————————–

      また表のヘッダ部分が黒くなっているのもCocoon標準デザインに戻されたい場合は、以下↓のCSSも合わせてコピペして下さい。
      —————————————–
      table th {
      font-weight: bold;
      background-color: #f3f4f5;
      color: #444;
      }
      —————————————–

      もし回答がご質問と違っていたり、不明な点や「ここをこんな色にしたい!」といった希望などがありましたらお気軽にご連絡下さい。

      • sin より:

        返信ありがとうございます。

        コピペして更新したのですが、変化がありません・・・

        ちなみにCSSの上下にある横線もペーストするのですか?

        • 風塵 ふーじん風塵 ふーじん より:

          sinさん

          横線はペーストしなくて大丈夫です^^

          では前回のCSSは一旦削除してもらって、代わりにこちらのCSSを使うとどうなりますか?
          ————————–
          .container table tr:nth-of-type(2n+1) {
          background-color: #fafbfc;
          }
          ————————–

  4. はじめまして。こんにちは。
    こちらのテーマSKYがとても気に入り使用させていただいています。

    見出しのカスタマイズなのですが、H2のラインが消せずに残ってしまいます。

    .article h2 {
    border-bottom:none;

    よろしければ、ラインを消すCSSを教えていただけないでしょうか?

    • 風塵 ふーじん風塵 ふーじん より:

      宮永ここのさん

      スキンをご使用頂きありがとうございます^^

      H2のラインは以下のCSSを貼り付けて頂ければ消えると思います。。。どうでしょうか?

      ———————————-
      .article h2::after{
      content: none;
      }
      ———————————-

      • できました!

        「tecurio」は記事の文字部分と余白の割合が最高なのでこれからもずっと使い続けていきたいと思います。

        ありがとうございました!

タイトルとURLをコピーしました