2021年06月09日 HPを更新しました!

COCOON(コクーン)ヘッダー下のエリアに通知機能追加する方法

cocoonを使用してみた

無料ワードプレステーマCOCOON(コクーン)で
ヘッダー下に通知を設置する方法

どうもー。
connieです。

COCOONが快適すぎて、正直このブログに関しては
当分他のワードプレステーマには変えないかと思います。

ここまで記事にしているとステマじゃないかと疑われるくらい、それぐらい気に入っています。
僕のブログ記事の内、今のところ半分くらいはCOCOONの記事ばかりですからねw

ところで、皆さんは「通知機能」を使っていますか??
他のテーマをお使いの方なら既にご存知かもしれませんが、COCOONでももちろん使用できます。

通知機能とは

そもそも通知機能とは。
COCOON内でいう通知機能とは「おしらせ」「新着情報」を視覚的に読者に伝えるエリアの事です。

このブログで言えば
ヘッダー画像(パソコンと手帳&ペンの画像)の直下にある緑色のバーの事です。
2021年2月8日ベージュカラーに変更しました。

ここで、「こんな新着記事を書いたよ」とか「重要なおしらせ」などを伝える事が出来ます。
これはかなり目立つエリアなので是非積極的に採用していきたいところです。

COCOON(コクーン)通知機能の設定方法

ダッシュボード内にあるCOCOON設定→「通知」の項目があるかと思います。
この「通知」の項目が、当ブログの緑色のバーの部分に辺ります。

  1. 通知エリアの表示に✅を入れます。
  2. 通知メッセージに読者に伝えたい文面を入力します。
  3. 通知URL欄にURLを入力する。
    URLを入力すれば自動的にリンク挿入され、通知をクリックするとリンクにジャンプ出来るようになります。
  4. リンクの開き方を選びます(別ウインドウで開くか・同じウインドウで開くか)
    別サイトの紹介とかなら別ウインドウで開くのがオススメです。
    自ブログ内の記事にリンクする場合は同じウインドウで開くのがオススメです。
  5. 通知タイプ(カラー)を選びます。
    ちなみにカラーは3色から選ぶことが出来、緑(通知)黄色(注意)赤色(警告)と重要度によってカラーを選ぶことが出来ます。
    これにより、重要な事や注意事項であればレッドカラーなどを選ぶと、より注目が集まるかと思います。
    いやいや、自分で決めたカラーで通知したいという方は6でご自分の好きなカラーに変更が可能です。
  6. 「色」の項目で独自のカラー設定が可能です。

これで簡単に通知バーが設置出来ました。

設定をしても、一番初めの通知エリアの表示項目に✅をいれていないと表示されませんので
お気を付けください。

どうでしょうか?
皆様のブログにも通知バーが表示されましたでしょうか?

「デフォルトの3色ではサイトのイメージとは異なる」という方は
前述の6でカラーを選定される事を推奨します。

ページ表示速度の方はどのような感じか?

はい。
やはりウィジェットを追加するほど、検索エンジンが読み込むhtmlの情報量が増えますので
ページ速度にも多少影響が出るでしょう。

今、現在のページ表示速度は
モバイル81点 パソコン92点と、昨日ヘッダーロゴを加えた時とそれほど変わりは無いです。
これでも十分早いですけどね。

Googleが示す今後の指標が、今のワードプレステーマに追いついていないだけで。

何度も言っていますが2021年現在もgoogleのモバイル版の速度測定は
3G回線を前提に評価しています。
ただ、何も入れていない状態よりもモバイル版は若干数値が下がってきています。
何もしていない状態の場合、モバイルは90点台でした。プラグインもほとんど入れていない状態で、この数値になります。

これだけでモバイル速度90点台から80点台に

特にここ数日でこのブログに施した事といえば、

  1. ヘッダーに画像を挿入した(画像は圧縮サイトで圧縮した物を採用)
  2. ヘッダー内にロゴ画像を配置した(圧縮済・容量は1.5kbとめちゃくちゃ小さいです)
  3. ヘッダー直下に通知機能を追加(今回の記事で紹介した物です)

正直これだけです。

アイキャッチ画像は正直もうちょっと圧縮できるかなー程度ですが
「合格した監査」に入っているので問題はないかと思います。
もともと、フォトショでかなり圧縮した物をさらに圧縮していますから。

CSSの遅延処理・最適化

これだけはCOCOONでCSS最適化の設定を✅すると
アイキャッチ画像が表示されないなどの不具合が出ますので使用していません。
本当は使用したいんですけどね。

どうしてもPage Speed Insightsの警告で「レンダリングを妨げるリソースの除外」の項目が
モバイル表示の場合、警告レベルで出現しちゃいますからね。

Jqueryはレンダリングを妨げるリソースで必ず出てしまうようですね。
これはどのテーマでも言われています。JAVA関係なので仕方ないと思います。

別のお話になりますがlink preloadなどでhtml指定してあげて
「CSSを非同期・もしくは遅延させる」しか方法は無いのでしょうかね?

その場合はテーマのファイルを触ることになるので、今回は無しで別の機会にします。