MASAa.blogからリニューアルしたガジェット好きmasaaのメインWordPressブログサイト 目次コンテンツ(見出し)部分は「toc-content」というセレクタで扱われています。 ただし、文字色に関してはCocoonの親テーマで「toc a」に「color:#333」の指定がされているので、ここでは「toc-content a」を使って上書きしています。 目次のデザインサンプル Windows10の電源プランを「AMD Ryzen™ Balanced」に強制設定する!, 低価格なiVANKY製の4K60Hz対応DisplayPortケーブルを購入する!, h2以下の見出しのアンダーラインと先頭の数値を無くし、その代わり先頭にアイコンを表示. 数字と文字が2行に分かれて表示されてしまうのですが、その場合にはどちらを修正すれば宜しいでしょうか? 要素の表示形式がブロックボックス(block)で表示されているため、横並びを実現するためのCSSプロパティ(float、display)で指定する必要があると思われます。 MASAa.blogからリニューアルしたガジェット好きmasaaのメインWordPressブログサイト WordPressテーマ Cocoonで使われている「目次」のカスタマイズについてまとめてみました。, これまでWordPressテーマ Simplicity2で構築されているMASAa.blog(https://wp.masaa.me/)の流れで、MASAa.netでも目次生成プラグインとして「Table of Contents Plus」を使っていました。, WordPressテーマ Cocoonでは目次機能が備わっているので、今回MASAa.netの目次を「Table of Contents Plus」プラグインからWordPressテーマ Cocoonの目次機能に切り換えることにしました。, WordPressテーマ Cocoonで使われている「目次」は次の様になっています。, これまで「Table of Contents Plus」プラグインで目次をカスタマイズして使ってきたため、以前の目次と比べると見た目の差がかなり有ります。, シンプルさを残しつつも、目次をサイトに有ったデザインに変更するカスタマイズを行います。, 今回のカスタマイズによって、WordPressテーマ Cocoonで使われている「目次」は、次のようになりました。, 今回のカスタマイズによって、目次がサイト全体とマッチするようになり違和感が無くなりました。, 今回「Table of Contents Plus」プラグインの目次からWordPressテーマ Cocoonの目次機能に切り換えた訳ですが、プラグインは管理やサイトスピードの面から一つでも少なくしたいので、プラグインを一つ無くすことが出来たのは良かったでしょう。, はじめまして! Windows10の電源プランを「AMD Ryzen™ Balanced」に強制設定する!, 低価格なiVANKY製の4K60Hz対応DisplayPortケーブルを購入する!, https://masaa.net/2020/01/29/post-200117-1/. Copyright © 2017-2020 ゆずゆろぐ。 All Rights Reserved. cssが全く分からなくても。というよりも使わなくてもできるスタイル内のボックスの背景色を6倍に!合計24種類もバリエーションが増えました。誰でも5秒もあれば、できる!ちょっとズルい方法。 (WordPressテーマ Cocoon 使用), WordPressテーマ  WordPress関連 WordPressテーマ「Cocoon」では、記事内に目次を表示する機能があります。初期設定だと次のようなデザインになっています。バランスのいいデザインなので、「この形はくずさずに、色だけを変えたい」という方もいるかと思います。そこで今回は Copyright © 2018 MASAa.net All Rights Reserved. ここでは「0」を指定して、枠線を非表示(なし)にしています。, 目次タイトルの部分を変更するには「toc-title」というセレクタ(クラス)を使います。, 「background-color」で背景色を、「color」で文字色を指定します。, 目次コンテンツ(見出し)部分は「toc-content」というセレクタで扱われています。, ただし、文字色に関してはCocoonの親テーマで「toc a」に「color:#333」の指定がされているので、ここでは「toc-content a」を使って上書きしています。, いくつかデザインサンプルを作りました。 Copyright © 2017-2020 うぃんすとんblog All Rights Reserved. 初めまして、コメントありがとうございます! PlayStation Plusに加入中なのにオンラインマルチプレイ開始時に加入を求められる, Google Search Console【登録したけど全然データが反映されない】. THE THOR(ザ・トール) からあげ棒、ありったけ 色は黒にしています。「#000」は好きな色を入れてください。 body { background-color: #000; } 確認しますと、背景が黒になっていると思います。 コンテンツの背景色を変える. 初歩的な質問で大変申し訳ございませんが教えていただけると嬉しいです。. Copyright © 2018 Unity Right All Rights Reserved. 目次を「Table of Contents Plus」プラグインからWordPressテーマ Cocoonの目次機能に切り換えることにしました。それに伴ってシンプルなデザインの目次をサイトにマッチするようにカスタマイズしてみ …  MASAa.net コメントありがとうございます。参考にしていただけて良かったです! よく分からない人、面倒な人は下のデザインサンプルから気に入ったものをコピペして使ってください。, 目次を自動で表示するか、どの見出し階層まで表示するか(深さ)、表示テキストの変更などの基本的なことは、Cocoon設定内の[目次]タブ内で設定することができます。, 背景色を変更するには、「toc」というセレクタの「background-color」に色を指定します。, 「toc-title」は目次タイトル、「toc a」は目次コンテンツ内の文字列(リンク)です。, 枠線を変更するには「toc」の「border」を変更します。 ご質問頂いた件について実際にどうなっているか分からないのであくまでも憶測ですが、 この記事では、WordPressテーマcocoonのスキンで使われているHTMLカラーコード32スキン61カラーをご紹介いたします。ベテランさんのブログを見ていると、色々な箇所をカスタマイズし始め、次第にテーマのスキンで使われているカラーと揃えたくなってきますよね。 (WordPressテーマ THE THOR 使用) パズドラ日記と依頼された製品レビューの記事を掲載し続けるmasaaの元祖WordPressブログサイト Cocoonの記事の目次(TOC)のデザインをカスタマイズする方法と、デザインサンプルを紹介します。 こんにちは!今回はWordPress無料テーマ「Cocoon」の『カラム』についての記事です。では早速いきましょう!Cocoonの記事の投稿画面には『カラム』を挿入できる機能が付いています。カラムとは列で表示する機能を言います。主に並べて表  パソコン関連 パズドラ日記と依頼された製品レビューの記事を掲載し続けるmasaaの元祖WordPressブログサイト  MASAa.blog 無料WordPressテーマ Cocoon シンプルがベストですが…背景画像に芝画像を設置したら、なんとなくインデックス周辺が白くてサッパリし過ぎていて何かインパクトと言うか印象を変えたくメイン背景とインデックスページの記事部分背景色を変更してみました。Cocoonのスキンはなしを使 WordPressテーマ「Cocoon」では、記事内に目次を表示する機能があります。初期設定だと次のようなデザインになっています。, バランスのいいデザインなので、「この形はくずさずに、色だけを変えたい」という方もいるかと思います。, そこで今回は「Cocoonの目次のデザインはそのままに、背景・枠・文字の色を変える」カスタマイズをお届けします。, 紹介したコードをコピーして、Cocoonの子テーマの「style.css」に貼りつけるだけなので、とてもかんたんです。, まずは、目次の背景の色だけを変えるカスタマイズです。色は好きなものに変えられます。, 『backgroundcolor』の後ろにある『#○○○○○○』を変えると、目次の背景色が変わります。色は、WEB色見本を参考にすると便利です。, 背景色は初期設定のままで、枠線の色だけを変える方法です。線の色は好きなものに変えられます。, 『1px』の後ろにある『#○○○○○○』を変えると、枠を好きな色に変えられます。色は、WEB色見本を参考にすると便利です。, 目次の背景と枠の色の組み合わせで、雰囲気がガラッと変わります。WEB色見本を参考にして、自分のサイトらしい組み合わせを探してみよう。, 目次の枠線をなくすと、すっきりとした雰囲気になります。背景になじみやすく、邪魔にならないデザインになるのもメリットです。, 文字のサイズ・色は、『目次(タイトル)』『見出しの色』『見出しの数字』それぞれ設定できます。, 今回は、Cocoonの目次のデザインはそのままに、色を変えるカスタマイズをお届けしました。少しアレンジするだけでも、サイトの雰囲気が大きく変わります。よかったら参考にしてみてくださいね。, 読むと、ちょっぴり役に立つ&たのしくなるコンテンツを発信しています。クッピーラムネとAmazonのFire HD8がお気に入り。雑貨マニア。, ゆずゆろぐ。は、日常の困ったことをゆるゆると解決していくサイトです。マイナーなネタが多め。PCをゆるゆるとたのしむネタも満載です。, そうそう、本物の目次も入っているからね。ちなみに、上から2番目にあるのが本物の目次です.