スキップしてメイン コンテンツに移動

Stackedit から Blogger に投稿する画像を LightBox に対応する

Stackeidt から Blogger に画像を投稿すると、
LightBox が発動しない件についての対処方法です。

※ LightBox とは ・・・ 画像をクリックすると画像が拡大表示されるアレです

問題点 (なぜ LightBox が発動しないのか )

Bloggerで直接画像を投稿した場合と、Stackedit から画像を投稿した場合で、
生成される HTMLが異なる事が原因でした。

  • Blogger で画像を投稿した場合の HTML
<a href="https://2.bp.blogspot.com/af...xyz">
  <img data-original-height="600" 
       data-original-width="296" 
       height="320" 
       width="157" 
       src="https://2.bp.blogspot.com/af...xyz"  />
</a>
  • Stackedit 経由で Blogger に画像を投稿した場合の HTML
<img src="https://lh3.googleusercontent.com/AF...XYZ">

Stackedit で画像を投稿した場合は、LightBox を発動する為の、
<a> タグが生成されない事が問題だった。。。

対処方法

画像がリンク表示されれば LightBox が発動するので、
img タグが a タグで囲まれるように Markdown を記述します。

[修正前の Markdown]

![東京](https://lh3.googleusercontent.com/AF...XYZ)

東京

※ LightBox が発動しない。


[修正後の Markdown]

[![東京](https://lh3.googleusercontent.com/AF...XYZ)]
(https://lh3.googleusercontent.com/AF...XYZ)

東京
※ LightBox が発動する!!

これで 一応 LightBox は発動しました!!
しかし このままでは↓のイメージの通り、記事本文の縮小画像サイズのまま、
LightBox が表示されてしまい、あまり意味がありません。

↓ 縮小画像のままLightBox で表示されてしまう
enter image description here

対処方法2( 最終的にこうなりました )

LightBox で拡大表示する時だけ、元の大きい画像を表示させるには、
<a> タグの URLに、画像サイズを指定する事で、
拡大時のみ大きい画像を見せる事ができます。

[再修正後の Markdown]

[![東京](https://lh3.googleusercontent.com/AF...XYZ)]
(https://lh3.googleusercontent.com/AF...XYZ=s1600)

(POINT) <a> タグのURL末尾に =s1600 で画像サイズを指定します。

東京
※ 元の大きい画像サイズでLightBox が発動する!!

↓ 元の画像サイズで、画像が拡大表示される

スポンサーリンク
スポンサーリンク
スポンサーリンク

コメント

このブログの人気の投稿

axiosの使い方まとめ (GET/POST/例外処理)

axiosの使い方まとめ (GET/POST/例外処理)最近何かとよく使うJavaScriptでAJAX通信を行うaxiosについて、簡単に使い方をまとめました。GETリクエストをaxiosで送るまずはGETリクエストをaxiosで送る方法です。const res =await axios.get('/users') console.log(res.data)分割代入の記法を使うと、以下のようにも書けますconst{data}=await axios.get('/users') console.log(data)クエリパラメータ (URLパラメータ)を指定クエリパラメータを指定する方法は2つあります。1つ目は、axios.getに指定するURLに直接記述する方法です。axios.get('/user?id=123')2つめは、axios.getの第2引数に、オプション指定する方法です。axios.get('/user',{ params:{ id:123}})POSTリクエストをaxiosで送る次はPOSTリクエストをaxiosで送る方法です。JSON形式でPOSTするJSON形式でPOSTする場合は、axios.postの第2引数に、送信するデータをJavaScriptオブジェクトで指定します。const res =await axios.post('/user',{ id:123, name:'Yamada Tarou'})application/x-www-form-urlencoded形式でPOSTするapplication/x-www-form-urlencoded形式でPOSTする場合は、URLSearchParamsを使います。var params =newURLSearchParams() params.append('id',123) params.append('name','Yamada Tarou')const res =await axios.post('/user', params)axios でファイルをアップロードする画像などのファイルを、axiosでアッ…

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決する

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決するタイトルの通りですが、Windows 8 以降では Windows Form アプリケーションで、コントロールの ImeMode に Katakana や KatakanaHalf を設定しても、カタカナになってくれません。なぜ ImeMode が効かないのか?Windows 8 以降、IME Mode の切り替えは、ユーザー単位で切り替わるようになった為、アプリから IME Mode 制御が出来ないようになりました。
(IME をON にした場合、常に ひらがな モードになます)※ Windows 7までは、IME Modeの切り替えはアプリ単位で行われていた為、問題なくアプリから IME制御が行えました。対処方法Windows 8 以降、IMEの制御は、InputScope クラスの利用が推奨されています。
しかし、InputScope クラスは、WPF、Windows ストアアプリでしか使えない為、Windows Formアプリでは使用できません。
(Windows Form はもう使うな!という事でしょうか (涙) )結論としては、コントールパネルの設定で、IMEの制御をユーザ単位から アプリ単位に変更する事ができます。
これで、Windows Formアプリでも 従来通りIMEの制御を行う事が出来ます。おわりにこの方法だと、アプリをインストールする端末すべてに設定が必要となり、とっても面倒です。。。
しかし、今の所これしか方法がない状態です。
これからは Windows Formではなく、WPFや Windows ストアアプリで作れという事ですかね (^^;)

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]MailKitを使ってメールを送るサンプルコードです。(C#)UTF8/iso-2022-jpのエンコーディング指定、GMail/YahooのSMTPサーバで送るなど、4つのサンプルコードでMailKitの使い方を紹介します。MailKitって何?2017年に.NET標準のSystem.Net.Mail.SmtpClientが廃止予定となり、Microsoftより今後はオープンソースライブラリである、MailKitに置き換えるとアナウンスがありました。既にSmtpClientは非推奨になっており、今後は廃止されていきます。現在、SmtpClientを使用したソースコードには、Visual StudioからMailKitを使うよう警告が出るようになっています。さっそく、MailKitを使ってメールを送信するサンプルコードを作っていきます。UTF8でメールを送信文字エンコーディングを、UTF8でメールを送信するサンプルコードです。
MailKitは、デフォルトの文字エンコーディングがUTF8なっている為、シンプルなコードでメールを送信する事ができます。var host ="<smtp server name>"; var port =25;// or 587using(var smtp =new MailKit.Net.Smtp.SmtpClient()){//SMTPサーバに接続する smtp.Connect(host, port, MailKit.Security.SecureSocketOptions.Auto);//認証が必要な場合は、以下のコメントを解除//smtp.Authenticate("<id>", "<password>");//送信するメールを作成する var mail =new MimeKit.MimeMessage(); var builder =new MimeKit.BodyBuilder(); mail.From.Add(new MimeKit.MailboxAddress("",&quo…