connpassのイベント説明に画像をセンター揃えで表示する方法

3957 ワード
画像アップロード Markdown イベント connpass imgur Markdown テキストリンク

connpassのイベントページにスポンサーロゴや、登壇者の画像を表示させたい、というときのやり方です。
画像アップロード機能がconpassにはなかったので、今回はimgurを使用しています。

Imgurに画像をアップロード

connpassに表示させたい、jpg,png,gif形式などの画像をアップロードします。

PCの画像のあるディレクトリから、ドラッグ＆ドロップするだけでいいので楽チンです。

参考

詳しくはこちらから。
【決定版】Imgurの使い方！アップロード/検索を解説！読み方、削除は？
https://dotapps.jp/articles/rjm48ar4p8kybmfv

Imgurから画像URLを取得

画像アップロード後の画面にて、

Get shere links をクリックします。

Shere LinkでURLをコピーします。

サンプル

こんな感じのURLが取得できます。

https://imgur.com/71ofK2o

マークダウン記法で記述

今回は、中央揃えで、width400指定で 表示させたいので、

<div align="center">
<img src="https://i.imgur.com/71ofK2o.png" width="400">
</div>

のように記述します。

下記をコピーして、必要に応じて調整してお使いください。

<div align="center">
<img src="***画像のURL***" width="***サイズ***">
</div>

connpassの「イベントの説明」にコピペ

先ほど整えたマークダウン記法の３行をイベントの説明文にコピペすればOKです。

connpassのマークダウン記法は、詳しくはこちらに説明があります。

connpassで使えるMarkdown記法
http://help.connpass.com/organizers/markdown

おしまいっ。

参考にしたQiita記事

今回、こちらのQiitaを参考にさせていただきました。
ありがとうございます。

markdownでの画像リサイズ
https://qiita.com/shti_f/items/b819d7fd8cb79ae29687

markdownで画像を中央寄せ
https://qiita.com/takkii/items/d09668cbf85cbdec7001