講師のじょうまさふみのブログです。記事を書いているときに、表現方法として画像を横に並べたい場合もありますね。いくつかやり方があるので紹介していきましょう。画像を使うときの注意点として、くれぐれも著作権で保護されている画像は使わない様にして下さい。写真AC」から画像を使わせてもらいました。↓https://www.photo-ac.com/画像をアップするまずは画像をブログのサーバーにアップしましょう。ブログで画像を使うための手順ですので難しくないです。左側にある「ファイルアップロード」を押します。使う画像ファイルをドロップしてください。画像アップロードするときの注意点として、「無料プラン」ではアップロードサイズは1ファイル2MBまでです。ファイルをドロップしたら、「アップロード」を押します。ファイル一覧にアップロードした画像が追加されました。アップロード画像のURLを使うので、コピーしてメモ帳などにメモしておきます。単純に並べるやり方とは言えないかも知れませんが、記事に画像を順番に配置するだけです。単純に画像を並べれば、そのまま横並びになります。理由を簡単に説明すると、画像を表示するHTMLタグは「imgタグ」と言います。/>ポイントは、「imgタグ」と「imgタグ」の間に改行を入れず、つなげて書くことです。この「imgタグ」は、横に並ぶ特徴をもつ要素です。(先ほどアップした画像だとサイズが大きいので、そのままのサイズでは横並びになりませんでした。説明のためにサイズを小さくして配置しています。)プレビューしてみます。このやり方は、表示スペースがある限り横並びで表示されます。逆に言うと画像サイズと表示スペースの関係によっては、狙い通りに並ぶかわからないということです。ブラウザを小さくすると、このように横並びが崩れました。記事を見る環境に影響を受けますが、簡単に横並びとすることができます。tableタグを利用する「tableタグ」は表を挿入するときにつかうタグですが、レイアウトに使えば、整然と並べることができます。「tableタグ」は表を作るものであり、レイアウト目的で「tableタグ」を使うことは非推奨とされています。(配置がわかり易いように、枠線を付けました。/></td></tr></table>これなら画像のサイズは自動的に表の中に納まるように調整され、ブラウザを小さくしても横並びは崩れません。「tableタグ」を使った並べ方を紹介しましたが、「tableタグ」は表を作る目的なので、レイアウトとして使うのはおすすめしません。代わりに、次で紹介する「スタイルシート(css)」を使うやり方をおすすめします。「スタイルシート(CSS)」を使うと、もっと自由に配置できますよ。テンプレートを編集するFC2ブログにログインしたら管理画面より「テンプレート」を押します。テンプレートを複製テンプレートを編集するときには、必ず「複製」を行い、元テンプレートの状態を保持したうえで編集するようにしましょう。編集したいテンプレートの「複製」を押します。複製元テンプレートと区別がつくようにテンプレート名を変更しておくと良いでしょう。名称を変更したら、「更新」を押します。複製し名前を変更したテンプレートを編集していきます。「編集」を押しましょう。ブログ背景を変更するには「スタイルシート(CSS)」を編集して行きます。スタイルシートはプロパティと値の組み合わせで定義されます。編集していきましょう。編集する箇所テンプレート管理画面の下に「スタイルシート編集」という箇所があります。この最後に新規で追加していきます。スタイルシートを利用する先ほど「tableタグ」で行ったように並べてみましょう。画像を増やして、横に3列並ぶようにして、行も増やしてみます。記事の編集では次のように書きます。画像を並べる領域に「grid01」という名前をつけます。書く画像を配置する領域には「grid01_item」という名前をつけます。(名前はこれでなければならないという事ではありません。/></div></div>次のようにスタイルシートを追加します。hidden;}このように並びます。これではいまいちわからないと思うので、枠線を付けてみました。