ハイフンとアンダーバーは、URL内の単語やフレーズを区切るために使用されますが、それぞれ異なる効果を持っています。

この記事では

をご紹介していきます！

しゅんご

ハイフンとアンダーバーの違いを理解して、適切なURLをつけるようにましょう！

URLにはハイフン(-)とアンダーバー(_)のどちらが良いのか？

Googleはハイフン(-)を推奨している

早速結論になりますが、Googleはハイフン(-)を推奨しています！

URL では、ハイフンを使用して単語を区切ることを検討してください。そのようにすると、ユーザーと検索エンジンにとって URL のコンセプトが理解しやすくなります。URL では、アンダースコア（_）ではなくハイフン（-）を使用することをおすすめします。

引用: シンプルな URL 構造を維持する | Google

例を挙げると、こちらが推奨しているハイフンを使用しているURLです。

そして、こちらが非推奨のアンダーバーを使用しているURLです。

しゅんご

URLにはハイフン(-)を使うことをGoogleが推奨しています！

ハイフン(-)の方がURLとして見やすい

URLにはクリックできることを表すために、下線がつくことが多いです。

ハイフンの場合は下線がついても、ハイフンと下線の区別がついて見やすいです。

それに対して、アンダーバーの場合は下線がつくと、アンダーバーと下線がくっついてしまい見にくくなります。

ハイフン(-)とアンダーバー(_)の違い

ハイフン(-)は単語の区切り・アンダーバー(_)は単語の一部

ハイフンとアンダーバーでは単語の捉え方が異なります。

「blog-url」「blog_url」を例として説明します。

「blog-url」はそれぞれの単語を区切るので「blog」「url」の2単語として認識されます。

「blog_url」は単語を結合するので、「blogurl」の1単語として認識されます。

しゅんご

ハイフンとアンダーバーで異なる単語として認識されます！

検索結果の違い(SEOの違い)

ハイフンとアンダーバーで、異なる単語として認識されることがわかったので、

実際に検索してみて違いを見てみましょう。

「blog-url」と「blog url」	「blog_url」

このように

「blog-url」と「blog url」は検索結果に同じなり、

「blog_url」とは検索結果が異なることがわかります！

検索結果としては「blog-url」や「blog url」の方が一般的に求めている情報がヒットしているので、

「ハイフン」と「スペース」を使って検索するユーザーが多いと思われます。

このことからもURLには「ハイフン」を使うことが好ましいことがわかります！

まとめ

ハイフン(-)とアンダーバー(_)の違いについてご紹介しました。

SEOにも影響してくるので、URLの区切りにはハイフン(-)を使うようにしましょう！

The post ハイフン(-)とアンダーバー(_)の違いは？~URLのSEO対策！~ first appeared on shungo blog.

サイトURLの末尾につく「/」(スラッシュ)のことを「トレイリングスラッシュ」と呼びます。

URLの表示を見ると「末尾スラッシュがあるもの」と「末尾スラッシュがないもの」があり、

どちらを使えば良いかがわからない方も多いのではないでしょうか？

しゅんご

末尾スラッシュのあり・なしの違いはなんだろう？？

この記事では、末尾スラッシュについてわからない方に向けて、下記についてご紹介します！

末尾スラッシュのあり・なしの違い

「末尾スラッシュのあり・なし」の他に、「末尾スラッシュの位置」によっても挙動が異なります。

そのため、下記の4パターンのURLで末尾スラッシュのあり・なしの違いを説明していきます。

サブディレクトリとは、URLドメインの以下の階層的なディレクトリ構造のことを指します。

上記の3, 4のURLでいうと「profile」の部分がサブディレクトリになります。

ドメイン名の後のスラッシュのあり・なし

ドメイン名だけのURLの場合は、常に末尾スラッシュありでサーバーにリクエストされます。

つまり、「https://shungoblog.com」でリクエストしても

「https://shungoblog.com/」というように常にスラッシュありでリクエストされます。

chromeの検証でリクエストを確認を確認してみました。

