cocoon 目次背景色 4

目次はスルーされる事も多いと思うので、デザイン的なワンポイントで良いと思っていますが、目次が雑だと記事を読み進める気が無くなるので（個人的に）疎かにはできません。, コピペで完成ではなく「どこをどうすると何が変わるのか」オリジナルなカスタマイズを始めるきっかけになればと思って記事を作成しました。, なお、外枠のボーダー色は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の見出しまで設定をできますので、大きさが階層別のように整理整頓されて出てくるので、見やすいです。（WordPressテーマ Cocoon 使用）, WordPressテーマ目次コンテンツ（見出し）部分は「toc-content」というセレクタで扱われています。ただし、文字色に関してはCocoonの親テーマで「toc a」に「color:#333」の指定がされているので、ここでは「toc-content a」を使って上書きしています。目次のデザインサンプル【Cocoonユーザー・初心者向け】Wordpressで目次のカスタマイズをやってみた結果。目次トップ横にアイコンを表示したり、見出し別に文字の表示を変えたり、ホバー時に動きをつけてみました。 WordPress関連 Windows10の電源プランを「AMD Ryzen™ Balanced」に強制設定する！, 低価格なiVANKY製の4K60Hz対応DisplayPortケーブルを購入する！, h2以下の見出しのアンダーラインと先頭の数値を無くし、その代わり先頭にアイコンを表示. Copyright © 2018 MASAa.net All Rights Reserved. チメブロ, 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テーマcocoonのスキンで使われているHTMLカラーコード32スキン61カラーをご紹介いたします。ベテランさんのブログを見ていると、色々な箇所をカスタマイズし始め、次第にテーマのスキンで使われているカラーと揃えたくなってきますよね。

WordPressテーマ「Cocoon」では、記事内に目次を表示する機能があります。初期設定だと次のようなデザインになっています。, バランスのいいデザインなので、「この形はくずさずに、色だけを変えたい」という方もいるかと思います。, そこで今回は「Cocoonの目次のデザインはそのままに、背景・枠・文字の色を変える」カスタマイズをお届けします。, 紹介したコードをコピーして、Cocoonの子テーマの「style.css」に貼りつけるだけなので、とてもかんたんです。, まずは、目次の背景の色だけを変えるカスタマイズです。色は好きなものに変えられます。, 『backgroundcolor』の後ろにある『＃○○○○○○』を変えると、目次の背景色が変わります。色は、WEB色見本を参考にすると便利です。, 背景色は初期設定のままで、枠線の色だけを変える方法です。線の色は好きなものに変えられます。, 『1px』の後ろにある『＃○○○○○○』を変えると、枠を好きな色に変えられます。色は、WEB色見本を参考にすると便利です。, 目次の背景と枠の色の組み合わせで、雰囲気がガラッと変わります。WEB色見本を参考にして、自分のサイトらしい組み合わせを探してみよう。, 目次の枠線をなくすと、すっきりとした雰囲気になります。背景になじみやすく、邪魔にならないデザインになるのもメリットです。, 文字のサイズ・色は、『目次（タイトル）』『見出しの色』『見出しの数字』それぞれ設定できます。, 今回は、Cocoonの目次のデザインはそのままに、色を変えるカスタマイズをお届けしました。少しアレンジするだけでも、サイトの雰囲気が大きく変わります。よかったら参考にしてみてくださいね。, 読むと、ちょっぴり役に立つ＆たのしくなるコンテンツを発信しています。クッピーラムネとAmazonのFire HD8がお気に入り。雑貨マニア。, ゆずゆろぐ。は、日常の困ったことをゆるゆると解決していくサイトです。マイナーなネタが多め。PCをゆるゆるとたのしむネタも満載です。, そうそう、本物の目次も入っているからね。ちなみに、上から2番目にあるのが本物の目次です. 自作PCやソフトウェア、WordPressなどPC関連専用のWordPressブログサイト【Cocoonユーザー・初心者向け】Wordpressで目次のカスタマイズをやってみた結果。目次トップ横にアイコンを表示したり、見出し別に文字の表示を変えたり、ホバー時に動きをつけてみ …

