Bloggerでテンプレートをカスタマイズし背景画像を設定する｜Blogger修行

上は詰まりすぎ。

前回、投稿を作成中、画像をランダムに配置しようとしたのになかなか思い通りにならず、最終的に、画像を左寄せで配置して終了したところ、画像の周囲のマージン(余白)が、詰まりすぎてしまっている箇所が発生しました。

・Bloggerで画像の配置を思い通りに行いたい｜Blogger修行

今はまだ酔ってないので、タグを確認してみました。

margin-right: 1em;　これがないと、余白が詰まってしまうわけです。

修正後！

ということで、余白が詰まってる方の画像のタグにも同じ内容を追加して、修正しました。

前回も書いたように、別に意識してマージンを削除したわけでなく、作成画面上で、画像をあっちこっちに引っ張りまわした結果そうなってしまっただけなのです。

これを入力しながらも画像を配置していると、また余白がおかしい……。
見てみると、margin-rightではなくmargin-bottomになったまま、自動では直らなかったりして、作成画面だけでコントロールする気がなくなっちゃいそう……。

しかし、まだこれを「仕様です」と断言できるほどBloggerを使えてないので、ねばり強くいじっていきたいと思います。

さて、今回は、Bloggerテンプレートデザイナーで、テンプレートをカスタマイズして、背景を変えてみたいと思います。

Bloggerテンプレートデザイナーの開き方は、以前テキストリンク色を変えた時にも記載しましたが、改めて手順を確認していきます。
・Bloggerでテキストリンク色を変更する｜Blogger修行

ログインした状態で自分のBloggerの記事を開いて、画面右上の[デザイン]のリンクをクリックします。

（またはhttps://www.blogger.com/home(自分がログインしたアカウントの、Bloggerの管理画面トップ)から、目的のBlogの管理画面へ移動し、さらに右側のメニューから[テンプレート]をクリックでも同じ画面が開きます）

この段階で現在ブログで使用しているテンプレートおよびカスタマイズ内容がプレビューされます。
今回は背景の変更とともに、テンプレートを他のデザインに変えてみました。

１．の場合。

テンプレートの変更の操作は簡単です。方法が二つあり、

１．テンプレート一覧から目的のテンプレートにマウスカーソルを置き[ブログに適用]をクリックする。

(虫めがねマークをクリックすると、現在までのブログ記事を、新しいテンプレートでの状態で簡易的にプレビューすることができます)

２．の場合。

２．[カスタマイズ]をクリックし、Bloggerテンプレートデザイナー上でテンプレートを選択する。
最後に右上の[ブログに適用]をクリックする。

今回は背景の変更も行うので、[カスタマイズ]から入って進めてみました。

ブログのデザインは、シンプルの中で黒っぽい色遣いのタイプに変更しています。

デフォルトでは背景画像が設定されていないタイプのテンプレートのため、背景画像の設定値は「なし」と表示されています。

このエリアをクリックすると、[背景画像を選択]の画面が表示されます。

[画像をアップロード]以外のメニューは、他のテンプレート等でも使用されている画像や透過背景などの素材です。

ファイルの条件は「最大300KBのJPG、GIF、PNG形式のファイルをアップロードできます。背景全体にするには、1800×1600以上の画像を使用してください。」となっています。

背景を適用後です。

画像配置の話に戻ってしまいますが、

文章内への画像の配置においては、文章入力中の以下の処理の違いで、意図しない配置への影響が生じます。

■文章を入力中、Enterキー押下　→　段落が<div>～</div>で挟まれる

■文章を入力中、Shift+Enterキー押下　→　<br />で改行される

Wordとか、一部のHTMLエディタなどを操作していても同様に、Enterキー押下では段落が新しくなり、Shift+Enterキー押下では段落内の改行となります。

Wordの場合は編集記号を表示していると、矢印の形が違うので、区別がつきますね。

[作成]画面で文章だけ打っている際は、上のどちらも見た目には改行されているだけに見えます。

マージンの件はさておき、<div>～</div>と<br />の適切な使い方を意識することで、Bloggerのクセが少し理解できると思われます。

……って、ちょっとは説明できるようになった？