ブログ/HP作成

ブログカードにEmbedlyを使うことにしました。

投稿日:2017-03-26 更新日:

 

るしる(@aromusica)です。

 

WordPressテーマをAFFINGER4に変えてみて、困ったのが「リンク先の表示」

今まで使っていたSimplicityはリンク先を綺麗に表示させるブログカードが内蔵されていたので、カスタマイズ設定して記事にリンク先のアドレスさえ入力すればOKだったのですが、AFFINGER4に変更するにあたり、Embedlyを使ってブログカードを作ることにしました。

 

スポンサーリンク

WordPressのリンク先表示

WordPressでリンク先のアドレスを記事中に入力すると、このように表示されます。

 

どーん!

David Bowieの「Life on Mars?」のピアノが美しすぎる。

 

デカッ!画像のインパクトは出せますが、大きすぎる。

ブログカードにしてみると

 

David Bowieの「Life on Mars?」のピアノが美しすぎる。

 

スマートになりました。このカードをEmbedlyで作ります。

 

Embedlyの使い方

Embedlyの使い方には2種類あります。

 

コードジェネレーター

以下のサイトを開きます。

http://embed.ly/cards

 

 

URLを入力し「EMBED」をクリックします。

 

ブックマーク

ブックマークレットのページを開きます。

http://embed.ly/bookmarklet

 

「+Embed」をドラッグしてブックマークバーにドロップします。

 

使う時は、リンク先のページを開き、ドロップした「+Embed」をクリックするだけです。

私はこのやり方で使っています。

 

ブログカードの作り方

リンク先を決め、「+Embed」をクリックするとこのように表示されます。

 

 

画面下にあるコードを記事テキストに貼り付ければ、カードが表示されます。

しかしこれではカードが大きすぎるので、コードをコピーする前にカスタムします。

 

画像の縮小

画像にカーソルを当てると画像左下に矢印が表示されます。

クリックすると画像が小さくなります。

 

記事本文の表示

記事タイトル下の本文にカーソルを当てると背景が黄色に変わり、本文右上に「×」マークが表示されるので、クリックすると本文が非表示にできます。

 

また本文をクリックするとこのような画面に切り替わるので、

長い文章を削減できます。

 

リロードしなくても、コードは変わってくれるので、作業が終わったら画面下のコードをコピーして記事テキストに貼り付けます。

 

画像を小さくし、本文を抜粋したカードがこちら。

 

ブログの記事にInstagramをサイズを変更して表示させる方法。

ブログでInstagramを表示させる方法をまとめました。 アメブロやSNSはInstagramを投稿する際、同時にシェアできるのですが、 パソコンでInstagramを自分のブログやホームページに載せてみました。

 

まとめ

AFFINGER4に変更して、一番時間がかかった修正作業がブログカードでした。

他のテーマでもそうですが、変更することで仕様が変わるのでWordpressプラグインでカードを作るか、このEmbedlyで作る方が、この修正を省くことができるかもしれません。

 

レスポンシブ対応ですので、サクサクっとカード作って貼り付けて終わり!

お試しあれー

 

この記事が気に入ったら
いいね ! しよう

Twitter で

    関連記事    


-ブログ/HP作成
-,

Copyright© るしるし , 2017 All Rights Reserved Powered by AFFINGER4.