新型コロナの治療薬ができるまで感染スピードを抑えて大切な人を守りましょう。詳細はこちら

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/

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

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

      キャシーさん

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

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

  10. べこ より:

    初めまして!べこと申します。

    スカイを使わせていただいております。

    一点ご質問なのですが、テーブル背景を一色にし、ボーダーを表示するようにカスタマイズを試みています。
    ですが、border-style を色々いじってみてもどうしても外枠しか線が入りません。

    CSS初心者なので見落としがあるのだと思われますが、調べても打つ手が見当たらず、ご質問させていただきました。

    お忙しいかと思いますが、テーブル内側のボーダーを表示させるコードをご教示いただければ幸いです。

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

      べこさん

      スカイを使っていただきありがとうございます!

      テーブルのボーダーを表示させるコードです↓

      —————————————

      table th, table td {
      background-color: #fff; /* 背景色 */
      color: #000; /* 文字色 */
      border: solid #ccc 1px; /* ボーダー色 */
      }

      —————————————

      上の例では背景は白、文字は黒、ボーダーはグレーになっているので、お好みに合わせて変更してください。

      • べこ より:

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

        ただ、こちらのコードでは背景は白色になるのですが、ボーダーが表示されないのです。。。

        何か他にできることはありますでしょうか?

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

          ご連絡ありがとうございます。

          ではこちらのCSSではどうでしょうか?
          (前回のCSSは削除してください)
          ————————————–
          .container .wp-block-table.is-style-stripes table th, .container .wp-block-table.is-style-stripes table td {
          background-color: #fff;
          color: #000;
          border: solid #ccc 1px;
          }
          ————————————–

          • べこ より:

            ありがとうございます!!

            無事ボーダーが表示されるようになりました!!

            丁寧に即レスいただき本当にありがとうございますm(_ _)m

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

              良かったです!
              こちらこそありがとうございます。

  11. やすし より:

    テクリオ・ライムがいいなと感じたので、利用させていただきます。

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

      やすしさん、コメント&ライムをご利用いただきありがとうございます!
      また何かありましたらお気軽にお声がけください。

  12. Kite より:

    ふーじん様
    初めまして。Kiteと申します。
    tecurio soilを使わせて頂いております。

    モバイル表示にした際にフッターサイドバーのボタンの色がsoilの色と被って見えづらくなっております。

    見えやすいようにご検討頂けますと助かります。

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

      Kiteさま

      ご意見ありがとうございます!
      ご指摘してもらった通りフッターメニューボタンが見えづらくなっていたので文字色を黒系から白に変更しました。

      こちらでダウンロードできるスキンはすでに修正済みなので、お急ぎでしたらこちらからダウンロードしてお使いください。

      ワードプレステーマの『Cocoon』に同梱させて頂いているスキンについてはこれから修正の依頼をさせて頂くのでもうしばらくお待ちください。

      • Kite より:

        返信が遅くなりました。

        とっても見やすくなり感激です!
        ご対応頂きありがとうございました。

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

          気に入っていただけて良かったです!
          こちらこそご意見ありがとうございました。

  13. あーちゃん より:

    こんにちわ。
    ピーチがすごく可愛いのでお借りしますね!
    これからも開発頑張ってくださいね。

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

      あーちゃんさん

      こんにちわ。
      ピーチをお使い頂きありがとうございます!おかげさまで頑張ります!

  14. かねっち より:

    ふーじんさま

    はじめまして。かねっちと申します。
    tecurio skyを利用させていただいています。とても良いですね。気に入っています。

    まだ、設定したばかりのサイトではあるのですが、iPhone・iPadにてサイトを確認すると、「サイドバー」にある「プロフィール」のプロフィール写真がうまく表示できていません。なにか設定上の不備があるのでしょうか?

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

      かねっちさま

      skyをご利用いただきありがとうございます!

      サイトを確認させて頂きましたが、プロフィール画像のURL(imgのsrc)が存在しないURLを参照しているようです。

      ユーザー→あなたのプロフィールでプロフィール画像のURLが正しく指定されているかもう一度確認してみて下さい^^

      • かねっち より:

        ふーじんさま

        早速のご対応ありがとうございます。
        改めて設定しましたところ、問題なく表示されました。

        原因としては、何度か、画像データの編集をしているなかで、プロフィール画像も交換していたのを失念していました。

        これから、コンテンツを少しずつ書き溜めていこうと思います。
        ありがとうございました。

  15. tone より:

    ふーじん様

    初めまして『テクリオ・マンゴー』を使用させて
    頂いていてます。素晴らしいスキンですね!

    ひとつ質問させていただきたいのですが
    元々のヘッダー部分の色はグラデーションが
    効いてて美しいのですが、変更したいので

    「Cocoon設定」のヘッダー設定で
    ヘッダー色(ロゴ部)の色を変えても
    変わらないのですが、どうしたら変更できる
    のでしょうか?

    初歩的な質問で申し訳ございません。

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

      toneさん

      マンゴーをお使いいただきありがとうございます!

      ヘッダーのカラーは以下のCSSで変更できます。(#ffffffの部分をお好きな色に変えて下さい。)
      ——————————————————–
      .header {
      background-image: none;
      background-color: #ffffff;
      }
      ——————————————————–
      「外観」→「カスタマイズ」→「追加CSS」等に張り付けてお使いください。

      • tone より:

        ふーじん様

        さっそくご返事いただきまして
        ありがとうございました。

        無事解決いたしました。このくらいは
        自分でできるように勉強しますね。

        本当に助かりました。

  16. ふーじん様、初めまして。
    スカイのデザインがとても気に入り、利用させて頂いております。
    1つカスタマイズについて質問なんですが、
    テーブル(表)の外枠と縦線・横線を表示させたいのですが、CSSをいじってもうまくいきません。
    解決方法を、お時間ある時に教えていただけるとありがたいです。
    忙しいと思いますが、よろしくお願いします。

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

      タクティーさん

      スカイをご利用いただきありがとうございます^^

      テーブルの枠線は以下のCSSで表示できると思います↓

      ———————————————–
      .container table th, .container table td {
      border: solid 1px #000;
      }
      ———————————————–

      上記CSSを「外観」→「カスタマイズ」→「追加CSS」等にコピペしてお使いください。もし上手くいかないようでしたらまたご連絡ください。

      • ふーじんさん、無事に表示できました!

        忙しい中、とても早くご対応いただきありがとうございます。

        これからもお世話になります!

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

          タクティーさん

          うまくいって良かったです^^
          また何かありましたらお気軽にご連絡ください。

  17. Tone より:

    ふーじん様

    『テクリオ・マンゴー』を使用させて
    頂いていてます。お世話になっております。

    以前違う内容で質問させていただきました折には
    迅速なご回答をいただき、ありがとうございました。

    今回もご質問させていただきたいのですが
    ヘッダーにキャッチフレーズを載せたいと
    思うのですが、キャッチフレーズを入れると
    ヘッダーロゴの上に出てしまいます。

    cocoon設定でヘッダーロゴの下に
    移動させようと思うのですが、どうしても
    位置が変更できないのです。

    他のやり方でロゴの下にキャッチフレーズを
    表示できるようにできますか?。

    またキャッチフレーズの文字色を
    変えたいので、いろいろやってみたの
    ですが、勉強不足でわかりませんでした。

    お忙しいところ大変申し訳ございませんが
    教えて頂けますでしょうか。
    よろしくお願いいたします。

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

      Toneさん

      いつもテクリオをお使いいただきありがとうございます。

      ①キャッチフレーズの配置
      ②キャッチフレーズの文字色
      ですね。

      まず簡単な②からいきます。

      ②キャッチフレーズの文字色の変更方法
       ↓のCSSをカスタムCSSに貼り付けると変更できると思います。
      ———————————–
      #header .tagline {
      color: #000000;
      }
      ———————————–
       ※「#000000」をお好きな色に変更してください。

      ○キャッチフレーズの配置の変更方法
       こちらはレイアウト崩れ防止のため変更できないようにスキンで制御しています。
       どうしても変更したい場合は、やや複雑ですが以下の手順で変更可能です。
       ただスキンのアップデートなどがあってデータが上書きされると元に戻ってしまうので、その都度変更しなおす必要はあると思います。

       1、スキン制御を解除する。
        サーバーにある/wp-content/themes/cocoon-child-master/skins/skin-tecurio-mango/option.csv
        をダウンロードして「terapad」や「サクラエディタ」などのテキストエディタで開きます。
        ※中身が壊れる恐れがあるのでwindows標準のメモ帳や、Excelでは編集しないでください。
        
        option.csvを開くと
      tagline_position,header_top
        という行があるので
      ”tagline_position,header_top
        のように行頭に「”」(半角シングルクォート2つ)を追加し、保存してください。
        
        保存したらサーバーにアップロードします。

       2、キャッチフレーズの配置を変更する
       「Cocoon設定」→「ヘッダー」→「キャッチフレーズの配置」が変更可能になっていますので、「ヘッダーボトム」を選択します。

       3、CSSの変更(レイアウト崩れを調整)

        以下のCSSをカスタムCSSに追加します。
      ―――――――――――――――――――――――――――
      #header .tagline {
      color: #000000; /* キャッチフレーズの文字色です。お好きな色に */
      top: 0;
      margin-bottom: 1em;
      }
      #header .logo-text {
      padding-bottom: 0;
      }
      #header .logo-image {
      padding-bottom: 0;
      }
      ―――――――――――――――――――――――――――

       以上で、キャッチフレーズをタイトルの下に表示できると思います。
       ちょっとややこしいかもですがよければお試しください。

      • Tone より:

        ふーじん様

        お忙しいところこんなに詳しくご回答
        くださいましてありがとうございました。

        キャッチフレーズの配置はレイアウトが
        崩れないように、いろいろと考えられて
        るのですね。

        簡単に質問してしまって大変もうしわけ
        ございませんでした。

        私には少々難しそうですが、何とかやって
        みます。本当にありがとうございました。

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

          Toneさん

          いえいえ、とんでもないです。

          よく考えたらもっと簡単に変更できる方法があったので書いておきますね。
          先程の方法はスルーしてください。もしもう実行されていたらすみません。。

          以下のCSSをカスタムCSSに貼り付けてください。
          ――――――――――――――――――――――――
          #header .logo-image, #header .logo-text {
          position: relative;
          top: -2em;
          }
          #header .tagline {
          top: 7em;
          position: relative;
          }
          @media screen and (max-width: 834px){
          #header .tagline {
          top: 5em;
          }
          }
          ――――――――――――――――――――――――
          恐らくこれでいけるかと思います。
          先ほどにくらべて簡単ですね。どうしてすぐにこれを思いつかなかったのか。。。申し訳ないです。。お試しください。

          • Tone より:

            ふーじん様

            前回ご回答くださっただけでも
            有難いのに、まさか簡単な方法まで
            考えてくださっていただいたのは
            本当に感謝いたします。

            cssに貼り付けましたところ、見事
            下に表示できました!(^^)!。

            プログラミング?ができるって
            スゴイですね。尊敬します。
            本当にありがとうございました。

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

              Toneさん

              うまくいってよかったです^^
              いえいえです、ありがとうございます(//▽//)

  18. ふーじん様

    初めまして。みるてぃーと申します。
    「テクリオ・アース」の色合いがとても気に入り使わさせていただいてます!

    質問なのですが固定ページにおいてサイドバーが表示されない現象が発生しました。(モバイル版では表示されます。)
    ウィジェットで設定の確認、ページタイプをデフォルトになっているか確認などしたのですが変わりませんでした。
    少しでも原因がわかれば教えていただきたいです!!

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

      みるてぃーさん

      テクリオアースを気に入っていただきありがとうございます^^

      おそらくページタイプの「デフォルト」への変更がうまく反映されていのではないでしょうか。

      固定ページの本文内容に変更がない場合に、文書設定だけを変更すると変更が反映されないことがあるようです(WordPressの仕様?)。

      それが原因の場合は本文を変更することでページタイプも反映されると思います。

      ページタイプをデフォルトにした状態で、固定ページの内容を適当に変更してから更新してみて下さい。

      • みるてぃー より:

        ふーじんさん

        お返事ありがとうございます!

        さっそく試してみたのですが変更されませんでした汗
        他にも原因と思われるもことがあれば教えていただけると幸いです。

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

          みるてぃーさん

          その他に思い当たることは、

          「cocoon設定」→「全体」タブ→「サイドバーの表示状態」で「固定ページで非表示」が選択されているとかでしょうか。。

          • みるてぃー より:

            ふーじんさん

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

            まさにそれでした….。
            丁寧な返答ありがとうございます。
            これからも愛用させていただきます!

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

              みるてぃーさん

              当たってよかったです^^
              ありがとうございます!

  19. asunao より:

    ふーじん様

    お世話になります。
    『テクリオ・スカイ』を利用させて頂いております。

    1つ質問があります。スキンを使っていない時はCSSでカテゴリの行間を狭く設定していたのですが、スキンを使ってから無効化されてしまっているようです。

    カテゴリの行間を狭くしたいのですが、どのように行えば良いのでしょうか?
    ご教示頂ければ幸いです。

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

      asunaoさん

      ご質問ありがとうございます!
      仕事の忙しさがいろいろ超越していたもので返信が遅くなり申し訳ないです。。

      ウィジェットのカテゴリーの行間でしょうか?

      その場合は、以下のCSSにて変更できると思います。

      ——————————–
      #sidebar .widget_categories ul li a {
      padding: 0;
      }
      ——————————–

      お試しください。

      • asunao より:

        asunaoです。

        返信ありがとうございます。お世話になります。

        色々と試して、行間は狭くする事が出来たのですが、カテゴリ表示の「記事数」を全て右端に揃えたいのです。

        デフォルトの設定通りにする事は可能なのでしょうか?

        もし宜しければご教授願いたいです。

        ※ 現在はCSSを元の状態に戻してあります。

  20. H1RO より:

    ふーじん様

    はじめまして!H1ROと申します。

    [tecrio.earth]の色合いがとてもよくて使わせていただいてるんですけど、

    ブロックで見出しのH2だけ文章がうてなくなっています。

    どうすれば改善されるでしょうか

    お忙しい中だと思いますが、返信していただけると幸いです。

    • tecurio 編集部 より:

      H1ROさん

      コメントありがとうございます!
      テクリオをお使いいただきありがとうございます。私もearthがお気に入りです^^

      確認したところ、ブロックエディタにてH2の下線が文字に被ってしまっていますね。。この問題でしょうか??

      時間のある時に修正させて頂きたいと思っておりますが、
      現在仕事が異常に多忙のため対応が遅くなりそうです。。

      取り急ぎ以下のCSSで表示の不具合を修正可能だと思うのですが、一度お試しいただけますでしょうか。

      ——————————————
      .editor-styles-wrapper .article h2::after {
      position: unset;
      }
      ——————————————

      よろしくお願いします。

  21. よし子 より:

    はじめまして!テーマかわいいので使用させていただいています。

    2点質問させてください。

    1.表の奇数行が色がつくものを、中だけ消すにはどうしたら良いでしょうか?
    上記ご返答のものを試してみましたが、一番上の段の色もなくなってしまうので、一番上の段だけは色を残したいのですが…

    2.アイキャッチ画像の周りの囲み色をなくしたい場合にはどうしたらいいでしょうか?

    お手数ですがお返事いただけると幸いです。

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

      テクリオをご利用いただきありがとうございます!

      以下のCSSを試してみて下さい

      ↓↓↓

      1.表の一番上だけ色を残す
      ————————————–
      table tr:nth-of-type(2n+1) {
      background-color: #fff;
      }
      table tr:first-of-type {
      background-color: #c9e5f4;
      }
      ————————————–

      2.アイキャッチ画像の周りの囲み色をなくす

      ————————————–
      .eye-catch img {
      border: none;
      }
      ————————————–

      ご不明な点などありましたらまたご連絡ください^^

      • よし子 より:

        お忙しい中、お返事ありがとうございました!
        確認が遅くなり大変申し訳ございません。。

        2はうまく行きましたが、1はうまくいきませんでした…

        追加CSSにはこのように入れています。

        .container table td {
        border: solid 1px silver;
        }
        table tr:nth-of-type(2n+1) {
        background-color: #fff;
        }
        table tr:first-of-type {
        background-color: #c9e5f4;
        }
        .eye-catch img {
        border: none;
        }

        テーブルを使用しているのは下記のようなページです。
        https://yoshiko-life.net/wfc/

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

          よし子さん

          ご連絡ありがとうございます^^
          では、こちらでいかかでしょうか?

          1.表の一番上だけ色を残す

          —————–
          .container table tr:nth-of-type(2n+1) {
          background-color: #fff;
          }
          .container table tr:first-of-type {
          background-color: #ffd78c;
          }
          —————–

          • よし子 より:

            ふーじん様

            無事できました!!

            お忙しい中ご対応いただきましてありがとうございました!

            今後も使用させていただければ幸いです。
            どうぞよろしくお願い致します。

  22. kj より:

    ふーじん様
    こんばんは。先日ブログを始めたばかりの物ですが、ムーンのスキンが綺麗だったので、利用させていただきました。ありがとうございます!
    色合いが自分の理想の雰囲気とあっていて、とても気に入っています!

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

      kjさま
      コメントありがとうございます!気にいって頂けて嬉しいです^^

  23. よし子 より:

    いつもお世話になっております。スキンを使わせていただきありがとうございます。

    右のサイドバーに目次を表示しているんですが、1、2などの数字が切れてしまいます…

    ページ例⇒https://yoshiko-life.net/ride-bike/

    cocoonの目次設定をみましたがとくに変更できそうなところはなかったので
    お手数ですが解決方法についてご教授いただけると幸いです。

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