外部リンクがうまく表示できない!外部リンクもかわいいブログカードで表示したいよ~!それならPz-LinkCardと追加CSSでカスタマイズしちゃお!WordPressテーマ「JIN」の強みは、使いやすさとデザインの親しみやすさ。内部リンクを自動でブログカード化してくれる機能もとても便利です。ブログカードに惹かれてJINを選んだという声も聞くよ▼同サイト内のページであれば、JINではURLを記述するだけでこのように表示されます。※これは画像ですただし、これは内部リンクだけの機能。外部サイトのURLはブログカード化できず、そのままが表示されます。それでは味気ない!ので、この記事では外部リンクをJIN風ブログカードで表示するカスタマイズを紹介します。内部リンクと外部リンクのカードデザインを似せることで、違和感なくなじませることができます。プラグイン「Pz-LinkCard」導入済みの前提でお読みください。導入がまだの方は、ダッシュボードの「プラグイン>新規追加」でPz-LinkCardを検索してインストール、「有効」に設定しましょう。外部リンクもブログカード化したいPz-LinkCardを使ってみたけど満足できないCSSってむずかしそう...CSSに苦手意識がある方にもわかりやすく説明します。2021年12月17日スポンサーリンク設定のBEFORE→AFTERスマホの変化BEFOREまず、JINのデフォルトの状態は以下の通り。内部リンクについては、記事にURLを記載するだけでシンプルなデザインのブログカードになります。JINパワーありがたや~!内部カードはこのままでもいいですが、リンクだとわかるように少し変化をさせたいところ。外部リンクはカード表示にしたいです。この状態から、この記事で紹介する手順を行うと以下のようになります。AFTER内部カードは記事タイトルを青字にしたころでリンク感が増しました。両者の印象が近づき、見やすさも増しています。※「関連記事」の部分は「あわせて読みたい」にすることも可能です。パソコンの変化BEFORE改善したいのは以下3点です。スマホ同様、外部リンクはそのままURLが表示される内部リンクのカードで「あわせて読みたい」が上にずれているシンプルに見せたいので、記事詳細は非表示にしたい(これは好みかも)記事詳細の部分は、設定している場合は各記事の「decription」をが表示されます。私はさぼっているので記事の内容が表示されています。AFTER気になっていた点がクリアされ、こちらも印象を似せることができました!以下の手順で設定すれば、このようにカスタマイズ可能です。Pz-LinkCardのオリジナルデザインが存在しています。今回のカスタマイズではオリジナルデザインは不要なので、設定がオフになっていることを確認してください。」のチェックを外すステップ1│Pz-LinkCardの設定を調整するプラグイン「Pz-LinkCard」を導入したところからスタートです。インストール済みプラグインの一覧からPz-LinkCardを探し、「設定」を押すと、以下のような画面に移動します。設定が各タブに分かれているので、一つずつ案内しますね。私が変更した部分のみ記載しています。記載していない部分はそのままでいいと思いますが、お好みで変更してください。高さ:空白にする他の部分はそのままで問題ありません。(2021年12月時点)こちらのスクリーンショットも参考にしてください。「文字」タブタイトル文字のみ設定を変更します。タイトル色:#0a88ff(サイトの設定による)大きさ:14pt高さ:20pt桁数:100折り返さない:チェックなしタイトルの色はご自身のサイトに合う色を選んでください。リンクであることがわかるよう青系をお勧めします。私は「リンクの色」と同じにしています。リンクの色は以下の経路で確認できます。ダッシュボード>外観>カスタマイズ>追加CSS>カラー設定いろいろ試みたのですが、文字サイズをスマホとパソコンで別にすることはできないようでした。私は、訪問者が多いスマホでの見やすさを優先して14ptに設定しています。パソコンでは字が少し小さく感じるかも...ご自身でも確認の上、設定してください。続きを読むボタンはCSSで設定するのでここでは変更せずに次へ進みます。外部リンクの設定タブ枠線の色:#7eccd6(サイトの設定による)サムネイルの大きさ:そのままのサイズ付加情報:関連記事(ほかの言葉でもOK!)枠線の色は「あわせて読みたいボックス」の色と揃えるのがおすすめです。あわせて読みたいボックスの色は、以下の経路で確認ができます。付加情報はリンクカードの左上に表示される部分です。JINの内部リンクカードと揃えたい場合には「あわせて読みたい」にします。私は外部リンクは少し堅めに案内したかったので「関連記事」にしています。「内部リンク」「同ページのリンク」はPz-LinkCardを使用しないので設定も変更しません。「リンク先の検査」タブは初期設定のままにしておきます。実行:チェックありリンクカードボタンを追加:チェックなしクイックタグを追加:チェックなしここで「URL行を変換」にチェックを入れることで、記事にURLを記載するだけでカード表示されます。「外部リンクのみ」にチェックを入れることで、内部リンクはJINのブログカードで表示されるようになります。「変更を保存」を押せば、外部リンクも内部リンクに近い雰囲気で表示されているはずです。いえ、内部リンク、外部リンクとももう少し修正が必要なので、細かい調整はCSSで行います。内部リンクと外部リンクのカードデザインを寄せるため、CSSでデザインを調整します。CSSの編集が怖くてできない...という方は、すぐに修正できる追加CSSへの記述がおすすめです。私も追加CSSに記述しています。追加CSSへは以下の経路でアクセスできます。ダッシュボード>外観>カスタマイズ>追加CSSこの「追加CSS」の末尾に、これから紹介する3つのCSSをコピー&ペーストで追加してください。※CSSの編集はご自身の責任のもとに行ってください。display:none;}「/*」と「*/」に挟まれた部分はプログラムに影響を与えないのでそのままで大丈夫です。後で見返しても何をしているかわかるよう、私はそのまま記述しています。4行目の「color」は外部リンクのカードと揃えるのがベターなので、Pz-LinkCardの「文字」タブ設定と同じ色をおすすめします。9・10行目の処理は、Pz-LinkCardの「表示」タブで行った「抜粋文を表示する:チェックをはずす」と同義です。パソコン表示時のみの処理を追記パソコンでのみ、カードの右下に「この記事を読む>>」を表示させます。左上の「あわせて読みたい」の位置ずれもここで調整します。最後の一文は、外部カードと表示サイズが微妙に異なっていたので調節しています。96%;}}ステップ3│外部リンクのブログカードデザインを調整プラグイン「Pz-LinkCard」で概ね形ができた外部リンクも、最終調整を行います。隙間は私がこれがベストと思った値にしていますが、気になる部分があった場合はご自身で調整してください。left:10px;}}以上でカスタマイズは終了です。イラスト|note(表示が崩れている場合、JINもしくはWordpressのアップデートの影響を受けている可能性があります)SEOを意識するなら、テキストリンクを活用するのも手それらしい見栄えを意識すると、リンクカードはかっこよくて私は好きです。クリックされるかどうかは別問題。テキストだけのリンクの方がクリックしやすいというのはよく聞く話です。アイコンメーカーPicrewがおすすめな理由テキストリンクは上記のようなリンクです。「」の矢印は、記事編集画面の「ショートコード」からアイコン>二重矢印(右)を選択すれば表示できます。(色、サイズは任意で変更可能)ここまで説明していうのもおかしな話ですが、労力をかけてブログカードを設定するのでなく、こういった方法も検討してみるのは手だと思います。表示の違和感は、ブログへの信頼感に影響します。このカスタマイズがみなさんのブログのお役に立てていればうれしいです。このカスタマイズをするにあたって、やふさんの「人生の後半戦を楽しむブログ」の記事を参考にさせていただきました。人生の後半戦を楽しむブログ【朗報!】プラグインなしで外部カードが表示できるようになるかも!現在、JIN制作者のひつじさんが外部リンクのブログカード実装に取り組んでいただいているそうです。プラグインは使わないに越したことはないので、実装を楽しみに待ちましょう!!細やかアップデートをしてくださるひつじさんに、いつも大感謝です...!こちらなんですが、一部環境(Redirectionのプラグインを使っていて、それがブログカードURLとして使われている)でブログが表示されない状態になってしまうようです。ご期待いただいた中、ご不便をおかけして申し訳ありません。かわいいイラストが欲しいと思っても、イラストにはいろいろな権利がついてきます。出所のわからないイラストを使うのは危険。...WORDPRESSスポンサーリンクスポンサーリンク\ご依頼・相談お気軽に/企業様を中心に、性別年齢問わず幅広い方をターゲットにご依頼をいただいております。ご依頼・ご相談をいつでもお待ちしております。シーズンごとのスマホ待受けイラスト、オンライン会議背景を無償で配布しています。今年は海に行けそうもありません。島田あや老若男女、幅広い方に親しまれるゆるめのイラストを描いています。等ほか、noteコンテスト2回入賞など。イラストレーター島田あや。