本サイトはアフィリエイトで紹介料を得ています

アメブロの記事に貼るリンクも自分らしいデザインに?

今では、アメブロもURLを貼るだけで画像付きのリンクカードが表示されるようになって使いやすくなりました。

ただ、誰のアメブロを見ても同じデザインのリンクカードが貼ってあるんですよね。

一貫性があって良いとも言えるのかもしれませんが、せっかくアメブロをカスタマイズしてあることですし、リンクカードもアメブロのデザインに合わせて、

「自分らしいデザインにしてもいいのでは?」

と、思ったりもします。

というわけで、一つ作ってみました。

amecareを公開しました | 島のWeb屋のアメブロamecareを公開しました。Chromeウェブストアから、Google ChromeやMicrosoft Edgeの拡張機能としてインストールできます。ameblo.jp
まあ、これが自分らしいか?というと、何とも言えない感じではありますが、

こういうのも、オリジナリティを出すという意味で面白いのでは?という一つのご提案です。

最後に、ちょっと宣伝させてもらうと、拙作「amecare」というGoogle Chrome拡張機能をを使って、オプションの設定・管理の「リンク貼付けタグ」に以下のようなコードを設定すると、上のようなリンクを貼れるようになります。

<div style="padding:10px;border:1px solid #962;color:#333;background:#eda;border-radius:5px;"><a href="%URL%"%TARGET% style="display:flex;align-items:center;padding:5px;text-decoration:none"><span style="width:33%;max-width:220px;flex-shrink:0;align-self:flex-start"><img alt="" src="%IMAGE%" style="width:100%;height:100%;object-fit:contain;min-width:0;margin:0;box-shadow:0 0 6px #666"></span><span style="display:flex;flex-wrap:wrap;width:67%"><span style="padding-left:10px;width:100%;word-break:break-all;color:#962">%TITLE%</span><span style="padding-left:10px;width:100%;word-break:break-all;font-size:87.5%;color:#666;">%DESCRIPTION%</span><span style="padding-left:10px;width:100%;text-align:right;font-size:87.5%;color:#999;word-break:break-all">%DOMAIN%</span></span></a></div>
もし、いい感じのリンクタグができたら、ぜひ教えて下さい。