cocoonスキン 色 変更 6


例えば、下図は、今回のテンプレート「Cocoon」の雰囲気に合わせて、管理画面の配色を変更したものです。, かなり、Cocoonの雰囲気になっていませんでしょうか。 (adsbygoogle = window.adsbygoogle || []).push({}); はじめまして!管理人のカケイです。ハーゲンダッツをこよなく愛する30代の男です。役立つ情報や備忘記録、気になった出来事などをしたためていきます。どうぞヨロシク!お問い合わせはこちら, パソコンやネットなどのお役立ち情報や日常で気になったことをわかりやすくしたためていきます (*‘ω‘ *), WordPress管理画面の配色変更するプラグイン「Backend Designer」の使い方. 見出しh2~h6の見た目を変えましょう。見出しは重要な要素でもありますが、デフォルトでは、とてもさみしくないですか?デフォルトの状態色を付けて見やすくカスタマイズしましょう。カスタマイズ後のデザインこちらと同じデザインでよければ、ページ下部

色選びとか難しいんですよね。, でも、Cocoonのように、デザインが用意されているテンプレートなら安心。 Copyright © 2020 SILK All Rights Reserved. スキンをそのまま色変更せずに使う場合はいいんですが、スキンに合わせて自分好みにヘッダーやナビの色変更をしていく場合、 使用するスキンを変えた時はcocoon設定のヘッダーの色変更も忘れないようにしましょう。(プレビューで確認を忘れずに。 こんなふうに色やデザインが一気に変わります。 スキンの設定方法は、好みのスキンを選んで「変更をまとめて保存」を押すだけです。 タブで切り替えて、カテゴリー別の最新記事などを表示できるデザイン部品も作成しています。, ダウンロードしたファイルを解凍し、Cocoon子テーマのskinsフォルダにフォルダごとアップロードしてご利用下さい。, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。. Cocoonの一番の特徴は「スキン」といういわゆる着せ替えです。Cocoon製作者のわいひらさんをはじめいろんな方がスキンのデザインをされていてそれが利用できるのがとても便利なんです。, 超初心者の方は、スキンをインストールしてしまってそのままブログを始めるのがおススメですが、Wordpressに慣れている方や超初心者を脱した方などはスキンに少しだけ自分らしさを追加しても面白いかもしれません。, Cocoonのスキンの導入のやり方と、センス良く使いこなす方法をお伝えしていきます。, 【THE THORの評判】実際使ってみた口コミとレビュー。【WordPressテーマ】, Cocoon(コクーン)はデザイン等はもちろんできますが、最初からボタンひとつで他の人が作ったデザインを自分のブログに導入できる機能があります。, Cocoonのカスタマイズと使い方!【WordPressテーマ】初心者でもカッコよいブログになる設定方法!!, 70種類近くあるのでデザインをひとつひとつ確認するのも大変です。そんな時に便利な使い方をご紹介します。, スキンのタイトルと作者の名前があります。気になるデザインがあればタイトルの左側の画像のアイコンの上にカーソルを持っていきます。, エリア分けがシンプルで扱いやすいデザイン。17色ありますがすべて同系色でまとめられていて、補色等は使っていないので、見た目にスッキリと収まります。, 名前の由来は、「シンプル(simple)」と「ウェブログ(weblog)」をミックスしたものです。, 画像部分に影を付けて印象深くなっているMomoon。ヘッダーとボディの間に入るストライプの線がキリっと目立ちます。, ヘッダー画像にグラデーションを施したデザインで、お知らせ部分、タイトル部分もほんの少しグラデーションになっているので小粋な感じがします。, ヘッダーの位置にある2色の対比したお知らせがカッコいいデザインです。STORKのようなスライダーがあるので記事が多くなっても対応できます。, ヘッダーの色と背景の色がリンクしてスッキリ見えるデザインです。色の分布もほどほど、背景の色があるのでボディがきれいに見えます。, 日本の色を使った落ち着きのあるデザイン。上部ラインが目立つように鮮やかめな色を用いているので、使いやすいです。, それぞれ独立したスペースが見やすいデザイン。ただ、背景の色を追加しただけで印象的に見えるので使いやすそうです。, 自分でアレンジといっても悩む方も多いと思います。ただ、なにか参考になるものがあれば簡単にイメージがわくでしょう。, 例えば、「ロハコ風」 「Amazon風」など全体的な雰囲気をまねても良いでしょうし、「LINEグリーン」「Facebookブルー」「Twitterブルー」と印象的な色を配置しても面白いです。, ロハコは全体的にナチュラル系がもとになっていて、Amazonは白地がベースで黒とオレンジを基調にしています。, 作者のわいひらさんが、自分でスキンを作るための何も入っていないスキンテンプレートを用意してくださっています。, もし、スキンのデザインの中で気に入った物がなかったりいちから自分で作りたい方にはこのスキンを導入してください。, ↓ 芸大出身のなつが作ったTHE THORのオリジナルテンプレートです。購入特典として差し上げています。, このブログからTHE THOR(ザ・トール)をご購入くださった方に特典としてマニュアルをプレゼントしています。マネするだけでデザイン変更が簡単にできます。, ※残りの3種類とブログの全体像は以下の記事で見れますのでよかったらご覧ください。 Cocoonのデフォルト「スキンなし」はこんな感じですが、 ためしに「Simple Blue」というスキンを設定してみると. 今回は、私が何十年も変わらず使っているソフト「FFFTP」でFTPクライアントの使い方と、ワードプレスでのファイル構成を紹介します。 既にワードプレスが稼働している方向けの説明にな... Cocoonのデザインスキンは、標準で数十種類用意されています。 更に「隠れスキン(7種)」や「自作用サンプル」もあります。 たくさんのスキンの見た目を一気に見れるようにまとめました。 ... Cocoon用のオリジナルスキンまとめです。 Cocoonに標準装備の同梱スキン一覧は以下をご覧ください。 2020/05/25 すべてのスキンを更新しました。 各ス... Cocoonのスキン「黒を基調にビビッドカラー5パターン」(Ver2.1.6~対応). 変更できるデザインは今後、もっと増えていくと思います。, ちなみに、デザインの変更手順はテンプレートによって、かなり異なっています。 見た目さえやっておけば、あとは記事を書きながら、必要に応じて他の設定をしていけばOKです。, ひとつひとつを自分で設定していく方法です(大まかなやり方は次の章以降で説明します)。, 初心者の方は、とりあえずスキンでデザインを変えて、あとから少しずつカスタマイズしていくのがいいと思います。, 選び方は、WordPressダッシュボードの「Cocoon設定」をクリックします。, マウスオーバーで出てくるサンプルを見て、好みのスキンを見つけたら実際に設定してみましょう。, スキン「なし」の状態で、サイトキーカラーをオレンジ(#FFA500)で指定してみると, キーカラーの横にある「!」マークにカーソルをのせると、カラーサンプルのリンクが現れます。, スキンやサイトキーカラーの設定に関係なく、ヘッダー色を独自に設定することも可能です。, グローバルナビメニューを使用する場合、ヘッダーとメニューを同じ色にするか、しないかです。, ヘッダーとメニューを別々の色にする⇒「ヘッター色(ロゴ部)」+「グローバルナビメニュー色」で設定, WordPressはデフォルトで“Just another WordPress site”というキャッチフレーズが入ってます。, キャッチフレーズを表示させないようにするには、一般設定の「キャッチフレーズ」を空欄にするか、, Cocoon設定→「ヘッダー」タブの「キャッチフレーズの配置」を「表示しない」にして下さい。, 当ブログではこの他にも、Cocoonの設定方法やカスタマイズのやり方を紹介しています。, このブログでは、主に出身地の青森のこと、トラックや交通安全のこと、自分が覚えたWordPressやCocoonの設定方法などを書いていきます。.

Cocoonで選択出来るスキンを一覧でまとめてみました。 アクセス解析ツール「Googleアナリティクス」を利用して、サイトの訪問数などを把握することができます。設定は簡単なので、ここでは登録方法を書きたいと思います。 Googleアカウントの登録 もしもまだGoogleアカウ... Simplicity2のSNSのフォローアイコンは、ページの右上と記事の中などにあると思いますが、こちらの色や形をカスタマイズする方法を書きたいと思います。 角丸な四角形をやめる SNSのフォローボタンの形は、デフォルト... 【Xeory Base】は記事一覧を見ると、すべての投稿が表示されてしまっています。一部の記事だけ表示をして、あとは「続きは読む」というボタンに変更する方法を書きたいと思います。 WP Multibyte Patchを有効に... WordPressの固定ページでオリジナルのテンプレートを自由に選択できるようにする方法, Contact Form 7でon_sent_okを使用しないで送信完了(サンクスページ)に飛ばす方法!, エックスサーバーでSSH(SFTP)接続、公開鍵を発行してFTPソフトWinSCPで使用する方法!. SILKはキーカラーやダークスキンなど、各種設定に対応したブロックエディター向けCocoonスキンです。, WordPressテーマとしてCocoonを利用されている当サイトにおいて、スキンの作成とテーマカスタマイズを担当しています。, 当サイトおよびCocoonユーザー向けに作成したオリジナルスキンをもとに、Cocoonのカスタマイズ方法やスキンの作り方について解説します。, 20歳の大学生、WordPress利用歴6年のろこと申します。物理学を専攻しており、普段は数値解析や観測システム構築でのプログラミング(使用言語はC/C++、Rust、Pythonなど)がメインです。, SILKは当サイトでも使用されているCocoon専用のデザインスキンで、Cocoonデフォルトとは違ったデザインから設定やカスタマイズを始めたいユーザー向けに作成しました。, Cocoonのシンプルなデザインや自由度の高い設定による補完機能は保ちつつも、デザイン・機能共に一手間加えられたスキンであることから、スキン名を”Cocoon”に対する”SILK”としました。, なお、SILKではマテリアルデザインを取り入れており、陰影と配色はガイドラインに従っています。, CocoonスキンにSILKを選択した場合、サイトの外観を変更できるのはもちろんですが、他のスキンにはない3つの特徴があります。, Cocoon設定の全体タブにある『キーカラー』を設定することにより、サイト全体のポイントとなる色(見出しなど)が指定されます。, SILKで適用されるポイントはCocoonデフォルトで適用されるポイントとは異なり、スキンの色を自由に変更することができます。, Cocoon設定の全体タブにある『サイトフォント』の文字色を白色に設定し、サイト全体の文字色を白色に変更してください。, 同様に、Cocoon設定の全体タブにある『サイト背景色』の背景色を黒色に設定し、サイト全体の背景色を黒色に変更してください。, など、Cocoon設定で各パーツの色を黒色基調に合わせて変更することで、よりオリジナルなダークスキンとして機能します。, いくつかのブロックにスタイルを追加しており、また1カラム時の全幅表示にも対応するなど、ブロックエディターの機能をさらに強化しています。, グループブロックのスタイルで『アコーディオン』を選択し、グループブロック内にトグルボックスブロックを複数並べます。, 『アコーディオン』を選択したグループブロックにトグルボックス以外のブロックを入れても、実際のページには表示されません。, グループブロックのスタイルで『比較表』を選択し、グループブロック内にアイコンリストブロックを複数並べます。, 『比較表』を選択したグループブロックにアイコンリストボックス以外のブロックを入れても、実際のページには表示されません。, カラムブロックのスタイルで『モバイル』を選択すると、全ての画面幅でカラム表示します。, リストブロックのスタイルで『リンク』を選択し、各リストのテキストにリンクを指定します。, ただし、ブロックエディターを前提に作成しているため、クラシックエディターは基本的にサポートしていません。, SILKをダークスキンに対応するために、上記のセレクタについては白色の透過を背景色に指定しています。, 透過させたくない場合や別の背景色を指定したい場合は、子テーマのfunctions.php等で定数’SILK_DARK’を定義してください。, また、AMP設定でスキンのスタイルを有効にしているとき、AMPページではstyle.css(圧縮時:約40KB)は読み込まれず、軽量版であるamp.css(圧縮時:約8KB)のみが読み込まれます。, AMPページには最低限のデザインしか反映されないので、amp.cssをベースに適宜カスタマイズしてください。, Cocoon親・子テーマのスキンフォルダ内にはスキン開発用テンプレートがあり、上記の各ファイルが用意されています。, スキンに必要な画像を入れるimagesフォルダを除き、各ファイルはテーマ側で自動的に読み込まれるため、用意されたそれぞれのファイルにカスタマイズを加えていきます。, Cocoonスキンはテーマを介しているだけで、結局はWordPressをカスタマイズすることになります。, スキンのフォルダ名(skin-template)は半角英数字とハイフン・アンダーバーを用いて自由に設定できるので、オリジナルなフォルダ名(以下、original-skinとする)に変更してください。, Cocoonスキンでは主に3種類のファイル(言語)を扱うことになるので、ブロックエディター向けスキンの作成手順に沿って各カスタイマイズにおけるポイントを紹介します。, CocoonスキンでCSSをカスタマイズする際、通常のカスタマイズを行う場合はstyle.css、CSSアニメーションを取り入れる場合はkeyframes.css、AMPページのみのデザインをカスタマイズする場合はamp.cssに記述します。, 親テーマのCSSファイルよりもスキンのCSSファイルの方が後で読み込まれるため、同じセレクタで記述すればカスタマイズできます。, 各ブロックやフォーマットなど、記事本文のCSSカスタマイズから始めるのがおすすめです。, ヘッダー周りのデザインにカスタマイズを加えることで、スキンの第一印象が変わります。, フッターに表示される要素は少ないので、あまりCSSカスタマイズの余地はありません。, サイト全体でその他に必要な箇所のCSSカスタマイズを加え、デザインのバランスを整えます。, CSSカスタイマイズはレイアウトのパーツごとに進めるのが効率的なので、上記の手順で進めていくとよいでしょう。, ブロックエディター上からだと見落としがちな点について、備忘録も兼ねて以下にまとめておきます。, 記事下に表示されるフォローボタンは、プロフィールボックス内のフォローボタンとしても使用されています。, 目次は表示切替機能や目次ナンバーの設定によって、タグ・デザインが異なる点に注意しましょう。, カテゴリーページやタグページには本文作成機能もありますが、誤ったカスタマイズを加えなければ、投稿や固定ページの記事本文と同じデザインになるはずです。, インデックスリストのカスタマイズでは、フロントページタイプやカードタイプの設定ごとに確認してください。, サイドバーはウィジェットで構築されるので、実際にはウィジェットのCSSカスタマイズを行うことになります。, ウィジェットタイトル・コンテンツやウィジェット間の余白など、他のウィジェットエリアでの表示や同機能のショートコードを考慮しつつカスタマイズします。, サイドバーは他のパーツよりもPCでの表示幅が狭いため、プロフィールウィジェットや目次ウィジェットなどはデザインが異なります。, サイトヘッダーの配置を大きくカスタマイズする場合は、ヘッダーレイアウトごとにカスタマイズを分けた方が確認しやすいです。, おすすめカードのデザインはナビカードをはじめとした記事リストと一部共通しているので、カスタマイズによって影響を与えないよう注意しましょう。, フッターのデザインでこだわるとすれば、フッター内の余白やフォントサイズとモバイル含むメニューくらいだと思います。, テキストリンクに文字色や装飾等のカスタマイズを加える場合、全てのリンクデザインに影響を与える可能性があります。, 完成したスキンを使用・配布する前に、Cocoon設定のスキン一覧で表示される情報を記述します。, PHPのカスタマイズはCocoonスキンに用意されているfunctions.phpに記述しますが、WordPressテーマのfunctions.phpにはない仕様がひとつあります。, Cocoonスキンのfunctions.phpが読み込まれるタイミング(≒cocoon/lib/skin.phpが読み込まれるタイミング)は、通常時とCocoon設定保存時で異なります。, 読み込みタイミングの差を理解せずにPHPをカスタマイズすると、Cocoon設定で不具合が生じます。, Cocoonスキンの作成において、CSSのカスタマイズと同じくらい重要なのがスキン制御です。, スキン制御には3つの方法(PHP・CSV・JSON)があり、各サンプルコードと動作確認用デモスキンも用意されていますが、もっとも重要なのはPHPでのスキン制御です。, スキン制御を言い換えると、Cocoon設定の値を操作するために用意されたグローバル変数($_THEME_OPTIONS)の制御です。, つまり、プログラムの実行開始時から設定値の取得時までの間であれば、どのタイミングでもグローバル変数によって設定値を操作できるということです。, 表示ページのテンプレート読み込み時に実行されるアクションフック’get_header’を用いた、Cocoon設定のボタンメッセージにFont Awesomeのアイコンを追加するカスタマイズ例です。, また、Cocoon設定にはカスタマイズによるスキン制御が反映されないので、ボタンメッセージのテキスト部分はいつでも設定を変更することができます。, その他に、特定のページのみCocoon設定を変更するようなカスタマイズもできます。, 上記は特定の固定ページ(スラッグ:cocoon)のみ通知メッセージ・URLを変更するカスタマイズ例で、通常ページの通知設定はCocoon設定から変更できます。, get_theme_mod関数のフックやCocoon設定値取得用の各関数でもカスタマイズできますが、一度に複数のCocoon設定をカスタマイズするのであれば、スキン制御の方が簡単に記述できます。, 色違いのスキンをいくつも用意するよりも、スキンの色を自由に変更できる方がより汎用的です。, スキンをCocoon設定のキーカラーに対応させることで、ユーザーがサイトのキーカラーを自由に設定できるようにカスタマイズしましょう。, PHPでのスキン制御を応用することで、Cocoon設定のキーカラーに対応させることができます。, Cocoon設定をもとに生成するCSSはcocoon/tmp/css-custom.phpに記述されているので、css-custom.php読み込み時のフック’get_template_part_tmp/css-custom’からスキンのCSSも一緒に生成します。, CSSで指定するスキンの色には、Cocoon設定のキーカラー(サイトキーカラー、サイトキーテキストカラー)を用います。, キーカラー設定の値はカラーコードなので、通常のCSSでカラーコードを用いるプロパティ部分にキーカラーの設定値を結合します。, css-custom.phpに記述されたCSSをそのまま生成すると、スキンには必要ない箇所にも色が指定されてしまいます。, 必要ない色指定をスキンのCSSで上書きする方法もありますが、スキン制御でキーカラーの設定値を空にすれば、テーマ側のキーカラーCSSは生成されません。, ただ、そのままだとCocoon設定のキーカラーに対してスキン制御が動作し、設定を変更することができません。, そこで、Cocoon設定の入力フォーム読み込み直前にスキン制御からキーカラー設定を除外し、Cocoon設定ページのみキーカラーのスキン制御が動作しないようにするカスタマイズを加えます。, スキン制御はカラーパレット等で用いられるキーカラーには反映されないため、設定と一致するよう変更しておきます。, Cocoon設定で色を設定できる各パーツに対し、キーカラー設定を反映させる必要はありません。, ブロックエディターには色設定できるブロックが多数あり、デフォルト24色と拡張6色の合計30色が用意されています。, カラーパレットの配色をカスタマイズすることによって、スキンの印象をさらに変えることができます。, WordPress本体またはCocoonで用意されているカラーパレット用フックを用い、スキンのデザインに合わせてカラーパレット各色を変更します。, AMPページのCSSにはサイズ上限(約75KB)があるので、スキンstyle.cssのサイズが大きいと上限を超えてしまいます。, スキン制御でスキンのスタイルを無効化し、AMP非対応にしてしまってもいいのですが、スキンのstyle.cssをAMPページで読み込ませないようにする方法もあります。, スキンのデザインカスタマイズにおいて、通常ページのCSSをstyle.css、AMPページのCSSをamp.cssと分ける形で実装します。, スキンに汎用性の高さを求めるなら、必要なJavaScriptのカスタマイズは特にありません。, ちょっとしたアニメーションならCSSで作成することができますし、HTMLの追加・削除はPHPでカスタマイズするべきです。, JavaScriptプラグインのオプション設定やJavaScriptを用いた新機能の追加なども考えられますが、WordPressにはプラグインや子テーマといった選択肢もある中、わざわざスキンで実装したいJavaScriptカスタマイズは限られるでしょう。, Cocoonは機能が豊富なので、SILKでJavaScriptを用いているのはアコーディオンメニューの開閉とページ内リンクのスムーススクロールのみです。, スキンの汎用性とデザイン性はトレードオフなので、バランスを考えつつ作成してください。, 自作スキンを本番環境とは別の開発環境で作成・管理しつつ、自動的に本番環境へ反映させたい場合、テーマやプラグインの自動更新機能を活用することで簡単に実現できます。, 親テーマは直接カスタマイズすべきではありませんし、子テーマはサイト単位でのカスタマイズに使用するパターンが多いです。, Cocoon用に作成したプラグイン下でスキンを開発すれば、一元管理しつつ本番環境への自動更新にも対応できます。, プラグイン下にあるスキンはCocoon設定のスキン一覧に反映されないため、プラグインを有効化したときは自作スキンが設定されるようにスキン制御を加えておきます。, スキンを継続的に開発するなら、Git系サービスのリポジトリでスキン用プラグインをホスティングし、随時リリースしていくのが効率的です。, 親テーマに直接カスタマイズを加えると、テーマ更新時にカスタマイズが全て消えてしまうので、カスタマイズする前には子テーマをインストールし、有効化してください。, ブログのトップページをサイト型にし、読者に伝えたい情報を過不足なくまとめることで、ブログ全体を見通しやすくすることができます。, サイト型とは、トップページの記事一覧部分をコンテンツ化することであり、読者に見せるべき情報を取捨選択できるメリットがあります。, WordPressの表示設定から以下の設定を行うことで、設定した固定ページがトップページに表示されます。, 加えて、表示するページのページタイプを1カラムに設定し、本来はサイドバーに表示される情報も含めて整理することで、上から下へ優先度の高い順に必要な情報のみを見せることができます。, 1カラムのページでは、グループブロックによる全幅デザインを活用すると、横並びの情報がより見やすくなります。, 投稿・固定ページの本文上にアイキャッチや日付を表示する設定にしている場合、スキン制御でサイト型トップページのみ非表示にすることができます。, トップページのタイトルを非表示にしたい場合、トップページ用固定ページのカスタムCSSに上記コードを記述します。, ヘッダー背景画像は横幅のサイズ(px)が重要であり、画面の解像度より画像サイズが小さいと粗くなるので、横幅1920pxの画像を推奨します。, 画面の解像度が2000px以上のディスプレイも中にはあるものの、シェア率は無視できる程度です。, ヘッダーロゴ画像は余裕のある大きさで作成し、ヘッダーロゴサイズの幅(width)または高さ(height)のどちらかを設定することで調節できます。, 特定ページやモバイルなど、一部の場合のみロゴ画像を別の画像に変更したいときは、スキン制御でヘッダーロゴの画像URLを差し替えます。, ロゴ画像ではなく、ロゴテキストを表示する場合、サイトのデザインに合うフォントを指定するといいかもしれません。, ヘッダーレイアウトはセンターロゴのまま、ヘッダーロゴだけを左寄せに変更することができます。, ヘッダーレイアウトがセンターロゴの場合、キャッチフレーズをヘッダートップまたはヘッダーボトムに配置することができます。, デフォルトではWordPressの一般設定で設定するキャッチフレーズが表示されますが、お問い合わせ先電話番号などの異なる内容にカスタマイズするのもありです。, ヘッダーロゴ前後に機能追加する際はヘッダーの横幅を画面幅いっぱいにし、無駄な余白を有効利用しましょう。, ヘッダーに表示されるグローバルメニュー(ヘッダーメニュー・ヘッダーモバイルメニュー)は、Cocoon設定のヘッダー設定から背景色や文字色を変更できます。, グローバルメニューで表示する各メニュー項目のラベルにFontAwesomeを挿入すれば、それぞれのメニューに異なるアイコンを表示させることができます。, また、画像メニューにしたい場合はグローバルメニューを設定せず、代わりにおすすめカードを設定する方法があります。, シンプルなグローバルメニューをカスタマイズするなら、メニューリンク内の各テキストフォントを調節するところから始めましょう。, グローバルメニューをマウスオーバーしたときの背景色は、サイトのデザインに合わせるといいかもしれません。, グローバルメニューに設定しているページが表示されたとき、表示ページのメニュー項目のみ別の色に変更し、クリックを無効化するカスタマイズです。, PC向けにグローバルメニューの色を設定したものの、ヘッダーモバイルメニューのみ色を変更したい場合、CSSで設定を上書きします。, ヘッダーモバイルメニューを横スクロールで一列に並べると、メニュー部分の高さは最小限になるため、サイト上部からメインコンテンツまでの距離を短くできるメリットがあります。, グローバルメニューのメニュー間に枠線で区切りを入れるカスタマイズで、ヘッダーレイアウトをトップメニューに設定した場合は.naviに指定する枠線が必要ありません。, ヘッダーメニューを階層構造にし、下層メニューをプルダウン(ドロップダウン)表示にした際、上層のメニュー右端に出る下角または右角のアイコンを別のアイコンに変更します。, Cocoonのブログカードブロックでは、一つのブロックで複数のブログカードを表示でき、一行ごとにURLを一つずつ挿入します。, Cocoon設定で内部ブログカードや外部ブログカードの表示が有効になっていても、挿入するURLの前後に半角スペース等が入っているとブログカードは表示されません。, 各ラベルタイプのクラス名(”bct-reference”や”bct-together”など)をCSSセレクタに使用すれば、ラベルタイプ別に異なるカスタマイズを加えることもできます。, 内部ブログカードのみの場合はフック’cocoon_internal_blogcard_snippet’、外部ブログカードのみの場合はフック’cocoon_external_blogcard_snippet’を使用してください。, ブログカード内のテキストをすっきりさせたいなら、タイトルのみの表示で抜粋は非表示にしてしまってもいいと思います。, 抜粋のカスタマイズを応用すれば、ブログカード内に「続きを読む」を入れることもできます。, spanなどのインライン要素またはdivなどのブロック要素で囲っておくことで、該当テキストのCSSカスタマイズが容易になります。, Cocoonデフォルトで生成されるサムネイル画像を用いれば、ブログカードの画像サイズを変更するだけでカスタマイズできます。, Cocoonにはないサイズのサムネイル画像を内部ブログカードに設定する場合、add_image_size関数で画像サイズを登録し、「Regenerate Thumbnails」等のプラグインで画像の再生成を行う必要があります。, 目次のデザインをカスタマイズする際、設定によってHTML内の要素が異なるので、カスタマイズの工数が少なくて済む設定を選びましょう。, しかし、カテゴリーページやタグページにはページ単位の目次非表示設定がないため、特定のカテゴリー・タグページのみ目次を非表示にしたいときは、スキン制御を用いて非表示にします。, 目次リストをおしゃれなデザインにしたいとき、H2とH3以下の階層で分けてカスタマイズするといいかもしれません。, 目次の外観(枠線や横幅、背景色など)は、記事本文内に自動表示される目次とサイドバーに表示するウィジェット・ショートコードの目次でカスタマイズ方法が若干変わります。, 記事本文内とサイドバー両方の目次を表示する場合、デフォルトの方をカスタマイズすることによってもう片方のデザインが崩れる可能性もあります。, 目次リンクは通常のリンクと異なるCSSが当てられているので、リンク色などをカスタマイズするのもいいでしょう。, 記事本文やサイドバーの見出しは、Cocoonでもっともカスタマイズされる箇所のひとつです。, Cocoonの見出しにはデフォルトで枠線等が入っているため、不要なCSSは上書きでリセットしましょう。, 記事タイトルのカスタマイズは3パターンで分ける必要があり、投稿や固定ページだけでなく、本文があるカテゴリー・タグページやその他のアーカイブページも合わせて確認してください。, Font Awesomeを利用し、見出し前後にアイコンを追加するだけでもおしゃれに見えます。, CSSの記述がFont Awesome 4の場合とFont Awesome 5の場合で異なる点、特にFont Awesome 5ではフォントの太さを指定する必要がある点に注意しましょう。, 関連記事やコメント、記事下にあるウィジェットも含め、記事下見出しに共通のカスタマイズを加えます。, 記事下コンテンツのブロック要素であるクラス名”under-entry-content”を基準にすれば、シンプルに記述できます。, 特定の見出しにリンクしたいときは、見出しブロックの高度な設定「HTMLアンカー」でid属性を指定します。, 「HTMLアンカー」に入力した文字列(例:”cocoon-heading”)がid属性に指定されるので、アンカーリンクによって該当の見出しに移動することができます。, インデックスページのカスタマイズではカードタイプの設定がもっとも重要で、カードタイプごとにCSSセレクタやサムネイル画像サイズ等が異なります。, インデックスリスト・エントリーカードをカスタマイズするなら、設定しているカードタイプ専用のクラス名(”ect-big-card”や”ect-vertical-card-2″など)を活用しましょう。, カードタイプが先頭のみ大きなカードの場合、大きなカードとデフォルトのカードでCSSを混同しない書き方が求められます。, エントリーカードのアイキャッチ画像サイズに合わせて、CSSで画像の横幅(width)やカードコンテンツの余白(margin)なども調節しましょう。, エントリーカード上にあるカテゴリーラベルが不要な場合、非表示にすることもできます。, Cocoonには30近くのウィジェットエリアがありますが、特にサイドバーはウィジェットで構成されるため、サイドバー設定とウィジェットの組み合わせは非常に重要です。, 投稿や固定ページだと、ページ設定のページタイプを1カラムに設定することでサイドバーの表示・非表示を個別に変更できますが、カテゴリページなどのインデックスページでは細かく変更できません。, 全てのサイドバーウィジェットで表示設定から非表示に設定する方法もありますが、サイドバーのフックを用いれば一括で非表示にできます。, 例えば、設定ではサイドバー右になっている場合、特定ページだけスキン制御でサイドバー左の設定に変更できます。, カテゴリーやアーカイブなど、リストウィジェットの各リストにFont Awesomeアイコンを追加できます。, Cocoonスキン「SILK」やカスタマイズ例の不具合報告は、以下のお問い合わせフォームをご利用ください。. こんなふうに色やデザインが一気に変わります。 スキンの設定方法は、好みのスキンを選んで「変更をまとめて保存」を押すだけです。 Cocoonのデフォルト「スキンなし」はこんな感じですが、 ためしに「Simple Blue」というスキンを設定してみると. ※それぞれのデザインがどのようなものかを確認するには、各デザインの名前部分のリンクをクリックします。するとサンプルページが表示されるので、それを見て確認してください。, 6.デザインが変更されました。 WordPressの管理画面の配色を変えたい。 元から用意されている配色だと、どうにも味気ないし、数も少ない。 (´・ω・`)レパートリー少なすぎですよね・・・ 特に、複数サイトを運営し始めると辛くなる。 管理画面で、パッと... 画像サイズを自動圧縮する「EWWW Image Optimizer」プラグインの設定手順, 記事公開を素早く検索エンジンに伝える「Google XML Sitemaps」プラグインの設定方法, あなたは大丈夫?プラグイン「Edit Author Slug」で個人情報を隠す方法, リンク切れを防ぐプラグイン「Broken Link Checker」の入手と設定手順, WordPressで記事を書くなら「TinyMCE Advanced」でボタンをすっきりさせよう, 薄毛が気になるなら頭皮ブラシにこだわるべし!頭洗うときもキモチいいよ!【レビュー】. Cocoonのテーマカラー、色を変更する.

Cocoonの独自スキン「和の色」6色バージョンに使えるタブ切替メニューのデザインです。 元のスキンは以下です。 カテゴリー・タグウィジェット部品もあります。 ... この記事は、Cocoonの独自スキン「和の色」6色の紺バージョンの詳細になります。 その他のカラーは以下をご覧ください。 2020/05/25 ・カテゴリー・タグウィジェ... この記事は、Cocoonの独自スキン「和の色」6色の橙バージョンの詳細になります。 その他のカラーは以下をご覧ください。 2020/05/25 ・カテゴリー・タグウィジェ... この記事は、Cocoonの独自スキン「和の色」6色の紫バージョンの詳細になります。 その他のカラーは以下をご覧ください。 2020/05/25 ・カテゴリー・タグウィジェ... この記事は、Cocoonの独自スキン「和の色」6色のピンクバージョンの詳細になります。 その他のカラーは以下をご覧ください。 2020/05/25 ・カテゴリー・タグウィ... この記事は、Cocoonの独自スキン「和の色」6色の抹茶バージョンの詳細になります。 その他のカラーは以下をご覧ください。 2020/05/25 ・カテゴリー・タグウィジ... この記事は、Cocoonの独自スキン「和の色」6色の薄いブルーバージョンの詳細になります。 その他のカラーは以下をご覧ください。 2020/05/25 ・カテゴリー・タグ... 図解!SFTP接続で安全にファイル転送する方法「FileZilla」エックスサーバーの例 | 綾糸.net.

大東建託 退去 7 年 7, ジャニーズ グッズ 給料 5, アラビア 名前 男の子 6, Scansnap Ix1500 保存先 5, Kingdom Come: Deliverance コンボ 11, 嵐 Voyage 8 5, トーションビーム 車 高 調整 4, 就活 2ch 21卒 13, 別れたら どうなる タロット 6, 領収書 宛名 間違い お詫び 6, 催告書 時効 6ヶ月 税 4, マドモアゼル マダム 違い 4, Instagram Basic Display Api 4, St 国 試 14回 6, 好きじゃない 付き合う 失礼 6, 水道 蛇口 交換 洗濯機 5, カリンバ 千と千尋の神隠し 楽譜 4, ペンだこ 中指 絆創膏 11, ダイナブック Satellite B554 L メモリ増設 4, 寝れない Line 女 4, マイクラ スナイパー アドオン 4, しそ 水 耕 栽培 4, ギガントサウルス アニメ 声優 21, Aquos ケータイ3 音楽 5, ウォーキングデッド シーズン2 シェーン 5, Java 非同期 待つ 6, ギア 自作 モーター 8, アストロ ミックスアンプ 公式 5, Phoinikas Usb サウンドカード 使い方 28, Telnet ポート指定 Windows 8, 陰嚢 水腫 Mri 4, Activegear スピーカー H3 説明書 14, ジャパネット Webクーポン 使い方 13, Excel シート 非表示 Vba 4, サチモス ヨンス 目撃 20, ダークソウル3 Npc 顔 11, 上智 Teap利用 国語 4, Youtube 異議申し立て 署名 33, かくしごと 11巻 ネタバレ 4, Amebaownd 文字サイズ 変更 4, 犬 肺炎 治療費 17, レポート 2000字程度 どれくらい 5, 柴犬 里親 福島県 6, 目黒学院 ラグビー 速報 8, 日本通信 株価 掲示板 23, Fps 用語 はんしょ 23, クボタ 春闘 2020 4, ジムニー ホイール オフセット0 17, 後部座席 リクライニング 改造 44, 名古屋商科大学 Mba 倍率 10, 美容院 メンズ カット 料金 平均 6, Mp3 Aac 音質比較 7, 東京 グール アニメ 一気 見 11, F03g 強制 終了 19, 新幹線 連結 仕組み 6, エメラルド ジラーチ チート 7, 進研 模試 結果 エラー 12, 10t トラック 最小回転半径 9, Regza Tcon 交換 6, 相撲 一門 派閥 9, Heroku デプロイ Mysql 6, 換気扇 つけっぱなし 帰省 9, オーデリック 赤 点滅 7, シャドウハンター ルーン 意味 5, Campfire Audio Andromeda 塗装 5, 薬屋のひとりごと あらすじ ネタバレ 5, 虎石 競馬 ブログ 5, アイスボーン 装飾品 まとめ 10, 垂木 木口 塗装 11, 厚 揚げ 筑前煮 5, キングダム 3期 1話 4, Bee Des Bee 浴衣 17, アンリミ Af 連勝 4, 育児休業給付金 ハローワーク コロナ 12, 日向翔陽 ユース 小説 24, 賃貸 壁 穴 修繕費 10, 国立 が ん センター 内科 4, 金属 硬度 一覧 Hrc 13, 配管 Cad フリー 4, 面接 給料 低い 4, Tinder 業者 手口 6, Pubg モバイル ロイヤルパス 14 5, 金沢 天気 2月 23, Jcom 録画 消える 15, Mio 意味 スペイン語 5, スマイル マスク 作り方 15,