アメブロ カスタマイズ 方法 ~ブログを変える!~ -2ページ目

アメブロ カスタマイズ 方法 ~ブログを変える!~

アメブロカスタマイズの方法を公開してます。ヘッダー制作、メニューバー制作、バナーや広告制作、Facebookページ制作、などなど・・・その他カスタマイズの注文も承っております。

こんにちは、アメブロカスタマイズの松田です。
今回は、プロフィールページの編集についてお話させていただきます。


プロフィールページがどのページのことを言っているのかわからない方、ブログトップページのプロフィールというボックスの中の「プロフィール」というリンクをクリックしてみましょう。





プロフィールページの編集と言っても、これは誰でも出来るとても簡単な編集方法です。
まず、初期設定のままの状態だと、おそらく↓の画像のような状態でしょう。





自分のプロフィール情報が表示されるページですね。真っ白です。
先に言っておきますと、このプロフィールページというのは、


ブログトップページの次に
一番見られるページ



と言っても過言ではないでしょう。
例えば、「今日ついたペタ」から、「ペタ」をしてくれた人のリストをチェックして、
名前をクリックするとまずこのプロフィールページへ飛びます。
あとは、メッセージなどを受信した時の、相手の名前のリンク先もプロフィールページになってます。


まぁ、プロフィールページは重要なのでブログトップページと同じくらい充実させておく必要がある、ということですね。


それでは簡単な編集方法ですが、まずブログの【管理画面】ページを開きましょう。
左上にあたりに【アメーバのサービス一覧】というリンクがあるのでこれをクリックします。
クリックすると、アメーバのサービスの一覧が並んで出てきますので、この中の【プロフィール編集】という
項目の下にある【編集トップ】を選びましょう。


すると、プロフィールページの編集画面が出てきます。
プロフィールの基本情報や、自己紹介スペースなどにまだ何も書いていなければ、ここもキチンと埋めておきましょう。
定番の質問なども答えておくと、読んでて面白いですね。
あとはフリースペースが右側にあるので、ここに宣伝したいことなど何でもいいので自由に書いておくと良いでしょう。


さらに、【色・背景の変更】から、プロフィールページの色を変えることが出来ます。





背景色や、文字色、リンク色、ボックスの色などを自由に変えれます。
自分のブログに雰囲気に合わせてここも変えておくと効果的です。


他にも、ヘッダーメニューバーをプロフィールページに表示させるカスタマイズなどがあるので気になる方は下記から詳細をチェックしてみましょう



こんにちは、アメブロカスタマイズの松田です。

今回は、アメブロの
メニューバー(グローバルメニュー)
の設置に仕方をご紹介させていただきます。

このメニューバーがあると、ブログをパッと見た時に、どのような内容がブログに書かれているのか、何が重要なのか、何を紹介しているのか、などを一瞬で見て理解することが出来ます。

さらにはバーの中のボタンをクリックすることによってそのページへとすぐ飛べるようになるので、このメニューバーがあるだけで大変分かりやすく、見やすいページになります。

さて、その設置方法ですが、まずはアメブロのスキン(テンプレート)をCSSが編集できる、【CSS編集用デザイン】にしていないと設置できません。
【CSS編集用デザイン】適応方法はコチラ

まず、フリースペース内に下記HTMLを記述します↓

<div id="navi"><a id="menu01" href="メニュー1のURL">メニュー1</a><a id="menu02" href="メニュー2のURL">メニュー2</a><a id="menu03" href="メニュー3のURL">メニュー3</a><a id="menu04" href="メニュー4のURL">メニュー4</a><a id="menu05" href="メニュー5のURL">メニュー5</a></div>


フリースペースにこちらを記述したら保存します。フリースペースは以上です。
次はCSSの編集になります。
CSS編集の画面で、CSSが記述してあるスペースに下記を記述してください。一番下とかに記述するとよいでしょう。

次は、CSSの記述です。CSSの編集ページにいき、
下記CSSを追加してください。自分の好きなように背景の色や、サイズなどを調整して、保存してください。


#navi {
position:absolute;
top:250px; /*-- ヘッダー画像との距離 --*/
margin-top: 20px;/*--上と下の間隔--*/
}
#menu01 {
position:absolute;
display: block;
top:0px;/*--トップからの位置--*/
left:0px;/*-- ヘッダー左端からの位置 --*/
width:160px; /*-- メニューバーの幅 --*/
height:80px; /*-- メニューバーの高さ --*/
background:url(メニューの画像URL) no-repeat;
}

