アメブロ プロフィール 画面のカスタマイズ 設定方法 【ameblo デザイン カスタマイズ 】

アメブロ デザインカスタマイズ オリジナルプロフィール画面 作り方
アメブロ デザインカスタマイズ オリジナルプロフィール画面 作り方
 

アメブロ(ameblo)でオリジナルのデザインを自作してみましょう。今回は、アメブロ プロフィール 画面をカスタマイズする方法を紹介します。
 

アメブロのトップページをオリジナルにカスタマイズされている方は多いと思いますが、プロフィール画面をカスタマイズしている方は少ないのではないでしょうか。
 

せっかく、トップページが綺麗に装飾されていても、プロフィールに移動した時に、デフォルトのままだと印象に残りにくいのではないかと思います。
 

■デフォルトのプロフィール画面(シンプルで印象に残りにくい)

アメブロ デザインカスタマイズ プロフィール画面 設定前
アメブロ デザインカスタマイズ プロフィール画面 設定前
 

できれば、プロフィール画面もアメブロトップページと同じテイストしておきたいところです。
 

そこで今回は、下記のように、アメブロでプロフィール画面をカスタマイズする方法とヘッダー画面やメニューバーを設定する方法を説明していきます。
 

■カスタマイズ後プロフィール画面(オリジナリティがあって印象に残りやすい)

アメブロ デザインカスタマイズ プロフィール画面 完成イメージ
プロフィール画面 完成イメージ
 
 
※2016年12月30日のアメブロ仕様での設定手順になります。

 
 

もくじ

以下は本記事のもくじです。

  1. 1. アメブロ プロフィール カスタマイズ概要
    1. 1-1. 完成イメージ
  2. 2. プロフィールページをカスタマイズする
    1. 2-1. プロフィール用フリースペースの設定
    2. 2-2. ヘッダー画像を設定する
    3. 2-3. メニューバーを設定する
  3. 3. まとめ


 
 
それでは、概要から説明していきます。
 
 

スポンサーリンク



 
 

1. プロフィール画面のカスタマイズ概要

 

1-1. 完成イメージ

今回は下記のように、プロフィール画面に対して、オリジナルのヘッダー画像とメニューバーを追加する設定手順を説明していきます。
 

■完成イメージ

アメブロ デザインカスタマイズ プロフィール画面 完成イメージ
プロフィール画面 完成イメージ
 
 

それでは設定手順を説明します。
 
 

2. プロフィールページをカスタマイズする

 

2-1. プロフィール用フリースペースの設定

まずはじめに、プロフィールの配置の設定より、フリースペースが設定されていることを確認していきます。(左側にあるアメブロの配置設定ではないため注意してください。)

アメブロ 設定 プロフィール>配置の設定
プロフィール>配置の設定
 

デフォルトではフリースペースが配置されているはずですが、されていない場合はフリースペースを下記のように配置してください。

アメブロ プロフィール>配置の設定
アメブロ プロフィール>配置の設定
 

次に、アメブロの設定から、プロフィール>フリースペースを選択します。(少し左にある設定項目「アメブロのフリースペース編集」とは異なるため、注意してください。)

アメブロ 設定 プロフィール>フリースペース
プロフィール>フリースペース
 

プロフィール用のエディタ画面が表示されます。ここに、HTMLやCSSを記述していく形になります。アメブロトップページのカスタマイズとの大きな違いとして、プロフィールページにはアメブロのデザイン編集用CSSが用意されていません。ですので、このフリースペース欄に上記HTML文に対するCSSも追加していきます。

アメブロ プロフィール>フリースペース エディタ画面
フリースペース エディタ画面
 

下記のように、フリースペースにヘッダーやメニューバーなどをHTML文で記述できます。

アメブロ プロフィール>フリースペース HTMLを記述する
フリースペースにHTMLを記述していく
 

同様に、<style>を記述して、中にCSSを書いていくことができます。

アメブロ プロフィール>フリースペース CSSを記述する
フリースペースにCSSを記述していく
 

なお、整形のために、改行を入れたり、スペースを入れるとうまく動かなくなりますので、(見にくいですが)詰めて書く必要がありますのでご注意ください。
 

このようにして、プロフィールページのデザインカスタマイズをしていくことができます。
 
 

それでは、引き続き、具体的な設定に入っていきます。
 

2-2. ヘッダー画像を設定する

まずヘッダー画像を入れていきましょう。下記をコピー&ペーストしてフリースペースに貼り付けてください。★は任意の内容に置き換えてください。
 

<div id="prof-header"><p>★ここにプロフィールタイトルを入れる★</p></div>

<style>#prof-header{background:url(★ここにヘッダー画像のURLを入力する(例.アメブロのトップページと同じURL)★) center no-repeat;position:absolute;top:0;left:0;width:100%;height:500px;z-index:-1;} #prof-header p{font-size: 60px;color:#111;padding-top:180px;text-align:center;} #wideContentsArea{padding-top:40px;margin-top:360px;</style>

 
ヘッダーは画像のみで良い場合は、<p>★ここにプロフィールタイトルを入れる★</p>を記述しなくても構いません。
 

なお、整形のために、改行を入れたり、スペースを入れるとうまく動かなくなりますので、(見にくいですが)詰めて書く必要がありますのでご注意ください。
 

入力完了後に保存して、プロフィールページを参照してください。

アメブロ プロフィール>フリースペース 保存
プロフィール>フリースペース 保存

 

保存完了後に、プロフィールページを参照して、設定が反映されていることを確認します。

アメブロ デザインカスタマイズ プロフィール画面 ヘッダー画像が表示された
プロフィール画面 ヘッダー画像が表示された
 
 

