【プラグイン】pz-linkcardのカスタマイズ方法

2022年1月11日2023年1月9日

こんにちは！

今回は外部リンクをカード化するプラグインの『Pz-LinkCard』のカスタマイズ方法について書いてきます。

素のままでもいいですが、デザインがなんか一昔のサイトみたいと感じさせます。設定などをいじることができますが、コピペで使える追加CSSの解説をしていきます。

すごくシンプルのデザインとしています。
カスタマイズ方法は他にも紹介している方がいますが
ここまでシンプルなカスタマイズをしている方はいないのかなと思います。

過去にもカスタマイズを紹介していますが、プラグインを使わないやり方です。

前準備

・Pz-LinkCardのインストール

インストール方法は割愛します。
新規プラグインから『Pz-LinkCard』してインストールしてください。

ちなみにバージョンはVer.2.4.4.4となります。

カスタマイズ

①設定を開き、外部リンクのサムネイルの大きさを
『小サイズ』から『大サイズ』もしくは『そのままのサイズ』にしてください。
理由は後ほど。

②プラグインエディターで『Pz-LinkCard』のpz-linkcard/pz-linkcard.phpを開く

③HTMLタグ生成の914行目〜918行目を下記をコピペして貼り付けてください。
HTMLタグ生成時に<div class=”lkc-box”>を新たに生成しています。
理由に付きましては後ほど。

	$tag	=	$html_wrap_op.$html_a_op_all.'<div class="lkc-card">'.$domain_info.'<div class="lkc-content">'.$html_a_op.$html_thumbnail.'<div class="lkc-box"><div class="lkc-title"><div class="lkc-title-text">'.$title.'</div>'.$html_a_cl.$html_sns_title.'</div>'.$html_url1.'<div class="lkc-excerpt">'.$excerpt.'</div>'.$html_moretag.'</div></div><div class="clear"></div></div>'.$html_a_cl_all.$html_wrap_cl;
				break;
			case	2:
				$tag	=	$html_wrap_op.$html_a_op_all.'<div class="lkc-card"><div class="lkc-content">'.$html_a_op.$html_thumbnail.'<div class="lkc-box"><div class="lkc-title"><div class="lkc-title-text">'.$title.'</div>'.$html_a_cl.$html_sns_title.'</div>'.$html_url1.'<div class="lkc-excerpt">'.$excerpt.'</div>'.$html_moretag.'</div></div>'.$domain_info.'<div class="clear"></div></div>'.$html_a_cl_all.$html_wrap_cl;
				break;

④外観→カスタマイズ→追加CSSに下記をコピペ。
特に調整などはないですが、検証ツールで確認しながらお好みでカスタマイズをするのもありです。

/************************************
** リンクカードカスタマイズ
************************************/

.lkc-external-wrap {
  max-width: 100%;
  box-shadow: 4px 4px 0px #666;
  transition: 0.3s;
}

.lkc-external-wrap:hover {
  box-shadow: none;
  transform: translateY(4px);
  transition: 0.3s;
}

.lkc-content {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 10px 0
}

.lkc-thumbnail {
  width: 50%;
  max-width: none;
  max-height: none;
  float: none;
}

.lkc-box {
  width: 100%;
}

.lkc-thumbnail-img {
  object-fit: contain;
  width: 100%;
  height: auto;
}

.lkc-url {
  display: none;
}

.lkc-excerpt {
  padding: 20px 0 0;
}

.lkc-share {
  display: none;
}


/*スマホサイズ*/

@media (max-width: 767px) {
  .lkc-card {
    margin: 0;
  }
  .lkc-content {
    flex-direction: column;
    align-items: baseline;
    padding: 0;
  }
  .lkc-thumbnail {
    width: 100%;
    margin: 0;
  }
  .lkc-excerpt {
    display: none;
  }
  .lkc-thumbnail-img {
    object-fit: cover;
    max-height: 250px;
  }
  .lkc-title-text {
    padding: 15px 13px;
  }
}