Cocoonのブログカードの参照URLに日本語表記が混じっていた場合の対処方法｜初心者のあなたもチャレンジしてみよう！

はじめに

　Cocoonのブログカードは大変便利に使わせていただいています。Cocoonのテーマを作成された「わいひら」さんには、大変感謝しています。

　さて、ブログ記事を書いていて、ある参照URLにURLの一部に日本語表記（花のWikipediaには、URLの最後に日本語のカタカナで花名が入ることが多い）がされているのをたまーに見ることがあります。それをブログカードでブログカード化しようとした際に気が付いたことですが、うまくブログカード化されなかったのです。

　そこで、Cocoonフォーラムに質問してみました。「わいひら」さん、「リフィトリー」さんよりその対処法について回答を頂きました。お二人には大変感謝を申し上げます。

　今回の記事は、Cocoonのブログカードの参照URLに日本語表記が入っていた場合の対処法をまとめましたので、それを紹介します。私と同じ悩みをお持ちの方に少しでもお役に立てればと思います。

　なお、私のパソコン環境はWindows10で、ブラウザーは、Micorossft Edge、Chrome、Firefoxなどを使い分けています。ブログの記事などを書く場合のブラウザーはMicorossft Edgeを使っています。

　また、本題に入る前に、参照URLに植物のネズミモチのWikipediaのURLを使って、説明していきます。そのURLは以下の通りです。

https://ja.wikipedia.org/wiki/ネズミモチ

これを、Cocoonのブログカードに入れてみます。

プレビューしても、URLがそのまま表示されるのみです。これはCocoonブログカードの仕様になっているとのことです。（「わいひら」さんより）

　それでは、本題に入ります。

URLエンコードを使う方法

　この方法は、「わいひら」さんより回答いただいた方法です。

　先ず、URLをエンコードできるサイトに移動します。次をクリックして下さい。

　下の画面で文字コードが「UTF-8」であることを確認して下さい。デフォルトでは、UTF-8の文字コードになっているはずです。

　左の「URLエンコードしたい文字列を入力して下さい。」のところに、「ネズミモチ」と入力します。エンコードボタンをクリックします。右に「ネズミモチ」をエンコードした結果（緑で囲んだ部分）が表示されます。その結果を以下に示します。

　さらに、URLの日本語表記のネズミモチの部分を上記の文字列に置き換えます。

　上の参照URLをブログカードに入れます。結果が下の通りとなります。

ブラウザーのURL欄からエンコードしたURLをコピーして使う方法

　この方法は、リフィトリーさんによって回答いただいた方法です。

　これは、ブラウザーによって違ってくる可能性があります。参照URLを表示させた後、そのURLをコピーした時にURLがエンコードされているかどうか、Micorossft Edge、Chrome、Firefoxの3つのブラウザーで確かめてみました。

　Micorossft Edgeの場合、下のようにエンコードされません。

　Chromeの場合、下のようにエンコードされます。

　Firefoxの場合、下のようにエンコードされます。

　したがって、ブラウザーでMicorossft Edgeを使っている方は、参照URLを他のブラウザーのChrome、FirefoxのURL欄にコピーして、表示させた後そのURLを再度コピーすれば、参照URLをエンコードしたアドレスを得ることができます。

　このエンコードされたURLをブログカードに入れれば、次のようになります。

おわりに

　ブログカードを使う際にURLに日本語表記が混じっている場合の対処方法について調べた結果、次のようにまとめることができます。

　以上です。