少し詳しく

ちなみに、ここでは、ヘッダー画像は500pxで設定しています。CSSがわかる人は#prof-header{・・・height:500px;・・・}や#wideContentsArea{・・・padding-top:40px;margin-top:360px;・・・}など必要に応じて微調整してください。
 

ちなみに、#wideContentsAreaはヘッダー下のコンテンツエリアで、これをヘッダー画像などを考慮して、下方向に下げて微調整しています。
 

アメブロ デザインカスタマイズ プロフィール画面 #wideContentsArea (赤色)を下に下げる
#wideContentsArea (赤色)を下に下げている。

 
 

2-3. メニューバーを設定する

 
つづいて、メニューバーを設定していきましょう。
 

アメブロ デザインカスタマイズ プロフィール画面 メニューバーのイメージ
メニューバーのイメージ
 

先程と同様に、下記を入力します。 CSSの記述(<style>・・・)は、先ほどのCSSの末尾に足す形で追記してください。
 

<div id="custom-menubar"><ul><li><a href="★URL1★">★URL1の名称★</a></li><li><a href="★URL2★">★URL2の名称★</a></li><li><a href="★URL3★">★URL3の名称★</a></li><li><a href="★URL4★">★URL4の名称★</a></li><li><a href="★URL5★">★URL5の名称★</a></li></ul><div style="clear:both;"></div></div>


<style>#custom-menubar{background:url(★ここにメニューバーの画像URLを入力する★);position:absolute;left:0px;top:470px;text-align:center;box-shadow:10px 10px 10px rgba(0,0,0,0.4);margin-bottom:100px;width:100%;font-size:20px;border-radius:10px;padding:0 auto;} #custom-menubar ul{width: 1000px;text-align:center;height:60px;margin:0 auto;text-align:center;} #custom-menubar ul li{float:left;width:200px;padding: 16px 0 0 0;} #custom-menubar a{color:#fff!important;}</style>

 
 

先程のヘッダー画像の設定と、メニューバーの設定をまとめると、下記のような記述でフリースペースに入力しているはずです。

<div id="prof-header"><p>★ここにプロフィールタイトルを入れる★</p></div>

<div id="custom-menubar"><ul><li><a href="★URL1★">★URL1の名称★</a></li><li><a href="★URL2★">★URL2の名称★</a></li><li><a href="★URL3★">★URL3の名称★</a></li><li><a href="★URL4★">★URL4の名称★</a></li><li><a href="★URL5★">★URL5の名称★</a></li></ul><div style="clear:both;"></div></div>
 
<style>#prof-header{background:url(★ここにヘッダー画像のURLを入力する(例.アメブロのトップページと同じURL)★) center no-repeat;position:absolute;top:0;left:0;width:100%;height:500px;z-index:-1;} #prof-header p{font-size: 60px;color:#111;padding-top:180px;text-align:center;} #wideContentsArea{padding-top:40px;margin-top:360px;}#custom-menubar{background:url(★ここにメニューバーの画像URLを入力する★);position:absolute;left:0px;top:470px;text-align:center;box-shadow:10px 10px 10px rgba(0,0,0,0.4);margin-bottom:100px;width:100%;font-size:20px;border-radius:10px;padding:0 auto;} #custom-menubar ul{width: 1000px;text-align:center;height:60px;margin:0 auto;text-align:center;} #custom-menubar ul li{float:left;width:200px;padding: 16px 0 0 0;} #custom-menubar a{color:#fff!important;}</style>

 
 

少し詳しく

 
ここで記述しているメニューバーは、リンクを5つにしており、幅・フォント・余白設定を決めうちで設定していますが、CSSがわかる人は必要に応じて自由に調整してください。
 

また、メニューバーには「box-shadow:10px 10px 10px rgba(0,0,0,0.4);」で影をつけています。影が不要な場合はここは省略して構いません。
 

なお、例では、メニューバーの色を木目の画像を使っているため、#custom-menubar{background:url(★ここにメニューバーの画像URLを入力する★);のようにurl指定していますが、単純に色指定でも構いません。

例.赤色の場合
#custom-menubar{background:#ff0000;…

アメブロ デザインカスタマイズ プロフィール画面 メニューバー(赤)
background:#ff0000;でメニューバーが赤色に
 

  • 背景や文字の色で
    xxx-color:#○○○○○○;
    という記述を見かけることが多いと思います。
    こちらのAdobeのサイトで無料で使えますのでご活用ください。
    Adobe Color CC – カラーホイール

 

 

これで、ヘッダー画像とメニューバーの設定ができました。

アメブロ デザインカスタマイズ プロフィール画面 完成イメージ
プロフィール画面 完成イメージ
 
 

3. まとめ

まとめです。

今回は、 アメブロ プロフィール ページをカスタマイズする方法を紹介しました。
 

アメブロのトップページをオリジナルにカスタマイズされている方は多いと思いますが、プロフィールに移動した時に、デフォルトのままのテイストだと印象に残りにくいかと思います。
 

アメブロトップページよりも少し調整が難しいですが、余裕があれば是非チャレンジしてみてください。
 

メニューバー、背景の設定方法など参考になる記事も書いておりますので、関連記事をご参照いただければと思います!
 
 
今回は以上になります。最後までご覧いただきありがとうございました。
 
 

スポンサーリンク



 

参考)アメブロ カスタマイズ関連記事

 

アメブロ カスタマイズ関連の記事です。難易度は雰囲気で設定しました!!

 
 

アメブロやってます!読者登録歓迎です(^^)