∇ テクリオ Δ

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」は記事の文字部分と余白の割合が最高なのでこれからもずっと使い続けていきたいと思います。

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

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

          よかったです!

          余白スペースは読みやすくを意識していたので嬉しいです^^

          こちらこそありがとうございます。

  5. みこまる より:

    初めまして!早速ピーチを使わせていただいています。
    色使いがすごく素敵です!ありがとうございます。
    モバイル表示に合わせてH2の文字を少し小さくしたいのですが、どうすると文字の大きさを小さく表示できますでしょうか。
    お手数おかけいたします。よろしくお願い致します。

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

      みこまるさん

      スキンを使って頂きありがとうございます!

      モバイル表示でのH2の文字サイズは、以下のCSSを「追加CSS」に貼り付けてもらうと変更できるかと思います。「追加CSS」は「ダッシュボード」→「外観」→「カスタマイズ」→「追加CSS」で表示できます。

      ————————————
      @media screen and (max-width:480px) {
      .article h2 {
      font-size: 1.6rem;
      }
      }
      ————————————

      こちらのCSSは、画面の横幅が480px以下の場合、H2のフォントサイズを本文の1.6倍にするという意味です。
      (テクリオの元々のH2フォントサイズは本文の1.8倍なので、それより若干小さくなるように変更していますが、ご希望のデザインに合わせて調整してみて下さい!)

      • みこまる より:

        ふーじん様
        コメント返信が遅くなり申し訳ございません!
        ご対応ありがとうございました!!!無事サイズ変更を行うことができ感動しております!
        これからも使わせていただきます♪本当にありがとうございました!

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

          とんでもないです!変更できて良かったです♪
          こちらこそありがとうございます^^

  6. とある より:

    こんにちは、テクリオ マンゴーを少しカスタマイズして使わせてもらってます!色の優しさがピカイチですね✨✨

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

      とあるさん

      マンゴーを使っていただきありがとうございます!色味も気に入ってもらえて嬉しいです^^

  7. sin より:

    お疲れ様です。sinと申します。

    テクリオマンゴーを使わせていただいているのですが、このスキンはモバイル表示の時、サイドバーが表示されないのでしょうか?

    表示させるにまどうすればいいですか?

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

      sinさん。こんちには。
      当サイトのスキンをお使い頂きありがとうございます。

      こちらのスキンでは特にサイドバーの表示の制御はしていませんので、他のスキンでサイドバーが表示されていれば、同じように表示されるはずです。
      サイドバーボタン
      サイドバー

      もし他のスキンでも表示されていないようでしたら、「外観」→「ウィジェット」→「サイドバー」の設定や、「Cocoon設定」→「モバイル」→「モバイル設定」などの設定変更・追加が必要かもしれません。

      他のスキンでは表示されているのに、テクリオでのみ表示されていないようでしたらお手数ですが再度ご連絡頂けますか?

  8. sin より:

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

    ふーじんさん先程送ってくれた画像の赤枠のサイドバー表示はどうすれば追加できますか?

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

      sinさん
      こんにちは!

      WordPressのダッシュボードから「Cocoon設定」
      →「モバイル」タブ
      →「モバイルメニュー」の項目で、
      【フッターモバイルボタン】にチェックを入れて、
      「変更をまとめて保存」ボタンを押すと表示されると思います!

      • sin より:

        ありがとうございます

        あと、マンゴースキンを使うとモバイル画面にサイトのタイトルが表示されなくなったんですが、
        表示させることはできますか?

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

          上記と同じタブにある
          「モバイルボタン」の項目の
          【サイトヘッダーロゴを表示する】にチェックを入れると表示されると思いますよ!

  9. キャシー より:

    はじめまして、キャシーといいます。

    スキンをいろいろ悩んで、最終的にこれがいいなぁと思って利用させてもらいました!ありがとうございます!

    ブログで紹介させてもらいました。
    https://dattecathydamon.com/2020/01/31/cocoon-henkou/

    マンゴーっていうネーミングもセンスを感じました!

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

      キャシーさん

      スキンをお使い頂きありがとうございます!
      選んでいただけて嬉しいです^^マンゴーが大好きなのでひとしおです!

      ご紹介までして頂きありがとうございます!

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