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.

はじめに

クラシックエディタの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.

Twitterのタイムラインのコード取得

Twitter Publish

Twitter Publishにアクセスしましょう。(アカウント作成など不要です！)

ブログにTwitterのタイムラインを表示するためのコードをここから取得します。

TwitterのアカウントURLを入力

Twitter Publishにアクセスしたら検索欄にご自身のTwitterのURLを入力してください。

入力したら右側の矢印を押します。

ちなみにTwitterのアカウントURLはご自身のアカウントの画面を開いたときのURLです。

個別Tweetを埋め込みたいときは該当のTweetを開いたときのURLです。

タイムライン	個別Tweet

オプションを選択

矢印を押すと、オプションを選択する画面になります。

左側の「Embedded Timeline」を押します。

「set customization options」を押します。

高さ(heigths)を「600」にしておきます。こちらは後からでも変更できます。

変更したら「update」を押します。

コードをコピー

埋め込み用のコードが生成されるのでコピーします。

これでTwitterPublish側でやることは終了です。

サイドバーにTwitterのタイムラインを埋め込む

サイドバーにカスタムHTMLを追加

「外観」 → 「ウィジェット」を押します。

そして「カスタムHTML」を開き、サイドバーを選択した状態で「ウィジェットを追加」を押します。

カスタムHTMLにTwitterのコードを貼り付け

サイドバーにカスタムHTMLが追加されています。

タイトルに「Twitter」を入力 (実際に表示されるタイトルなので表示したいタイトルを入力してください。)

内容に先ほどTwitterPublishで生成したコードを添付します。

そして「保存」を押します。

これでサイドバーにTwitterのタイムラインが表示されます。

高さを調整

表示されたTwitterのタイムラインを確認しましょう。

もし「高さが足りない」「もう少し小さくしたい」という場合は、先程のカスタムHTMLから高さを調整しましょう。

「data-height」の高さを変更することで高さを調整できます。

私の場合は「400」だと投稿が見切れてしまったので、「600」に設定しました。

The post 【Cocoon】サイドバーにTwitterのタイムラインを埋め込む方法 first appeared on shungo blog.

この記事ではその対処法をご紹介します。

確認すべき設定

画像が表示されない原因は、画像を最適化してサイトを高速化するプラグイン「EWWW Image Optimazer」の「Lazy Load(遅延読み込み)」設定でした。

EWWW Image Optimizer

EWWW Image Optimizerの設定画面を開き、

「 画像が表示領域に入った (または入ろうとしている) 時にだけ読み込まれるため、読み込み速度を改善します。」のチェックを外すとアイキャッチが表示されるようになります！

チェックを外すと、無事アイキャッチが表示されました！

Cocoon設定

EWWW Image Optimazerの方で画像の遅延読み込みをOFFにしたので、Cocoonの設定で遅延読み込みをONにしたいと思います。(WordPress 5.5からLazy Loadが標準機能になりました。)

「CSSの縮小化」にチェックをつけた状態で、

下の方にある「Lazy Loadを有効にする」にもチェックをつけます。

これで設定は完了です！

The post 【Cocoon】 「CSSを縮小化」で、画像が表示されないときの対処法 first appeared on shungo blog.

そんなときはWP Word Countというプラグインがオススメです。

WP Word Countの使い方

インストール方法

プラグインを画面する画面で、右上の検索窓に「word count」と入力します。

WP Word Countが出てくるので、「今すぐインストール」「有効化」を押します。

Calculate

インストールが完了したら、まずは投稿済みの記事を計算する必要があります。

左のサイドバーのWord Countをクリックして、「calculate」をクリックします。

するとこのような画面になるので、

「Count all content on this site at one time」にチェックして

「Calculate Word Counts」をクリックします。

これで最初の設定は完了です！

表示内容

Top Content

Top Contentでは、ブログ内の文字数が多い記事から順番に表示されます。

このように累計記事(Totals)・公開記事(Published)・未公開記事(UnPublished)の３つの記事情報が表示されます。

そして、その下には文字数が多い順に記事が表示されます。

All Content

All Contentではブログ内の全記事の情報が表示されます。

Calculateするときに全期間をしていると先ほどのTop Contentと同じ内容が表示されます。

Monthly Statistics

