内部ブログカード:ホーム

<編集画面>

<表示画面>

内部ブログカード:記事

<編集画面>

<表示画面>

外部ブログカード:記事

<編集画面>

<表示画面>

Cocoonブログカードの設定と使い方(動画)

「Cocoonブログカードの設定と使い方(動画)」は、こちら

Cocoonブログカードの設定

「ブログカード」タブの選択

WordPress管理画面のCocoon設定より、「ブログカード」タブを選択します。

Cocoonブログカード表示のチェック

ここにチェックを入れておかないと、ブログカードが表示されません。

※「内部ブログカード設定」と、「外部ブログカード設定」のいづれにもチェックを入れておきます。

Cocoonブログカードの使い方

Cocoonブログカードの設置

では、実際にブロックエディターの編集画面でどのように使うのかを説明します。

「ブロックを追加」をクリック

ブロックエディターで、「ブログカード」を追加したい場所を選択して、+マークをクリックしてブロックを追加します。

Cocoonブロックを選択

Cocoonブロックの中の「ブログカード」をクリックします。

リンクするURLの入力

以下のようなブロックが表示されますので、ここにURLを入力します。

このURＬは外部ブログカードとなりますが、内部ブログカードも使い方は同じです。

Cocoonブログカードの確認

更新して、プレビューで確認します。

ブログカードが表示されていれば完了です。

画像の差し替え

差し替え画像の準備

