はてなブログ

【はてなブログからの移行】はてなのエディターで貼り付けたAmazonリンクを修正するCSS

投稿日:

はてなブログの記事エディターは、非常に簡単な操作で記事の中にAmazonリンクを挿入することができます。
 
そして、貼り付けたAmazonリンクは、はてなのデフォルト設定によって綺麗なカード型リンクとして表示されますが、ブログ移行後は当然ですが、はてなによって適用されていた整形するためのCSSが効いていない状態なので、はてなのエディターから記事に挿入したAmazonリンクは全てレイアウトが崩れた状態になります。
 
一つずつ…リライトも兼ねて新たにリンクを貼り直すというのも方法の一つであるとは思いますが…やっぱり面倒くさいですよね(;´Д`)
 
そこで…この記事では、はてな時代にエディターから貼りつけたAmazonリンクを一括ではてな時代の表示に限りなく近い状態に戻すCSSを載せたいと思います。
 
移行後に貼り付けたリンクのレイアウト崩れを知り、愕然としている方のお役に少しでも立てれば幸いですm(_ _)m
 
 

スポンサーリンク

完成図

この記事に載せているCSSを適用するとどんな感じになるかがわかるように、実際にはてなのエディターで生成したAmazonリンクを貼ってみました。

スティーブ・ジョブズ I

スティーブ・ジョブズ I

 

スマホでみたときが…ちょっとアレかもしれないんですが、まあまあ…それなりにはてな時代と同じような状態では表示できているんじゃないかと思います!
 
 

はてなで貼ったAmazonリンクを整形するCSS

このCSSをそのままコピペでご自身のブログ管理画面からstyle.cssに貼り付けるだけでOKです!

 
 

おわりに

これ以外にも、以下の記事ではてなブログからWordPressへ移行した際にやったことをまとめています。

上記のCSSをコピペすれば、記事の中に貼ったAmazonリンクを一つずつ修正しなくても、一括で冒頭の完成図に貼ってあるリンクの状態へと整形することができますので、ぜひご活用ください!

でででーさん

2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。

あなたにオススメ