「Pz-LinkCard」で内部・外部リンクをブログカード形式で別タブ表示

投稿日:2018年10月3日

長らく続けてきたブログのカスタマイズも、とうとう終盤へと差し掛かりました。

今回行なうカスタマイズは、「ブログカード」です。
ブログカードについては、実は2月に書いた記事『「最大行表示エディター」を無効化、AFFINGERブログカード、エラー修正等』の中で一度触れてるんですよね。

この時は私が現在も使用し続けている WordPressテーマ『AFFINGER4』がデフォルトで備えている「ブログ風カード」機能が、内部リンク同タブでしか開くことができない点に言及し、これを別タブで開く方法を模索しました。

……そして、私にはどうにもできず諦めました(´;д;`)
 

この時点では「AFFINGER4のアプデ待ち」とか言って話を締めたんですが、あれから月日は経ちまくり、今やもう10月……

毎月あった AFFINGER4 のアップデートは止まり、予想通りに『AFFINGER5』が発売。
こうなると旧バージョンとなってしまった AFFINGER4 のブログ風カード機能のバージョンアップももはや望めません。
 

まぁこれ自体はだいぶ前から分かっていたことですし、それでも AFFINGER5 ではアップデートも続いているしで、私もいつかは AFFINGER5 に乗り換えることになるんかなぁ~、なんて漠然と思っていたりもするので、そん時にでもブログカード機能が強化されていてくれればいいかなー、くらいに楽観視していたんですよね。
 

ところがだ! 前回のブログカスタマイズ『サイト表示速度の高速化』にて AFFINGER4 で使えるキャッシュプラグインを選定するにあたり、公式サイトを見て回っていたところ、「ブログカード外部URL対応プラグイン」という AFFINGER5用有料プラグインが販売されていたことを知りました。

ブログ風カードの機能強化版が有料販売されたということは、当然今後 AFFINGER系テーマでのブログカード機能の無料アップデートが行なわれることは無くなったと見ていいでしょう。
でないと有料版を購入したユーザーが納得いきませんからね。

 

さて、導入が長くなってしまいましたが、まあそんなこんなで AFFINGER4 の標準機能だけではブログカードを別タブで表示することはもはや不可能と判断し、手前で対処する他なくなったという訳です。
 

プラグイン「Pz-LinkCard」

それではまずは情報収集から。
検索かけてみると、どうやらほぼ1択のようですね。
「Pz-LinkCard」という日本製(!)のプラグイン。
 

このプラグインで出来るのは、内部リンク別タブ表示だけでなく、外部リンクもブログカード形式で表示することができるようです!

外部リンクにも同タブ・別タブ表示を選択できるみたいですが、AFFINGER4 には外部リンクを一括で別タブで開く機能があり、私もそれを有効化しているので、ここは別タブの1択でしょう。
 

Pz-LinkCard をインストールし設定画面を見てみると、どうやら別タブで開くという選択は、内部リンク・外部リンクそれぞれに一括して設定することしかできないようです。

私の理想としては、内部リンクにも別タブで開きたい場合と同タブで開きたい場合とがあるので、できれば各リンク単位で使い分けられたら良いなと思っていたので、ここだけはちょっと残念かな。
 

なので私は、AFFINGER4 の内部リンクではこれまで通り同タブで開き、Pz-LinkCard での内部リンクは別タブで開くように設定することで、2種類のブログカード機能を併用して内部リンクの別タブ・同タブ表示を切り替えることにしました。 我ながら名案なんじゃないかな!

これにより1つの記事内に複数のブログカードが混在する状態となってしまうので、この2種類のブログカードのデザインをできる限り合わせてみようと思います。
AFFINGER の方はデザインをいじれないので、Pz-LinkCard をカスタマイズして AFFINGER に寄せていく感じですね。

 

では Pz-LinkCard の設定を自分好みにいじっていく訳なんですが、ちょっと設定画面で分かりにくい箇所が2点ほどあったので、そこだけメモっておきます。

1つ目は「続きを読むボタン」の設定法。
これは該当の設定項目を[なし]から好きな形状に選択し変えるだけでは表示されません。

上記に加えて、外部・内部リンクの各設定項目にある「続きを読むボタンの文字」の欄に表示させるテキストを入力しておかないとブログカード上には何も表示されませんでした。
 

2つ目は「文字の設定」項目にある[桁数]の入力欄。
ここは Pz-LinkCard公式サイトで説明されている通り、「省略されるまでの文字数」を表しており、抜粋文の桁数はデフォルトでは250文字となっています。

AFFINGER4 の抜粋文の表示数はデフォルトでは100文字となっていますので、これと比較するとえらく多いように感じましたが、Pz-LinkCard の[桁数]は半角で1文字と数えるようです。 つまり桁数250は全角だと125文字までってことですね。

対して AFFINGER4 の方は半角・全角の区別無く1文字で1とカウントされています。
このカウント数の違いで若干戸惑いました。 これはまぁ AFFINGER使いの人に限った話でしょうけどね。
 

設定画面についてもう1つ。 これは注意点ではないんですが、自分で CSS を書き加える場合、「追加するスタイルシート」の欄にコードを直書きするだけで反映されます。

FTP から CSSファイルを編集する手間が省けるので、これはかなり便利ですね。
私の CSSファイルとかけっこうゴチャゴチャしてきて手出すのが億劫だったので(;´ェ`)

 

