リンクカード・ブログカードのカスタマイズ。もっと見映えよくする方法!【賢威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テーマの)カスタマイズというよりはリンクカードのコード出力をしてくれるサイトのご案内です。

以下のような

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

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

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

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

 

スポンサードリンク



 

目次

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

賢威8カスタマイズ
まずはこちらのサイトからcss の元データをコピーさせてもらいます。
 

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

⇒ ShareHtml についてのサイト

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

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

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

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

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

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

【注意】
・ここでは賢威8のケースを取り上げています。
・他のWPテーマによっては、「外観」「カスタマイズ」「追加css」といったところにコピペする必要がある場合もあります。
・いずれにしても最初1回だけのコピペなのでぜひ試してみてください。

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

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

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

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

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

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

矢印イメージ画像

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

リンクカード

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

矢印イメージ画像

 

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

賢威カスタマイズ
お目当ての記事投稿ページに「Ctrl+V」でコピペしてください。完成です。

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

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

【アドバイス】
・リンクを新しくタブで開く時には target=”_blank” というコードを入力してください。
・htmlコードをコピペした後で・・・
・「アドレスと style=”text・・・」の間でも構いませんし、いちばん最後 「”>」の間でも構いません。

 

まとめ

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

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

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

 

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

 

スポンサードリンク



 

よかったらシェアしてね!

この記事を書いた人

秋田秀一と申します。銀行に31年勤務して定年退職後、二足の草鞋を履いています。副業・起業・借金(資金調達と返済)についてお手伝いできましたらうれしい限りです。⇒ プロフィール

目次
閉じる