当ブログでは、記事内のリンクに【fontawesome】を使って
アイコンを自動的に付加するようにしている。

[表示するアイコン]
  内部リンク用    外部リンク用

今回、Twitterカードみたいに、リンク先の概要とサムネイルを付加する
「ブログカード」を使って見た。(下記が実例)

「ブログカード」を手に入れて、リンク先の紹介がグッとオシャレに見やすくなった♪① - ●ブログづくり

こんばんは、慣れない事に取り組んで後頭部が少々熱い、みっくすです。少し前から、おススメしてもらった「ブログカード」に、やっと取り組めました♪慣れないPC関係は、つまずきがつきものですが、何とか成功したようです!嬉しい~♡今日も一緒に♪ - トップページ空に見守られ 花に癒され 家族(人+猫)と共に過ごす日々の記録cyakotokomomonoie.blog.fc2.com↑おススメしてくれたよつばさんのブログカードで~す♪こうやってカードの...

[使い方]
① Akira氏 のサイトからブックマークレットを借用

ブログカードのブックマークレットを作成しました - カスタマイズ

SSL化後の悩ましい作業のひとつ。 ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。 かといって はてなブログカード はSSLに対応できてないですし。 私のブログの特定ページでEmbedlyがどうしてもOGP画像を出してくんない(笑) そしてEmbedlyは非常にカスタマイズし辛いんですね。 ほとんどできないと言っ...


② CSSを自サイトに合うように加工
③ どこをクリックしても、別窓で開くように変更

【他の参考サイト】
Akira風ブログカードのCSSでカラー背景処理を間違えておりました
記事中のブログ・サイトリンクにブログカードを導入してみました。【ピン抜き動作を追加しました】
Akira風ブログカードをクリック(タップ)しやすくする方法
jQueryを使って、div全体にリンクを貼る方法。_blank対応も。

[注意点]
① 相手方が OGP設定を済ませていないと使えません
② FC2の編集画面で引用先の画像が目一杯表示されます
サムネイルのリンクにも、fontawesome アイコンが付いてしまった(何とか消しました)
【スポンサーリンク】

CM一覧 ( 2件)

まだコメントはありません。
みっくす  
ブログカードを使って見た へのコメント

OjinAger様、おはようございます♪
コメントからお邪魔させていただきましたー☆

PC初心者なので、教えてもらいながらやっていますが、
ブログカードと共に紹介下さり、とっても嬉しくなりました。
本当に有難うございます。♪

OjinAger様の記事内で、「なばなの里」の動画や写真がキレイで、
ずーっと「行きたい」と思っていた気持ちまで高まりました♪
季節柄でしょうかw

2017/12/10 (Sun) 08:19 | EDIT | REPLY |   
OjinAger  
To みっくす

CM有難うございました。
「カラー編」も楽しみにしております。
「なばなの里」は、既に3年前なりますか。
とても、寒かったのと大混雑だった事を覚えています。(笑)

2017/12/10 (Sun) 12:10 | EDIT | REPLY |   

CM投稿

NAME
TITLE
WEBSITE
COMMENT
PASSWORD
SECRET