Cocoonでは下記の画像がデフォルトで設定されているため、

他の画像を表示したい場合は画像を変更する必要があります。

この記事では、下記の方法でCocoonのトップページのサムネイルを変更する方法をご紹介します！

しゅんご

簡単に変更できるので、ぜひ試してみてください！

cocoonのトップページのサムネイルを変更する方法

「Cocoon設定」の「OGP」タブを開く

まず、「Cocoon設定」 => 「OGP」をクリックします。

ホームイメージを変更する

下までスクロールすると、ホームイメージという項目があります。

デフォルトではCocoonの画像が設定されています。

このホームイメージの画像を変更することで、トップページのサムネイルを変更することができます。

選択を押して、表示したい画像を選択しましょう！

本ブログではプロフィール画像を設定しました。

画像の変更前と変更後

ホームイメージの変更前後です。

OGPのホームイメージを変更することで、トップページのサムネイルを変更することができました！

変更前
変更後

まとめ

トップページのサムネイルは下記の方法で変更できます！

The post 【Cocoon】トップページのサムネイル(ホームイメージ)を変更する方法！ first appeared on shungo blog.

「サイトマップを作成しましょう！」というのをよく聞くのではないでしょうか？

しかし、サイトマップで調べると「HTMLサイトマップ」と「XMLサイトマップ」があり、

どっちを作成すれば良いかわからない方も多いと思います。

この記事では、サイトマップを詳しく知らない方に向けて

についてご紹介していきます！

サイトマップは2種類ある

サイトマップというのは、Webサイトの構造を示す地図のようなものです。

サイトマップと省略して呼ぶことが多いですが、実際には

の2種類あります。

1. HTMLサイトマップ: 一般ユーザー向け

HTMLサイトマップは、Webサイトに訪問したユーザーにリンクの一覧をわかりやすく伝えるためのものです。

SEO効果はないため、最近ではHTMLサイトマップを作成していないWebサイトも多くあります。

WordPressでは簡単に作成できるため、

サイトに訪問したユーザーが使いやすいようにHTMLサイトマップを作っておくことをオススメします！

本ブログのHTMLサイトマップはこんか感じです⏬

しゅんご

Webサイトに訪問してくれた方がリンクを探しやすいように

HTMLサイトマップを作成しましょう！

2. XMLサイトマップ: 検索エンジン向け

XMLサイトマップはGoogleなどの検索エンジン向けのサイトマップです。

XMLサイトマップがあると検索エンジンのクローラーがリンクを検知しやすくなるため、

検索結果に表示されやすくなるというSEO効果があります！

XMLサイトマップは下記のように表示され、人間には読みにくい形式になっています⏬

後ほど説明しますが、このXMLサイトマップをSearch Consoleに送信することで、

検索エンジンにURLを検知され、検索結果に表示されるようになります。

しゅんご

検索エンジンがWebサイトを検知しやすくなるように

XMLサイトマップを作成しましょう！

HTMLサイトマップの作成方法 (Cocoon限定)

WordPressのテーマにCocoonを使用している場合は、

プラグインなしでHTMLサイトマップを作成することができます。

ここでは、CocoonでのHTMLサイトマップの作成方法をご紹介します。

サイトマップの固定ページを作成する

まず、固定ページの「新規作成」を押します。

固定ページの本文に[sitemap]を入力

固定ページを開いたら、本文に

[sitemap]

と入力しましょう。

これで記事を公開するとHTMLサイトマップが作成されます！

本ブログのサイトマップはこんな感じです。

しゅんご

Cocoonの場合、HTMLサイトマップは簡単に作成できます！！

[sitemap]にはオプションがあり、オプションを設定すると、

HTMLサイトマップにカテゴリー、固定ページ、アーカイブの表示を選択することができます。

詳細は下記のサイトをご覧ください！

簡単なサイトマップページを生成できるsitemapショートコードの使い方

XMLサイトマップの作成方法

WordPressでXMLサイトマップを作成する場合は、プラグインを使用するのがオススメです！

ここでは「XML Sitemap Generator for Google」というプラグインを使ってXMLサイトマップを作成する方法をご紹介します。

「XML Sitemap Generator for Google」をインストール

プラグインの新規追加画面で、

検索欄に「XML Sitemap Generator for Google」と入力します。

左上に表示される「XML Sitemap Generator for Google」というプラグインを「今すぐインストール」します。

インストールが完了すると「ブログURL/sitemap.xml」でXMLサイトマップを確認できます。

