2.Cocoonブロック→吹き出し 3.サイドバーでカスタマイズ. WordPressテーマCocoonのデフォルト『検索窓・検索フォーム・検索ボックス』言いかたはさて置き『サイト内検索』のカスタマイズをご紹介します。 検索フォームの線の色 検索ボタン『虫めがね』アイコン変更 アイコンを別アイコンに 当ブログでは無料テーマcocoonをカスタマイズして使用しています。サイドバーのプロフィールの欄は、cocoonにデフォルトで付いていた機能を使って表示していますが、周りについている枠線を取りたいなぁと思ったのでやってみることにしました。 Cocoonに初めから用意されている文字装飾のスタイルを好みのデザインや色にカスタマイズしてみます。文字装飾の一覧は以下にまとめています。この記事はマーカーのカスタマイズ方法です。カスタマイズ方法簡単なCSS追記のみです。CSS追記は以下の Cocoonのボックスメニューの文字色を変更する方法です。 私の場合ですが、フッターウィジェットにボックスメニューを入れていて、 フッターの文字色を白に設定したら、ボックスメニューの文字色も白くなって、メニュー名が以下のように分からなくなってしまいました。 cocoonの見出しをおしゃれなデザインに変更したいと思うことがあるでしょう。しかし、どうすればいいのか分からない方も多いと思います。CSSの知識がなかった私が、実際に行ったカスタマイズ方法をご紹介します。HTMLの知識がほとんどなかった私でも簡単にできました。 文字色を変えたい漢字にふりがなを付けたいマーカーを引きたい文字大きさを変えたいCocoonのツールバーではこういったことが簡単にできます。本記事はWordPressテーマCocoonのブロックエディタ（Gutenberg）投稿画面におけるツ cocoonのサイトタイトルの文字の大きさを変更したい・・。よくあることです。そこで今回は、cocoonのサイトタイトルの文字の大きさ変更について考えてみます。 文字色 文字の色をお好みで選択してください。 モバイルサイトフォント設定 . 1.「 」をクリック ワードプレス無料テーマ『Cocoon』の細かいところをカスタマイズした記録です。メニューにFont Awesomeアイコンを入れたり、目次を中央配置にして背景色の変更をしたり、カテゴリーのラベルを非表示にしたりなど、自己満足的に？細かく変更した箇所などの備忘録です。 サイドバー： 「sidebar-menu-button」 検索： 「search-menu-button」 トップに戻る： 「top-menu-button」 ホーム： 「home-menu-button」 各ボタンの背景色を、ブルー系にして文字色を白にしました。以下を子テーマのstyle.cssに追記しました。 2018年7月、ついにCocoonが正式版リリースとなりました。2017年～2018年にかけてかなり多くのWordpressテーマがリリースされたと思いますが、その中でも際立つ超ビッグニュース。かなり多くの人々がCocoonの発表と正式リリ Simplicity2の後継的存在でSEOに優れ高機能な無料テーマ「Cocoon」のグローバルナビ（メニュー）のカスタマイズを行います。PCのナビはこんな感じにしようと思います。ブログサイトのテーマカラーの決定今回は、青系で設定を進めたいと WordPressテーマ Cocoonの【サイドバーの見出し】を、自分のサイトカラーに合わせてカスタマイズ（スライドボタン設定時含む）してみました。と言う事で、【サイドバーの見出し】のカスタマイズについて書いたエントリー記事です。 サイドバーに「新着記事」などを表示させる方法、「メタ情報」などを非表示にする方法をまとめました。 メタ情報の意味も説明しています。 [Cocoon] 簡単！ 人気無料テーマ「Cocoon」を利用してブログのサイドバーをカスタマイズします。Cocoonには既存でサイドバー用のパーツを作成するウイジェットが用意されています、これを利用して、驚くほど簡単な操作で「最新記事一覧」や「人気記事一覧」の作成ができます。 WordPressの神テーマCocoonをインストールしたら記事を書く前に、最初にしておきたい初期設定を1ページにまとめました。要約すると新規サイトを作成する時などのカンニングペーパー的なものです。誰かのお役に立てれば幸いですが、記事は長いです。（笑） こんにちは、ハナです。Cocoonのスキンにより、サイドバーの見出しのデザインを違います。このブログで使用しているスキンでは、サイドバー見出しはこのように表示されます。これではちょっと寂しいので変更してみたいと思います。このように、バックに こんにちは、サブです。WordPressでCocoonを使っているけど、サイドバーの文字サイズを変更する方法が分からない、と思っていませんか？Cocoonをカスタマイズしようとすると、設定項目がたくさんあるのですが、サイドバーの文字サイズを WordPress のテーマ Cocoon のテキスト入力で文字色・背景色の変更、特に文字の一部の色変更についてGutenbergの機能とWordpressプラグインEditorsKitを使用した方法を紹介しています。 Cocoonのテーマのブログタイトルの文字をカスタマイズしました。もともとヘッダー画像に文字を入れて作っていた場合、文字を変えるときにはその画像ごと変更する必要があります。それを、コードを使って簡単に変更できるようにしました。 人物、吹き出しスタイル、人物位置、アイコンスタイル（枠）、 色を編集できます。 ボタン. Cocoonの検索ボックス（検索フォーム）のデザインをカスタマイズする方法と、デザインサンプルを紹介します。 検索ボックス・検索ボタンの色や文字サイズ、表示されているテキスト（デフォルトでは「サイト内を検索」）を変更することができます。 以前サイドバーのカスタマイズ記事を書きました。若干飽きてきたので(笑)、カテゴリとアーカイブのウィジェットを中心にカスタマイズしなおしました。こっちの方が好みだという方はこちらをどうぞ！コチラの記事にCocoonのカスタマイズ記事をまとめて Cocoonのスキン機能でカスタマイズするなら、ココを変更すると効果的という部分をまとめてみました。これらをカスタマイズすることにより、Cocoonっぽさをかなり減らすことができるかと思います。 コピペでできる簡単Cocoonカスタマイズ！目次をサイドバー追尾させます。TOC+にも対応！見出しが多いときはスクロールが出てくるように、見出しが少ないときはスクロールが表示されずに見出しの数分の高さになるようにしました。 Cocoon設定でヘッダーの文字色・背景色を変えてサイトのイメージアップ！ WordPressの無料テーマ【Cocoon】において、サイドバーウィジェット内の文字サイズを小さくカスタマイズする方法をご紹介しておきます。よかったら参考にしてみてくださいね。 『Cocoonのテーマでヘッダーメニューを作成したけど、色と幅はどこで設定できるの？』そんな方に、ヘッダーメニュー（グローバルメニュー）の設定方法を10枚の画像を使用して分かりやすくご紹介いた … Cocoonのいいところ。それは「とても便利」なところ。他のテーマは使ったことがないので分かりませんが、Cocoonは今まで「やりたいけどできない」ことは殆どありませんでした。たとえば、これです。スマホのメニューが出てきたり、隠れたりするや これまでと同様「Cocoon設定」から「通知」を選択。 ぼくは今グレーの背景に黒文字にしています。 デフォルトだと8色ですが、「色を選択」から自由に色を変えることができます。 初心者でも色を変えてみて個性を出そう こんにちは、ハナです。 Cocoonでボックスメニューを作成したら、ボックスメニューのアイコンの色を変えたいと思ったことはありませんか？デフォルトでは色がオレンジになりますが、好きな色に変更してみたいと思います。ボックスメニューのアイコンの Cocoonで見出しのデザインを好みのものにカスタマイズする方法です。見出し1（H1)は記事のタイトルで使われますので、記事本文中はH2～を利用します。デザイン設定する為の指定方法と、まるごとコピー利用できるコードを載せています。カスタマイ この記事ではWordPressテーマCocoonのフッターモバイルメニューの背景色をカスタマイズする方法をご紹介いたします。自分のサイトをカスタマイズし始めると、次第にスキンで制御されているフッターモバイルメニューも自分好みにしたくなってくきますよね。 WordPressではテーマごとに「スタイルシート」（style.css）があるので、デザインのカスタマイズはstyle.cssに追記します。Cocoonの子テーマのstyle.cssに追記する方法と追加CSSに記述する方式を紹介 … Cocoon. よく見ると思いますが、アフィリエイトリンク先に飛ぶボタンです。 ボタン. 本記事はWordPressテーマ「Cocoon」を使っていて、記事はブロックエディタで書いている方向けの記事です。ブロックエディタ（Gutenberg）におけるテーブル（表）の作り方を丁寧に解説していきます。だいたい表で悩むことは書いていま 一番最初にCocoonの全体設定をするときプレビューを見ながら確認できる安心感。ワードプレスを初めて使うかた、アメブロのようにテンプレートのあるブログを使っていたかたは先に知っておくとさらにイメージしやすいように詳しく書き起こしてみました。 メニューバー作成⇒Cocoon ... 「おすすめカードウィジェット」Cocoonでサイドバーにもカスタマイズ . Cocoon サイドバー追従「カテゴリー」のカスタマイズ。をCSSでやってみたら、可愛いデザインが意外にサムライブルースキンに合っていて(*´艸`*)な件。 モバイルサイトのフォントサイズをお好みで設定してください。 サイドバーの設定 「サイドバーの位置」「サイドバーの表示状態」をお好みで選択してください。 どうもおはようポテト(@ohayoupoteto22)です。 本ブログでも利用しているCocoon。 というわけで今回は 「サイドバーの見出しをもっとオシャレにしたい」 「Cocoonを使っていて、デフォルトのデザイ …