cocoonスキン 色 変更 6

今回は、私が何十年も変わらず使っているソフト「FFFTP」でFTPクライアントの使い方と、ワードプレスでのファイル構成を紹介します。 既にワードプレスが稼働している方向けの説明にな... Cocoonのデザインスキンは、標準で数十種類用意されています。 更に「隠れスキン(7種)」や「自作用サンプル」もあります。 たくさんのスキンの見た目を一気に見れるようにまとめました。 ... Cocoon用のオリジナルスキンまとめです。 Cocoonに標準装備の同梱スキン一覧は以下をご覧ください。 2020/05/25 すべてのスキンを更新しました。 各ス... Cocoonのスキン「黒を基調にビビッドカラー5パターン」(Ver2.1.6~対応). Lightningのカスタマイズと使い方!超初心者でも簡単!(WordPressテーマ), Twenty Fourteenのカスタマイズ方法を丁寧に解説【初心者におすすめワードプレステーマ】, WordPressテーマ日本語でレスポンシブ対応のもの10選!無料&有料も併せて調査!, Luxeritas(ルクセリタス)のグローバルナビの使い方!横幅やレイアウト、モバイルなど細部まで調整可能!, Luxeritas(ルクセリタス)の機能を調査!シンプルだけど初心者には向いているか考察。, WordPressブログのデザイン作り方!無料でどこまでできるか初心者にもわかるように説明!, AFFINGER5のブログカードとラベルのカスタマイズ!記事内で目立つリンク先の作成, 初心者でも配色がおしゃれになる組み合わせ!2色~4色でイメージ別に解説。かっこいいwebカラーとはズバリコレ!, AFFINGER5の全体カラーとレイアウト変更!最も簡単なデザインを作ってみる!【作成マニュアル】, 難しい表現をせず超初心者でも理解できるようなWordpressテーマの使い方説明や、カッコいいデザインの作り方もお伝えしています。, Cocoonのスキンとは。インストールと自分好みのWordpressブログにする調整方法, 【簡単な使い方】THE THORデザインの事例集6選!初心者でも作れるアレンジを紹介!, 【対策とは】ウイルスバスタークラウドが重い原因!trend micro anti-malware solution platformがメモリを使ってcpuがフリーズ。, 【図解】AFFINGER5のデザイン済みデーターの使い方!初心者にもわかるように丁寧に説明。, WordPressのテーマでおしゃれなもの厳選12選!かわいいテンプレートなどアレンジも!, 【動画あり】THE THORの使い方の完全マニュアル!できる、カスタマイズ総まとめ!【WordPressテーマ】, Twenty Seventeenのカスタマイズ方法を丁寧に解説【初心者におすすめワードプレステーマ】. 見た目さえやっておけば、あとは記事を書きながら、必要に応じて他の設定をしていけばOKです。, ひとつひとつを自分で設定していく方法です(大まかなやり方は次の章以降で説明します)。, 初心者の方は、とりあえずスキンでデザインを変えて、あとから少しずつカスタマイズしていくのがいいと思います。, 選び方は、WordPressダッシュボードの「Cocoon設定」をクリックします。, マウスオーバーで出てくるサンプルを見て、好みのスキンを見つけたら実際に設定してみましょう。, スキン「なし」の状態で、サイトキーカラーをオレンジ(#FFA500)で指定してみると, キーカラーの横にある「!」マークにカーソルをのせると、カラーサンプルのリンクが現れます。, スキンやサイトキーカラーの設定に関係なく、ヘッダー色を独自に設定することも可能です。, グローバルナビメニューを使用する場合、ヘッダーとメニューを同じ色にするか、しないかです。, ヘッダーとメニューを別々の色にする⇒「ヘッター色(ロゴ部)」+「グローバルナビメニュー色」で設定, WordPressはデフォルトで“Just another WordPress site”というキャッチフレーズが入ってます。, キャッチフレーズを表示させないようにするには、一般設定の「キャッチフレーズ」を空欄にするか、, Cocoon設定→「ヘッダー」タブの「キャッチフレーズの配置」を「表示しない」にして下さい。, 当ブログではこの他にも、Cocoonの設定方法やカスタマイズのやり方を紹介しています。, このブログでは、主に出身地の青森のこと、トラックや交通安全のこと、自分が覚えたWordPressやCocoonの設定方法などを書いていきます。. WordPress無料テーマ「Cocoon」のカスタマイズ方法を初心者向けにまとめました。Cocoonスキンの作り方からトップページ・ブログカードなどのカスタマイズ例まで、SILKというスキンの作成者が詳しく … Cocoonのテーマカラー、色を変更する. 例えば、Cocoonであれば、こんな感じでデザインが用意されています。, 上記画像は、本記事の執筆時点です。 見出しh2~h6の見た目を変えましょう。見出しは重要な要素でもありますが、デフォルトでは、とてもさみしくないですか?デフォルトの状態色を付けて見やすくカスタマイズしましょう。カスタマイズ後のデザインこちらと同じデザインでよければ、ページ下部 例えば、下図は、今回のテンプレート「Cocoon」の雰囲気に合わせて、管理画面の配色を変更したものです。, かなり、Cocoonの雰囲気になっていませんでしょうか。 逆に淡い色にした場合、例えば淡いピンクとか「#f9e6e3」だとちょっと文字が見えずらいです。 この場合は、文字は黒がよいかと思います。 さきほど設定した背景色の下に「ヘッダー全体文字色」というのがあり、こちらで文字色を変更します。 アクセス解析ツール「Googleアナリティクス」を利用して、サイトの訪問数などを把握することができます。設定は簡単なので、ここでは登録方法を書きたいと思います。 Googleアカウントの登録 もしもまだGoogleアカウ... Simplicity2のSNSのフォローアイコンは、ページの右上と記事の中などにあると思いますが、こちらの色や形をカスタマイズする方法を書きたいと思います。 角丸な四角形をやめる SNSのフォローボタンの形は、デフォルト... 【Xeory Base】は記事一覧を見ると、すべての投稿が表示されてしまっています。一部の記事だけ表示をして、あとは「続きは読む」というボタンに変更する方法を書きたいと思います。 WP Multibyte Patchを有効に... WordPressの固定ページでオリジナルのテンプレートを自由に選択できるようにする方法, Contact Form 7でon_sent_okを使用しないで送信完了(サンクスページ)に飛ばす方法!, エックスサーバーでSSH(SFTP)接続、公開鍵を発行してFTPソフトWinSCPで使用する方法!. こんなふうに色やデザインが一気に変わります。 スキンの設定方法は、好みのスキンを選んで「変更をまとめて保存」を押すだけです。 Cocoon(コクーン)のスキンの使い方 1. (adsbygoogle = window.adsbygoogle || []).push({}); はじめまして!管理人のカケイです。ハーゲンダッツをこよなく愛する30代の男です。役立つ情報や備忘記録、気になった出来事などをしたためていきます。どうぞヨロシク!お問い合わせはこちら, パソコンやネットなどのお役立ち情報や日常で気になったことをわかりやすくしたためていきます (*‘ω‘ *), WordPress管理画面の配色変更するプラグイン「Backend Designer」の使い方. Cocoonのデフォルト「スキンなし」はこんな感じですが、 ためしに「Simple Blue」というスキンを設定してみると. Screenshot URI: https://example.com/screenshot.png. Cocoonの独自スキン「和の色」6色バージョンに使えるタブ切替メニューのデザインです。 元のスキンは以下です。 カテゴリー・タグウィジェット部品もあります。 Cocoonでは編集結果がすぐに画面内に表示されます。素早く編集結果を確認できるので便利ですね。 WordPressの無料テーマ「Cocoon(コクーン)」でサイトの背景色を1色などに変更する方法を書きたいと思います。, 簡単に「Cocoon(コクーン)」の特徴など書いておりますので、よかったら読んでみてください。, 何もスキンを変えず、デフォルトの設定ですと、ヘッダーが白、コンテンツが白、サイドバーが白、フッターが白、コンテンツとサイドバー、フッターの後ろが灰色となっていると思います。, 管理画面から変えられる部分と、変えられない部分がありますが、先にスタイルシートに一括で変更する命令を書いておきます。 全て同じ色で統一したい場合は、これが一番手っ取り早いと思います。色は黒にしています。, ヘッダーの色を変える方法としては、Cocoon設定から変える方法とスタイルシートに修正の命令を書く方法と2つあります。, [ヘッダー]のタブを選びます。デフォルト設定では[全体]タブが表示された状態かと思いますので、[ヘッダー]のところを押します。, 「ヘッダー全体背景色」の「色を選択」というところを押すと、色が選択できるカラーピッカーが出てくると思います。, 好きな色のところにカーソルを置いて、クリックすれば色が選択できると思います。 ここではとりあえず真っ黒にします。, 「#000000」が黒です。こちらはカラーピッカーから選択するのではなく、自分で好きな色をコピペして設定することも可能です。, ちなみにサイト名もキャプチャも白で表示されています。 デフォルトでは黒だったはずです。 管理画面からヘッダーの色を変えると、自動的に白になる?ようです。 逆に淡い色にした場合、例えば淡いピンクとか「#f9e6e3」だとちょっと文字が見えずらいです。, この場合は、文字は黒がよいかと思います。 さきほど設定した背景色の下に「ヘッダー全体文字色」というのがあり、こちらで文字色を変更します。, 管理画面からちょこちょこ設定するよりも、ある程度わかっている人は、スタイルシートに直接命令を書いたほうが楽だったりしますので、その方法も書いておきます。 ただ注意点として、上記のように管理画面からすでにカラーを設定しているとそちらが優先になりますので、スタイルシートに設定を書いても命令が効きません。 もし管理画面からカラーを設定している場合は、いったんクリアして解除しておく必要があります。, スタイルシートに書く場合は子テーマでもスキンでもどちらでもよいです。 どちらかに下記を入れます。色は黒にしています。「#000」は好きな色を入れてください。, 確認しますと、背景は黒くなりましたが、文字が黒くなっていて見づらいと思います。管理画面から設定したときは勝手に白くなっていましたが、今回はそのままです 。なので、タイトルとキャプチャのテキストの色を変更する命令も付け加えます。「color:#fff;」の「#fff」は白を設定しています。, ページ全体の背景色というのは、コンテンツとサイドバーの後ろ、フッターの後ろの部分の色です。, さきほどのヘッダーと同じように注意点としては、管理画面からすでにカラーを設定しているとそちらが優先になりますので、スタイルシートに設定を書いても命令が効きません。 もし管理画面からカラーを設定している場合は、いったんクリアして解除しておく必要があります。, コンテンツ内、記事が書いてある部分の背景の色も変更します。現在は白ですが、黒にします。, コンテンツの背景については、残念ながら管理画面から設定できる場所が無いようです。 なので、スタイルシートに書く方法だけになります。, mainでコンテンツ内の背景を黒にすると、テキストが見えなくなりますので、a-wrapのほうで、テキストを白にしています。 確認すると、背景が黒、テキストが白になっていると思います。, サイドバーの背景色も管理画面からは設定ができないようなので、スタイルシートからのみになります。, sidebarでサイドバーの背景を黒にすると、テキストが見えなくなりますので.widget_recent_entries等の色もを白にしています。 確認すると、背景が黒、テキストが白になっていると思います。, フッターは管理画面からも変えることができますので、まずは管理画面からの設定方法を書きます。, 「フッター色」のフッター背景色にある「色の選択」を押して、カラーピッカーが出たら、黒を選びます。, ただこれだと© 2019 test.が黒っぽいためよく見えません。 さきほどの「フッター背景色」の下にある「フッター文字色」の色を白にします。, footerでコンテンツ内の背景を黒にすると、テキストが見えなくなりますので、color: #fff;を入れて、テキストを白にしています。 確認すると、背景が黒、テキストが白になっていると思います。, WordPressの無料テーマ「Cocoon(コクーン)」Simplicityの後継としてわいひらさんが開発!, Simplicityを開発したわいひらさんが、新しくWordPressの無料テーマ「Cocoon(コクーン)」を作られたようなので、紹介したいと思います。, SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。, WordPressの無料テーマ「Cocoon(コクーン)」でヘッダーにあるロゴを左寄りにして、キャッチフレーズに余白など入れてカスタマイズする方法を書きたいと思います。. 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」やカスタマイズ例の不具合報告は、以下のお問い合わせフォームをご利用ください。.

山口県 市役所 求人 8, Diga 部品 販売 4, バイオハザード オリジンズコレクション Switch 攻略 4, English Communication 2 和訳 4, 2020 夏アニメ うずら 5, Vb Net 最新ファイル 取得 10, Terraria Wiki 日本語 4, ワコーズ レックス Bmw 5, 艦これ Android 通信量 4, Ps4 サブ垢 使えない 4, セレナ 高さ 駐車場 10, ポンデ リング レシピ 白玉粉 なし 豆腐 なし 4, 古本市場 Ps4pro 価格 18, Mac メモ 画像 サイズ 4, Nohup: Ignoring Input And Redirecting Stderr To Stdout 4, マイクラ 村人 補充しない スイッチ 7, 金本 大山 なんj 15, Gradius 2 Rom 4, 方針 戦略 違い 4, Ikea Led電球 ちらつき 5, ヤクルト 石川 凄さ 9, インディード 応募 確認 11, ドア 蝶番 調整 7, Textarea Placeholder 表示されない 7, カーナビ Hdmi 認識しない 6, 高齢者向け 代行サービス 起業 11,