ウェブリブログのCSS編集メモ 「ページ全体、ヘッダー領域」

こちらのページは、2019年7月に行われたウェブリブログのリニューアル後のCSS編集のメモです。




css_webry00a.jpg

デザインはウェブリブログ「ベーシック(記事概要)」を使用。


ページ全体


css_webry00b.jpg

/* 56行目 */
body {
width: 800px; /* ページ全体の横幅 */
margin: 0px auto; /* コンテンツを中央に配置 */
}
/* 221行目 */
body {
font-size: 12.5px; /* 文字のサイズ */
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Hiragino Sans,"ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN,"ヒラギノ角ゴ ProN W3", Meiryo, sans-serif; /* 文字のフォント */
font-weight: normal; /* 文字の太さ */
-webkit-font-smoothing: subpixel-antialiased;
line-height: 1.5;
background: #66CAED; /* 背景に関する設定 */
color: #808080; /* 文字の色 */
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;
counter-reset: number 0;
}

bodyに設定した値はページ全体に適用されるが、それぞれの領域に個別に設定した場合はそちらの値が優先される

例えば、bodyに「font-size: 12.5px;」を設定し、.Article__content(記事本文の領域)に「font-size: 14px;」とした場合は、記事本文の文字の大きさは14pxになる

「margin: 0px auto;」は、ブログをセンタリング(ページの中央に配置)する設定

bodyに関する記述が複数ある場合の注意点


css_webry02.jpg

※Firefoxの開発ツールでbodyに関するCSSを表示したもの

CSS内にbodyに関する記述が複数ある場合、下の方に書いた値が優先されるので、上のbodyにfont-sizeやbackgroundを設定しても、下のbodyのfont-sizeやbackgroundの値で上書きされてしまうので注意

line-heightに関して


line-heightで行の高さを調節できる

css_webry03.jpg

行の高さ(line-height)を60px、文字の大きさ(font-size)を20pxとした場合、行の高さから文字の大きさを引いた40px分が余白となり、上下均等に20pxずつ余白ができる

単位を付けずに2.0とした場合は、行の高さは文字の大きさの2倍になる

記事本文の行の高さは「.Article__content(記事本文の領域)」で別に設定されているので、記事の行間を変える場合は「.Article__content」のline-heightの値を変える必要がある

CSSのline-heightで単位を指定しない理由
line-heightで行間を調整する方法:おすすめの値は?


ヘッダー領域全体


css_webry03b.jpg

/* 395行目 */
.l-header .l-header__inner {
width: 100%;
}

ヘッダー領域には、タイトル領域とブログパーツ領域がある

ブログパーツ領域は、管理画面から「デザイン」→「コンテンツ(サイドバー)」を選択し、ヘッダー部分にブログパーツを配置すると追加される

初期値が「width: 100%;(領域の横幅)」になっているので、ブログ全体の横幅を変えると自動的にヘッダー領域全体の横幅も変わる


タイトル領域全体


css_webry04.jpg

/* 13行目 */
.Header {
padding: 10px; /* 399行目の.Headerのpaddingで上書きされるのでこの記述は無効 */
background: #499ACD; /* タイトル領域の背景色 */
}
/* 399行目 */
.Header {
max-width: 100%;
width: 100%;
padding: 0 25px;
}

初期値では、左右に25pxの余白(padding)が設定されているが、タイトルの文字を左端や右端にピッタリとくっつけたい場合は、この値を「padding: 0;」にする

paddingに関する詳しい説明は下のページ参照

ブラウザの開発ツールを使って知識ゼロから始めるCSS編集(3)「ボックスモデルを理解してブログのサイズを調整する」

13行目の.Headerのbackgroundの値を変えると、タイトル領域の背景色が変わる

タイトルの背景が画像のテンプレートの場合


例:草原(記事概要)

/* 13行目 */
.Header {
padding: 10px;
background: #3B7FE3 url(https://webryblog.biglobe.ne.jp/images/article/photo_meadow_bg_title.jpg) no-repeat top right;
}
/* 412行目 */
.Header {
max-width: 100%;
width: 100%;
padding: 0 25px;
}

タイトルの背景が画像のテンプレートの場合、上の方の.Headerのbackgroundに画像のURLが記述されている

このURLを変えることで、背景の画像を違うものに変えることも可能

その場合、18行目の

.Header__inner {
height: 100px;
}

のheightの値を、変更後の画像の高さに合わせる必要がある

【CSS】backgroundプロパティの使い方を徹底解説!
CSSのbackground-imageを使いこなす! 使い方から調整まで徹底解説


タイトル領域全体(インナー)


css_webry05.jpg

/* 18行目 */
.Header__inner {
height: 85px; /* タイトル領域の高さ */
}
/* 405行目 */
.Header .Header__inner {
padding: 0 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

初期値では、左右に30pxの余白(padding)が設定されて、.Headerの余白と合わせると55pxの余白になる

タイトルの文字を左端や右端にピッタリとくっつけたい場合は「padding: 0;」にする

padding以外は全てフレキシブルボックスレイアウトに関する設定で、詳しくは下のページ参照

ブラウザの開発ツールを使って知識ゼロから始めるCSS編集(4)「フレキシブルボックスレイアウトを理解してコンテンツの並びや配置を調整する」


タイトルの文字


css_webry06.jpg

/* 422行目 */
.Header .Header__inner h1 {
font-size: 1.6rem;
}
/* 426行目 */
.Header .Header__inner h1 a {
color: #FFF;
}

.Header .Header__inner h1の「font-size: 1.6rem;」を変えると、タイトルの文字の大きさが変わる

.Header .Header__inner h1 aの「color: #FFF;」を変えると、タイトルの文字色が変わる

タイトルの文字の位置を変える方法や、タイトルの文字を画像に変える方法は、下のページ参照

ブログのタイトルのいろいろな編集方法


タイトル下のブログパーツ領域


css_webry07.jpg

/* 435行目 */
.Header__contentsParts {
width: 800px; /* ブログパーツ領域の横幅 */
margin: 0 auto; /* コンテンツを中央に配置 */
padding: 15px 0 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}

css38.jpg

管理画面から「デザイン」→「コンテンツ(サイドバー)」を選択し、ヘッダー部分にブログパーツを配置すると、ページ内にこの領域が追加される(ヘッダー部分にブログパーツを配置していない場合は変更する必要なし)

width、margin、padding以外の部分はフレキシブルボックスレイアウトに関する設定で、初期設定ではブログパーツを複数設置した場合、ブログパーツが横並びになる

ブラウザの開発ツールを使って知識ゼロから始めるCSS編集(4)「フレキシブルボックスレイアウトを理解してコンテンツの並びや配置を調整する」


ヘッダー領域のブログパーツ


css_webry08.jpg

/* 467行目 */
.Header__contentsParts .Module {
width: 220px; /* ブログパーツの横幅 */
margin-bottom: 15px;
}

初期値は1つのブログパーツの横幅が220pxに設定されている(複数のブログパーツを設置した場合、横並びになる)

ヘッダー領域に「自由形式」のブログパーツを1つだけ配置し、.Header__contentsParts .Moduleのwidthの値をブログ全体の横幅と同じにすれば、タイトル領域の下にフリースペースを作ることができる






CSSリファレンス

スタイルシートリファレンス(ABC順)

CSS リファレンス - CSS: カスケーディングスタイルシート | MDN

スタイルシート CSS リファレンス[カテゴリー一覧] - TAG index













スポンサーリンク


記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。