「All in One SEO Pack」というプラグインをすでにインストールしていたら、競合することがあります。

対処法としては

• 1. 「All in One SEO Pack」のサイトマップを無効にする
• 2. 「All in One SEO Pack」を削除、「XML Sitemap Generator for Google」をインストール

Cocoonを使っている場合は、プラグインを使わなくてもSEO対策ができるので、2の対策で良いと思います。

XMLサイトマップの設定

「XML Sitemap Generator for Google」では出力するサイトマップの内容や更新頻度などを詳細に設定することができます。

本ブログの設定のスクショを貼っておくので参考にしてください！

基本的な設定

投稿の優先順位

Sitemapコンテンツ

Change Frequencies

優先順位の設定 (priority)

Search ConsoleにXMLサイトマップを送信する方法

Search ConsoleでXMLサイトマップを送信する手順は3つです！

完了すると送信されたサイトマップのステータスが「成功しました」になっています。

上記のようにXMLサイトマップを送信するほかにも、

GoogleにWebサイトを検知してもらう方法があります。

気になる方は下記の記事をご覧ください！

ブログ記事をGoogleにインデックス登録する方法３選！！

まとめ

この記事では、

をご紹介しました。

しゅんご

どちらも作成するのが簡単なので、

ぜひ作成してみてください！

The post 【WordPress】サイトマップの作成方法 (HTMLサイトマップ・XMLサイトマップ) first appeared on shungo blog.

「申請してから審査通過までにどれくらい日数がかかるのか？」と気になる方も多いと思います。

楽天やYahooの申請はすぐに通過するので、Amazonの審査は時間がかかり不安になるのではないでしょうか？

この記事ではもしもアフィリエイトでAmazonの審査通過までにどれくらいかかるのかをご紹介していきます！

しゅんご

ブログの状況によって審査期間は変わってくると思いますが

私の実体験が目安になれば嬉しいです！

Amazon提携の審査期間は7日間！

本ブログの場合、Amazonに提携申請を出してから審査が通過するまでかかった日数は7日間でした！

下記が申請 ~ 審査通過までの詳細です。

2023年5月のGW中だったため、5/3 ~ 5/7までは土日祝日だったため、

カレンダー通りの平日でいうと5/8 ~ 5/9の2日間でした。

※ 連休中に申請したので、2週間くらいかかるかと思っていましたが、想像より早かったです

審査に通過するとこのようなメール通知が来ます！！

さっそく広告を貼ってみます。。。

Amazonの提携申請を出したときのブログの状況

提携申請を出したときの本ブログの状況です。

しゅんご

PVは少ないですが、60記事あり、GoogleAdSenseに通っていたことなどが審査に通過した要因かと推測しています！

まとめ

本ブログの場合、もしもアフィリエイト経由でAmazonの提携申請をした場合、

審査通過まで7日間かかりました。

ブログの状況によって審査期間は変わると思いますが、

1週間くらいはかかると思うのでのんびり待ちましょう！

The post 【実体験】もしもアフィリエイトでAmazonの審査期間は○日！ first appeared on shungo blog.

はじめに

Rinkerで楽天市場の商品を検索したときに下記のエラーが出たことがないでしょうか？

【エラー】リクエスト回数が多すぎます。しばらく時間を空けてからご利用ください。too_many_requests

この記事では、このエラーを解消して、商品を検索できるようにするための手順をご紹介します！

結論から言うと下記の設定を完了すれば検索できるようになります！

商品検索ができない原因

Rinkerで楽天市場の商品を検索するときに、楽天が公開しているAPI(プログラムの処理)を使用しています。

このAPIはapplication_idごとに1秒に1回以下しか使えないという制限が設けられています。

1つのapplication_idにつき、1秒に1回以下のリクエストとしてください。

各APIの利用制限を教えてください | Rakuten Developers

楽天のアプリIDを指定してしない場合は、全員が同じapplication_idを使っていることとなり、1秒に1回以下という制限に引っかかっていたのです。

そのため、application_id(楽天アプリID)を設定することで、1秒に1回以下というリクエストになるため、リクエストが多すぎるというエラーを回避するができます。

対処法

それでは楽天アプリIDを設定する手順をご紹介していきます！

RakutenDevelopersでアプリIDを発行

まずはRakutenDevelopersでアプリIDを発行します。

Rakuten Webserviceを開き、右上にある「+アプリID発行」をクリックします。

アプリの新規作成画面が開くので、必要な情報を入力していきます。