Monthly Statisticsでは月ごとの記事の情報が表示されます。

Author Statistics

Author Statisticsメニューでは、ユーザー別の投稿情報が表示されます。

ユーザーを分けずに1人で運営している場合は、ユーザーは１人しか表示されません。

Reading Time

Reading Timeでは記事を読む目安時間の表示を設定することができます。

ブログの上に「この記事は約○分で読めます」という表記をよく見ると思いますが、

それはここで設定できます。

• Word Per Minutes: １分間で読む文字数の設定
• Insert before post content?: 記事を読む目安時間を記事の上に表示するかどうか
• Before Label: 数字の前につける表記
• After Label: 数字の後につける表記

下記のように設定して「Save Changes」を押した場合は、

このような感じで記事の上に、読む目安時間が表示されます！

Calculate

Calculateでは文字数をカウントする記事の期間を選択することができます。

数年ブログを運営していて、直近の1年分だけカウントしたい！というときなどに使用します。

「 Count content by a date range」にチェックをつけると、カレンダーで範囲を選択することができます。

Upgrade to Pro

こちらは有料プランを申し込みするページです。

プロ版を利用することで、より詳細なデータを表示することができますが、わざわざアップグレードする必要もないかと思います。

The post 【WordPress】投稿した記事の文字数をカウントする方法 (WP Word Count) first appeared on shungo blog.

投稿一覧でタイトルがぎゅうぎゅうになっており、かなり見にくい表示になっていました。

ページのサイズを小さくしたら少しは見やすくなりましたが、

そもそもタイトル幅を大きくできないかな？と思いました。

そこで今回は投稿一覧の表示を変更する方法をご紹介します。

 投稿一覧の表示変更

投稿一覧画面の右上にある「表示オプション」というボタンをクリックすると

設定のオプションタブが開きます。

カラムにチェックが付いているものが投稿一覧に表示されています。

ここでチェックされているものを減らすと、タイトルなど残っているカラムの幅は大きくなります。

「投稿者」「コメント」「ID」は不要だったのでチェックを外しました。

するとタイトル幅がかなり広くなりました。

「適用」ボタンを押して設定は完了です！

The post 【WordPress】投稿一覧のタイトルの幅が狭い？ タイトル幅を変える方法 first appeared on shungo blog.

今回は記事ごとに簡単なメモ書きを残す方法をご紹介します。

プラグイン: Simple Post Notes

メモ書きを残すために、プラグインの「Simple Post Notes」をインストールします。

プラグインの検索でSimple Post Notesを入力して、「今すぐインストール」、「有効化」します。

有効化されると、投稿画面の右側にNotesという欄が表示されています。

このテキストフィールドにメモ書きを残すことができます。

また、Notesの内容は投稿一覧でも確認できます。

The post 【WordPress】投稿に簡単なメモ書きを残す方法 (Simple Post Notes) first appeared on shungo blog.

事象: スタイルが表示されない

原因: プラグインのAdvanced Editor Toolsの設定

Cocoonのクラシックエディタでスタイルを表示する手順

旧エディター(TinyMCE)タブをクリックすると、

使用しないボタンのほうにスタイルがあります。

これが原因でスタイルが表示されていないようです。

使用していないボタンにあるスタイルを

クラシックエディター用ツールバーにドラッグ＆ドロップします。

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

すると無事に、スタイルが表示されました！

スタイルだけでなく、他のボタンの表示・非表示も同じように設定できるので、

必要なボタンがある場合は同様に追加してみましょう！

The post 【Cocoon】クラシックエディターでスタイルが表示されない時の対処法 first appeared on shungo blog.

ソースコードを入力するpreタグを追加

見出しを選択するタブから整形済みのテキストを選択

下記のようにソースコードをpreタグが表示されるので、ソースコードを入力

ソースコードをハイライトする

上記のままだと、ソースコードがハイライトされていない(色がついていない)ので、

次に、ハイライトの設定をします。

下記の順にクリックしていきCocoonの設定を変更します。

Cocoon設定 → コード →ソースコードをハイライト表示 にチェックをつける

するとこのようにソースコードがハイライトされます！

/* コメント */
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}

The post 【Cocoon】クラシックエディタでソースコードを表示する方法 first appeared on shungo blog.