末尾スラッシュあり (https://shungoblog.com/)	末尾スラッシュなし (https://shungoblog.com)
・トップページにアクセス	・トップページにアクセス (リダイレクトなし)

このようにドメイン名だけの場合は、

末尾スラッシュがなしでも、末尾スラッシュを付与してからサーバーにリクエストしています。

（＝末尾スラッシュありにリダイレクトしているわけではなく、サーバーへのリクエストは1回のみ）

しゅんご

常に末尾スラッシュがつくので、

ドメイン後の末尾スラッシュあり・なしは全く同じ挙動になります！

サブディレクトリの後のスラッシュのあり・なし

サブディレクトリの場合は、末尾スラッシュあり・なしで挙動が異なるため注意が必要です。

末尾スラッシュあり(https://shungoblog.com/profile/)の場合は、

「profile」ディレクトリ内のファイルをリクエストします。

つまり「profile」ディレクトリ内のindex.htmlやindex.phpにアクセスします。

末尾スラッシュなし(https://shungoblog.com/profile)の場合は、

「profile」というファイルをリクエストします。そして、「profile」というファイルがなかった場合は、検索エンジンが末尾スラッシュありの状態でリダイレクトします。

リダイレクトは表示速度低下などにつながるため、ディレクトリをリクエストしたい場合は末尾スラッシュをつけておきましょう。

こちらもchromeの検証で確認してみました。

末尾スラッシュあり (https://shungoblog.com/profile/)	末尾スラッシュなし (https://shungoblog.com/profile)
・「profile/」をリクエスト	・「profile」をリクエスト ・「profile/」にリダイレクト

末尾スラッシュなしの場合は、リダイレクトされて、リクエストする回数が増えていることがわかりますね！

しゅんご

サブディレクトリにアクセスする場合は、

同じページが表示されてもサーバーでの挙動が異なります！

WordPressはデフォルトで末尾スラッシュがつく

WordPressではパーマリンクで末尾スラッシュの有無を設定することができます。

初期設定では「日付と投稿名」が選択されており、デフォルトで末尾スラッシュがついている状態です。

※ 本ブログでは、任意のURLにするために「投稿名」を選択しています。

末尾スラッシュのあり・なしがSEOに与える影響

リダイレクトされて表示されるコンテンツが同じ場合は、

末尾スラッシュのあり・なしはSEOに特に影響はありません。

しかし、末尾スラッシュのなしでもリダイレクトされず同じコンテンツが表示される場合は、検索エンジンが重複コンテンツとみなし、インデックスの問題などが発生する可能性があります。

重複コンテンツとみなされることを避けるためにも、「末尾スラッシュあり」にリダイレクトするなどの対策をしてGoogleから評価されるコンテンツを作成するようにしましょう。

末尾にスラッシュが付いているURLと付いていないURLで同じコンテンツを表示するのが一般的です

引用: URL 末尾のスラッシュについて | Google検索セントラル

結論: 末尾スラッシュは「あり」で統一する

いろいろと説明してきましたが、末尾スラッシュに関して下記の対応にしておきましょう！

「末尾スラッシュなし」でも「末尾スラッシュあり」にリダイレクトされる場合は、

無駄にリダイレクトさせないためにも「末尾スラッシュあり」で統一しましょう。

仮に指定したいファイルがあり、末尾スラッシュを意図的になしにする場合は、

URLの最後に拡張子(.htmlや.php)をつけておきましょう。

拡張子をつける場合は、https://shungoblog.com/profile/index.phpのような感じです！

しゅんご

末尾スラッシュをありで統一して、

重複コンテンツの回避・ユーザービリティ向上しましょう！

The post URL末尾の「/（トレイリングスラッシュ）」のあり・なしの違いは？ 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.

「インデックス登録というのは聞いたことあるけど、詳しくは知らない…」

「ブログ記事をインデックス登録をしたいけど、やりかたがわからない…」

という方はいるのではないでしょうか？

この記事では、インデックス登録について詳しく知らない方へ向けて

をご紹介していきます！

しゅんご

一生懸命書いたブログをGoogleの検索結果に表示するために、

非常に重要なことなのでぜひ読んでみてください！

インデックス登録とは？

インデックス登録とは、Webサイトの情報を収集して、検索エンジン(データベース)に登録されることです。

もう少しわかりやすく言うと、インデックス登録することで、Webページが表示されやすくなります！

インデックス(index)とは、索引という意味で、本の見出し・目次などを指します。

本に目次や見出しがないと、知りたいことを探すのが大変ですよね？

Webサイトも本と同じで、インデックスがあることで検索されやすくなります。

「クローラー」という検索エンジンのロボットがWebページを発見(クロール)して、

発見したWebページをデータベースを保存する、というのがインデックス登録される具体的な流れです。

インデックス登録をいつリクエストすれば良いのか？

インデックス登録をしたほうが良いというのは理解できたと思います。

では、ブログ運営ではいつインデックス登録をリクエストすれば良いのでしょうか？

この2つの場合は、インデックス登録を行いましょう！！

しゅんご

記事作成時だけでなく、更新時も必ずリクエストしましょう！

更新時もリクエストしておくことで、より早くGoogleに更新内容を検知してもらえます！

インデックス登録をリクエストする3つの方法

1. URL検査ツールからリクエスト送信 (旧fetch as Google)

まずはGoogle Search ConsoleはURL検査ツールでリクエストする方法です。

Search Consoleを開いて、検索欄にインデックス登録したいURLを入力して検索します。

インデックス登録されていない場合は、「URLがGoogleに登録されていません」と表示されているので、

「インデックス登録をリクエスト」をクリックします。

これでリクエストは完了なので、反映されるまで待ちましょう！

Googleも公表していますが、URLが少ない場合はURL検査ツールからインデックス登録しましょう！

また、1日に10回くらいリクエストすると上限に達するので、複数回リクエストする場合は注意してください。

個々の URL のクロールをリクエストするには、URL 検査ツールを使用します。URL 検査ツールでインデックス登録をリクエストするには、Search Console プロパティの所有者またはフルユーザーであることが必要です。

なお、個々の URL の送信には上限があり、同じ URL に対して再クロールを何度もリクエストしても、早くクロールされることはありません。

引用: URL 検査ツールを使用する（URL が少ない場合）

2. サイトマップ送信

続いて、Google Search Consoleからサイトマップを送信する方法です。

Search Consoleの左サイドバーにある「サイトマップ」をクリックします。

新しいサイトマップの追加という項目あるので、

ご自身のサイトマップ(例: sitemap.xml)を入力して「送信」をクリックします。

これで完了です。

URLが多い場合はサイトマップを送信することでインデックス登録しましょう！

多数の URL が存在する場合は、サイトマップを送信します。サイトマップは、Google がサイト上の URL を検出するための重要な方法です。サイトを立ち上げたばかりの場合や、サイトの移転を最近行った場合に非常に有効な手段として活用できます。サイトマップには、代替言語バージョンや動画、画像、ニュース固有のページに関する追加のメタデータを含めることもできます。サイトマップを作成して送信する方法をご確認ください。

引用: サイトマップを送信する（一度に扱う URL が多い場合）

3. 内部リンクを貼る

3つ目の方法は内部リンクを貼るということです。

内部リンクとは、Webサイト内のページ同士を繋ぐリンクを指します。

例えばこの記事のリンクを他のブログ記事内に貼ることで、Googleのクローラーにこの記事を発見されやすくなります。

内部リンクを貼る際には、注意点があります。

それは、アンカーテキストの文言内容とリンク先のタイトルを合致させることです。

内部リンクのアンカーテキストもSEO対策となり、Googleに発見されやすくなるので、

WordPressでよくある下記のような「カードラベル」ではなく、アンカーテキストを使いましょう！

「SEO検定1級」を3週間で合格したオススメの勉強法！

「SEO検定1級」を短期間で合格するための効率的な勉強法を紹介！過去問題やテキストの活用方法など、具体的なステップを解説します。

shungoblog.com

インデックス登録状況を確認する2つの方法

インデックス登録状況を確認するにはいくつか方法がありますが、

下記の2つが簡単にインデックス登録状況を確認できる方法です。

1. URL検査ツール

1つ目はSearch ConsoleのURL検査ツールを使う方法です。

Search ConsoleのURL検査ツールで確認したいURLを検索します。

インデックスされている場合は「URLはGoogleに登録されています」と表示されます。

インデックスされていない場合は「URLがGoogleに登録されていません」と表示されます。

この場合はリクエストしましょう。

2. 「site:」で検索

2つ目はGoogle検索を使う方法です。

Google検索で「site:確認したいURL」を入力して検索するとインデックス状況を確認できます。

例えば本ブログの場合は「site:https://shungoblog.com」と入力します。

インデックスされている場合は該当記事が表示されます。

インデックスされていない場合は該当記事が見つからず表示されません。

まとめ

ブログ記事を作成・更新したときは、Googleにインデックス登録する必要があります。

今回ご紹介したインデックス登録する方法は下記の3つです。

しゅんご

インデックス登録されることでWebページが表示されやすくなるので、

忘れずにインデックス登録をしましょう！

The post ブログ記事をGoogleにインデックス登録する方法３選！！ 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.

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

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.

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

確認すべき設定

画像が表示されない原因は、画像を最適化してサイトを高速化するプラグイン「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.

「Cocoon設定 → モバイル」と「外観 → メニュー」を設定することでモバイル画面にヘッダーメニューを表示することができます。

この記事ではCocoonでモバイル画面にヘッダーメニューをご紹介します。

モバイルにヘッダメニューを表示するための設定

Cocoon設定

モバイルメニューを表示する

Cocoon設定のモバイルを開きます。

モバイルメニューの「ヘッダーモバイルボタン」にチェックを入れます。

するとモバイル画面にヘッダーメニューが表示されます。

表示のあり・なしの違いは下記の通りです。

ボタンを表示しない	ヘッダーモバイルボタン

外観 → メニュー

※ すでにヘッダーメニューを作成している方はこちらの設定は不要です。

Cocoonの設定だけだと「ホーム」のアイコンが表示されるだけなので、

ハンバーガーメニューが表示されるようにする必要があります。

ヘッダーメニューを作成

• 「外観」→「メニュー」→「新しいメニューを作成しましょう」をクリック
• メニュー名: 「ヘッダーメニュー」
• ヘッダーメニューにチェック
• 「メニューを作成」を押す

ヘッダーメニューを編集

左側からメニューに追加したいものを選択して、「メニューに追加」を押します。

すると右側にメニューをして表示されるものとして追加されます。

ここでは「カテゴリー(エンジニア・書籍・ブログ)」と「固定ページ(プロフィール)」を追加しました。

そして「メニューを保存」を押すと、モバイルでもメニューが表示されるようになります！

モバイル画面の表示オプション

こちらはモバイル画面の表示のオプションの設定になります。

ヘッダーメニューの表示とは関係ないので、興味ある方は参考にしてみてください。

モバイルボタンの固定表示

スクロールした際にヘッダーメニューを固定表示するかしないかの設定です。

固定表示する	固定表示しない

サイトヘッダーロゴを表示する

モバイルでヘッダーロゴを表示するかしないかの設定です。

本ブログの場合は「shungo blog」が重複するので表示なしにしています。

ロゴを表示する	ロゴを表示しない

モバイルボタン時コンテンツ下のサイドバーを表示

PC画面のときに右側にあるサイドバーの表示をコンテンツ下に表示するかしないかの設定です。

表示する	表示しない

The post 【Cocoon】モバイル画面にヘッダーメニューを表示する方法 first appeared on shungo blog.

行数の表示やハイライト表示はCocoonなどの設定でも簡単できますが、ファイル名の表示やコピーボタンの設置は少し設定が必要になります。

そんなときに「Highlighting Code Block」というプラグインを使用しましょう。

この記事では「Highlighting Code Block」についてご紹介します。

「Highlighting Code Block」でできること

Highlighting Code Blockと導入することで下記ができるようになります。

インストール方法

プラグインの追加画面で、「Highlighting Code Block」を検索します。

そして、「今すぐインストール」、「有効化」を押します。

使い方

Highlighting Code Blockでコードを表示する

試しにHTMLのソースコードを表示してみます。

Highlighting Code Blockのボタンをクリックして、HTMLを選択します。

すると、このようなコードを入力する欄が表示されます。

pタグを書くと、このように表示されます。

ファイル名の変更 

クライックエディタの場合、右上のファイル名を変更する箇所がないので、テキストにして変更する必要があります。

data-langの部分を表示したいファイル名にすることで、右上のタブの表示を変更できます。

詳細設定

詳細設定は「設定」→「HCB設定」からできます。

言語名の表示・行数の表示・コピーボタンの設置などはこちらから設定できます。

CocoonのJavaScript縮小化をONにする場合

Cocoonの高速化の設定で「JavaScript縮小化」をONにしている場合は、「Highlighting Code Block」がうまく機能しないことがあります。

そのため、Cocoonで「Highlighting Code Block」を使用するためには、縮小化しないファイルに「prism.js 」を指定する必要があります。

The post 【WordPress】ソースコードを見やすく表示する「Highlighting Code Block」 first appeared on shungo blog.