入力したら「規約に同意して新規アプリを作成」をクリックします。

RakutenDevelopersでアプリID/デベロッパーIDをコピー

アプリIDの発行が完了するとこのような画面が表示されます。

数字19桁の「アプリID/デベロッパーID」をコピーしてください。後ほどWordpressの管理画面で使用します。

WordPressのRinkerにアプリID/デベロッパーID追加

WordPressの管理画面から「設定」=>「Rinker設定」をクリックしてRinkerの設定画面を開きます。

真ん中くらいに楽天の設定欄があります。

その中にある「アプリID/デベロッパーID」に先ほどコピーした数字19桁を貼り付けます。

そして、変更を保存します。

これで設定は完了です！

これでエラーが出ることなくRinkerで検索することができます！

まとめ

商品検索ができない原因は楽天APIに利用制限があるためでした。

そのため、RakutenDevelopersのアプリIDをRinkerに設定することで、楽天市場の商品を検索できるようになりました！

The post 【WordPress】Rinkerで「リクエスト回数が多すぎます。」というエラーが出た時に対処法 first appeared on shungo blog.

はじめに

GoogleAdsenseに無事に合格して管理画面を開くと

「要注意 – 収益に重大な影響が出ないよう、ads.txt の問題を修正してください。」と出てびっくりすると思います。

この修正は「必須」ではないですが、推奨されているので出来るだけ対処しておくことをおすすめします。

この記事では

• ads.txtとは？
• Xserverでのads.txtの設定方法

をご紹介していきます！

ads.txtとは？

ads,txtとは、サイト運営者が認定した販売者を通してのみデジタル広告枠を販売する仕組みです。

ads.txtを設定することで、不正な広告販売などを防止することができます。

すごーく簡潔にいうと、広告主もサイト運営者ともにメリットが生まれるというシステムです。

サイト運営者様は ads.txt を独自に作成することで、自サイトの広告枠の販売者を厳密に管理し、偽の広告枠が広告主に提供されるのを防ぐことができます。

 

ads.txt を使用すれば、購入者が偽の広告枠を判別できるため、パブリッシャー様としても偽の広告枠に収益が流れるのを阻止し、その分収益を増やすことができるというメリットがあります。

ads.txt に関するガイド

Xserverでads.txtの問題を修正する方法

GoogleAdSenseのページでads.txtファイルを確認する

「要注意 – 収益に重大な影響が出ないよう、ads.txt ファイルの問題を修正してください。」というアラートにあるに「今すぐ修正」をクリックします。

するとサイトのURLが表示されるので、該当のサイトURLをクリックします。

ads.txtファイルが表示されます。

ここに表示されている①~④の値をXserverに設定してきます。

Xserverでads.txtを設置する

Xseverのサーバーパネルでads.txtをクリックします。

該当のドメインを選択します。

「ads.txt設定追加」タブを開いて、先ほどGoolgeAdSenseのページで確認して4つの値を入力します。

項目を入力したら、「確認画面へ進む」をクリックします。

そして、内容を確認したら、「追加する」をクリックします。

これでads.txtの設定が追加されました！

しかし、設定が完了してもすぐに反映されないそうなので、

ある程度時間が経過したときに、アラートが消えているか確認してみましょう。

注: 変更が AdSense に反映されるまでに数日かかる場合があります。サイトの広告リクエストが多くない場合は、最長で 1 か月ほどかかることがあります。

ads.txt に関するガイド

ads.txtの確認方法

GoogleAdSenseに反映されるまでの時間がかかりますが、サイトのURLからは設定ができているかを確認することができます。

サイトURLに「/ads.txt」を追加してアクセスする

ads.txtファイルは、Webサイトのルートディレクトリに配置されるため、

WebサイトのURLに「/ads.txt」を追加してアクセスすると確認できます。

このブログの場合はhttps://shungoblog.com/ads.txtにアクセスすることで確認できます。

The post GoogleAdSenseでのads.txtの設定方法！広告収益を最大化するために必要なこと first appeared on shungo blog.

はじめに

クラシックエディタのCode Blockに複数行のコードをコピペする時に、

空白行が含まれると、Code Block内にうまくペーストすることができません。

この記事では、複数行のコードでもCode Blockにきれいにコピペする方法をご紹介します。

Highlight Code Blockのインストールがまだの方はこちらをご覧ください！

【WordPress】ソースコードを見やすく表示する「Highlighting Code Block」

