賢威8リンクカードのカスタマイズ? もっと見映えよくする方法

賢威8のリンクカードは便利ですが・・・デザインが今一つかな? なんて思いがある人はいませんか?

アフィリ王子アフィリ王子

代表的なプラグイン『Pz-LinkCard』を使わなくても済むのがいいですね。
それよりも・・・もっといい方法があるのですか?
そのやり方を教えてください!


ネット王女ネット王女

もともと賢威のリンクカードは、次のような一行(賢威のショートコード)に
サイトアドレスを入力するだけですからほんと簡単です。

[keni-linkcard url=”https://www.silica97.com”]

※実際の(最初と最後の)括弧は小文字です。ここでは大文字にしてあります。ご注意ください。
小文字にすると下のようにちゃんとカードが表示されます。

下記リンクは『target=”_blank”』をアドレスの後に入れてありますから別ページで開きます。

矢印イメージ画像

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

秋田秀一秋田秀一

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

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

・【1】(準備編)あるサイトの『css』をコピペして、賢威の『外観』『テーマエディター』から『base.css』にコピペする
・【2】(別の)あるサイトで、リンクカードにしたいサイトアドレスを入力して html コードをコピーする
・【3】自分のサイト・ブログに貼りつける

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

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



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

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

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

⇒ ShareHtml についてのサイト

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

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

賢威8リンクカードのカスタマイズ

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

賢威8リンクカードのカスタマイズ

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

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

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

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

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

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

矢印イメージ画像

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

リンクカード

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

矢印イメージ画像

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

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

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

いい感じだと思います。

まとめ

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

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

【結論】
・ShareHtml の活用でリンクカードは、お手軽・簡単、かつシンプルなデザインに!
・最初、一回きりの css のカスタマイズでOK!
・あとは html コード出力のサイトから簡単コピペで完成!

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


スポンサードリンク