アメブロプロフィール改造 フリースペースにCSSを追加します。

アメブロプロフィール改造 フリースペースにCSSを追加

私のアメブロですが、プロフィールの部分を
もうちょっと改造しました。
プロフィール部分はCSSをフリースペースに追加することで、細かく変更できます。

 

 

 

アメブロのプロフィールの部分は、
自分のことをより深く知っていただくためには、
重要なスペースといえますね。

 

以前の記事でも書いたように、
プロフィールの改造は、初心者でも可能です。
背景画像の設定や、メニューバーの設定、アピールなど、
フリースペースを使ったりすると、
設定画面から、デザインの変更が行えますよ。
【アメブロ プロフィールの改造 初心者にもできる】

 

もう一歩進んだ、プロフィールの改造方法として、
自分の運営しているブログと同じデザインで、
背景画像とヘッダー画像を設置してみましょう。
こんな感じね。

プロフィール背景とヘッダー画像の設置

 

これは、CSSといって、スタイルを変更していきます。

 

プロフィールの部分にも、【フリーススペース】が用意されています。

 

ここでは、HTMLも記述できますし、
CSSも記述することができます。

 

※CSSとは?
Webデザインのスタイルやデザインを定義するものです。

 

私の使っているテンプレートデザインをもとにして、
CSSをフリースペースに追加して、変更してみました。

 

私のブログは、アメブロビズ2(AmebloBiz2)のデザインを使っているので、
そのCSSを少しパクリながら、記述しているので、
ちょっとCSSが解る方ならできると思いますので、
ぜひチャレンジしてみて!!

 

前準備

私のブログデザインのヘッダ画像は、
ちょいと自分でアレンジしているので、作りなおしてみましたが、
ブログヘッダーに使っている画像をそのまま使う方は、
そのままデザインの変更より、CSSをパクってください。

CSSの部分が解らないようであれば、デザインの変更より、再度ヘッダー画像や、背景画像をアップロードする必要があります。

 

事前に画像たちは作成しアップロードして、
アップロード先のURLを、メモにコピーしておきましょう。
こんな感じね。
(例として、普通の画像をアップロードしています。)

背景画像アップロード

アップロード後

 

設置作業手順

プロフィールの編集から、【フリースペース】を選択してください。

 

私の場合ですが、もうアピールポイントを記述していますので、
文字がたくさん並んでいますね。
こんな感じね。

フリースペースにCSSを追加する

 

文字入力のスペースの下に、プレビューが表示されますので、
ここを見ながら、変更していってもいいです。

 

文字入力のスペースの上でも、下でもいいので、
空きをみつけてください。
そこに、CSSを貼っていきます。

 

まず、設定部分のCSSです。
解らない!!と思ったら、下のソース部分をパクってくださいね。

 

 

↑ この設定で、ナビメニューが消えます。

ナビメニューというのは、この部分です。

ナビメニューの説明

※消したくない方は不要です。

次に、背景画像とヘッダー画像を設置します。

 

プロフィール画面にも、アメブロの大きな広告がありますが、
これを削除することは、禁止されています。
(表示させない方法は、ありますが・・・これはどうなんだ????)
ので、このヘッダー広告の下から、表示させることにしますね。

 

 

アメブロのプロフィールの構成を確認すると、
【wideContentsArea】の中に、ヘッダーがあることがわかるんですね。

なので、そのトップから、貼ります。

 

repeat-x というのは、画像を横に繰り返すという意味なので、
大きな画像を使っている方は、この部分を

no-repeat !improtant;

と変更してください。

!improtant; とは、この設定の方が優先されまっせーという意味です。

 

これで、いったん保存して、プロフィール全体をみてくださいね。
背景が、設定した画像に変更し広告の下に設置出来たらOKです。

 

次にヘッダー画像を設置します。

 

先ほどの背景画像のソース(コード)の下に、続けて記述します。
 

 

display:block とか、 visibility:visible とかは、
ブログを設定したときのCSSに記述されている文言をパクってくださいね。

 

ブログのCSSの中で、【ブログのヘッダー】とか、
【skinHeaderArea】の部分に記述があります。
全部パクってください。

width:980px; height:400px

width ⇒ ヘッダー画像の幅 height ヘッダー画像の高さを表しています。
それぞれ、ヘッダーの幅や高さを記入してくださいね。

 

ポイント

フリースペースは、ブログの設置の時に使うフリースペース同様、
改行があると、表示できません。

上記は、見やすいように改行しているので、
全ての改行(スペース)を削除して貼ってくださいね。

 

これで、保存をします。

 

公開用プロフィールを確認してくださいね。
ちゃんと表示されていたら、OKです。

 

どうでしょう?

http://profile.ameba.jp/affilly-chiezou/

 

 

 

 

※画像をクリックすると、サイトへ飛びます。

 

 

ブログとお揃いだと、イメージが統一されていいですよね。

 

アメブロのブログとプロフィール。
どちらも大事な訪問者を集める入り口です。

時間があるときに、しっかり作り込んでいきましょう。

 

 

アメブロテンプレートについて、ご質問や、
ご相談がありましたら、気軽にメールしてくださいね。

 
 
 

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



こんにちは。ちえぞうです。
手作りモノが、大好きで、好きが講じて手芸家になりました。
自分の時間を、もっと大事にするため、アフィリエイトもしています。 夢を叶える為に、日々奮闘中です。

もっと詳しくプロフィール♪

line

お役に立てたら、ぽちっとな ♪



Fc2ランキングへ



お問い合わせ

ペンちゃんをクリック!!

pen

ご質問や、ご相談など、
気軽にメールしてくださいね。

アメブロテンプレート参考本

このページの先頭へ