※この記事のリンクは、移行後なので、一部脳内補完して読んでいただければと。
WordPressのブログを見ていると、よく下記に似たリンク付きのカードをみたことはないですか？
これはブロクカードと呼ばれるもので、URL先のサムネイルやタイトルをカード化して表示したものです。
文字だけのリンクも個人的には好きですが、画像つきのほうがページ開いてすぐ帰る直帰率が減るみたい。
今回はそんな外部リンクを表示するブログカードについて、色々と綴っていきます。
JINのブログカードについて
JINの場合だと、内部リンク（サイト内）はURLをビジュアルテキストにコピペすれば表示することが可能です。
JINのテキストエディターは注意が必要。
注意！
最新wordpressエディター「Gutenberg」のように<!-- wp:paragraph -->をテキストエディターに記載しているとブログカードが表示されない不具合があるみたい…
そして、外部リンク（サイト外）はURLを記載しても表示実装はまだ… オレ「 困った〜」 ハトさん「そこでこのプラグイン！」
こんな外部リンクにしたい！
WordPressプラグイン「Pz-LinkCard」外部リンクをブログカードで色々なパターンで表示してくれる優れもの。下記リンクは製作者様ページ。[blogcard url="https://popozure.info/20180805/13114"] ですが、初期状態の場合は、抜粋文なども表示される仕様。
左ききのエレンの外部リンク。
そこで、普段から昼の休憩中に見ているnote風のような外部リンクはできないかと考えました。+Twitterの外部リンクも合わせたいよくばりさん。
犬山たまきと天開司のコラボ配信外部リンク。
オレ「好きな漫画とよく見るvtuberさん。布教。」
Pz-LinkCardとCSSの設定！
オレの設定は以下の通り。
- Pzカード設定 基本の設定▷簡単書式を「なし」に設定
- 表示の設定▷外観設定内のサイト情報▷ホバー時に灰色にするにチェック
WordPressダッシュボード▷外観カスタマイズ追加CSS設定
[box04 title="注意再び"]最新のpz-linkとwordpressは相性が悪いかも？私はClassic Editorというプラグインを使用して作業しているのですが、
なぜか、<!-- wp:paragraph -->投稿内容<!-- /wp:paragraph -->という形でテキストエディターに記載しないとカードに空白<p>タグが入る不具合が出ました…
ハトさん「最新更新にて、JINの空白にも対応しているみたいだよ」
Pz-LinkCard外部リンクCSS
/pzlink-サイト名の横幅、文字高さと位置、余白/
.lkc-info{
width:250px;
position:relative;
top:95px;
left:210px;
line-height:15px;
text-overflow: ellipsis;
}
/サムネ画像とファビコン高さ/
.linkcard img{
width: 50vw;
height: calc(50vw *0.75);
}
.lkc-favicon{
width:16px !important;
height: 16px !important;
}
.lkc-thumbnail{
max-width:30% ;
margin: 0px 10px 0px 0px;
}
.lkc-domain {
width:10px;
}
/説明文とURLとSNSシェア数を削除/
.lkc-excerpt {
display: none ;
}
.lkc-url{
display: none ;
}
.lkc-sns-hb{
display: none ;
}
.lkc-sns-tw {
display: none ;
}
.lkc-sns-gp {
display: none ;
}
.lkc-sns-po{
display: none ;
}
/カード余白調整/
.lkc-card {
margin-top: -16px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
/タイトルの文字太さと折返し…表示/
div.lkc-title-text{
margin-top: 10px;
font-size: 16px;
font-weight: 500;
}
/中央寄せ、枠の最大幅、枠角を丸くする、、枠下に３２ｐｘ余白をつける調整/
.lkc-external-wrap{
margin: 0 auto;
max-width: 620px;
border-radius:8px;
border-color:#F2F2F2;
box-shadow:5px 5px 5px 5px #F2F2F2;
margin-bottom:32px;
overflow:hidden;
}
.lkc-content{
margin-top: 0px;
border-radius:8px;
}
/「続きを読む」ボタン追加/
.lkc-external-wrap:after {
position: absolute;
content:'read more \e910';
font-family: 'jin-icons';
font-weight: bold;
right:12px;
bottom:8px;
padding:5px 20px;
background:#ffb400;
color:#fff;
font-size: .8em;
border-radius:2px;
}
/ホバー時、アンダーライン無効/
.lkc-title-text:hover {
text-decoration: none;
}
Pz-LinkCard内部リンクCSS
/Pz-LinkCard内部リンク設定/
div.lkc-date {
display: none!important;
}
.lkc-content{
background-color:#fff;
}
.lkc-internal-wrap{
margin: 0 auto;
max-width: 620px;
border-radius:8px;
border-color:#F2F2F2;
box-shadow:5px 5px 5px 5px #F2F2F2;
margin-bottom:32px;
overflow:hidden;
}
.lkc-internal-wrap:after {
position: absolute;
content:'read more \e910';
font-family: 'jin-icons';
font-weight: bold;
right:12px;
bottom:8px;
padding:5px 20px;
background:#ffb400;
color:#fff;
font-size: .8em;
border-radius:2px;
}
Pz-LinkCard-スマホレスポンシブCSS
/ここからタブレット・スマホ対応/
@media screen and (max-width: 1024px) {
.lkc-info {
margin-left: -25px;
}
}
@media screen and (max-width: 480px) {
.lkc-external-wrap{
margin: 0 auto;
width:280px;
box-shadow:3px 3px 3px 3px #F2F2F2;}
.lkc-external-wrap:after {
display: none;
}
.lkc-card {
margin-top: -15.5px;
}
.lkc-favicon{
width:16px ;
height: 16px ;
}
.lkc-domain{
font-size:11px;
}
.lkc-info{
width:150px;
top:99px;
left:150px;
}
.lkc-thumbnail{
max-width: 120px;
}
div .lkc-title-text {
font-size: 13.5px;
line-height: 21px;
height:60px;
max-width:200px;
}
.lkc-internal-wrap, .lkc-external-wrap, .lkc-this-wrap{
margin-left:-5px;
width:280px;
box-shadow:3px 3px 3px 3px #F2F2F2;}
.lkc-internal-wrap:after {
display: none!important;
}
}/タグ閉じる***/
もし、PC表示での「続きを読むボタン」が不要の場合は、.lkc-external-wrap:after { }または.lkc-internal-wrap:after {}の箇所に「display: none!important;」を挿入してください。
ちなみにJINでは、標準でシンタックスハイライターというCSSをハイライト表示する機能がついています。
オレ「overflowの意味は、こぼれる、あふれる。」
ハトさん「CSS豆鉄砲の嵐……」
[http://[blogcard url="jin-theme.com]
まとめ
ブロクカードがあることで、より充実してPV数も増える記事になるはず! Pz-LinkCardはリンク切れのサイトを通知してくれるなどの機能もあるので便利！ですが自分なりの課題も見えてきた……
- JINのようにサムネイルへカーソルをあわせた時の拡大アニメーションも導入したかった。後日やりたいぜ。
- 希望としては、サムネイル画像を初期段階でTwitter・note仕様などできたらありがたい。
- まだまだcss勉強中なので不備があるかも知れません、予めご了承ください。
オレ「人柱の如く、色んなプラグインを試そう〜」
