こんにちは、求道者の天啓聖母です。
お金の為に労働する社会を無くしたい、日々の一歩一歩の歩みを綴ります。
ブログ初心者なので、カスタムデザインを使いましたが、どうやらアメブロはCSSが編集できるようです。
まずは、いままで使っていたもの。
カスタムデザイン cambasの2カラム・メニュー左
ヘッダー画像は980px X 300px
これを変えてゆきます。
CSSの新デザインのヘッダー画像は1120px X 400pxなので、0.0264かけて29.568cm X 10.56cmになります。
power pointで作っていきますね。
デザイン->スライドのサイズ->ユーザー設定のスライドサイズで29.568cm X 10.56cmを入力してOKする。
ファイル->エクスポート->ファイルの種類の変更->pngで保存。
完成です。
ここまでは、普通のカスタムデザインと同じです。
さて、ここからがCSS編集用デザインの使い方ですね。
https://ureshi-design.com/2018/08/25/ameblo-custom-header/
このHPを参考にさせていただきました。
「ブログ管理画面」でデザインの変更->カスタムデザイン->CSS編集用デザインの2カラム・メニュー右を選択する。
「ブログデザインのCSSの編集画面」に行く。
先ほど作ったヘッダー画像を「ファイルの選択」ボタンで選択し、「アップロード」をクリックする。
そうすると、アメブロ内での「この画像のパス」が下に出るので、それをコピーする。
ctrl +f で「ヘッダーエリア」を検索すると、出てきます。
の書き込みは「/*」と「*/」で囲ってコメントアウトとして残して、下に自分の書き込みを追加していく。
「表示を確認する」をクリック、必ず毎回レイアウトを確認しながらCSSを書き換えていく。
「ヘッダーエリア」全文はこんな感じです。
追加書きや変更したところは/* my */で囲ってあとで見たときに自分で分かるようにしています。
元のパラメータはコメントアウトして残しています。
/* ブログタイトルエリア、ヘッダー画像の下にテキストを隠す */
.skin-blogTitle {
z-index: -1;
}
/* my ブログタイトルと説明文を非表示にする */
/* ブログタイトル */
/* my ブログタイトル非表示 */
.skin-blogMainTitle {
text-indent: -9999px; /* my */
/* my
color: #333333;
margin-bottom: 10px;
font-size: 27px;
my */
}
/* ブログ説明文 */
/* my ブログ説明文非表示 */
.skin-blogSubTitle {
display: none; /* my */
/* my
color: #999999;
font-size: 16px;
my */
}
/* ヘッダータイトル */
.skin-headerTitle {
padding-top: 0; /* my ヘッダー上余白 */
/* my
padding-top: 80px;
padding-bottom: 80px;
*/
padding-bottom: 0; /* my */
text-align: center;
}
/* my ヘッダーの背景色とヘッダー画像 */
.skin-bgHeader {
background-color: transparent;/* ヘッダー背景色 */
background-image: url(上でコピペした自分のヘッダー画像のURL貼ってね); /* my ヘッダー画像URL */
background-repeat: no-repeat;
background-position: center top;
height: 400px;/* ヘッダー高さ */
width: 1120px;/* ヘッダー横幅 */
margin: 0 auto;
}
/* my */
/* my ヘッダーの横幅 */
.skin-bgHeader [data-uranus-layout="headerInner"] {
width: 1120px;
}
/* my */
/* my ヘッダーの高さ */
.skin-bgHeader [data-uranus-layout="headerInner"]>a {
height: 400px;
}
/* my */
今は特別こだわりもないので、リンク先のHPの方の言う通りに作りました。
デザインのセンスもないので、よくわかりませんがまあ良しとしましょう。
天啓 聖母
