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

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

アフィリ王子

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

ネット王女

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

［keni-linkcard url=”https://www.silica97.com”］

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

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

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

秋田秀一

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

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

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

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

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

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

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

⇒　ShareHtml についてのサイト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

いい感じだと思います。

まとめ

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

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

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

スポンサードリンク