【ブログ】StackEditからBloggerの投稿にリンクカードを挿入する方法

ブログ

この記事ではStackEditからBloggerに記事を投稿する際にリンクカードを表示させる方法について解説します．

StackEditについてはこちらの記事で詳しく解説していますので是非ご覧ください．

Markdown形式で作成した記事を簡単にBloggerにアップロードしてくれるサービスとなっておりとても助かっています．

Bloggerにリンクカードを表示させる方法

こちらに関しては以下の記事で詳しく解説させていただいていますので是非ご覧ください．

この記事で解説したとおり設定していただきますとCreate Linkから簡単に以下のようなコードが生成できたかと思います．

<iframe class="hatenablogcard" style="width:100%;height:175px;margin:15px 0;max-width:680px;" title="【Bloggerカスタマイズ】リンクカードを記事内に設置する簡単な方法を解説 | 自分の力で生きていく" src="https://hatenablog-parts.com/embed?url=http://virtualsanpo.blogspot.com/2020/07/blogger_33.html" frameborder="0" scrolling="no"></iframe>

それでは前回の記事を踏まえた上でStackEdit上から投稿した記事内に脳死でリンクカードを表示する方法について解説していきます．

StackEdit

早速StackEditで投稿した記事にリンクカードを表示する方法について解説していきましょう．

StackEditの設定

設定とはいってもStackEdit上で設定することは特にありません．いつもどおり記事内に以下のようなコードを差し込んでアップロードすればその部分だけ自動的にHTML形式でアップロードしてくれます．

<iframe class="hatenablogcard" style="width:100%;height:175px;margin:15px 0;max-width:680px;" title="【Bloggerカスタマイズ】リンクカードを記事内に設置する簡単な方法を解説 | 自分の力で生きていく" src="https://hatenablog-parts.com/embed?url=http://virtualsanpo.blogspot.com/2020/07/blogger_33.html" frameborder="0" scrolling="no"></iframe>

ただし，そのまま記事をアップロードした場合以下の画像のように表示されてしまいます．

Imgur

なんかデザインがおかしいですよね．これはStackEditでそのままアップロードした場合styleの部分が無視されてしまうからになります．つまり，上記のコードが以下のようになるわけですね．

<iframe class="hatenablogcard" title="【Bloggerカスタマイズ】リンクカードを記事内に設置する簡単な方法を解説 | 自分の力で生きていく" src="https://hatenablog-parts.com/embed?url=http://virtualsanpo.blogspot.com/2020/07/blogger_33.html" scrolling="no"></iframe>

というわけでこのままだと少しデザイン的におかしくなってしまい，スマホ表示だとはみ出したりといったことが起こりえますのでCSSを使用してリンクカードをレスポンシブ表示させるようにしましょう．

CSSの設定

それではBloggerトップのテーマ>カスタマイズ>詳細設定>CSSを追加から以下のコードをCSSに追加してください．

.hatenablogcard{
  width:100%;
  height:175px;
  margin:15px 0 >;
  max-width:680px;
  border: 0px;
  overflow: hidden;
}

で，これだけ大層な雰囲気を出しておいてあれですがこれで設定は完了です．

StackEditからそのまま投稿した記事でも以下のようにリンクカードがレスポンシブに表示されています．

Imgur

まとめ

というわけで今回はStackEditからアップロードした記事にもリンクカードをデザインが崩れないように表示する方法について解説しました．
このようにStackEditではstyle部分の情報がごっそり抜け去るようですのでHTMLを直接記述する際は少し注意が必要ですね．

しかし，CSSを追加するだけで脳死でリンクカードも表示できるのでとても便利なブログエディターになっています．
是非みなさんも一度使ってみてはいかがでしょうか．

0 件のコメント :

コメントを投稿