#menu01:hover {
background:url(マウスを載せたときの画像URL) no-repeat;
}

#menu02 {
position:absolute;
display: block;
top:0px;/*--トップからの位置--*/
left:0px;/*-- ヘッダー左端からの位置 --*/
width:160px; /*-- メニューバーの幅 --*/
height:80px; /*-- メニューバーの高さ --*/
background:url(メニューの画像URL) no-repeat;
}

#menu02:hover {
background:url(マウスを載せたときの画像URL
) no-repeat;
}

#menu03 {
position:absolute;
display: block;
top:0px;/*--トップからの位置--*/
left:0px;/*-- ヘッダー左端からの位置 --*/
width:160px; /*-- メニューバーの幅 --*/
height:80px; /*-- メニューバーの高さ --*/
background:url(メニューの画像URL) no-repeat;
}

#menu03:hover {
background:url(マウスを載せたときの画像URL) no-repeat;
}

#menu04 {
position:absolute;
display: block;
top:0px;/*--トップからの位置--*/
left:0px;/*-- ヘッダー左端からの位置 --*/
width:160px; /*-- メニューバーの幅 --*/
height:80px; /*-- メニューバーの高さ --*/
background:url(メニューの画像URL) no-repeat;
}

#menu04:hover {
background:url(マウスを載せたときの画像URL) no-repeat;
}

#menu05 {
position:absolute;
display: block;
top:0px;/*--トップからの位置--*/
left:0px;/*-- ヘッダー左端からの位置 --*/
width:160px; /*-- メニューバーの幅 --*/
height:80px; /*-- メニューバーの高さ --*/
background:url(メニューの画像URL) no-repeat;
}

#menu05:hover {
background:url(マウスを載せたときの画像URL) no-repeat;
}

#menu06 {
position:absolute;
display: block;
top:0px;/*--トップからの位置--*/
left:0px;/*-- ヘッダー左端からの位置 --*/
width:160px; /*-- メニューバーの幅 --*/
height:80px; /*-- メニューバーの高さ --*/
background:url(メニューの画像URL) no-repeat;
}

#menu06:hover {
background:url(マウスを載せたときの画像URL) no-repeat;
}



メニューバーの設置は、上記を追加するだけですが、間違って他のCSS部分をいじってしまったりしてブログの表示が変わってしまったりすることもあります。

心配な方は記述する前に、記述前のCSSを全てコピーして、メモ帳などに貼り付けておくなどをしておくと良いでしょう。

一度間違った状態で保存してしまうと、元には戻せませんので
こういったバックアップを取っておくのは大事ですね。


自分でメニューバーを制作するのが難しい…、
分からない…、めんどくさい…
という方へオススメのプランはコチラ

初心者プラン



ご質問・ご希望等ございましたら
お気軽にお問合せ下さい。

お電話でもOK!03-5458-7062

こんにちは、アメブロカスタマイズの松田です。本日は、ブログの
ヘッダーを変える方法
についてお話させていただきます。

アメブロのヘッダーは「CSS編集用デザイン」というテンプレートを使用することによって変更できます。

アメーバブログへログイン→デザインの変更→カスタム可能へと進み、カスタム可能デザインの一覧から
【CSS 編集用デザイン】を表示します。

カラムを選択して、【適用する】をクリックします。



私のブログカラムは真ん中の「2カラム・右ワイドメニュー」を選択しましたが
自分の好きなカラムを選びましょう。
ブログデザイン適用完了の画面から、CSSの編集へと進みます。



現在使用中のブログデザイン CSSが表示されます。
CSS(スタイルシート)の編集は、この画面から行います。



幅 980px 高さ 300pxのオリジナルのヘッダー画像を作成したとします。
このヘッダー画像を、ブログデザインヘッダ・背景用画像の追加からアップロードします。

現在使用中のブログデザインCSSを、以下のように編集します。

▼変更前のCSS▼

/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */


▼変更後のCSS▼

/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background-image: url(ヘッダー画像URL);
width: 980px;
height: 300px;

}

↑の(ヘッダー画像URL)の部分に、アップロードした
画像のURL(「この画像のパス」と書いてある部分)を
コピー&ペーストして下さい。

