会話風吹出しHTMLソースメーカー(第２弾)

投稿日：2022-01-16

＜＜会話風吹出しHTMLソースの生成(第２弾)＞＞

　はてなブログ用に会話風/考え事風の吹出しHTMLソースを生成します。生成されたHTMLソースをコピーすることにより、自分のHTMLにペーストして利用します。
　なお、第１弾は１つの吹出しHTMLソースを生成するものでしたが、第２弾ではCSVファイルを利用することにより、複数の会話風/考え事風吹出しHTMLソースを生成します。CSVファイルの1行が1つの吹出しになります。

＜吹出し用CSVファイルの作成＞

ExcelやGoogleスプレッドシートを利用して、以下の会話風/考え事風コメントを記述したCSVファイル[（注１）]を作成する。
（第１列）人物名
（第２列）人物アイコン情報[はてなフォトライフのアイコンID]
（第３列）吹出しタイプ[chat/mkmk]
（第４列）アイコン位置[left/right]
（第５列）文章
[注１]CSVファイルの１行目は見出しと見なし、２行目から処理する。

[吹出し用CSVファイルの例]

＜吹出し用CSVファイルの指定とHTML生成＞

（１）[ファイルを選択]で、直前に作成したCSVファイルを指定してから、[HTML生成]ボタンをクリックする。
（２）[HTMLコピー]ボタンをクリックし、生成された吹出しHTMLソースをクリップボードにコピーする。

　上記の吹出し用CSVファイル例で生成される吹出しは、以下の通り。

＜生成されたHTML＞

＜＜事前準備と注意事項＞＞

（１）以下を参照して、事前に『アイコン画像の用意』及び『「ダッシュボード-デザイン-カスタマイズ-{} デザインCSS」でCSSコードをコピー＆ペースト』する必要がある。
【はてなブログ】WordPressみたいな会話形式の吹き出しを使おう💓（コピペOK / 初心者向け） - 【ちゃんこめBlog】インド在住OLの雑記ブログ
（２）「ダッシュボード-デザイン-スマートフォン-詳細設定」で「リスポンシブデザイン」をチェックする。
（３）はてなブログのみで確認し、他のブログでは確認していない。
（４）吹出しの背景色や丸み・テキスト文字色などを変更したい場合は、参考資料「ちゃんこめBlog」を参考のこと。

＜＜参考資料＞＞

slowjogger.hatenablog.jp www.chankome.com www.sejuku.net エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)