戯れ言葉

FC2ブログで二つ画像を横並びにする私の方法

カテゴリ:FC2ブログの色々とカスタマイズとか
タグ:

FC2ブログで2枚の画像を横並びにします。

こんな具合です。 flexbox を使ってみる  と云う過去記事にも書いてるんですが若干初心者向けに。

Flexbox (フレックスボックス)  と云う方法を使いますが、私が採ってる方法では、

  • テンプレートのCSS(スタイルシート)へ若干の書き込みが必要
  • 記事の編集では旧投稿画面で行う
  • 高機能エディタはOFF
  • 「改行の扱い」は「HTMLタグのみ」と言う選択が必要(記事編集画面に設定があります)

旧投稿画面で高機能エディタがOFFの時は、本文の編集のメニューバーのアイコンがこうなり、この状態で記事を作成します。

高機能エディタがONになってるとこういうメニューバーになるので、赤丸のところのWボタンをクリックして高機能エディタをOFFにします。

本文の編集の下の方に「改行の扱い」という設定欄があるので、ここで「HTMLタグのみ」を選択します。

従って記事の中もHTMLの手法で記述することになりますので若干ハードルは高いかもです。文字の色変更や色々な装飾は全てHTMLやCSSで書いてやらなければなりません。

CSSの追加

まずテンプレートのCSSの最下段に下記を書き込みます。(コピペが安全)


.flexbox {
  display: flex;
  align-items: center;
}

.flexbox img {
  max-width: 100%;
  height: auto;
  margin: 3px auto;
  padding: 0 3px;
  border: none;
  vertical-align: bottom;
}

この時、安全策を採って必ずテンプレートの複製を作っておいて下さい。

書き加えたら、必ず 更新 を押して反映させておきます。

目次へ戻る


画像の準備

次に並べる画像ですが、長辺が800px~1200pxは欲しい所で、記事の横幅に合わせる必要はありません。横幅が大きくても記事内では自動縮小されるので問題ありません。

ブログなどのWEBサイトでの画像の容量にはこんなことに注意されてはどうでしょう  の記事にも書いてますが、この時の画像は100KB前後にまで圧縮しておく方が賢明です。画像処理ソフトやオンラインイメージ最適化ツール/Optimizilla  の様なサイトで圧縮しておきます。

このページのトップに掲げた画像は2枚とも1200px × 800pxの画像で、画像容量は両方とも52KBになってます。

目次へ戻る


記事への挿入

これをFC2ブログの編集画面でファイルのアップロードをし


「この画像で記事を書く」をクリックして記事に挿入します。

この画面では各画像リストの中に「 52KB(1200 × 800) 」と画像の容量とサイズが表示されてますね。


で、こんな風に挿入されます。

目次へ戻る


HTMLの編集


<a href="https://blog-imgs-132.fc2.com/b/l/g/blgid1974/20190918505.jpg" target="_blank"><img src="https://blog-imgs-132.fc2.com/b/l/g/blgid1974/20190918505.jpg" alt="20190918505.jpg" width="1200" height="800" /></a>
<a href="https://blog-imgs-132.fc2.com/b/l/g/blgid1974/20190918506.jpg" target="_blank"><img src="https://blog-imgs-132.fc2.com/b/l/g/blgid1974/20190918506.jpg" alt="20190918505.jpg" width="1200" height="800" /></a>

書き出してみるとこうなります。

<a href から </a> 迄が一つの画像のブロックです。

青色の部分はFC2のサーバーにアップロードした画像のURLです。ここは使用したい画像によって変わってきます。

