アメブロをカスタマイズ（CSS編集）し
オリジナルのヘッダーを作りましょう
アメブロ管理画面→「デザインの設定」→「カスタム可能」
CSS編集用デザインを選ぶ
カラムを選ぶ
ここでは2カラムを選択し
「適用する」をクリック
CSS編集画面の一番下にソースを挿入します。
一番したまで、スクロールします。
下記のソースをコピーし、張り付けます。
CSS ソースを挿入
/* ヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(画像);
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [amb-layout=”headerInner”]>a,
.skin-bgHeader [data-uranus-layout=”headerInner”]>a {
height: 400px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}/* Japan Web Celebrity Association */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(画像);
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [amb-layout=”headerInner”]>a,
.skin-bgHeader [data-uranus-layout=”headerInner”]>a {
height: 400px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}/* Japan Web Celebrity Association */
ソースがうまく張り付けない方はこちらからダウンロードしてください。
↓↓ソースの貼り付け後の出来上がりはこちらです。
画像を入れる
画像のサイズは1120×400で画像を作成します。
「ファイルを選択」→「アップロード」
画像のパスをコピーします。
先ほどソースを挿入したところに張り付けます。
保存後 確認しましょう
フルカスタマイズは講座で学ぶことができます。
これからの時代
自分でカスタマイズできるようにITスキルを手に入れましょう
ヘッダーのデザインで迷ったら
こちら ↓↓
コメント