cocoon 目次 背景色 4

cocoonの目次デザインをシンプル・オシャレにカスタマイズ。H3見出し以下は数字では無く「・」に変更しました。フォントのサイズや色、余白や位置を調整し全体はカラム幅にして見やすくなりました。パステルカラーでスタイリッシュに。  MASAa.net (WordPressテーマ THE THOR 使用) ブログでは特に、ページの最初に目次があると読者にとって優しいサイト作りができます。この記事では、WordPressのテーマCocoonで目次を表示する方法、設定でカスタマイズする方法、さらにサイドバーに表示してスクロールに追従させる方法を解説しています。 無料WordPressテーマ Cocoon コンテンツ内、記事が書いてある部分の背景の色も変更します。 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 ここでは「0」を指定して、枠線を非表示(なし)にしています。, 目次タイトルの部分を変更するには「toc-title」というセレクタ(クラス)を使います。, 「background-color」で背景色を、「color」で文字色を指定します。, 目次コンテンツ(見出し)部分は「toc-content」というセレクタで扱われています。, ただし、文字色に関してはCocoonの親テーマで「toc a」に「color:#333」の指定がされているので、ここでは「toc-content a」を使って上書きしています。, いくつかデザインサンプルを作りました。  MASAa.net 【Cocoonユーザー・初心者向け】Wordpressで目次のカスタマイズをやってみた結果。目次トップ横にアイコンを表示したり、見出し別に文字の表示を変えたり、ホバー時に動きをつけてみました。 数字と文字が2行に分かれて表示されてしまうのですが、その場合にはどちらを修正すれば宜しいでしょうか? Copyright © 2018 MASAa.net All Rights Reserved. 自作PCやソフトウェア、WordPressなどPC関連専用のWordPressブログサイト 要素の表示形式がブロックボックス(block)で表示されているため、横並びを実現するためのCSSプロパティ(float、display)で指定する必要があると思われます。 初めまして、コメントありがとうございます! MASAa.blogからリニューアルしたガジェット好きmasaaのメインWordPressブログサイト 初歩的な質問で大変申し訳ございませんが教えていただけると嬉しいです。.  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の目次機能に切り換えた訳ですが、プラグインは管理やサイトスピードの面から一つでも少なくしたいので、プラグインを一つ無くすことが出来たのは良かったでしょう。, はじめまして! 目次を「Table of Contents Plus」プラグインからWordPressテーマ Cocoonの目次機能に切り換えることにしました。それに伴ってシンプルなデザインの目次をサイトにマッチするようにカスタマイズしてみ … Copyright © 2018 MASAa.net All Rights Reserved. cssが全く分からなくても。というよりも使わなくてもできるスタイル内のボックスの背景色を6倍に!合計24種類もバリエーションが増えました。誰でも5秒もあれば、できる!ちょっとズルい方法。 Copyright © 2017-2020 うぃんすとんblog All Rights Reserved.  MASAa.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とか.  パソコン関連  パソコン関連 WordPressテーマ Cocoonの「目次」については以前にもカスタマイズを行ってきました。今回「目次」に対して、PC以外の多くの端末(スマートフォン、タブレット)でも正常に表示される「目次」となるように改めてデザインを変更してみました。 この記事では、WordPressテーマcocoonのスキンで使われているHTMLカラーコード32スキン61カラーをご紹介いたします。ベテランさんのブログを見ていると、色々な箇所をカスタマイズし始め、次第にテーマのスキンで使われているカラーと揃えたくなってきますよね。 ご質問頂いた件について実際にどうなっているか分からないのであくまでも憶測ですが、 このブログでは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.  WordPress関連 どれも色を変えるだけでアレンジしやすいと思います。, 目次タイトルの背景色を全体よりもすこし濃い色にして、ボックスのようなデザインにしています。, 目次はデフォルトのデザインのままのブログも多いと思いますが、簡単に変更できるので、ブログのイメージカラーと合わせると全体のデザインに馴染んで良いと思います。, […] Cocoon 記事の目次(TOC)のデザインをカスタマイズする方法とデザインサンプル5つ […], とても参考になりました。お聞きしたいのですが、このブログのデザインはcocoonの何を使っておられるのでしょうか?fuwariなど。, 優さん パズドラ日記と依頼された製品レビューの記事を掲載し続けるmasaaの元祖WordPressブログサイト  WordPress関連 float: right; チメブロ, 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の「サイドバーの見出し」については以前にも「見出し1タイトル(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. Copyright © 2018 Unity Right All Rights Reserved. Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介して … Windows10の電源プランを「AMD Ryzen™ Balanced」に強制設定する!, 低価格なiVANKY製の4K60Hz対応DisplayPortケーブルを購入する!, h2以下の見出しのアンダーラインと先頭の数値を無くし、その代わり先頭にアイコンを表示. 背景画像に芝画像を設置したら、なんとなくインデックス周辺が白くてサッパリし過ぎていて何かインパクトと言うか印象を変えたくメイン背景とインデックスページの記事部分背景色を変更してみました。, Cocoonのスキンはなしを使用しています。 インデックスのカードタイプはエントリーカード(デフォルト)です。, インデックスの背景色を変更するのに色々見て探しましたが分からず(何処かに変更できる所があるかもしれません)スタイルシートに書いちゃいました。, 変更前のトップページがこんな感じです。 これはこれでシンプルで良いんですが…ちょっと寂しい?エントリーカードが白いのを変更したいと思いました。, /* main背景色 */.home .main{background-color: #008000;color: #fff;/*テキストカラー*/}.a-wrap{ /* インデックスページの記事背景色 */background-color: #fff8dc; }, スポンサーリンク、シェアするの文字が黒かったのでテキストカラーで白色にしています。, 緑色の背景でエントリーカードを薄肌色で見やすくなった感じです。 今回サイドバーは変更していませんが、サイドバーの背景色も変更していこうと考えています。自分が気にいた色に装飾してみるとサイトの雰囲気も変わって楽しいです♪最後まで読んで頂きありがとうございました。また、次の記事でお会いいたしましょう。, このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, またphp、CSSなどを変更するときにはCocoon サポート対象外のものを読んだうえで行って下さい。, 当テーマでは、できる限りサポートを行いたいと思いますが、管理者の時間的都合上サポートできないものもあるのでご了承ください。. WordPressテーマ「Cocoon」では、記事内に目次を表示する機能があります。初期設定だと次のようなデザインになっています。, バランスのいいデザインなので、「この形はくずさずに、色だけを変えたい」という方もいるかと思います。, そこで今回は「Cocoonの目次のデザインはそのままに、背景・枠・文字の色を変える」カスタマイズをお届けします。, 紹介したコードをコピーして、Cocoonの子テーマの「style.css」に貼りつけるだけなので、とてもかんたんです。, まずは、目次の背景の色だけを変えるカスタマイズです。色は好きなものに変えられます。, 『backgroundcolor』の後ろにある『#○○○○○○』を変えると、目次の背景色が変わります。色は、WEB色見本を参考にすると便利です。, 背景色は初期設定のままで、枠線の色だけを変える方法です。線の色は好きなものに変えられます。, 『1px』の後ろにある『#○○○○○○』を変えると、枠を好きな色に変えられます。色は、WEB色見本を参考にすると便利です。, 目次の背景と枠の色の組み合わせで、雰囲気がガラッと変わります。WEB色見本を参考にして、自分のサイトらしい組み合わせを探してみよう。, 目次の枠線をなくすと、すっきりとした雰囲気になります。背景になじみやすく、邪魔にならないデザインになるのもメリットです。, 文字のサイズ・色は、『目次(タイトル)』『見出しの色』『見出しの数字』それぞれ設定できます。, 今回は、Cocoonの目次のデザインはそのままに、色を変えるカスタマイズをお届けしました。少しアレンジするだけでも、サイトの雰囲気が大きく変わります。よかったら参考にしてみてくださいね。, 読むと、ちょっぴり役に立つ&たのしくなるコンテンツを発信しています。クッピーラムネとAmazonのFire HD8がお気に入り。雑貨マニア。, ゆずゆろぐ。は、日常の困ったことをゆるゆると解決していくサイトです。マイナーなネタが多め。PCをゆるゆるとたのしむネタも満載です。, そうそう、本物の目次も入っているからね。ちなみに、上から2番目にあるのが本物の目次です. 目次はスルーされる事も多いと思うので、デザイン的なワンポイントで良いと思っていますが、目次が雑だと記事を読み進める気が無くなるので(個人的に)疎かにはできません。, コピペで完成ではなく「どこをどうすると何が変わるのか」オリジナルなカスタマイズを始めるきっかけになればと思って記事を作成しました。, なお、外枠のボーダー色はCocoon設定→全体→サイトキーカラーが反映される様です。, 追加CSS又は子テーマのスタイルシート(style.css)にコードを追加していきます。ちなみにtocはTable of contentsの略で目次の事です。, 全体の定義です。paddingの値を変えたりmarginを追加してお好みのポジションを探してみてください。, 当サイトの場合Contentsと表示されている部分です。フォントや背景の色などを変えました。, paddingの設定についてはHTMLクイックリファレンスさんの解説がとても分かりやすいです。, タイトルより下の目次が表示される部分です。こちらもpaddingで全体の位置を調整してみて下さい。, ココがポイントです。H3以下の先頭の数字を「・」にする為に、まず現在表示されている目次ナンバーを非表示にします。, 「・」を付ける訳ではなく背景を丸くして「・」に見える様にしている感じです。位置の調整はサイトごとに必要だと思うので、バランスを見ながら数値を変えてみて下さい。, バージョンアップなどのタイミングで位置ズレたりする事もあるので、以下のコードは随時見直して更新しています。上手くいかない時の参考にしてください。, 私はサイト運営やカスタマイズ作業の約90%以上をiPhoneだけで完結しています。今回もスマホでWordPressの追加CSSを編集していたところ、途中で画面が落ちてしまう事が数回ありました。, 今回は自動保存から復元できたものの、そのうち痛い目に合いそうな気も。。幸いにもサイトのカスタマイズ記事がメインなので、カスタマイズ記事を分かりやすくどんどん作成しておけば、それ自体がバックアップにもなりますね。, こちらの目次を使わせていただいております。 h4も目次表示させたいのですが、今のところh4タグをつけると ・h3 ・  ・・h4 という表示になってしまいます。 間に、1行入る・を何とか消したいのですが方法はありますでしょうか?, H4以下は使ってないので自信はないですが・・Cocoon側の『目次ナンバーの表示』は「数字(デフォルト)」になっていますでしょうか?, 試しにH4を追加して「数字詳細」にしたら・が1行追加されたので、Cocoon設定を確認してみてくださいヽ(´ω`)ノ, 返信ありがとうございます。 数字詳細になっていましたが、解決できませんでした。 h4タグを使うのやめてみます。お手数おかけしました。, 私も.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】選び方やメリットなど.

