リンクカード・ブログカードのカスタマイズ。もっと見映えよくする方法！【賢威8その他WPテーマ】

秋田です。

今回はリンクカード・ブログカードカスタマイズの話です。

※代表でWPテーマとして賢威を取り上げていますが・・・他のWPテーマでも適応＝カスタマイズ可能です。
賢威8のリンクカードは便利ですが・・・デザインが今一つかな？ なんて思いがある人はいませんか？

[st-kaiwa2]代表的なプラグイン「Pz-LinkCard」を使わなくても済むのがいいですね。
それよりも・・・もっといい方法があるのですか？
あるとしたら・・・そのやり方を教えてください！[/st-kaiwa2]

[st-kaiwa3 r]もともと賢威のリンクカードは、次のような一行（賢威のショートコード）にサイトアドレスを入力するだけですからほんとは簡単です。
［keni-linkcard url=”https://www.silica97.com”］
[/st-kaiwa3]

※実際にはリンクカードは表示されないようになっています。

ただし・・・

このリンクカードでの表示が下図のような感じだともっといいのになぁと思ったりしませんか？
マウス・ホバーで色が変わります。

[st-kaiwa1]実は・・・上のリンクカードは簡単コピペで作成できます。
あるサイトに行って、アドレスを入力するだけです。あとは「htmlコード」を出力してもらうだけです。[/st-kaiwa1]

今回は、（賢威8・その他WPテーマの）カスタマイズというよりはリンクカードのコード出力をしてくれるサイトのご案内です。

以下のような

3つのステップで完成します。（最初の css のコピペは一回だけの準備です）

あとは、記事作成の時には【2】【3】の繰り返しです。
簡単ですよね、コピペするだけですから。

ではそのやり方を解説します。

スポンサードリンク

賢威の base.css をカスタマイズする（準備編）・・・ステップ【1】

まずはこちらのサイトからcss の元データをコピーさせてもらいます。
 

リンクカードカスタマイズの元データをコピーする

⇒　ShareHtml についてのサイト

このサイトのトップページ中ほどに、「new-sharehtml.css」というcss の元データがありますのでコピペさせてもらってください。
（そのままコピーするだけで大丈夫です）
 

コピペした css のコードを賢威8の base.css のいちばん最後にペーストする

WPの管理画面から「外観」「テーマエディター」「base.css」を開いてください。
いちばん最後の行に、下図のようにコピペするだけで完了です。

左下にある「ファイルを更新」を忘れずにクリックしてください。

※気に入らなかったら・・・実際の記事作成の時に使わないだけの話です。
※cssはそのままにしておいても大丈夫ですから。

一度ここまで設定しておけば、あとは次のステップ【2】【3】を繰り返すだけです。
 

html コードを出力してくれるサイト・・・【2】

次は html コードを出力してくれるサイトをご案内します。
こちらです。（ブックマークしておくといいですね）

⇒　より美しいHTMLをシェアしよう

トップページにお目当てのサイトアドレスを入力するだけで完了です。

次のような感じで出力してくれます。ほんと、ありがたいです。

「# HTML コード」のところにマウスカーソルを移動して「Ctrl＋A」で全範囲指定 ⇒ 「Ctrl＋C」でコピーします。

記事入力の画面にコピペするだけで完成！・・・【3】

お目当ての記事投稿ページに「Ctrl＋V」でコピペしてください。完成です。

リンクカードを再掲します。
こんな感じでの出来あがりです。

どうでしょうか。
いい感じだと思います。

まとめ

プラグイン不要でお手軽・簡単な賢威8のリンクカードですけど、デザイン面での難点を気にする人へのカスタマイズというか、新しいやり方のご案内でした。

シンプルなリンクカードでいい感じだと思います。
ぜひ、興味のある方はご活用ください。

ここまで本当にありがとうございました。

スポンサードリンク