簡単ヘッダ定義ツール

目的

muragonのカスタマイズ。
ヘッダ画像は以下から指定する。
表示されるヘッダ画像の高さはタイトル+説明文しかなく、CSSで高さを定義する必要がある。
この為、初心者でも簡単にヘッダ関連のCSSを設定できるようにする。

[デザイン変更] > [ヘッダ] > [ヘッダ画像アップロード]
#blog-header-inner {
background-image : url(ヘッダ画像);
}
ヘッダ画像の幅は970pxとする。

ツール

説明

各項目の説明と作成されるコードを示す。

ヘッダ画像の高さ

ヘッダ画像に合わせ高さを指定する。
この時、ブログトップに戻るのリンクをヘッダ領域全体とする。

/* ヘッダ画像の高さ */
.blog-header-inner {
position : relative;
height : 高さ;
}

/* ブログトップのリンク領域 */
.blog-root-link:after {
content : "";
display : block;
position : absolute;
top : 0;
left : 0;
width : 970px;
height : 高さ;
}

タイトル・説明文中央配置

タイトル・説明文を縦横中央に配置するか選択する。

.blog-header-inner {
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
}

タイトル

タイトルを表示・非表示を選択する。
非表示とした場合、ブログトップに戻るができなくなる為、必ず高さを指定する。

.blog-title {
margin : 0;
font-size : 0;
}

タイトルの文字色を指定する。通常、hover時の色を同じ色となる。

.blog-title{
margin : 0;
}

.blog-root-link,
.blog-root-link:hover {
text-decoration : none;
color : 文字色;
}

説明文

説明文を表示・非表示を選択する。

.blog-description {
display : none;
}

説明文の文字色を指定する。

.blog-description {
margin : 0;
color : 文字色;
}

フッタ透過

フッタの背景を100%透過か選択する。

.blog-footer {
background-color : transparent;
}

メイン・サイド角を丸くする

メイン・サイドの角を丸くか選択する。

.main,
.sub {
border-radius : 10px;
}

メイン・サイド透過

メイン・サイドの背景を90%透過か選択する。

.main,
.sub {
background-color : rgba(255, 255, 255, 0.9);
}

補足

背景画像は以下から指定する。

[デザイン変更] > [背景] > [背景画像アップロード]
body {
background-image : url(背景画像);
}

/* 中央に拡大配置 */
.image-center {
background-repeat : no-repeat;
background-attachment : fixed;
background-position : center top;
background-size : cover;
}