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

アメブロ姫ブログカスタマイズアイフレを設置する方法 | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


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

アメブロの姫系ブログのカスタマイズです。

 

アメブロのレイアウトが決まったら、自由にテキスト(文字などを)配置できる、
アイフレを使って、プロフィールを作りましょう。

 

 

アイフレ、ご存知ですか?

 

 

 

 

 

アメブロの姫系ブログを見てみると、
プロフィール欄や、すきなことをたくさんテキストで書いてある方、
沢山見ることができます。

 

 

 

その中で、アイフレという言葉が出てきていました。

 

 

アイフレってご存知?

 

 

 

私は知らなかったので、今回とっても勉強になりましたよ!!

参考にしたサイトは、こちらです。

 

http://ameblo.jp/200082410/entry-11182626230.html

 

 

 

 

 

 

 

 

 

※クリックするとサイトへ飛びます。

 

 

 

 

 
アイフレとは、好きな場所にテキストなどを設置する箱のことだそうです。
(知らなかったわー・・・・)

 

 

 

最初は、難しく考えすぎて本当に苦労しました。
でも、結構簡単です!!

 

 

 

フリースペースで、テキスト(文字などね)を書いて、
箱はCSSで装飾して、表示させることができます。

 

 

 

私のサンプルブログでは、プロフィールをアイフレを使って表示させるように、
ヘッダー画像の横に設置しました。

こんな感じです。

 

アイフレ設置場所

 

 

 

ちょっと見づらいかしら?

 

 

 

テキスト的には、なんでもいいのですが、
アイフレを利用すると、デフォルトのプロフィールも、
自由な感じで作って設置できるようになりますね。

 

 

 

上図のアイフレの場合は、下の背景画像を見せるように、
CSSで半透明の設定をしています。

 

 

これも自由に変更できますよ。

 

 

 

他のブログでも使える設定ですので、覚えて使ってみて!!

 

 

 

 

hana2アイフレをヘッダー横に設置する方法

 

アイフレをどこに設置するかイメージしてみてくださいね。

 

 

 

サンプルでは、ヘッダーの左横に設置しています。
好きな場所にアイフレは設置できますので、CSSを応用してみてくださいね。

 

 

 

レイアウトが決まったら、CSSを記述していきます。

 

 

CSS編集可能デザインスキンを使っている方は、「CSSの編集」からCSSの部分の
一番下でいいので下記コードをコピーして追加してみて。

 

 

 

 

point!!

 

CSSの説明です。

 

アイフレを position:absolute で絶対値に設定をすることによって、
この場所に表示せまっせーということです。

 

 

 

アイフレの大きさには設定しておきましょう。(widthとheight で設定する)

この大きさから、文字がはみ出た場合を考えて、
(たくさんテキストを書くという時のために)overflow:autoとして
スクロール表示させています。

 

 

背景を半透明にする設定は、要らない方は削除してくださいね。

 

 

 

 

このままでは、表示できないので一旦CSSを保存します。

 

 

 

次にフリースペースで、アイフレの部分に表示させたいテキストを記述していきます。

 

 

下記のコードをコピーし、テキストを追加してフロースペースに貼ってくださいね。

 

 

 

 

 

 

check

フリースペースには改行を入れないこと!!

 

 

アメブロのフリースペースは、改行を入れると表示できません。

 

 

</br>は使えますが、これはHTMLコードです。

 

 

 

解らない方は、記事投稿でテキストを作りHTML表示されているテキストを
コピーして、そのまま<div id=”aifure”>と</div>の間に貼りつけましょう。

 

 

 

フリースペースを初めて使う場合は、「配置設定」で、フリースペースを
「使える機能」へ移動させてくださいね。

 

 

 

保存をかけて、ブログを確認しましょう。

 

 

 

ちゃんと表示できていれば、完成です。
※表示されていない場合は、F5キーを押下して更新をかけてみてください。

 

 

 

 

 

結構簡単でしょう?

 

 

 

それに他のブログにも使える方法ですよね。

 

 

 

アイフレを一度知ってしまうと、なんか他のことにも使えそうで、
いろいろやってみたくなります。

 

 

 

設定の方法を覚えて、いろんなブログに使ってみましょう。
ぜひ、お試しあれ!!
 

 

 
 

 

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

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