「height: 300px;」は、ヘッダー画像の高さの指定です。
高さは自分の作った画像の高さをここに入力してください。

組み込み作業はこれだけです。
あとは「ブログタイトル」とか「ブログ説明文」などがヘッダーに
重なっちゃったりすると、位置の編集とかもする必要がありますね。以上がCSS編集でヘッダーを組み込む方法です。

CSS編集ってよく分からない…
画像がうまく作れない…


という方は、下記よりお申込みいただければ、弊社が画像の製作からCSSの組み込み作業まで全て代行いたします。

使いたい写真や、画像などがあれば送って頂ければ素材として使用いたします。

ヘッダー制作はコチラ!


ご質問・ご希望等ございましたら
お気軽にお問合せ下さい。

お電話でもOK!03-5458-7062




アメブロカスタマイズの松田です。こんにちは。

本日は、CSS編集をする方法についてお話いたします。

CSSを編集するには、まず【CSS編集用デザイン】テンプレートを適用している必要があります。
【デザインの変更】→【カスタム可能】から検索。
テンプレート選択画面から、【CSS編集用デザイン】というテンプレートを選択しましょう。



【CSS編集用デザイン】を適用したら、CSSの編集が出来るようになりますので、ブログ全体の幅や、ヘッダーの高さなど、色々と編集出来るようになります。



※旧デザインのままの方は、テンプレートを変えると自動的に新デザインに変わってしまいますので、一度変えてしまうともとのデザインには戻れなくなります!ご注意下さい!

「CSS編集用デザイン」を適用したら、「CSS編集」が出来るようになりますので、ブログ全体の幅や、ヘッダーの高さなど、色々と編集出来るようになります。

自分のオリジナルのデザインにしたいという方も多くいますが、CSSの編集にはある程度の専門知識が無いと難しいです。自分で試してみたけどうまくいかない…思い通りにいかない、という方はカスタマイズしてくれる業者に直接お願いしたほうが良いでしょう。

このサイトはブログカスタマイズの専門サイトです。ご質問やご要望等ございましたらお気軽にご連絡ください。


アメブロカスタマイズメニュー一覧


ご不明な点や、ご質問等ございましたら
どうぞお気軽にお問合せ下さい。

お電話でもOK!03-5458-7062





こんにちは、アメブロカスタマイズの松田です。本日は、ブログの
ヘッダーを変える方法
についてお話させていただきます。

アメブロのヘッダーは「CSS編集用デザイン」というテンプレートを使用することによって変更できます。

アメーバブログへログイン→デザインの変更→カスタム可能へと進み、カスタム可能デザインの一覧から
【CSS 編集用デザイン】を表示します。

カラムを選択して、【適用する】をクリックします。



私のブログカラムは真ん中の「2カラム・右ワイドメニュー」を選択しましたが
自分の好きなカラムを選びましょう。
ブログデザイン適用完了の画面から、CSSの編集へと進みます。



現在使用中のブログデザイン CSSが表示されます。
CSS(スタイルシート)の編集は、この画面から行います。



幅 980px 高さ 300pxのオリジナルのヘッダー画像を作成したとします。
このヘッダー画像を、ブログデザインヘッダ・背景用画像の追加からアップロードします。

現在使用中のブログデザインCSSを、以下のように編集します。

▼変更前のCSS▼

/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */


▼変更後のCSS▼

/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background-image: url(ヘッダー画像URL);
width: 980px;
height: 300px;

}

↑の(ヘッダー画像URL)の部分に、アップロードした
画像のURL(「この画像のパス」と書いてある部分)を
コピー&ペーストして下さい。

「height: 300px;」は、ヘッダー画像の高さの指定です。
高さは自分の作った画像の高さをここに入力してください。

組み込み作業はこれだけです。
あとは「ブログタイトル」とか「ブログ説明文」などがヘッダーに
重なっちゃったりすると、位置の編集とかもする必要がありますね。以上がCSS編集でヘッダーを組み込む方法です。

CSS編集ってよく分からない…
画像がうまく作れない…


という方は、下記よりお申込みいただければ、弊社が画像の製作からCSSの組み込み作業まで全て代行いたします。

使いたい写真や、画像などがあれば送って頂ければ素材として使用いたします。

ヘッダー制作はコチラ!


ご質問・ご希望等ございましたら
お気軽にお問合せ下さい。

お電話でもOK!03-5458-7062