ベリーショート 20代 メンズ 4, 北山宏光 実家 住所 50, デリー 治安 2019 30, Sendgrid Lambda Python 4, 短所 英語 一覧 4, ティグアン アンビエントライト 色 4, 婚 活 三島 5, 重要な Significant 英語 4, 比較 略称 英語 4, 日立 冷蔵庫 音 4, 発言小町 怖い 2017 54, レガシィ Er Hc 7, 立川裕二 学 振 5, 予習 ノート 作り方 社会 4, Nhk 衛星契約 分波器ない 4, 嫁 妊娠 タバコ 8, Icu 文字コード 判定 4, Sk フォレスター マフラー 17, Excel グラフ ラベル 小文字 10, Macr Jp036 買取 4, タイトリスト T100s 試打 4, メンタルエース ホスト 意味 9, アラフィフ 婚 活 小町 13, 積立nisa Ideco 併用 13, Windows Update 最新 確認 5, Word 段組み 幅 9, Vscode Markdown 画像サイズ 13, エネオス キャンペーン 一休 4, ヒューズ 10a 250v 30mm 5, Psp 充電器 ダイソー 4, ドラクエ10 クエスト 559 6, フェルナンド フベロ ウイイレ 9, 2 回目 デート 女性が 予約 7,

Start a Conversation

Your email address will not be published.