スポンサーリンク

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

コアラ Cocoon
この記事は約5分で読めます。

はじめに

 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のブログカードに入れてみます。

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

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

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

URLエンコードを使う方法

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

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

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

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

%E3%83%8D%E3%82%BA%E3%83%9F%E3%83%A2%E3%83%81

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

https://ja.wikipedia.org/wiki/%E3%83%8D%E3%82%BA%E3%83%9F%E3%83%A2%E3%83%81

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

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

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

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

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

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

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

https://ja.wikipedia.org/wiki/%E3%83%8D%E3%82%BA%E3%83%9F%E3%83%A2%E3%83%81

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

https://ja.wikipedia.org/wiki/%E3%83%8D%E3%82%BA%E3%83%9F%E3%83%A2%E3%83%81

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

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

上述の方法で参照URLをエンコードしたものをブログカードに入力した場合に、ブログカード化されるが、右の説明欄にURLが表示される現象がでる場合は、Cocoon設定のキャッシュ削除から「ブログカードのキャッシュの削除」を行ってみてください。そうすれば、上のような現象を解消することができるかも知れません。

おわりに

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

  1. URLをエンコードしてくれるサイトを利用する場合、日本語表記の部分のみエンコードし、そのエンコードした文字列を元のURLの日本語表記の部分と入れ替えます。
  2. ブラウザーを使ってURLをエンコードする場合、Chrome、Firefoxを使っているのであれば、参照URLを表示させた後そのURLをコピーすれば、エンコードされたURLを得ることができます。
  3. Micorossft Edgeを使っている場合、参照URLを表示させた後そのURLをコピーしてもエンコードされたURLを得ることができないので、一旦、Chrome、FirefoxのURL欄に参照URLをコピーして、の方法でエンコードされたURLを得る必要があります。
  4. 上述の方法で得られたエンコードされた参照URLをブログカードに入力することにより、参照URLをブログカード化することができます。

 以上です。

コメント

タイトルとURLをコピーしました