秋田です。
今回はリンクカード・ブログカードカスタマイズの話です。
※代表でWPテーマとして賢威を取り上げていますが・・・他のWPテーマでも適応=カスタマイズ可能です。
賢威8のリンクカードは便利ですが・・・デザインが今一つかな? なんて思いがある人はいませんか?
[st-kaiwa2]代表的なプラグイン「Pz-LinkCard」を使わなくても済むのがいいですね。
それよりも・・・もっといい方法があるのですか?
あるとしたら・・・そのやり方を教えてください![/st-kaiwa2]
[st-kaiwa3 r]もともと賢威のリンクカードは、次のような一行(賢威のショートコード)にサイトアドレスを入力するだけですからほんとは簡単です。
[keni-linkcard url=”https://www.silica97.com”]
[/st-kaiwa3]
※実際にはリンクカードは表示されないようになっています。
ただし・・・
このリンクカードでの表示が下図のような感じだともっといいのになぁと思ったりしませんか?
マウス・ホバーで色が変わります。
シリカ水イノチの水の公式通販サイト。シリカ含有量97mg/Lの霧島の天然水。
シリカ水イノチの水プレミアムは霧島の地下500mから採水される天然地下水で日本国内最高水準の97,g/Lというシリカ含有量です。全額返金保証付で安心してお求めいただけます。
[st-kaiwa1]実は・・・上のリンクカードは簡単コピペで作成できます。
あるサイトに行って、アドレスを入力するだけです。あとは「htmlコード」を出力してもらうだけです。[/st-kaiwa1]
今回は、(賢威8・その他WPテーマの)カスタマイズというよりはリンクカードのコード出力をしてくれるサイトのご案内です。
以下のような
【2】(別の)あるサイトで、リンクカードにしたいサイトアドレスを入力して html コードをコピーする
【3】自分のサイト・ブログに貼りつける
3つのステップで完成します。(最初の css のコピペは一回だけの準備です)
あとは、記事作成の時には【2】【3】の繰り返しです。
簡単ですよね、コピペするだけですから。
ではそのやり方を解説します。
スポンサードリンク
賢威の base.css をカスタマイズする(準備編)・・・ステップ【1】
まずはこちらのサイトからcss の元データをコピーさせてもらいます。
リンクカードカスタマイズの元データをコピーする
このサイトのトップページ中ほどに、「new-sharehtml.css」というcss の元データがありますのでコピペさせてもらってください。
(そのままコピーするだけで大丈夫です)
コピペした css のコードを賢威8の base.css のいちばん最後にペーストする
WPの管理画面から「外観」「テーマエディター」「base.css」を開いてください。
いちばん最後の行に、下図のようにコピペするだけで完了です。
左下にある「ファイルを更新」を忘れずにクリックしてください。
・ここでは賢威8のケースを取り上げています。
・他のWPテーマによっては、「外観」「カスタマイズ」「追加css」といったところにコピペする必要がある場合もあります。
・いずれにしても最初1回だけのコピペなのでぜひ試してみてください。
※気に入らなかったら・・・実際の記事作成の時に使わないだけの話です。
※cssはそのままにしておいても大丈夫ですから。
一度ここまで設定しておけば、あとは次のステップ【2】【3】を繰り返すだけです。
html コードを出力してくれるサイト・・・【2】
次は html コードを出力してくれるサイトをご案内します。
こちらです。(ブックマークしておくといいですね)
トップページにお目当てのサイトアドレスを入力するだけで完了です。
次のような感じで出力してくれます。ほんと、ありがたいです。
「# HTML コード」のところにマウスカーソルを移動して「Ctrl+A」で全範囲指定 ⇒ 「Ctrl+C」でコピーします。
記事入力の画面にコピペするだけで完成!・・・【3】
お目当ての記事投稿ページに「Ctrl+V」でコピペしてください。完成です。
リンクカードを再掲します。
こんな感じでの出来あがりです。
シリカ水イノチの水の公式通販サイト。シリカ含有量97mg/Lの霧島の天然水。
シリカ水イノチの水プレミアムは霧島の地下500mから採水される天然地下水で日本国内最高水準の97mg/Lというシリカ含有量です。全額返金保証付で安心してお求めいただけます。
どうでしょうか。
いい感じだと思います。
・リンクを新しくタブで開く時には target=”_blank” というコードを入力してください。
・htmlコードをコピペした後で・・・
・「アドレスと style=”text・・・」の間でも構いませんし、いちばん最後 「”>」の間でも構いません。
まとめ
プラグイン不要でお手軽・簡単な賢威8のリンクカードですけど、デザイン面での難点を気にする人へのカスタマイズというか、新しいやり方のご案内でした。
シンプルなリンクカードでいい感じだと思います。
ぜひ、興味のある方はご活用ください。
・ShareHtml の活用でリンクカードは、お手軽・簡単、かつシンプルなデザインに!
・最初、一回きりの css のカスタマイズでOK!
・あとは html コード出力のサイトから簡単コピペで完成!
ここまで本当にありがとうございました。
スポンサードリンク