Wordpressでソースコードを見やすく表示する際に便利なプラグイン「Highlighting Code Block」の使い方をご紹介します。Cocoonのクラシックエディタを使用している場合について説明します。

shungoblog.com

複数行のコードをコピペする方法

Code Blockを導入する

まずはクラシックエディタでCode Blockを挿入します。

ビジュアル => テキスト に変更する

次にビジュアルからテキストに変更します。

ビジュアルのままコピペすると空白行がうまく反映されないので注意してください。

codeタグの間にコードをコピペする

テキストに切り替わったら、/* Your code... */を削除して、表示したいコードをコピペします。

例えば、このようにHTMLのコードをコピペすると

空白行もうまく反映されていると思います！

<h2>Title</h2>
<p>Text</p>

<footer>
  <p>© 2023 shungoblog</p>
</footer>

The post 【WordPress】クラシックエディタでHighlight Code Blockにコードをコピペする first appeared on shungo blog.

本ブログも最初はモバイルの読み込みがかなり遅かったですが、色々と対応することで

PageSpeed insightでのモバイルのスコアを「16」→「74」まで改善することができました。

この記事では効果が大きかった方法とそのほかにも試した方法も含めてご紹介します！

PageSpeed Insightsでサイト速度をチェック

まずは、「PageSpeed Insights」でサイト速度を確認しましょう。

ご自身のサイトのURLを入力して「分析」を押しましょう

分析が終わるとスコアが表示され、さらに下の方には改善すべき項目が表示されます。

この改善すべき項目を対応することで、モバイルの読み込みが早くなり、スコアをあげることができます。

効果が大きかった改善方法

キャッシュプラグイン「WP Fastest Cache」

キャッシュとは「一度読みこんだサイトのデータを一時的に保存しておくことで、再度読み込む時に速く表示することができる仕組みのことです。」

このキャッシュをプラグインで使えるようにしましょう。

「プラグインを追加」する画面で「WP Fastest Cache」と入力して、「今すぐインストール」→「有効化」しましょう。

詳細設定は下記の通りです。

設定を変更したら、「変更を保存」を押します。

設定が完了したら「キャッシュを削除する」タブに移動します。

そして、「すべてのキャッシュを消去」を押します。

これでキャッシュの設定、削除は完了です！

Xserverのサーバーキャッシュを削除

WordPress上で設定を変更しても、サーバー上にキャッシュが残っていて設定が反映されていない可能性もあります。

WordPressの設定を変更したけど、スコアが変わらないという方は、サーバー上のキャッシュの削除も試してみましょう。

本ブログではXserverを使用しているので、Xserverのキャッシュの削除方法をご紹介します。

「高速化」→「サーバーキャッシュ設定」をクリックします。

該当ドメインを選択します。

「キャッシュ削除」のタブをクリックして、「削除する」を押します。

モバイル画面に表示するコンテンツを減らす

こちらの対応が本ブログでは一番効果が高かったです。

JavascriptやCSSの圧縮なども効果があると思いますが、

モバイルで表示するコンテンツ自体を少なくすることで、読み込みがかなり早くなります。

特にCSSを使った装飾やJavaScriptを使った動的な表示を減らすと効果が大きいです。

カルーセルを削除

Cocoonの場合、カルーセルを簡単表示できてオシャレになるので、表示していました。

しかし、こちらの読み込みが遅かったので、モバイルでは表示しないようにしました。

「Cocoon設定」→「カルーセル」をクリックします。

「カルーセルの表示」で「スマートフォンで表示」のチェックを外します。

これでPCではカルーセルが表示されますが、モバイルではカルーセルが表示されなくなります。

Twitterのタイムラインを削除

Twitterのタイムラインも読み込みに時間がかかるので、モバイルの場合は表示しないことをおすすめします。

モバイル時はサイドバーのコンテンツの表示をなくす

サイドバーにTwitterのタイムラインを表示していたので、

モバイルの場合はサイドバーのコンテンツを表示しないようにします。

「Cocoon設定」「モバイル」をクリックします。

モバイルボタンの「モバイルボタン時コンテンツ下のサイドバーを表示」のチェックを外します。

モバイル用のフッターを作成

サイドバーの表示をなくして、モバイル用のフッターを作成しました。

ここでは、Twitterのタイムラインはなくして、プロフィールとカテゴリーだけ表示するようにしました。

その他の改善方法

本ブログではあまり効果がなかったですが、効果が見込める方法を簡単にご紹介します！

追加CSSをstyle.cssに移動する

WordPressの「追加CSS」に記載されているCSSはHTMLの<head>内で読み込まれます。

