自称Web漫画家たえの日記

酒と水泳と漫画を愛するわたくしの日記です。

アメブロをカスタマイズする

子供の育児ブログの毒抜き編はアメブロを使っているのだが、

どうにもデザインが気に入らない。

記事本文のフォントが気に入らないのだ。

 

カスタマイズしたくて検索したら、

まずはCSS編集用のデザインを選択しなければならない。

 

その後にフォントを変更(↓こちらのページを参考に)

https://ameblo.jp/kyoko-design-note/entry-12453533000.html

以下をCSSにコピペすればOK(もともとフォントの設定がないので)

/*フォントの設定 */
body {
font-family: メイリオ, Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'MS Pゴシック', 'MS PGothic', sans-serif;
}

 

次に背景が真っ白なので、背景を変更したい(↓のページを参考に)

https://irodori-works.tokyo/image-bg/

以下を張り付ければOK

/* コンテンツ背景、ヘッダー以下の背景色 */
body{
background-color: #ffffff;
background-image: url(★);
background-attachment:fixed;
}

 

もともとはこれ↓

/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
background-color: #ffffff;
}

 

・・・で、もともとをコメントでくくって無効にして、お試しで見てみると思い通りになっているんだけど、サイトを見ると、まだ真っ白・・

背景画像の絶対パス(自分ホームページの背景gifへのURL)ではなく、アメブロに画像をアップして参照させたら表示された。

 

今度はトップ画像を変更したい(↓こちらを参考に)

https://wordpress-hp.yokohama/ameblo-original-header

幅は1,120ピクセルが良いらしい。

参考のサイト「ママのための寝ネット集客術」とっても親切!わかりやすい!

掲載されていたタグ。↓こちらをCSS編集でコピペ。高さと画像URLだけ修正。

 

/* ヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center top;
background-image: url(ここに画像URLを貼り付ける);
}
/* ヘッダーの高さを設定する */
.skin-bgHeader [amb-layout="headerInner"]>a,
.skin-bgHeader [data-uranus-layout="headerInner"]>a {
height: 400px;
}
/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}

 

できた!

背景画像は結局消して、真っ白にしました。

ブログ「泥酔ママの育児日記」