子供の育児ブログの毒抜き編はアメブロを使っているのだが、
どうにもデザインが気に入らない。
記事本文のフォントが気に入らないのだ。
カスタマイズしたくて検索したら、
まずは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;
}
★游ゴシック体バージョンはこちら
/* フォント */
body{
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif;
font-size:16px; /* 文字の大きさ */
color:#403b3b; /* 文字の色 */
line-height:1.75; /* 行間の調整 */
font-weight: 500;
}
次に背景が真っ白なので、背景を変更したい(↓のページを参考に)
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;
}
できた!
背景画像は結局消して、真っ白にしました。