デフォルトでは、ブログカードに表示される画像は、cocoonのテーマ画像となりますので、これを差し替えます。
(https：//gungii.com/xxxxx/ではなく、https：//gungii.com/のブログカード)

<編集画面>

<表示画面>

画像サイズの確認

デフォルトでは、親テーマに格納されている「screenshot.jpg」が使用され、画像サイズは、880x660pxです。

差し替え画像のリサイズ

ブログのヘッダー画像として使用した画像をリサイズしました。特に、サイズをデフォルト画像に合わす必要はありませんが、画像が大きくリサイズが必要な為、テーマの作者が使用しているサイズに合わせました。

画像の圧縮

tinyjpgで画像を圧縮します。

276 KＢが83.6KBに圧縮されました。

画像の差し替え

ODPタグの選択

WordPress管理画面のCocoon設定から「OGP」タグをクリックします。

画像の差し替え

準備しておいた画像に差し替えます。

選択から画像を変更すれば、何度でも変更できます。

差し替えの確認

ブログカードの画像が差し替わりました。

説明文の設定

ホームのブログカードに説明文が入っていませんので、説明文を入れます。
注意:
各記事のブログカードでは、メタディスクリプションが自動的に表示されますが、ホームのメタディスクリプションは設定しなければ表示されません。

「タイトル」タグの選択

WordPress管理画面のCocoon設定から「タイトル」タグをクリックします。

「サイトの説明」欄の入力

「サイトの説明」欄に説明文を入力します。

ブログカードの確認

「サイトの説明」欄に入力した内容が表示されています。

ラベルの設定とカスタマイズ

ブログカードの表示

ラベル無し

<表示画面>

<編集画面>

ラベル有り

<表示画面>

<編集画面>

ラベル有りの設定

ラベルの選択

記事の編集画面で、ラベルを選択します。

ブログカードの確認

ラベルが付きました。

留意:
黒の背景に白抜き文字です。色を変えるにはCSSを変更するしかありません。Cocoonテーマの制作者わいひらさんがフォーラムで話されていました。

ラベルのカスタマイズ

CSSの変更

外観からテーマエディターを選択して、子テーマのＣＳＳに追記します。

ブログカードの確認

背景色がオレンジ(#ff8c00)となりました。

留意:
背景色をラベルの種類ごとに変更する場合は、.blogcard-typeのところを各々のラベルのCSSセレクタを指定します。

[ 完成イメージ ]

404 NOT FOUND | IT大好きシニアのリタ活生活

IT大好きシニアがリタイア後のライフスタイルを提案します。

gungii.site

固定ページの作成

固定ページの新規作成

「新規追加」をクリック

タイトルの入力

タイトルを入力して、下書き保存します。

表示の確認

当然ですが、タイトルやパンくずリスト、ヘッダー、フッター、サイドバーが表示されています。これらを非表示にしていきます。

CSSの変更

固定ページの編集

固定ページのサイドバーを非表示とする。

固定ページの追加ヘッダーに以下のCSSを記述します。

サイトの確認

保存して、プレビューすると、以下のように表示されます。

1カラムとなり、サイドーバーが表示されなくなりました。

固定ページから不要な表示を消す。

ヘッダー画像、タイトル、パンくずリスト、メニューバーを非表示とします。但し、フッターについては、ここでは削除できませんので、テンプレートファイルを作成することで対応します。

サイトの確認

ヘッダー画像、タイトル、パンくずリスト、メニューバーが非表示となりました。

テンプレートの適用

テンプレートファイルの作成

WordPress の公式オンラインマニュアル(Codex)に記載ある通り固定ページの表示順番は、カスタムテンプレートの後にpage.phpが読み込まれますので、カスタムテンプレートを作成して、カスタムテンプレートでフッターを非表示とします。

page.phpのダウンロード

カスタムテンプレートファイルは、page.phpを変更して作成しますので、ダウンロードします。

ファイル名の変更

ここでは、「page.php」を「1column.php」に変更します。

1column.phpの変更

まず、テンプレートとして認識させる為に、テンプレート変更します。ここでは、Template Nameを「1カラム」とします。
注意:エディターは、VSC(ビジュアルスタジオコード)を使用しています。

つぎに、サイドバーとフッターを呼び込んでいる箇所をコメントアウトします。

サーバーへUPLOAD

内容を変更した1column.phpをサーバーにUPLOADします。
※ダウンロードしたpage.phpと同じ階層へアップロードします。

固定ページの編集

パーマリンクの変更

日本語は、英数字に変えておきます。
注意:これは、LPの作成方法とは何らの関係もありませんので、変更しなくとも良いてす。

テンプレートの選択

1column.phpで、「Template Name: 1カラム」と記述したテンプレートを選択します。

追加ヘッダーの修正

サイドバーの非表示は、「1column.php」で、読み込まない様にした為、追加ヘッダーに記載したCSSは、サイドバーの箇所は削除します。

最終的には、追加ヘッダーの設定は以下の通りです。

サイトの確認

サイトを確認すると、LP用の何もないページとなりました。完成です。

ページ速度の計測(改善前)

GoogleAnalyticsの「ページ速度の測定」は、PageSpeed InsightsやGTmetrixとは異なる測定方法をしているので注意が必要です。アクセスしてきたユーザの通信状況なども加味された上で測定されますので、スペックの低いデバイスでアクセスしたユーザーや、地下等の電波の繋がりにくい場所で閲覧したユーザ等のデータも含まれています。また、GoogleAnalyticsはサイトの閲覧者が読み込んだ全てのページの表示スピードを計測しているわけではありません。GoogleAnalyticsのデフォルトの設定では、ユーザーの数%、最大で10,000PVをサンプルとして抽出したデータを元に、ページ速度の指標データを算出しています。例えば1日に1,000PVのページの場合、1％にあたる10PVのみが抽出されてデータが提供がされます。作成したばかりのページでPVはあるのに平均読み込み時間の数字が0の日があるのはそのためです。実際のページビューと、サンプルとなったページビューの数が異なっていますので、確認下さい。

ページ速度の計測

アナリティクスの起動

サイト速度の確認

「行動」→「サイトの速度」→「概要」をクリックします。

ここでは、ページの読み込みに平均6.38秒を要し、サーバーからの応答に0.12秒を要しています。この平均から剥離しているページがないかどうかを探っていきます。

ページ速度の確認

「行動」→「サイトの速度」→「ページ速度」をクリックします。

拡大すると

見方は、サイトの平均表示時間を基準にして、左に緑のボーダーで出ていれば平均よりも速く、右に赤のボーダーとして出ていれば平均よりも遅いことになります。上からPV数の多い順なので、上のほうにある遅いページから順に速度改善していきます。

ページ速度の改善

赤のボーダーとなっているサイトの画像を全て、圧縮して入れ替えました。最近のブログ記事では、投稿する画像をまず「tinypng(tinyjpg)」で圧縮した後、投稿して、プラグイン「EWWW Image Optimizer」でwebpに変換するという手順を踏んでいますが、少し前までのブログ記事では、「tinypng(tinyjpg)」で圧縮することを行っていませんでしたので、今回、圧縮した画像でアップロードし直しました。
ここでは、パーマリンク:outlook-infoのページの改善後を確認してみます。

ページ速度の計測(改善後)

ページ速度の計測

画像を圧縮した改善後のページ速度を計測してみました。

サイト速度の確認

ページ速度の確認

outlook-infoのサイトは、昨日は赤のボーダーで123.39%でしたので、本日は50.26%に改善されています。(昨日、画像の圧縮を行いました。)
注意:
読み込み時間は、平均なので本日の読み込み時間が改善したからといって、赤のボーダーが緑になることはありません。

詳細の確認

URLをクリックします。

デフォルトの設定では、ユーザーの数%、最大で10,000PVをサンプルとして抽出したデータを元に、ページ速度の指標データを算出しています。ここでは、67PVのみが対象となっていますので、数字=0ということは、本日は、このページは対象となっていないということです。

「分布」の確認

「分布」タブをクリックします。

平均読み込み時間が「11.07秒かかった」というデータのサンプル数が3となります。2021.09.08、2021.09.09、2021.09.10の3PVが対象となって算出されています。

留意:
サイト速度のレポートにおいてその根拠となっている数値は、サイトを訪問したユーザー全員から取得したものではなく、ここでは3PVでのサンプリング数値になっています。今回このページ(outlook-info)は、画像を圧縮することで少し改善されましたが、ページに原因らしきものが見当たらない場合は、電波の繋がりにくい場所等で閲覧したユーザーや、スペックの低いデバイスでアクセスしたユーザーがサンプルとして含まれている可能性もありますので、注意しながらPageSpeedInsightと併用して、改善することが大切です。

例:
例えば、以下のページ(how-email)は、テキストのみのサイトで、テキストも少ない為、サイトスピードが遅くなる理由は全くありません。
電波の繋がりにくい場所等で閲覧したユーザーや、スペックの低いデバイスでアクセスしたユーザーの1PVがサンプルとして収集されたと思われますので、改善のしようがありません。

アイキャッチ画像の準備

アイキャッチ画像の選択

アイキャッチ画像として使用する画像は、主に「Pixabay」や「写真AC」のサイトからダウンロードしています。

画像の検索

今回は、Pixabayから画像を取得します。

画像の選択

画像のダウンロード

画像のサイズを選択して、ダウンロードします。

アイキャッチ画像のリサイズ

アイキャッチ画像を800x533pxにリサイズします。Cocoonの場合は最低でも800x800px以上(推奨は1280x1280px)となっていますが、記事の先頭に表示するアイキャッチ画像が正方形というのがあまり好きではなく、pxもなるべく少なくしなければ画像の読み込みが遅くなりますので、幅を最低の800pxとして、その比率で高さを533pxとしています。無料画像のダウンロードサイトとして良く利用しています「写真AC」や「Pixabay」ではダウンロードのサイズが、1920x1280pxが多く、これをそのままダウンロードして、幅を800pxに変更すると比率で高さが533pxとなる為、トリミングすることなく簡単にリサイズできますので、そのまま使用しています。

画像のリサイズ

photoshopCS3で、幅を800pxと入力してリサイズします。

リサイズの結果

800x533pxにリサイズされました。

アイキャッチ画像の圧縮

リサイズされた画像をTINYJPGで、アイキャッチ画像を圧縮します。

画像をドラッグ&ドロップ

圧縮の結果

232KBから50.6KBに圧縮されました。

ファイル名の変更

ブログ記事のアイキャッチ画像として投稿する為、ファイル名をwebp2-ec.jpgとします。

アイキャッチ画像の投稿

記事の投稿

準備した画像(webp2-ec.jpg)をアップロードして、記事の中でアイキャッチ画像として投稿します。

投稿画像の確認

投稿記事のアイキャッチ画像として格納した画像(webp2-ec.jpg)から、どのようなサイズの画像が自動生成されているかを確認します。

メディアライブラリで確認

WordPressの管理画面では、元画像のみ確認できます。(自動生成された画像は、ここでは見れません)
注意:
メディアライブラリーには、Webp2-ec.jpgが、プラグインEWWW Image Optimizerで、WebPに変換されて50.6KBだったファイルサイズはさらに圧縮されて17.7KBとなっています。

FTP(WinSCP)で確認

次に、WinSCPで画像の格納されているuploadsフォルダの中を見て見ます。「EWWW Image Optimizer」でアップしたJPEGやPNGといった他フォーマットの画像を自動的にWebP画像形式のフォーマットで別途保存してくれます。が、その際のファイル名は元の拡張子の後ろに”webp”の拡張子を追加するものとなります。
例:sample.jpg → sample.jpg.webp
注意:
webpに対応していればwebpとして読み込み、対応していなければjpgとして読み込む様に制御されている様です。

[ webpで配信されているかを確認 ]

Ccoonの記事ページで表示されている画像を右クリックして、「名前を付けて画像を保存」をクリックします。保存ファイルの拡張子が「webp」となっていればOKです。

自動生成画像の説明

画像をアップロードした際に、Cocoonが自動生成している画像は、今回の場合は6種類となります。元画像(Webp2-ec.jpg)から、以下の6種類のjpgが生成されています。但し、それぞれの画像に、拡張子webpの画像がEWWW Image Optimizerによって生成されていますので、12種類(元画像を含むと14種類)となります。
※CocoonのRetina対応オプションは無効としています。

Webp2-ec.jpg(800x533px)・・・アップロードした元画像

①WebP2-ec-768×512.jpg

WordPressV4.4から追加された機能で、メディア設定では制御できませんので、自動生成されます。

サイズ固定の自動生成画像

②WebP2-ec-100×100.jpg・・・管理画面記事リスト一覧のサムネイル

③WebP2-ec-150×150.jpg・・・ページ送りナビ、Facebookバルーン

横幅が固定で高さが可変の自動生成画像

④WebP2-ec-120×68.jpg・・・人気記事、ナビゲーション

⑤WebP2-ec-160×90.jpg・・・関連記事デフォルト・関連記事4列

⑥WebP2-ec-320×180.jpg・・・デフォルトサムネイル・関連記事3列

注意:
カードタイプで、以下の4つのカードのいづれかを設定していれば、対応する画像が生成されますが、今回は選択していない為、生成されていません。

※themes/cocoon-master/lib/settings.phpの中で、設定されています。

アイキャッチ画像の構成

投稿記事にアイキャッチ画像をアップして、元画像の他に、様々なサイズの画像が自動生成されていますので、それぞれにどのようなところで使用されているかを確認します。が、その前にWordPress、Cocoonの設定内容を確認しておきます。

Cocoonの設定確認

画像の自動生成は、「WordPressによる自動生成(ユーザー設定)」、「テーマによる自動生成(cocoon)」の大きく分類して2種類あります。ここでは、「WordPressによる自動生成(ユーザ設定)」のみ自動生成しないように設定しています。

WordPressによる自動生成(ユーザー設定)

テーマによる自動生成(cocoon)

メインカラム設定

コンテンツ幅=800px、コンテンツ余白幅=29x、コンテンツ枠線幅=1pxとしています。

サイトバー設定

サイドバー幅=450px、サイドバー余白幅=19px、サイドバー枠線幅=1pxとしています。

全体画像設定

youtubeに合わせて、9:16(デフォルト)としています。

Cocoonページの画像構成

Cocoonの各ページで、どのようなアイキャッチ画像が使われているかを確認しておきます。

トップ画面

トップ画面では、「おすすめカード」、「ブログカード」、サイドの人気記事等に使われています。

コンテンツ幅

コンテンツ余白幅(29)+コンテンツ罫線幅(1)=30

カラム間の幅

サイドバー幅

サイドバー余白幅(19)+サイドバー罫線幅(1)=20

投稿記事

投稿記事では、記事トップの画像、関連記事画像、ページ送りナビ等に使われています。

アイキャッチ画像の用途・サイズ

各画像の用途とサイズ

では、自動生成された画像のサイズを確認しながら、具体的に個々の画像を1つずつ確認してみます。

320x180pxの画像(ブログカード)

120x68pxの画像(人気記事)

160x90pxの画像

関連記事

ページ送りナビ

おすすめカードの画像

おすすめカードの画像は、いくつの画像かによって幅が計算されます。320×180サイズの画像が読み込まれて、比率で計算されます。
例1:5つのカードの時は、260x146pxの画像

例2:6つのカードの時は、213x120pxの画像

投稿記事(元画像)