こんな疑問にお答えします。
当ブログにお立ち寄り頂きまして、ありがとうございます！m(_ _)m
こう見えて実は、はてなブログで覚えたテクニックはドヤ顔ですかさず記事にまとめ、惜しまずブログ投稿して読者と共有していくスタイルの赤兎馬おじさん(@sekitoba1007)です。
なんて親切なおじさまなのでしょうか！(ﾟ∀ﾟ)
はてなブログでも画像を横一列に貼り付けられるのって、ご存じでした？
自慢じゃありませんけどね、こんなことできたなんて私はつい先月知りましたよ。（笑）
はてなブロガーのなかには、WordPressなどの記事にあるハイパーリンク設定されている画像に憧れる方って、けっこう多いんじゃないかと思います。
そこで今回は、はてなブログで画像を横一列に貼り付ける方法と、貼り付けた画像にハイパーリンクを埋め込む設定手順をご紹介しますので、ぜひ参考にしてください。
手順の中にはHTMLをいじる場面もありますが、コードを読むのが無理！っていう初心者にもわかるように画像付きで説明しますのでご心配なく。
もちろん、無料版でもできますよ！(^^♪
(当ブログが証明してますね)
目次
はてなブログで画像を横一列に貼り付けてハイパーリンクを埋め込む方法
はい、まずは完成イメージをご覧ください。
こんな感じでハイパーリンク付きの画像を貼り付ける手順を、この後ご紹介していきます。
上の3つの画像をクリックすると、当サイトでこれまで投稿してきた記事が開かれますので、チェックしてみてください。(ﾟ∀ﾟ)
はてなブログで画像を横一列に並べて貼り付ける方法
はてなブログで画像を横一列に並べて貼る方法を、詳しく紹介します。
①「写真を投稿」をクリックする
②複数の画像を選択し、「横並び」をクリックしてから貼り付ける
画像を横並びに貼り付ける方法は、これだけです。
ここまではめちゃくちゃカンタンですね！
画像にハイパーリンクを埋め込む手順
③HTMLのコードを開く
④「<div class="images-row-item">」の後、「img src=～」の前にカーソルを移動
※必要に応じて活用しましょう
⑤リンク先URL「<a href="url">」を入力 (←実際は「[url]の部分にリンク先URLを入力)
⑥プレビューで確認してみよう！ちゃんとできてたらOK
これでリンク付画像を横並びに配置できました。
HTMLのURLコード追記は、慣れればカンタンです。
横並びに配置する画像の数を変えた場合
横並び画像を2枚にすると、こんな感じです。
もっと増やしてみました。
こここ、これは押しにくい･･･（笑）
アイデア次第でいろいろ応用できるはず！
画像配置を工夫して、お好みのレイアウトとハイパーリンクではてなブログを楽しんでください。(*´ω`*)
みなさんに読まれている関連記事のご紹介
最後までお読みいただき、ありがとうございました。
