背景画像でデザインするブロマガ編集テクニック
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

背景画像でデザインするブロマガ編集テクニック

2014-03-17 12:42
  • 1
この記事はブロマガの背景画像による
編集テクニックについて書いたものです。

背景画像で変わるブロマガの見た目

このブロマガの記事の外にかたつむりがいるのですが、上下スクロールするとどこまでも着いてきます。これは背景画像で設定しています。

現在のユーザーのブロマガでは全体のHTMLやCSSを編集することができません(記事編集時)。あくまで記事内でちょこっとしかできません。それならば、背景画像で少しでもデザインできないかなと思って上の画像のようなことができます。

かたつむりが見えない方はブラウザを全画面表示等して見てください。1024px以上だとかたつむりが見えてきます。

ブロマガの仕様はこんな感じ

ちょっと小難しい話をします(笑)。

ブロマガの記事の大まかな仕様は上の画像の通りです。もっと内部は細かいですが、おおまかな所だけ。記事全体は合計で1024pxになります。この1024pxにピンときた人がいるかもしれませんが、画面解像度のXGA(1024 × 768)の横幅の1024pxを意識しての設定ですね。

そして、ブロマガの記事全体は画面中央に配置されるようにスタイルシートで設定されています。

背景画像を設定する前に

ブロマガの背景画像の条件は「1,920×5,000px 1,000KB以下」とあります。現在の市場のモニタやサイトの傾向からして「1920px × 1080px」以上の背景画像にすると良いでしょう。

従って背景画像の横幅の1920px から先程の記事全体の1024px を引きます。それが896px。領域は左右全体なので分割して(左448px、右448px)ですね。

つまり背景画像の左から448px、右から448pxの位置がブロマガの記事全体の外ラインに該当するので、その位置にかたつむりを配置します。

上記の流れで作成した背景画像をブロマガの管理画面の「デザイン」から以下のように設定して出来上がりです。

「表示位置」は画像によっては下でも良いです。「スクロールに追従」で追従させることによってかたつむりが着いてきます。

記事の書き終わりに

今回紹介したのは一例ですが、かたつむりじゃなくても他の動物や人でも登ったりぶら下がったりさせたり、発想次第では面白い背景画像で見る人をあっと驚かせることができると思います。こだわりある人は是非やってみてください。もちろんブロマガの仕様は今後変わる可能性があります。

広告
コメントを書く
コメントをするには、
ログインして下さい。