アメブロにヘッダー画像を設置してみよう
ヘッダー画像はだれでも簡単にプロのようなデザインが作れるデザイン作成ツールCanvaを使うと、すてきな画像が作れます。
以下、説明画像を見ながら、設定を行ってください。
または、別の場所から
ここからがCSSの編集です。
CSS編集の一番下に以下のコードを貼り付けてください
/* ヘッダーの背景色とヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center;
background-color: 【背景色】;
background-image: url(＊);
}
/* ヘッダーの横幅を設定する */
.skin-bgHeader [data-uranus-layout="headerInner"] {
width: 1120px;
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [data-uranus-layout="headerInner"]>a {
height: ヘッダーの高さを入れるpx;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}
background-image: url(＊);のところに、先ほどアップされた画像のパスのURLを入れてください。
ヘッダーの高さは作ったヘッダーの高さに合わせて入力してください。
出典元：
ヘッダー画像の高さを入力
【アメブロのCSS変更できない場合】
アメブロにはCSSを用いて編集ができないものも存在しています。
この場合には、
【CSS編集できるテーマにする方法】
①アメブロへログイン
②ブログ管理をクリック
③デザインの設定をクリック
④「他のカテゴリからブログデザインを探す」からカスタム可能をクリック
⑤希望するテーマを選択し適応をクリック⑥CSS編集が可能なテーマへの変更が可能
または、以下の方法もあります。
アメブロにヘッダー画像を設置する2つ目の方法
つぎにご紹介するCSSのどちらかを選んで、丸ごと貼り付けしてください。
※サイドバーのプロフィール画像が丸い場合は、新デザインです。
① プロフィール画像が丸い場合は、以下のコードを貼り付けしてください。
/*ヘッダー画像*/
.skin-bgHeader {
background:url(画像の URL) #ffffff center no-repeat; /*画像*/
height: 300px; /*画像の高さ*/
}
/*ブログタイトル、説明文位置初期化*/
.skin-blogMainTitle,.skin-blogSubTitle{
margin:0; /*マージン*/
padding:0; /*余白*/
}
/*ヘッダー画像のリンク設定*/
a .skin-blogMainTitle {
width:1120px;/*画像の横幅*/
height:300px;/*画像の高さ*/
display:block; /*表示設定*/
position:absolute; /*位置設定*/
text-indent:-9999px; /*ブログタイトルを隠す*/
}
/*ブログ説明文を非表示*/
.skin-blogSubTitle{
display:none; /*表示設定*/
}
※サイドバーのプロフィール画像が四角い場合は、新デザインです。
② プロフィール画像が四角い場合は、以下のコードを貼り付けしてください。
/*ヘッダー画像*/
div.skinHeaderArea {
background:url(画像 URL) #ffffff center top no-repeat; /*背景*/
height: 300px!important;/*高さ*/
padding-bottom:10px;/*画像下のマージン*/
}
/*ブログタイトル、説明文位置初期化*/
h1.skinTitleArea,h2.skinDescriptionArea{
margin:0; /*マージン*/
padding:0; /*余白*/
}
/*ヘッダー画像のリンク設定*/
h1.skinTitleArea a{
width:980px;/*画像の横幅*/
height:300px;/*画像の高さ*/
display:block; /*表示設定*/
position:absolute; /*位置設定*/
text-indent:-9999px; /*ブログタイトルを隠す*/
}
/*ブログ説明文を非表示*/
h2.skinDescriptionArea{
display:none; /*表示設定*/
}
出典元：
https://naitoisao.com/how-to-insert-amebloheader/
