More than 3 years have passed since last update.

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

Last updated at 2019-11-25Posted at 2019-11-25

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

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

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

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

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

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>

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

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

おしまいっ。

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