THE THOR（ザ・トール）ぶっちろぐ Cocoonの記事の目次（TOC）のデザインをカスタマイズする方法と、デザインサンプルを紹介します。 cocoonの目次デザインをシンプル・オシャレにカスタマイズ。H3見出し以下は数字では無く「・」に変更しました。フォントのサイズや色、余白や位置を調整し全体はカラム幅にして見やすくなりました。パステルカラーでスタイリッシュに。目次を「Table of Contents Plus」プラグインからWordPressテーマ Cocoonの目次機能に切り換えることにしました。それに伴ってシンプルなデザインの目次をサイトにマッチするようにカスタマイズしてみ … WordPressテーマ「Cocoon」では、記事内に目次を表示する機能があります。初期設定だと次のようなデザインになっています。バランスのいいデザインなので、「この形はくずさずに、色だけを変えたい」という方もいるかと思います。そこで今回は MASAa.blog コメントありがとうございます。参考にしていただけて良かったです！（WordPressテーマ THE THOR 使用）パソコン関連パズドラ日記と依頼された製品レビューの記事を掲載し続けるmasaaの元祖WordPressブログサイト無料WordPressテーマ Cocoon （WordPressテーマ THE THOR 使用）シンプルがベストですが…背景画像に芝画像を設置したら、なんとなくインデックス周辺が白くてサッパリし過ぎていて何かインパクトと言うか印象を変えたくメイン背景とインデックスページの記事部分背景色を変更してみました。Cocoonのスキンはなしを使 WordPressテーマ Cocoonの「目次」については以前にもカスタマイズを行ってきました。今回「目次」に対して、PC以外の多くの端末（スマートフォン、タブレット）でも正常に表示される「目次」となるように改めてデザインを変更してみました。どれも色を変えるだけでアレンジしやすいと思います。, 目次タイトルの背景色を全体よりもすこし濃い色にして、ボックスのようなデザインにしています。, 目次はデフォルトのデザインのままのブログも多いと思いますが、簡単に変更できるので、ブログのイメージカラーと合わせると全体のデザインに馴染んで良いと思います。, […] Cocoon 記事の目次(TOC)のデザインをカスタマイズする方法とデザインサンプル5つ […], とても参考になりました。お聞きしたいのですが、このブログのデザインはcocoonの何を使っておられるのでしょうか？fuwariなど。, 優さんパズドラ日記と依頼された製品レビューの記事を掲載し続けるmasaaの元祖WordPressブログサイトパソコン選びのコツ 4．お好みの色を選びます。[色を選択]のとなりにあるボックスに「カラーコード」をコピーする方法が一番簡単だと思います。もちろん、1番下の色パレットから選んだり、グラデーションになっている画像をクリックして気に入る色を探すこともできます。 Copyright © 2018 Unity Right All Rights Reserved.

MASAa.net パソコン関連 MASAa.blogからリニューアルしたガジェット好きmasaaのメインWordPressブログサイトぶっちろぐ Windows10の電源プランを「AMD Ryzen™ Balanced」に強制設定する！, 低価格なiVANKY製の4K60Hz対応DisplayPortケーブルを購入する！, https://masaa.net/2020/01/29/post-200117-1/. からあげ棒、ありったけ（WordPressテーマ Cocoon 使用）, WordPressテーマ MASAa.blogからリニューアルしたガジェット好きmasaaのメインWordPressブログサイトブログでは特に、ページの最初に目次があると読者にとって優しいサイト作りができます。この記事では、WordPressのテーマCocoonで目次を表示する方法、設定でカスタマイズする方法、さらにサイドバーに表示してスクロールに追従させる方法を解説しています。 Copyright © 2017-2020 うぃんすとんblog All Rights Reserved. float: right; 数字と文字が2行に分かれて表示されてしまうのですが、その場合にはどちらを修正すれば宜しいでしょうか？目次を「Table of Contents Plus」プラグインからWordPressテーマ Cocoonの目次機能に切り換えることにしました。それに伴ってシンプルなデザインの目次をサイトにマッチするようにカスタマイズしてみ … 要素の表示形式がブロックボックス(block)で表示されているため、横並びを実現するためのCSSプロパティ（float、display)で指定する必要があると思われます。背景色、文字色、枠線の変更などをすることができます。, 背景色、文字色、枠線などのカスタマイズ方法です。

https://masaa.net/2020/01/29/post-200117-1/, 大学生と高校生の二人娘のパパで弱小ブロガー。初めての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 Cocoonはカスタマイズの自由度が半端なく、目次もcocoonひとつあれば追加できます。さすがに細かいカスタマイズするにはcssの知識が必要ですが、手を加えるところは少しだけなので、案外簡単にオリジナルの目次が作れるんです。コピペ用のコードも掲載しておきます。 MASAa.net コンテンツ内、記事が書いてある部分の背景の色も変更します。よく分からない人、面倒な人は下のデザインサンプルから気に入ったものをコピペして使ってください。, 目次を自動で表示するか、どの見出し階層まで表示するか（深さ）、表示テキストの変更などの基本的なことは、Cocoon設定内の[目次]タブ内で設定することができます。, 背景色を変更するには、「toc」というセレクタの「background-color」に色を指定します。, 「toc-title」は目次タイトル、「toc a」は目次コンテンツ内の文字列（リンク）です。, 枠線を変更するには「toc」の「border」を変更します。 cssが全く分からなくても。というよりも使わなくてもできるスタイル内のボックスの背景色を6倍に！合計24種類もバリエーションが増えました。誰でも5秒もあれば、できる！ちょっとズルい方法。 display: inline; からあげ棒、ありったけ

