はてなブログで写真を横並びに表示する方法。情弱なりにやってみました。

二つのスマホ写真を見比べる記事を書きました

nonbirihappy.hatenablog.com

やっぱり比較するなら横並びでないと見にくいと思い、どうしたら横並びで表示できるのかGoogle師匠に聞きました。

検索ではいろいろな方法がヒットして、どれがいいのか、情弱でもできる方法はどれか、全くわかりませんでしたが、情報を拾い集めてなんとか成功しました。

今日はその「はてなブログで写真を横並びに表示する方法」を紹介します。

　HTMLで編集

写真の大きさによっては、普通にアップしただけで横並びになることもあるようですが、一般的な大きさ、スマホやデジカメで撮った写真サイズでは横並びにはなりません。

テーマの横幅が広いものでしたら可能性はありますが、かなり広くないとできませんし、よく使われているテーマでは無理だと思います。

そこで、<table>という表を作るHTMLを使って表示します。

具体的には以下になります。

 <table>
<tr>
<td><img src="画像ファイルのURL"></td>
<td><img src="画像ファイルのURL"></td>
</tr>
</table>

「HTML編集」画面で上記コードを貼り付ければ表形式で表示されます。

「<td><img src="画像ファイルのURL"></td>」太字部分に写真のURLを埋め込めば横並びの表の中にその写真が表示されます。

また、「<td>～</td>」を追加すると横表示数を増やすことができます。

 ただし、横3枚並びにすると写真サイズをかなり小さくしないといけないので見にくいと思います。

表示はこれでOKですが、写真サイズを横並びに収まるように調整しないといけません。

　Windowsでは「ペイント」を使用

写真サイズの変更方法はいろいろあると思いますが、今回はWindowsで紹介します。

Windowsに必ず入っている「ペイント」ソフトを使う方法です。

まず、「ペイント」を開き、アップしたい写真を「開く」から選択します。

画面に表示されたら、上ツールバーから「サイズ変更」を選択します。

次に「サイズ変更と傾斜」画面が出てきますので、「サイズ変更」で大きさを指定します。

わたしの場合は、単位を「ピクセル」大きさを「300」へ変更しました。

すると、写真サイズが先程より小さく表示されますので、改めて保存すれば終了です。

はてなの「フォトライフ」でも「編集」からサイズの変更はできます。

しかし、なぜか変更してもブログにアップすると変更後のサイズで表示されません。

なぜなのでしょう？

一度「フォトライフ」へあげたものはブログ上では変更が反映されないのでしょうか？

わかる方がいたら教えて下さいm(_ _)m

また、スマホの写真はサイズ変更ができるアプリがあるようですので、そちらを使って小さくするのもいいと思います。

　あとはHTMLでコピペ

最後に「HTML編集」で調整します。

上記の<table>タブの「<td>～</td>」の間へ直接写真URLを書き込む方法がわからなかったので、いちど普通に写真をあげてから「HTML編集」でコピペして作成しました。

まずは、サイズを小さくした写真を「写真を投稿」からあげます。

続いて、上記の<table>～を「HTML編集」へ貼り付け、先に上げている写真URLを「<td>～</td>」の間へコピペ（正確には切り取り）します。

以上で終了です。

ちなみにスマホの写真を300ピクセルに変えて横並びにしたものがこちらです。

 表形式になるますので枠が表示されます。これを消す方法はわからないです。

プログラムとか全くわからない情弱者ですので、もっと簡単な方法でできるのかもしれません。

ただ、ググッていろいろ試してみて、情弱なりになんとか横並びで写真を表示することができました。

今回はこういう方法もありますよということで紹介させてもらいました。

【あとがき】

最近雨ばっかりでうっとうしいですね(´・ω・`)