灯台下暗し的なお話
文章がうまく書けなくても、ブログの体裁くらいは整えたい。普通の人間が普通の知識で、ぽいブログを作るためにあれこれ試してます。
WordPressに引っ越してからも、シーサーブログ時代からほとんど何も変えていなかった婿どの（immukodono）。
スポーツとかも真っ先に形から入るタイプなんですが、ブログはそのまま放置しておりますた。
「見た目がちゃんとしてるっぽいブログ」を目指して、
今回は『Pz-LinkCard』というWordPressのプラグインを入れてみたお話です。
自分のブログの過去記事とか、他のサイトを紹介するときに、
ブログカードを使ってると、ちゃんとしてるっぽいので導入したのですが、
何故かうまく表示されない(๑•́ω•̀)
先に、
本日の結論を言ってしまうと…
日本語ドメインのままでリンク貼っちゃダメですよー
という話が続きます。
前置きが長いので、本題を読みたい方は目次からどうぞ
ブログカードってどんなの？
こんなの
はてなブログ開発ブログ
オシャレなブログを書いている人が軒並み導入してるブログカード。
のリンク先は、
「はてなブログ」がブログカードを提供し始めた時の記事です（´▽｀）
ブログカードは【はてブカード】と言われるように、「はてなブログ」の代名詞のようになっていて、
デザインのシンプルさと、視覚的な分かりやすさで、ブロガー界隈の人気者になりました。
はてなブログ以外でもブログカードを導入したい！と、
様々な努力がなされて今日に至っているんですねぇ（´ω｀）
プラグインがなくても出来る
実は、
WordPressでも、記事にURLを書き込むだけでブログカードを表示する事が出来ます。
しかしWordPress謹製のブログカードは、デザインがモッサリしていて使いにくい。
どのくらいモッサリかというと、こんな感じです
いや、ちょっとデカ過ぎませんか？
そこで、
簡単にブログカードを導入できるプラグイン【Pz-LinkCard】を使ってみました！
Pz-LinkCardだーい好き
WordPress純正のブログカードの欠点
大きすぎるというものそうなんですが、
それよりも表示できるサイトが少ないという点が欠点ですね。
リンク先が同じWordPressのブログであっても、バージョンが低いと表示できない事もあり、
婿どののように、頭の中をすっからかんにして使いたい人には面倒です。
サイズもでかいし
表示されるサイズは、色々イジれば変えられるそうですが、
そこまでの時間をかける気はありません。
そこで、
余計な事をしなくても素晴らしいブログカードを作ってくれるプラグイン【Pz-LinkCard】は超オススメです！
Pz-LinkCard導入の手順
導入はとっても簡単！
婿どののブログよりも、制作者の｢ぽぽろん｣さんのサイト『ぽぽづれ 』をご覧になった方がいいと思います
ここぞとばかりにブログカードを使います 笑
まずはWordPressのプラグイン検索で【Pz-LinkCard】と入力＆インストールしてみてください
よっぽどこだわりがなければ、プリセットのカードの中から選べば大丈夫だと思いますよ。
本題のブログカードが表示されない件
さて、ようやく本題です。
現在は正常に表示されているブログカードですが、
はじめはうまく表示できませんでした( 一一)
厳密に言うと表示はされているのですが、
ブログ名や題名、アイキャッチ画像に説明文など、およそ必要なものすべてが書き出されない殺風景なブログカードになっていました。。。
Pz-LinkCardの設定画面で、ブログカードの設定をいじっても反映される気配すらありません。
なぜなぜどうして。
うまく表示出来ない原因を探る
そこで、同じような不具合の人がいないかGoogle先生に聞いてみました。
SSL化によって使えなくなる現象
サイトのセキュリティ向上のためにSSL化するのは時代の流れですが、そんなSSL化が原因と見られる不具合が発生している方が何人かいらっしゃいました。
こちらの『オオタの映画ブログ』さんの記事 を参考にさせて頂きました。
解決方法として挙げられているのが、
Pz-LinkCardの設定画面で、内部リンクの設定を変更するというもの。
簡単なのでやってみました
この設定変更で、ブログカードが表示されるようになったよ〜！
という人が、先ほどの『オオタの映画ブログ』 さん以外にもいらっしゃいました。
しかし、婿どののブログでは相変わらず題名などが表示されないままです。
振り出しに戻ってしまいました(´･д･)(･д･`)
パーマリンクの自動設定が不具合を引き起こす？
Google探検隊は更なる調査に出掛けます。
すると【Pz-LinkCard】とは直接関係ないながらも、プラグインなどによるパーマリンクの自動設定や変更が原因でブログカードが表示されない方が多数いらっしゃいました。
例えばこちらの『日野多磨工房ブログ』 さん。
パーマリンクとは、URLのことですね。
変更できるのはドメイン以下のスラッグの部分。
正直この記事の30%くらいしか理解できなかったんですが、
書き換えられたスラッグがなんらかの齟齬をおこしていて、ブログカード変換の際にうまく認識できていないようです。
婿どのも記事ごとに、記事の内容に沿ったスラッグに変更はするようにしています。
しかし、婿どののブログでは、パーマリンクの変更が影響を与えている様子はありませんでした。
うむむ、どうした事か…
しかしパーマリンクを眺めていた婿どのは、大事な事に気が付きます。
日本語ドメインってダメじゃない？
ブログカードを作成するのはとても簡単で、リンク先のURLを、
[blogcard url=”◯◯◯”]で囲うだけ。
婿どのは何も考えず、◯◯◯の中に自分のブログのURLをそのままコピペしていました。
https://婿どの.tokyo/wish/を入力してみると
やはりうまく表示されません。
試しに、他の日本語ドメインのサイトを表示してみます。
http://日本語.jpだとどうでしょう？
やはりうまく表示されませんね(´・ω・`)
つまり【Pz-LinkCard】でブログカードを作るときには、日本語ドメインでは正しく表示されないようです。
日本語ドメインは、対応しているブラウザが日本語の部分を「xn」で始まるPunycode(文字列変換用のアルゴリズム)で作成された文字列に変換して表示しています。
「婿どの.tokyo」だと、
『xn--p9jk9143a.tokyo/』となります。
変換したURLを入力してみると…
表示されました(˙︶˙)ﾉ”
ブログの冒頭に結論を述べちゃいましたけど、
え？何それ、そんな事に気づいてなかったの？
というレベルのお話でした。
ただ、拍子抜けするくらい灯台下暗しな事が分からず、延々と原因を探ってしまうこともありますよね。
他のサービスでも日本語ドメインを使う時は、注意が必要ですね！
誰かのヒントになれば幸いです(｡•ㅅ•｡)
日本語ドメインのまま使う方法はある？
では実際に日本語ドメインのリンクを貼りたいとき、どうしたら良いでしょうか？
Punycodeを変換してくれるサイト
一番気軽なのは、
punycodeを入力すれば英数字に変換してくれるサイトを利用することでしょうか( ´_ゝ`)
例えばこちら
ただ、いちいちブラウザを立ち上げるのが手間ですね(๑•̆૩•̆)
Punycodeを変換する関数を組み込む
そこで見つけたのが、
phpファイルをゴニョゴニョして、日本語ドメインを変換する関数を実装してしまおう！
という方法です
すごい工夫があるもんですね(゜_゜)
今の婿どのには、少し難しいお話なので、そのうちこの変換関数の実装にもチャレンジしていこうかと思います(´・ω・`)
ブログカードまとめ
- ブログカードがあるとオシャレ感
- 実装するならPz-Linkcardが楽ちん
- 日本語ドメインはうまく表示できないので注意ダゾ
- 日本語のままで表示する方法もありそうな予感
今回はブログカードの記事ということで、少しブログカードを多用しすぎたかもしれません( ´Д｀)=3
婿どのは、ブログカード、ブログカードと書きすぎて勝手にゲシュタルト崩壊していますよ、。、
次回からは減らしていきたいと思います(｡･Д･)ゞ
それでは！
