使用させていただきました。 パソコン関連 どれも色を変えるだけでアレンジしやすいと思います。, 目次タイトルの背景色を全体よりもすこし濃い色にして、ボックスのようなデザインにしています。, 目次はデフォルトのデザインのままのブログも多いと思いますが、簡単に変更できるので、ブログのイメージカラーと合わせると全体のデザインに馴染んで良いと思います。, […] Cocoon 記事の目次(TOC)のデザインをカスタマイズする方法とデザインサンプル5つ […], とても参考になりました。お聞きしたいのですが、このブログのデザインはcocoonの何を使っておられるのでしょうか？fuwariなど。, 優さん 背景色、文字色、枠線の変更などをすることができます。, 背景色、文字色、枠線などのカスタマイズ方法です。 MASAa.net Cocoonはカスタマイズの自由度が半端なく、目次もcocoonひとつあれば追加できます。さすがに細かいカスタマイズするにはcssの知識が必要ですが、手を加えるところは少しだけなので、案外簡単にオリジナルの目次が作れるんです。コピペ用のコードも掲載しておきます。 チメブロ, WordPress blog site specialized in PC produce by masaa, WordPressテーマ THE THOR（ザ・トール）での「ヘッダーのバックカラー」のカスタマイズについてまとめてみました。今回のカスタマイズでは「ヘッダーのバックカラー」を単色からグラデーション化してみました。, WordPressテーマ THE THOR（ザ・トール）での「サブメニュー」のカスタマイズについてまとめてみました。今回のカスタマイズでは、サブメニューの背景色をサイトカラーに変更、パーティションの強調、フォントの強調を行いました。, WordPressテーマ Cocoonでの「ヘッダーのアイコン」カスタマイズについてまとめてみました。今回のカスタマイズでは、ヘッダーのメニューに表示している5個のアイコンに対して色を設定し、更にサイズを大きく調整してみました。, WordPressテーマ THE THOR（ザ・トール）の「番号無しリストアイコン」のカスタマイズについてまとめてみました。今回のカスタマイズでは、Font Awesome 5の黒丸アイコンに変更しサイズと位置の調整を行ってみました。, 2019年12月18日にWordPress 5.3.2 メンテナンスリリース(WordPress 5.3.2 Maintenance Release)が公開されたので、アップデートに関するエントリー記事です。, WordPressテーマ THE THOR（ザ・トール）での「アーカイブページのアイキャッチ画像をホバー時に浮かす」カスタマイズについてまとめてみました。今回は【アーカイブページのアイキャッチ画像】に対しホバー時に浮かす処理を加えました。, WordPressテーマ Cocoonで「記事一覧のインデックスをホバー時に浮かす」カスタマイズについてまとめてみました。今回のカスタマイズは【記事一覧のインデックス】に対しホバーした時に浮かす処理を加えました。, WordPressテーマ THE THOR（ザ・トール）の「ウイジェット カテゴリー」についてカスタマイズをこれまで何度か掲載してきました。今回はMENUエリアに「ウイジェット カテゴリー」を設置表示するための対応について行いました。, 【レビュー記事】WonderFox HD Video Converter Factory Pro, 動画変換ソフトウェア『WonderFox HD Video Converter Factory Pro』のレビュー記事です。ビデオを500種類以上の形式に変換、切り取り/マージ/特殊効果などの編集、動画ダウンロード等を行うことができます。, EaseUSのiPhoneデータ管理ツールソフト『EaseUS MobiMover（ モビ ・ ムーバー）』のレビュー記事です。数クリックだけで楽にiOSデバイス上のデータを移行/編集/添削することができる便利なソフトウェアです。, Hypamer『【高度昇級＆安定性抜群】ノートパソコンスタンド PC タブレットスタンド 無段階高さ調整可能 姿勢改善 腰痛/猫背解消 人間工学設計 折りたたみ式 滑り止め アルミ合金製』のサンプル品提供頂いたのでレビュー記事作成しました。, Windows上でパーテーション操作や管理などのディスク管理ソフトウェア『MiniTool Partition Wizard 12』のレビュー記事です。無料版以外にプロ版、プロ・デラックス版、プロ・アルティメット版があります。, INDEX 1 Leawo Blu-rayコピー2 Leawo Blu-rayコピーの紹介2.1 Leawo Blu-rayコピーをインストールする2.2 Leawo Blu-rayコピーを使う！2.2.1 設定項目2.2.2 市販のDVD. ご質問頂いた件について実際にどうなっているか分からないのであくまでも憶測ですが、 （WordPressテーマ THE THOR 使用） WordPress テーマCocoonの全体設定をわかりやすく説明します。サイトキーカラー・サイトキーテキストカラー・背景色・フォント・フォントサイズなどを設定。図解入りで説明します。 目次はスルーされる事も多いと思うので、デザイン的なワンポイントで良いと思っていますが、目次が雑だと記事を読み進める気が無くなるので（個人的に）疎かにはできません。, コピペで完成ではなく「どこをどうすると何が変わるのか」オリジナルなカスタマイズを始めるきっかけになればと思って記事を作成しました。, なお、外枠のボーダー色はCocoon設定→全体→サイトキーカラーが反映される様です。, 追加CSS又は子テーマのスタイルシート(style.css)にコードを追加していきます。ちなみにtocはTable of contentsの略で目次の事です。, 全体の定義です。paddingの値を変えたりmarginを追加してお好みのポジションを探してみてください。, 当サイトの場合Contentsと表示されている部分です。フォントや背景の色などを変えました。, paddingの設定についてはHTMLクイックリファレンスさんの解説がとても分かりやすいです。, タイトルより下の目次が表示される部分です。こちらもpaddingで全体の位置を調整してみて下さい。, ココがポイントです。H3以下の先頭の数字を「・」にする為に、まず現在表示されている目次ナンバーを非表示にします。, 「・」を付ける訳ではなく背景を丸くして「・」に見える様にしている感じです。位置の調整はサイトごとに必要だと思うので、バランスを見ながら数値を変えてみて下さい。, バージョンアップなどのタイミングで位置ズレたりする事もあるので、以下のコードは随時見直して更新しています。上手くいかない時の参考にしてください。, 私はサイト運営やカスタマイズ作業の約90%以上をiPhoneだけで完結しています。今回もスマホでWordPressの追加CSSを編集していたところ、途中で画面が落ちてしまう事が数回ありました。, 今回は自動保存から復元できたものの、そのうち痛い目に合いそうな気も。。幸いにもサイトのカスタマイズ記事がメインなので、カスタマイズ記事を分かりやすくどんどん作成しておけば、それ自体がバックアップにもなりますね。, こちらの目次を使わせていただいております。 ｈ４も目次表示させたいのですが、今のところh4タグをつけると ・h3 ・ ・・ｈ４ という表示になってしまいます。 間に、1行入る・を何とか消したいのですが方法はありますでしょうか？, H4以下は使ってないので自信はないですが・・Cocoon側の『目次ナンバーの表示』は「数字(デフォルト)」になっていますでしょうか？, 試しにH4を追加して「数字詳細」にしたら・が1行追加されたので、Cocoon設定を確認してみてくださいヽ(´ω｀)ﾉ, 返信ありがとうございます。 数字詳細になっていましたが、解決できませんでした。 ｈ４タグを使うのやめてみます。お手数おかけしました。, 私も.tocのコードをコピペし直してみたり色々試してました。コード自体に問題は無さそうなので「ほんの少しの何か」だと思われます！, 「んー、やっぱりh4まで表示したい！」ってなりましたらまたご相談くださいφ(･ω･｀), 今後、追加CSSやstyle.cssを見直し・整理していく過程で自然と改善されると思います。, H3以下の先頭に「・」を表示させたいのですが、コードの表示方法を教えていただけますでしょうか。, 現在cocoonを使用しております。見出しを付けてレビューすれば自動的に作成されますが、数字ではなく●で表示できるようになりたいです。, wordpressのテキストビューにコードが表示されないので、ググりましたがわかりませんでした。, この記事の下の方に『追加CSSへのコピペ手順』という内容を追加しました。要点のみ纏めてみましたので、是非試してみてください。, 目次や見出しなどのデザインは『追加CSS』(又は子テーマのスタイルシート)にコードを入力しておけばそれが全てのページに反映される、みたいな感じになっています。, 目次のborder-colorを指定したのに色が反映されない。Cocoonの場合はサイトキーカラーが適用されるので、カスタマイズコードに!importantを追加して強めに反映させます。, Cocoonのカスタマイズ方法を初心者向けに一覧に纏めました。見出しや目次からトップページ・カルーセルのカスタマイズなど、CSSコードごとの場所や意味など詳細もなるべく入れて、コピペだけでなくオリジナルのデザインを作るきっかけになればと。, Webサイトを立ち上げて1年。うまくいかない事ばかりでPVも収益も思う様に上がりませんが、勉強してスキルアップしてこれからも継続します。それに向けてMTGを実施しました。振り返りは大事ですね。特に文字に起こすと課題が分かりやすいです。, 初心者でも簡単・安心の有名アフィリエイトサービス。GoogleアドセンスやA8.net,Amazonアソシエイトに楽天アフィリエイトやバリューコマースなど分かりやすくて使いやすいおすすめサービス。まずはココから始めてみましょう。, Cocoonボックスメニューをスマホで4列表示にするカスタマイズ。アイコンやフォントの大きさ・色・位置を調整しました。どうしても下のスペースが変わらなかったが、デフォルトCSSコードを調べながら高さを調整しました。, LinkSwitchって何？どうやるの？初心者としては分からない・不安な部分もあり導入に迷いが。実際に設定して問題が解消され、とても便利な事が分かりました。Cocoonでの設定など。, cocoonのモバイル設定にヘッダー追従機能が追加されました。ずっとやりたくて色々試して出来なかったのですが、まさか標準機能になるとは凄いなぁ。。, 初めてのダイソン【Digital Slim Fluffy SV18FF】選び方やメリットなど. Cocoonの目次はシンプルですが、目次プラグインTable of Contents Plusと比べても機能的には特にかわらないくらいです。 h2～h6の見出しまで設定をできますので、大きさが階層別のように整理整頓されて出てくるので、見やすいです。 float: right; MASAa.blog このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。, 今回は、WordPressテーマ Cocoonでの「目次」のカスタマイズについてまとめてみました。, WordPressテーマ Cocoonの「目次」については、過去にもカスタマイズを行ってきました。, 特に問題無い「目次」なのですが、パソコンで見ると問題なく表示されるものの一部のスマートフォンやタブレットでは表示が崩れることを確認しています。, 「スタイルシート(style.css)」を開き、今回のカスタマイズ内容を追記します。, 以前の目次よりも今回の目次の方がエントリー記事内に溶け込むデザインになったと思います。, 最初は全ての見出しのアンダーラインを無くしたのですが、最終的に悩んで「h1」の見出しのみアンダーライン（点線）を表示させてみました。, アンダーラインの無い方がより多くの端末（スマートフォン、タブレット）で問題無く表示できるため、今後の状況によってはアンダーラインを消すかもしれません。, 大学生と高校生の二人娘のパパで弱小ブロガー。初めてのPCはMZ-80C、その後MZ-80B、PC-8001/8801/6601/9801/88VA等を経て現在のメイン機はRyzen 7 3700X搭載の自作PC。WordPressテーマ CocoonとTHE THOR（ザ・トール）を使って3つのWordPressブログサイトを運営中。このサイトのWordPressテーマはCocoonを使用。PC関連のレビュー記事ご依頼承ります！, ZMASAa.blog 目次を「Table of Contents Plus」プラグインからWordPressテーマ Cocoonの目次機能に切り換えることにしました。それに伴ってシンプルなデザインの目次をサイトにマッチするようにカスタマイズしてみ … WordPress関連 Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介して … 無料WordPressテーマ Cocoon WordPressテーマ「Cocoon」では、記事内に目次を表示する機能があります。初期設定だと次のようなデザインになっています。, バランスのいいデザインなので、「この形はくずさずに、色だけを変えたい」という方もいるかと思います。, そこで今回は「Cocoonの目次のデザインはそのままに、背景・枠・文字の色を変える」カスタマイズをお届けします。, 紹介したコードをコピーして、Cocoonの子テーマの「style.css」に貼りつけるだけなので、とてもかんたんです。, まずは、目次の背景の色だけを変えるカスタマイズです。色は好きなものに変えられます。, 『backgroundcolor』の後ろにある『＃○○○○○○』を変えると、目次の背景色が変わります。色は、WEB色見本を参考にすると便利です。, 背景色は初期設定のままで、枠線の色だけを変える方法です。線の色は好きなものに変えられます。, 『1px』の後ろにある『＃○○○○○○』を変えると、枠を好きな色に変えられます。色は、WEB色見本を参考にすると便利です。, 目次の背景と枠の色の組み合わせで、雰囲気がガラッと変わります。WEB色見本を参考にして、自分のサイトらしい組み合わせを探してみよう。, 目次の枠線をなくすと、すっきりとした雰囲気になります。背景になじみやすく、邪魔にならないデザインになるのもメリットです。, 文字のサイズ・色は、『目次（タイトル）』『見出しの色』『見出しの数字』それぞれ設定できます。, 今回は、Cocoonの目次のデザインはそのままに、色を変えるカスタマイズをお届けしました。少しアレンジするだけでも、サイトの雰囲気が大きく変わります。よかったら参考にしてみてくださいね。, 読むと、ちょっぴり役に立つ＆たのしくなるコンテンツを発信しています。クッピーラムネとAmazonのFire HD8がお気に入り。雑貨マニア。, ゆずゆろぐ。は、日常の困ったことをゆるゆると解決していくサイトです。マイナーなネタが多め。PCをゆるゆるとたのしむネタも満載です。, そうそう、本物の目次も入っているからね。ちなみに、上から2番目にあるのが本物の目次です. 背景画像に芝画像を設置したら、なんとなくインデックス周辺が白くてサッパリし過ぎていて何かインパクトと言うか印象を変えたくメイン背景とインデックスページの記事部分背景色を変更してみました。, Cocoonのスキンはなしを使用しています。 インデックスのカードタイプはエントリーカード(デフォルト)です。, インデックスの背景色を変更するのに色々見て探しましたが分からず(何処かに変更できる所があるかもしれません)スタイルシートに書いちゃいました。, 変更前のトップページがこんな感じです。 これはこれでシンプルで良いんですが…ちょっと寂しい？エントリーカードが白いのを変更したいと思いました。, /* main背景色 */.home .main{background-color: #008000;color: #fff;/*テキストカラー*/}.a-wrap{ /* インデックスページの記事背景色 */background-color: #fff8dc; }, スポンサーリンク、シェアするの文字が黒かったのでテキストカラーで白色にしています。, 緑色の背景でエントリーカードを薄肌色で見やすくなった感じです。 今回サイドバーは変更していませんが、サイドバーの背景色も変更していこうと考えています。自分が気にいた色に装飾してみるとサイトの雰囲気も変わって楽しいです♪最後まで読んで頂きありがとうございました。また、次の記事でお会いいたしましょう。, このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, またphp、CSSなどを変更するときにはCocoon サポート対象外のものを読んだうえで行って下さい。, 当テーマでは、できる限りサポートを行いたいと思いますが、管理者の時間的都合上サポートできないものもあるのでご了承ください。. 初歩的な質問で大変申し訳ございませんが教えていただけると嬉しいです。. 自作PCやソフトウェア、WordPressなどPC関連専用のWordPressブログサイト 【Cocoonユーザー・初心者向け】Wordpressで目次のカスタマイズをやってみた結果。目次トップ横にアイコンを表示したり、見出し別に文字の表示を変えたり、ホバー時に動きをつけてみました。 Copyright © 2018 MASAa.net All Rights Reserved. 無料WordPressテーマ Cocoon 目次を「Table of Contents Plus」プラグインからWordPressテーマ Cocoonの目次機能に切り換えることにしました。それに伴ってシンプルなデザインの目次をサイトにマッチするようにカスタマイズしてみ … WordPressテーマ「Cocoon」では、記事内に目次を表示する機能があります。初期設定だと次のようなデザインになっています。バランスのいいデザインなので、「この形はくずさずに、色だけを変えたい」という方もいるかと思います。そこで今回は パズドラ日記と依頼された製品レビューの記事を掲載し続けるmasaaの元祖WordPressブログサイト ぶっちろぐ ぶっちろぐ パズドラ日記と依頼された製品レビューの記事を掲載し続けるmasaaの元祖WordPressブログサイト このブログではCocoonのスキンは適用していません。自分でCSSをちょこちょこ編集してます^^, そうなんですね。とてもシンプルで見やすかったもので！目次をカスタマイズしている方は少ないので参考になりました。ありがとうございます。, このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, デザインを適用させるには、子テーマ（Cocoon Child）のスタイルシート (style.css）を開き、記事内のコードをコピーして貼り付けて下さい。, Cocoonのブログカード（外部・内部）をカスタマイズ（背景色・枠線・フッタードメイン非表示）する方法を紹介します。, Cocoon 人気記事ウィジェット（のランキング表示）のデザインを色々作ったので紹介します。コピペOKです。, CocoonのSNSのシェアボタンのデザインをカスタマイズする方法と、デザインサンプルを紹介します。, Cocoonのページネーションのデザインをカスタマイズする方法と、デザインサンプルを紹介します。, Cocoonの記事一覧ホバー時（記事一覧の記事の上にマウスを載せたとき）の動きをカスタマイズする方法と、デザインサンプルを紹介します。, Cocoon 検索ボックスのデザインをカスタマイズする方法（枠、色、文字の変更）とデザインサンプル5つ, Cocoonのページネーションのデザインをカスタマイズする方法と、デザインサンプル5つ, 【PR】ディスクパーティション管理・復元ならMiniTool Partition Wizard, Amazon Photosデスクトップアプリの使い方（同期/バックアップ/アップロード/ダウンロード）, Cocoon カテゴリー・タグ表示のカスタマイズ方法とデザインサンプル8（アイキャッチラベル、記事下）, Cocoon コメント欄のデザインをカスタマイズする方法（枠、色、文字の変更）と、デザインサンプル, Shortcodes Ultimateの使い方。Wordpress初心者におすすめの、何でもできるプラグイン, Amazon Photos（プライムフォト）の使い方（写真のアップロード/ダウンロード/削除）, 記事の目次を表示するTable of Contents Plusの使い方と設定方法, Cocoon コメント欄のデザインをカスタマイズする方法（枠、色、文字の変更）と、デザインサンプル | Simplicity Hacks. THE THOR（ザ・トール） Copyright © 2018 MASAa.net All Rights Reserved. 初めまして、コメントありがとうございます！ コンテンツ内、記事が書いてある部分の背景の色も変更します。 目次のカスタマイズとても良くて ここでは「0」を指定して、枠線を非表示（なし）にしています。, 目次タイトルの部分を変更するには「toc-title」というセレクタ（クラス）を使います。, 「background-color」で背景色を、「color」で文字色を指定します。, 目次コンテンツ（見出し）部分は「toc-content」というセレクタで扱われています。, ただし、文字色に関してはCocoonの親テーマで「toc a」に「color:#333」の指定がされているので、ここでは「toc-content a」を使って上書きしています。, いくつかデザインサンプルを作りました。 チメブロ, WordPress blog site specialized in PC produce by masaa, MASAa.net | WordPress blog site specialized in PC produce by masaa, このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。, 目次を「Table of Contents Plus」プラグインからWordPressテーマ Cocoonの目次機能に切り換えることにしました。それに伴ってシンプルなデザインの目次をサイトにマッチするようにカスタマイズしてみました。, WordPressテーマ CocoonでのFont Awesome 5設定について, WordPressテーマ Cocoon 2.0からFont Awesome 5に対応しています。そこでFont Awesome 5を使うためにWordPressテーマ CocoonでのFont Awesome 5設定についてまとめてみました。, WordPressテーマ THE THOR（ザ・トール）での「関連記事のアイキャッチ画像」のホバーエフェクトを無効にするカスタマイズについてまとめてみました。関連記事のアイキャッチ画像にホバーしてもズームされなくしてみました。, WordPressテーマ THE THOR（ザ・トール）でプラグインJetpackのウイジェット【人気の投稿とページ (Jetpack)】を使って人気記事ランキングを表示しています。そのウイジェット【人気の投稿とページ (Jetpack)】のカスタマイズです。, WordPressテーマ Cocoonの「サイドバーの見出し」については以前にも「見出し１タイトル（h1タグ）」と同じデザインとするカスタマイズを行いました。今回「サイドバーの見出し」に対して独自のデザインを採用してみました。, WordPressテーマ THE THOR（ザ・トール）での「ウィジェット ナビゲーションメニュー」のカスタマイズについてまとめてみました。今回のカスタマイズでは、Font Awesome 5のアイコンに変更してみました。, WordPressテーマ Cocoonの「インデックス」のカスタマイズのまとめについて前回のエントリー記事で掲載したばかりですが、その後「インデックス」について若干修正を入れたので改めてエントリー記事として掲載しました。, WordPressテーマ THE THOR（ザ・トール）の「ウィジェット セレクト」のカスタマイズについてまとめてみました。今回のカスタマイズでは、「ウィジェット セレクト」のカラー構成をサイトカラーに合わせて変更しました。, WordPressテーマ Cocoonで「記事一覧のインデックスホバー時の背景色」に関するカスタマイズについてまとめてみました。今回のカスタマイズは【記事一覧のインデックス】に対しホバーした時に背景色（バックカラー）を設定しました。, これまでWordPressテーマ Simplicity 2で構築していたMASAa.blogを、今回有料のWordPressテーマであるTHE THOR（ザ・トール）に移行しました。移行については拍子抜けするぐらい簡単にできました。, 【レビュー記事】WonderFox HD Video Converter Factory Pro, 動画変換ソフトウェア『WonderFox HD Video Converter Factory Pro』のレビュー記事です。ビデオを500種類以上の形式に変換、切り取り/マージ/特殊効果などの編集、動画ダウンロード等を行うことができます。, EaseUSのiPhoneデータ管理ツールソフト『EaseUS MobiMover（ モビ ・ ムーバー）』のレビュー記事です。数クリックだけで楽にiOSデバイス上のデータを移行/編集/添削することができる便利なソフトウェアです。, Hypamer『【高度昇級＆安定性抜群】ノートパソコンスタンド PC タブレットスタンド 無段階高さ調整可能 姿勢改善 腰痛/猫背解消 人間工学設計 折りたたみ式 滑り止め アルミ合金製』のサンプル品提供頂いたのでレビュー記事作成しました。, Windows上でパーテーション操作や管理などのディスク管理ソフトウェア『MiniTool Partition Wizard 12』のレビュー記事です。無料版以外にプロ版、プロ・デラックス版、プロ・アルティメット版があります。, INDEX 1 Leawo Blu-rayコピー2 Leawo Blu-rayコピーの紹介2.1 Leawo Blu-rayコピーをインストールする2.2 Leawo Blu-rayコピーを使う！2.2.1 設定項目2.2.2 市販のDVD.