アメブロのヘッダーの高さを変えるCSSを設定する場所は?

こんにちは。YOSHITAKA(@YOSHITA19704216)です。

初心者
アメブロも使っているのですがヘッダーの高さの設定方法がわかりません

よしたか
基本的に高さ設定をするときはCSS編集を使います。。

 

CSSの編集でヘッダー画像の「高さ」の変更ができますので

設定で編集しましょう。

この記事を読むことで
  • アメブロのヘッダーの高さを編集することができます。
  • CSSの編集する部分がわかります。

アメブロのCSS編集でヘッダーの高さを変える方法

自分がアメキンを使ってヘッダー画像などを調整した部分です。

アメーバブログのヘッダーの高さを変更する

ブログヘッダー画像の高さを変更する部分です。

黄色い文字の所

特にこの部分を変更していきましょう。

↓ ↓ 

height:350px;

 

CSSの編集する箇所

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

/* skinHeaderFrame ブログタイトルを囲うエリア */
.skinHeaderFrame {
}

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea {
width: 1038px;/* 注 ベースのcssにwidth:980px;の記述有り */
background: #FFF;
border-left: 1px solid #32457f;/*変更箇所*/
border-right: 1px solid #32457f;/*変更箇所*/
}

.skinHeaderArea2 {

background:url(“https://stat.blogskin.ameba.jp/blogskin_images/20190528/22/4c/Kf/j/o10000350blog-starter-20191559050617065.jpg”);

background-position: center top;
background-repeat: no-repeat;
height:350px;

}

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea {
padding: 0;
}

/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea {
padding: 8px 15px 0;
}
/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea {
display: none;
}
/* ※(1)文字のスタイル にブログヘッダー文字の記述有り */

まとめ

CSSを編集するテンプレートは

ヘッダーの画像の高さを変更することができますが

「どこを直せば良いのかわからない」という人はたくさんいらっしゃいます。

 

数字を編集しながらプレビューで設定していってみてください。(^^)

その他メルマガを流していますので、興味があれば登録して下さいね(^^)

あなたは「Web集客」に限界を感じていませんか?

サイトをただ作るだけで満足ですか?

あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

良いコンテンツも埋もれてしまっては全く意味がありません。

正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

しかも、これだけでは終わりません!!

その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事