<head>はページを開いた時に読み込まれるので、ここの記載が多いと表示が遅くなります。

そのため、追加CSSの記載が多い場合は、子テーマのstyle.cssに移動しましょう。

最適化プラグイン Autoptimize

ソースコードを圧縮するプラグインです。下記の項目を最適化できます。

• HTMLの最適化
• CSSの最適化
• JavaScriptの最適化
• 画像の最適化

非同期プラグイン Async Javascript

Javascriptの読み込みを非同期で行い、サイトの高速化を行うプラグインです。

プラグイン Flying Scripts

Javascriptを読み飛ばして、サイトの高速化を行うプラグインです。

画像をWebpに変更

画像を「.webp」に変換して軽量化するプラグインです。

DB最適化プラグイン WP-Optimize DB clean

Wordprssのデータベースの最適化・不要なデータを削除するプラグングインです。

Webフォントの使用をやめる

Webフォントの読み込みにも時間がかかる場合があるので、Webフォントの使用をやめて、デフォルトのフォントを使用しましょう。

The post 【16点→74点】PageSpeed Insightsのモバイルだけが遅いときの改善方法 first appeared on shungo blog.

投稿一覧のカードタイプを変更する

Cocoon設定でカードタイプを変更

「Cocoon設定」→「インデックス」をクリックします。

下記の2点の設定を変更します。

• カードタイプ: 縦型カード3列にチェック
• スニペット（抜粋）の表示: チェック外す

これらの設定にすることで、投稿一覧のデザインが縦型カードの3列になります。

追加CSSでカスタマイズ

続いて縦型のカードタイプになった投稿一覧をカスタマイズします。

カードに枠線を追加して少し立体的にしてみます。

「外観」→「カスタマイズ」→「追加CSS」をクリックします。

CSSに下記のコードを追加します。

/* 投稿一覧 カード */ 
.ect-vertical-card .entry-card-wrap {
  max-width: 30%;
  box-shadow: 0 2px 4px rgb(0 0 0 / 25%);
  border-radius: 3px;
}
/* 投稿一覧 スマホ画面では2列 */
@media screen and (max-width:480px) {
  .ect-vertical-card .entry-card-wrap {
    max-width: 46%;
  }
}

The post 【Cocoon】 投稿一覧のカードを立体的にカスタマイズする方法 first appeared on shungo blog.

アイキャッチ画像をホバー時に画像を拡大する方法

追加CSSをカスタマイズ (コピペでOK!)

「外観」→「カスタマイズ」→「追加CSS」をクリックします。

下記のコードをCSSに追加して「公開」を押します。

するとアイキャッチ画像にマウスを乗せると拡大され、外すと元に戻ります。

/* アイキャッチ ホバーエフェクト */
main .card-thumb {
  overflow:hidden;
}
main .card-thumb img {
  transition-duration: 0.5s;
}
main .card-thumb img:hover {
  transform: scale(1.2);
  transition-duration: 0.5s;
}

追加CSSの詳細説明

枠に収まらない部分のアイキャッチ画像は非表示にします。

main .card-thumb {
 overflow:hidden;
}

拡大した画像を縮小するのにかかる時間です。

main .card-thumb img {
 transition-duration: 0.5s;
}

ホバー時に、画像を拡大するのにかかる時間です。

main .card-thumb img:hover {
 transform: scale(1.2);
 transition-duration: 0.5s;
}

The post 【Cocoon】アイキャッチ画像をホバー時に画像を拡大するカスタマイズ方法 first appeared on shungo blog.

この記事では複数行にも対応した、長すぎる文字列を三点リーダー（…）で省略する方法についていくつかご紹介します。

3点リーダーなし	3点リーダーあり

3点リーダーの表示方法 (複数行の場合)

追加CSSで対応

「外観」→「カスタマイズ」→「追加CSS」をクリックします。

下記のCSSを追加します。

「-webkit-line-clamp」の数字を変更することで何行まで文字を表示するかを変更することができます。

例えば「-webkit-line-clamp: 4;」とすると4行目までは文字を表示して、5行目からは3点リーダー(…)が表示されるようになります。

/* 投稿一覧 タイトル */
.entry-card-content h2 {
  /* 三点リーダー対応 */
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

CSSを追加することで下記のように3点リーダーが表示され、長いタイトルが省略されます。

The post 【Cocoon】投稿タイトルの長い文字列を3点リーダー(…)で省略する方法 first appeared on shungo blog.