無料WordPressテーマ Cocoon この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 先日、Simplicity2の後継テーマ「Cocoon」のテスト版が公開されました。さっそく別サイトで使ってみましたが、すごいですね、これ。 Simplicityのよさはそのままに、機能も使い勝手も大幅にパワーアップしています。実際に... 今回は、WordPressテーマ「Cocoon」にGoogleアドセンスの「関連コンテンツ」を設置する方法をお届けします。「関連コンテンツ」とは、記事と関連した広告がセットになって表示されるものです。たとえばこんな感じのものです... WordPressテーマ「Cocoon」の固定ページの日付を非表示にしてみました。消したのはこの部分「投稿日と更新日」のところです。日付表示が消えると、このようにすっきりとした表示になります。「お問い合わせ」や... WordPressテーマ「Cocoon」は様々なカスタマイズができます。今回は、リスト（箇条書き）の「点」をチェックマークにしてみました。簡単なカスタマイズですが、こうした装飾を入れるだけでも、ブログの読みやすさがずいぶんと変わ... WordPressテーマ「Cocoon」を使い始めたら、ぜひカスタマイズしたいのが「ページネーション」です。ページネーションとは、記事一覧などの下に表示される「別ページへのリンク」のことです。これがページネーションデフォルト... WordPressテーマ「Cocoon」では、ビジュアルエディタの『スタイル』から『ボックス（白抜き）』を選択すると、囲み枠を入れることができます。・・・が、初期設定のままだと、枠線が太く感じられたり、色が強いと感じたりすることがあ... COOLPIX B700、PENTAX K-70、OM-D E-M5、E-PL6とか. display:inline-block; 新しく目次の再カスタマイズについてのエントリー記事もアップしていますので、こちらもご覧頂ければ幸いです。ここでは「0」を指定して、枠線を非表示（なし）にしています。, 目次タイトルの部分を変更するには「toc-title」というセレクタ（クラス）を使います。, 「background-color」で背景色を、「color」で文字色を指定します。, 目次コンテンツ（見出し）部分は「toc-content」というセレクタで扱われています。, ただし、文字色に関してはCocoonの親テーマで「toc a」に「color:#333」の指定がされているので、ここでは「toc-content a」を使って上書きしています。, いくつかデザインサンプルを作りました。 Copyright © 2018 MASAa.net All Rights Reserved. PlayStation Plusに加入中なのにオンラインマルチプレイ開始時に加入を求められる, Google Search Console【登録したけど全然データが反映されない】. THE THOR（ザ・トール） Copyright © 2017-2020 ゆずゆろぐ。 All Rights Reserved.

Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介して … 色は黒にしています。「#000」は好きな色を入れてください。 body { background-color: #000; } 確認しますと、背景が黒になっていると思います。コンテンツの背景色を変える. （WordPressテーマ THE THOR 使用） MASAa.blog 使用させていただきました。背景画像に芝画像を設置したら、なんとなくインデックス周辺が白くてサッパリし過ぎていて何かインパクトと言うか印象を変えたくメイン背景とインデックスページの記事部分背景色を変更してみました。, Cocoonのスキンはなしを使用しています。インデックスのカードタイプはエントリーカード(デフォルト)です。, インデックスの背景色を変更するのに色々見て探しましたが分からず(何処かに変更できる所があるかもしれません)スタイルシートに書いちゃいました。, 変更前のトップページがこんな感じです。これはこれでシンプルで良いんですが…ちょっと寂しい？エントリーカードが白いのを変更したいと思いました。, /* main背景色 */.home .main{background-color: #008000;color: #fff;/*テキストカラー*/}.a-wrap{ /* インデックスページの記事背景色 */background-color: #fff8dc; }, スポンサーリンク、シェアするの文字が黒かったのでテキストカラーで白色にしています。, 緑色の背景でエントリーカードを薄肌色で見やすくなった感じです。今回サイドバーは変更していませんが、サイドバーの背景色も変更していこうと考えています。自分が気にいた色に装飾してみるとサイトの雰囲気も変わって楽しいです♪最後まで読んで頂きありがとうございました。また、次の記事でお会いいたしましょう。, このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, またphp、CSSなどを変更するときにはCocoon サポート対象外のものを読んだうえで行って下さい。, 当テーマでは、できる限りサポートを行いたいと思いますが、管理者の時間的都合上サポートできないものもあるのでご了承ください。.