ブログカード表示テスト

そんじゃー設定も完了したのでいよいよ Pz-LinkCard を使ってみましょうか。

……の前に、まずは AFFINGER4 のブログ風カードから。
これはショートコードに ‘記事ID’ を入力することでブログカードとなるのですが、この記事ID を確認するためにいちいち記事一覧ページまで戻らないといけないというのが大変不便ですね。

↓が AFFINGERブログカード。 以前 AFFINGER4 のブログカードについて書いた記事への内部リンクです。

「最大行表示エディター」オフ
「最大行表示エディター」を無効化、AFFINGERブログカード、エラー修正等

今回もサイト完成に向けたカスタマイズの諸々の作業をしていきます。   プラグイン『Preserve Editor Scroll Position』 まずはビジュアルエディター関連。 記事執筆画面のこと ...

続きを見る

AFFINGER4 での内部リンクは、同タブでしか開けないため、ページ移動ということになります。

今上記リンクをクリックした方はこの記事の続きを読むためには移動先でブラウザバックしないといけないはずです。
……クソめんどくさいですよね? 私はそれが嫌だったので今回のカスタマイズをするに至ったという訳です。
 

それでは今度こそ Pz-LinkCard のブログカードを。
こちらはリンク先のURL を張るだけでブログカードになってくれます! 超便利!!

↓が Pz-LinkCard の内部リンク。 我が『ガンプラ気分(仮)』 唯一のガンプラレビュー記事です(笑)

 HG(ハイグレード) 『エールストライクガンダム』 の素組みレビューです。●センサー部にハイキューパーツ製「センサー用偏光シール ミラージュ...

設定を変更したことにより、内部リンクですが別タブで開くようになったはずです。

ブログカードのデザインも、1px単位で調整したので AFFINGER4 のデザインにそこそこ似せられたんじゃないでしょうか。
最上部のサイト名・URL はあった方が便利だと思ったので敢えて消さずに残しました。
 

そうそう、デザイン変更を微調整するために何度も表示確認をしたわけですが、最初なんにも見た目が変わらなくて焦ったんですよ。

今までプラグイン入れてこんなこと無かったのに何で急に?
と思ったんですがね、思い当たる節はすぐに見つかりましたよ。 前回導入したキャッシュですね、間違いなく。

キャッシュ関連の参考サイトを回っていた時に見つけた印象深い言葉に、
不具合が起きたときはまずキャッシュを疑え
というものがありましてね、まさにその通りだと痛感しましたね(^^;
 

では最後に今までは出来なかった外部リンクのブログカードを作ってみましょうかね。

↓が Pz-LinkCard の外部リンク。 リンク先はみんな大好き!プレミアムバンダイ!!

こどもから大人まで楽しめるバンダイ公式通販・ショッピングサイト【プレミアムバンダイ】。人気キャラクターのフィギュアやファッションアイテム...

外部リンクはブログカードでもテキストリンクでも全て別タブで開くようにしています。

なんか Pz-LinkCard ではリンク張ったことを相手に伝える?機能みたいのがあるっぽいので、個人サイトでは迷惑になるかもと思い、企業サイトを選んでみました。
 

んでプレバンのリンク張ってまた表示確認のためにキャッシュ消してリロードして……と何度も繰り返してたんですが、ちょくちょくサムネイルが404表示になるんですよね。 特にキャッシュ削除した直後

しばらくすれば勝手に元に戻るし、サムネが404表示だからといってリンク先に繋がらないといったわけでもないようなので、とりあえずはこのままでいいかなぁ……?

 

おわりに

んじゃ、今回のブログカスタマイズはこの辺で。
最近の記事に比べればかなーり短くまとめられましたね。

あ、そうそう、「Plugin Load Filter」は[Page Type]フィルタで(今のところ)問題無く動作しています。
 

スクショ1枚も使わずただ書きなぐった感が無きにしも非ずですが、とにかくさっさと書き終わして先に進みたかったんですよね。

というのも、冒頭でも書きましたが、1年半以上に渡り長らく続けてきたサイト開設準備が今回を以ってほぼ完了したのですよ!!

まだちょっとしたカスタマイズは残ってはいるものの、次回の記事で本運営開始のご挨拶となると思います。

……たぶん

-ウェブサイト作成

Copyright© ガンプラ気分 , 2019 All Rights Reserved.