不思議ブログ運営WordPressGoogleCocoonSimplicity2お役立ちLife『Cocoon』細かいカスタマイズ(まとめ&備忘録)CSSコピペでOK!TwitterFacebookはてブPocketLINEPinterest2019.04.25スポンサーリンクテーマを『Cocoon』に変更してから行った、すごく細かいところのカスタマイズ備忘録です。フォーラムの解答を参考に「これイイ!」と思ったカスタマイズも入っているので、よかったらCSSをコピペして使って下さいね。増やしていく予定です貼り付ける場所基本的には『Cocoon』の子テーマへ貼り付けます。(style.css)Cocoonはスゴイ勢いで機能が追加されています。したらカスタマイズが既に実装されている場合もありますのでご了承下さい。タグクラウドのデザイン変更イメージ画像に枠線(表示したい時だけ付ける)アドセンス広告ラベル(スポンサーリンク)さいごにスポンサーリンク「SNSシェアボタン」ロゴのみ表示SNSシェアボタンのキャプション(ボタン名)を非表示にして、ロゴだけのシンプルボタンにしてみました。全てのボタンカラー(ブランドカラー・ブランドカラー(白抜き)・モノクロ)に対応した簡単カスタマイズです。アイコンだけのシンプル表示にカスタマイズしてみました。love-wave.com2019.05.01「検索ボックス」のアイコンやカラーの変更サイト内を検索するボックス(検索フォーム・検索窓ともいう)を、ちょっとだけカスタマイズしてみました。1.6.3』より、検索ボックスの角が丸くなり柔らかい印象になっています。(style.css)などにコピペしてお使い下さい。*/}お好みの16進数カラーコードに変更して下さい。Awesome(4.7)から選んでいます。***/」以降を削除して使って下さい。ショートコード」機能が実装されました。使い方や、「新着リボン」「おすすめリボン」のカラーを変更するCSSなどを別ページで紹介しています。『Cocoon』お好きな記事の一覧がカンタンに作れるショートコード『Cocoon』に任意で選んだ記事をカード形式で一覧表示できるナビカードショートコード機能が実装されました。メニューを作成してショートコードで呼び出すだけの簡単操作!表示までの手順やカスタマイズCSSを紹介しています。使わないなんて損ですよ~love-wave.com2019.03.19スライドインボタンの背景色を変更(モバイル)Cocoonのモバイル設定で、モバイルボタンレイアウト⇒「スライドインボタン」に設定している場合のカスタマイズです。通常はボタンの背景色が薄いグレーですが、この背景色を変更してみました。ついでに何気なく半透明にしてみたので、お好みで使えるように両方のコードを紹介します。*/}※お好みの16進数カラーコードに変更して下さい。*/}お好みの16進数カラーコードを、RGBA形式に変換します。上のコードを例とすると「#d7b3ff」を変換⇒「rgba(215,179,255,1)」になります。「rgba(215,179,255,1)」←最後の数値を0(完全に透明)~1(完全に不透明)の間で指定します。上の例でいうと「0.9」と書いていますが「.9」のように「0」を省いてもOKです。※透明度(透過)を出したい時に「RGBA形式」で指定します。(style.css)やAMP対応の場合は(amp.css)にも貼り付けて使用して下さい。バージョン:0.5.6以降から『Cocoon設定』→「画像」にて、投稿記事上のアイキャッチに表示されるカテゴリラベルの表示切り替えが可能になりました。記事上のアイキャッチ画像に表示される「カテゴリー」が、邪魔になったり...ならなかったりする場合は、『アイキャッチラベルを表示する』のチェックを外すだけでOKです。0.5.6以降にバージョンアップすれば必要ありません。Awesome」のアイコンを使用できるのですが、ナビゲーションメニューへの設定方法が、Simplicityの時とはちょっとが違いました。(知らなかっただけかも...)半分アイコンをあきらめていたところ、ナイスな方法を見つけたので、ヘッダーナビやフッターナビにアイコンを表示させてみました。「ダッシュボード」⇒「外観」⇒「メニュー」⇒メニュー構造から、アイコンを表示させたい項目の▼を開きます。例として、メニューの『HOME』にアイコンを入れて『HOME』と表示させてみましょう。追加することで、アイコンと文字の間に少しだけスペース(ほんのチョット)が入ります。Awesomeからお好みのアイコンを選んで、●●●●●●を入れ替えて表示させてみて下さいね。Cocoonグローバルナビ(太文字&アイコン非表示)グローバルナビメニューの背景を、淡い色に設定している場合、テキストを太字にしてみたら、見栄えもよくなりハッキリした気がします。ついでにテキストに影(シャドー)を付けて、メニュー右横の矢印アイコン「」も非表示にしてみました。中央に配置(文字にあわせて広がる)枠線色・背景色を変更(薄いグレー色)文字サイズを、やや小さく(0.9em)目次の上下に間隔を空ける(1.5em)目次の下に表示される「アドセンス広告」との間隔が、すこし狭い感じがしたので調整しました。*/}タグクラウドのデザイン変更タグクラウドを一時的に表示させてみたので、少しシンプル?にカスタマイズしてみました。マウスオン(ホバー時)したときのアクションは、こんな感じです。Awesomeからアイコンを選び、Unicode《f●●●》←の部分を書き換えて下さい。*/}※変更が不要な箇所は、行ごと削除して下さい。カラー選びは原色大辞典などが便利です。このブログに、タグクラウドを常に表示させているとは限りませんのでご了承下さい。イメージ画像に枠線(表示したい時だけ付ける)Cocoon設定⇒画像から、画像を囲む枠線のタイプを選ぶことができます。全ての画像に反映されることや、AMPページでは枠線が表示されない(今のところ)など、画像ごとに枠線の表示を使い分けしたい派にとっては悩むところですねそんな時は、チョットひと手間加えるだけで、枠線をつけたい画像にだけ表示させる方法をご紹介します。(↓こんな感じに)『Cocoon』の設定画面から、「画像の囲み効果」を「なし」にして変更をまとめて保存します。*/}『Cocoon』の子テーマへコードを貼り付けます。(style.css)AMP対応は、amp.cssにもコードを貼り付けます。クラス」の欄にクラス名【waku】と半角文字で入力し更新をクリックアドセンス広告ラベル(スポンサーリンク)サイト全体のフォントサイズを大きめ(18px)にしているため、アドセンス広告ラベル「スポンサーリンク」の文字を、少し小さくして、文字の色もやや薄くしてみました。#888;}広告ラベルの表示があまりにも見えにく場合には、Googleから警告があるかもしれません。カスタマイズは自己責任でお願いします。さいごにカスタマイズは現在進行系ですので、チョットずつ記録しながら、まとめていく予定です。WordPressテーマ『Cocoon』に変更Simplicity2後継テーマはマジでスゴイ日々進化を遂げているWordPress無料テーマ『Cocoon』を使ってみて超便利だと感じた機能のゴク一部を紹介します。劇的に読み込み速度がアップ!アクセス集計機能や目次のデフォルト装備でプラグインが減りました。他にも数え切れないほどの機能が標準装備!love-wave.com2019.03.17【CSS】シンプルな囲み枠(ボックス)コピペですぐ使える飾り枠を使って文中や文末に関連記事・まとめ記事、Pickupなど、さり気なく目立たせたい!シンプルで無難な囲み枠・囲い枠(ボックス)を紹介します。CSS・HTMLをコピペでOK!色や太さをお好みでカスタマイズして使って下さいね。したがって行動すると潜在意識が変化して運気もUP2019.05.05『Cocoon』SNSボタン/ソーシャルボタンのカスタマイズ(コピペ)2019.04.252019.05.01天国の猫達とネコ部屋で再会し至福のひと時。YouTube等の動画サイトを含め固く禁じます。したがって行動すると潜在意識が変化して運気もUP2019.05.05『Cocoon』SNSボタン/ソーシャルボタンのカスタマイズ(コピペ)2019.04.252019.05.01天国の猫達とネコ部屋で再会し至福のひと時。タグクラウドのデザイン変更イメージ画像に枠線(表示したい時だけ付ける)アドセンス広告ラベル(スポンサーリンク)さいごに。