alt=" **** " の部分はaltオルト属性と言います。詳細はググるなり、<img>: 埋め込み画像要素  の属性の項を参照して下さい。ダブルクオーテーション( " )の中( 赤色の部分)は省略することができるので、私はいつも alt="" の形にして省略しています。

気になる方は「ノボタンのシベ」の様な風に画像の代替になるような適当な文を入れてやって下さい。

次に width= ・・・・・・800" / の部分は不要でHTML5の表記にも違反していますので、私はこの際削除しています。(残していても大丈夫ですが削除をお勧め)


<a href="https://blog-imgs-132.fc2.com/b/l/g/blgid1974/20190918505.jpg" target="_blank"><img src="https://blog-imgs-132.fc2.com/b/l/g/blgid1974/20190918505.jpg" alt=""></a>
<a href="https://blog-imgs-132.fc2.com/b/l/g/blgid1974/20190918506.jpg" target="_blank"><img src="https://blog-imgs-132.fc2.com/b/l/g/blgid1974/20190918506.jpg" alt=""></a>

以上の作業後は上記の様になります。勿論 青色の部分は画像のURLなので作業の度に違ってきます。

最後にこのブロック全体を flexbox というクラス名で括ります。


<div class="flexbox">
<a href="https://blog-imgs-132.fc2.com/b/l/g/blgid1974/20190918505.jpg" target="_blank"><img src="https://blog-imgs-132.fc2.com/b/l/g/blgid1974/20190918505.jpg" alt=""></a>
<a href="https://blog-imgs-132.fc2.com/b/l/g/blgid1974/20190918506.jpg" target="_blank"><img src="https://blog-imgs-132.fc2.com/b/l/g/blgid1974/20190918506.jpg" alt=""></a>
</div>

(注)必ず半角で、全角スペース厳禁

リアルタイムプレビューには反映されないので、確認する時はプレビューボタンを押して、画像が並んでいることを確認して下さい。

目次へ戻る


記事の書き方

(注)HTMLタグはコピペするか単語登録が便利です。全角ひらがなで登録しておくと、日本語で入力しながらHTMLタグを呼び出せます。

旧投稿画面の改行の扱いがHTMLタグのみと言うモードでは


こんな風に編集内の記事のエンターキー押下による改行は反映されません。

そんな時は改行タグ

<br> を使用します。

更には一段落をParagraphタグで囲みます。

<p>

この間に文章を入れ

</p>

とやります。



<p>
新川の散策道のキバナコスモス<br>
キバナコスモスは繁殖力が旺盛らしく<br>
毎年増えてる気が
</p>
<br>

こんな感じで段落を <p> と </p> で挟みます。

そして改行する所で <br> を入れます。

<br> が単独で入ると空行が一行入ります。

行空けに <br> を使うのは良くないと言われていますが、安直にはいいんではないでしょうか。HTML/CSS が理解できてきたら他の手法を使えば良いんじゃないかと。又、 <p> タグは初心者には難しいので使わなくてもいいということをベテランも言われてますので、なくても良いようです。

Comments 8

There are no comments yet.

ひまわり  

有難うございます!

higeさん、お早うございます。
とても、とても時間はかかると思いますが
頑張ります(^O^)/

2019/10/18 (Fri) 07:30 | 再編集 | 返信を書く |   
hige

hige  

To ひまわりさん

お役に立てればいいのですが

2019/10/18 (Fri) 11:43 | 再編集 | 返信を書く |   

ひまわり  

試してみましたけど。。

お早うございます。higeさんの記事を参考
にさせて頂き、同じ画像を使って並べて
みましたけれど、これでいいのかどうか?
「高機能エディタをオフ」にするというのは、
「簡易モードをオフ」にするでいいのでしょうか。
気になるのは記事内にタグを入れなくても
自動的に挿入されていて直す必要が
なかったので大丈夫かな〜と不安です。
何か手順を飛ばしているか、モードが
違うのか。ちゃんと理解してやっている
わけではないので疑問だらけです。

記事は「あっという間に1週間」で
タグはbr改行タグのことです。
うまく伝わっているでしょうか(^^;)

2019/10/19 (Sat) 10:05 | 再編集 | 返信を書く |   
hige

hige  

To ひまわりさん

記事を拝見しました。

取りあえずできてますねぇ。
スマホでもちゃんと表示されています。

「高機能エディタをオフ」にするというのは、「簡易モードをオフ」にすると云うことではありません。記事にこのボタンのある所の画像を乗せていますので、参考にして下さい。

ただ、ひまわりさんの記事を拝見して画像の横並び部分がちゃんと書かれているので、これは高機能エディタがオフになってるからだと思います。

brタグがすでに入っている件は
元々「改行の扱い」が自動になっていた過去記事を、再編集されて「HTMLタグのみ」に変更された為です。
当初にエディター側が自動で挿入したbrタグが表示されたのです。
brタグが<br />となっているので、これは「改行の扱い」が自動になっている時に、FC2のエディタが自動的に挿入するタグです。最新のHTML5では<br>と云う書き方が正しいです。新しく記事を書く時はbrタグは自分で書かなくてはいけませんが、その時は<br>と云う書き方をお勧めします。

2019/10/19 (Sat) 12:02 | 再編集 | 返信を書く |   

ひまわり  

有難うございました!

旧投稿画面というのが解らずに、簡易モードをクッリク
したような気がします。OFFにするとW(高機能エディタ?)
が表示されるので次に進めました。
基本的なことがわかっていないので、時間をかけて
もう一度、異なる画像を使って試してみたいと
思います。お手数をおかけしました。

2019/10/19 (Sat) 14:13 | 再編集 | 返信を書く |   
hige

hige  

To ひまわりさん

自分で色々試しながらやってみるのが一番理解できるんではないでしょうか。

ちょっとでもお役に立てば。

2019/10/19 (Sat) 15:19 | 再編集 | 返信を書く |   

しんべい  

こんにちは

今日参考にさせて頂いて、写真を並べてみました。ありがとうございました。
これでいいのかな?と思いますが…(^^ゞ
ブログで勝手にお名前を出してすみません。ご迷惑だったら消そうと思いますので、お知らせください。

2020/07/01 (Wed) 14:35 | 再編集 | 返信を書く |   
hige

hige  

To しんべいさん

お役に立てたようですね。
私のブログ名はどうぞそのまま載せておいて下さい。
宣伝ありがとうございます。

2020/07/01 (Wed) 15:34 | 再編集 | 返信を書く |   

Leave a reply
コメントをどうぞ

ブログやホームページのURLをどうぞ

パスワードを入力すると投稿後、訂正・削除が出来ます