本記事ではアメブロのヘッダー設置方法について解説してきます。
記事下には変更できない場合の対処法も記載していますので、アメブロのヘッダーが変更できなくて悩んでいらっしゃる方も参考にされてくださいね！
アメブロのヘッダー変更する方法(CSSの編集)
アメブロのヘッダー画像の作り方は下記記事をご覧ください。
-
wss
続きを見る
ヘッダー画像は無料ツールCanvaで作成しています。
ヘッダーを貼り付ける場所はCSSの編集！
CSSの編集ページのコードは下記コピペしてご使用ください。
/* ヘッダータイトル */
.skin-headerTitle {
padding-top: 80px;
padding-bottom: 80px;
text-align: center;
}
/* ヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(https://stat.ameba.jp/user_images/20210419/15/mamakigyoulesson/30/26/p/o2240120014928828169.png);
background-size:100%;
width:1120px;
margin: 0 auto;
height: 600px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}
/* グローバルメニュー(共通) */
.nav-wrap {
position: absolute;
margin: 0;
padding: 0;
margin: 5px 0;
background-color: #;
}
.skin-blogSubA, .skin-blogSubB {
position: relative;
}
.skin-columnB .skin-blogSubA .nav-wrap,
.skin-columnC .skin-blogSubA .nav-wrap,
.skin-columnE .skin-blogSubA .nav-wrap,
.skin-columnD .skin-blogSubB .nav-wrap {
left: auto;
right: 0;
}
.skin-columnA .skin-blogSubA .nav-wrap,
.skin-columnD .skin-blogSubA .nav-wrap,
.skin-columnC .skin-blogSubB .nav-wrap {
left: 0;
right: auto;
}
.skin-columnE .skin-blogSubB .nav-wrap {
left: auto;
right: -360px;
}
.nav-body {
margin: 0;
padding: 0;
}
.nav-body:after {
display: block;
clear: both;
content: ".";
height: 0;
visibility: hidden;
}
.nav-body>br {
display: none;
}
.nav-body li {
display: block;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
}
.nav-body li a {
display: block;
text-decoration: none;
}
.nav-body {
width: 1120px; /* メニューバー横幅 */
height:80px;/* メニューバー高さ */
background: #FFFBFB; /* メニューバー全体の背景色 */
padding-top: 20px;/*上下の余白*/
}
/* 標準ナビの上にグローバルメニューを表示 */
.skin-bgHeader {
padding:10px 0; /* メニューバーの表示場所確保 */
}
.nav-wrap {
top: -180px; /* メニューバーの上下位置調整 */
}
.skin-blogBodyInner{
padding-top:0;
}
/* ヘッダー内Youtubeリンク先 */
.thumbnail{
position: absolute;
margin-top: -420px;
margin-left: -730px;
}
/* ヘッダー内ボタンリンク先 */
.Btn{
position: absolute;
margin-top: -570px;
margin-left: -5px;
}
アメブロのヘッダー変更方法(動画解説)
それでは準備ができましたらアメブロのヘッダー画像を変更していきましょう！
アメブロのヘッダーが変更できない時の対処法
アメブロのヘッダーが変更できない。その場合はキャッシュが残っている可能性があります。
以下の手順でキャッシュの消去をお願いします。
[st-card-ex url="https://helps.ameba.jp/faq/others/5510/post_114.html" target="_blank" rel="nofollow" label="" name="" bgcolor="" color="" readmore=""]
