アメブロdeアクセスアップ

アメブロ姫ブログカスタマイズ 好きな場所に画像を配置する方法 | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


テーマ:姫ブログカスタマイズ

アメブロ姫系ブログのカスタマイズです。
姫系ブログでよくあるのが、好きな画像を好きな場所に配置してあること!!
これできると、なんかオリジナルって感じでいいですよね。

 

 

画像を作成したら、好きな場所に配置してみましょう。

 

 

 

 

 

 

アメブロの姫系ブログをみてみると、好きなところに好きな画像を配置してあります。

 

 

 

これ、いろいろなブログにも使えそう!!

 

 

自分の好きな画像を、まずフリー素材からお借りしたりして、

ちょっと加工なんかしたりして作っておいてくださいね。

 

 

 

画像加工については、以前でも記事にしていますが、
WEBサイトで簡単に画像加工できますので、参考にしてくださいね。

WEBサイトでポラ風写真に加工する方法とは?

 

 

 

 

画像が用意できたら、またレイアウトを決めましょう。

姫系ブログは、やっぱりレイアウトが肝心かも????

 

 

 

画像を配置するのも、基準とするレイアウトがあった方がやりやすいです。

 

 

今回の私のサンプルは、質問をしてくださった方のレイアウトで作成しています。

こんな感じです。

 

好きな画像を設置

 

 

 

 

ヘッダーの右と、記事左横に画像を配置しています。

 

 

このように、好きな画像を好きな場所に配置する方法をご紹介しますね。

 

 

 

 

このサンプルでは、ヘッダー右の画像は背景を透過しているので、
ブログ全体の背景が見えるようにしてあります。

 

 

 

記事横の画像は、画像がちょっと大きかったので、
小さいサイズに変更してから、アップロードしました。

 

 

 

画像の加工が終わったら、画像をアップロードします。

 

 

 

 

アメブロの管理画面も新しくなったので、画像アップロードも簡単になりましたね。

「ブログの管理」から「画像フォルダ」を選んでください。

 

 

すぐにアップロード画面があります。

 

 

 

配置したい画像を先に作ってアップロードさせてくださいね。

 

 

 

この下準備を先にしておいて、CSSを追加しフリースペースを使って、
画像を表示させていきます。

 

 

 

 

 

hana2画像を好きな場所に配置する方法

 

CSS変更可能デザインの場合は、CSSの一番下に、
下記コードをコピーして貼ってくださいね。

 

 

 

 

 

point!

#clip1 名前は解りやすい名前にしてね。

 

 

今回 div(配置)を定義する時に、「#clip1」と付けましたが、
#の後は、自分の解りやすい名前に変更してください。

 

 

数字を付けたのは、2枚の画像をそれぞれ違う場所に設置するので、
連番の方が解りやすいので使いました。

 

 

 

CSSにつける任意の名前や、コメントアウトは自分の解りやすいものにしましょう。

 

 

 

#clip2の設定では、画像の幅や高さも設定してあるんですが、
別に設定しなくても大丈夫です。
今回は、表示を小さくさせたかったので設定してあります。

 

 

 

 

 

配置の距離ですが、topというのは、一番上からの距離ということです。
left・rightはそれぞれ、右端・左端からの距離です。

 

 

 

 

数字は自分の好きな場所に合わせて、変更してみてくださいね。

 

 

 

 

CSSを追加したら、一旦保存します。

※CSSを追加しただけでは、表示できません。

 

 

 

 

次に表示させるために、フリースペースを使います。

 

 

 

フリースペースに、下記コードをコピーして記述してください。

 

 

 

 

 

フリースペースにコードを追加したら、保存してブログを確認してくださいね。

 

 

 

 

画像の配置を変更する場合は、CSSのみの変更になりますので、
一度フリースペースにコードを追加したらOK!!

また、画像のみの変更の場合は、フリースペースのみの変更となります。
(画像のアップロード先URLのみ変更すればOK!!)

 

 

 

 

 

好きな画像を好きな場所に配置するって、他のブログでも使えるかもですね。

 

 

 

こうやって、オリジナル色が強いのが姫ブログの特徴ですね。

 

 

 

ですが、このCSSや設定の方法は違う場所でも応用できます。
覚えて使ってみてくださいね。
 

 

 

ぜひお試しあれ!!

 

 

 

テンプレートデザイン・カスタマイズのこと、アクセスアップのこと、
アメブロのことならお任せあれ!

Copyright © アメブロdeアクセスアップ All Rights Reserved.