ウェブリブログのCSS編集メモ 「コンテンツ領域全体、プロフィール領域、メイン領域の中身(トップページ)」

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




css_webry00c.jpg

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


コンテンツ領域全体


css_webry09.jpg

/* 22行目 */
.l-content {
background: #E9E9E9;
}

コンテンツ領域の中には、ブログのプロフィール領域、サイドバー領域、メイン領域がある

css_webry10.jpg

サイドバーとメイン領域には個別にbackgroundの値が設定されているので、.l-contentのbackgroundの値を変えると、ブログのプロフィール領域の背景色だけが変化する(上の画像はbackground: #000000;の場合)


ブログのプロフィール領域


css_webry11.jpg

/* 566行目 */
.blogProfile {
padding: 15px 20px; /* 内側の余白、上下に15px、左右に20px */
margin: 15px 10px; /* 外側の余白、上下に15px、左右に10px */
border: 0px solid transparent;
}
.blogProfile dl {
line-height: 1.3;
margin-bottom: 5px;
}
.blogProfile dl dt {
color: #808080;
}
.blogProfile dl dd {
padding-left: 15px;
}

.blogProfileに「display: none;」を加えると、プロフィール領域を消すことができる

ブログ名、ブログタイトルの部分だけ消す場合は、以下のようにする

css_webry13.jpg

.blogProfile dl:first-child{
display: none;
}

.blogProfile dl dtの「color: #808080;」の値を変えると、ブログ名、ブログ紹介の部分の文字の色を変えることができる

.blogProfile dl ddはブログ紹介、ブログ説明の部分で、ここにcolorを加えて文字の色を変えることもできる

css_webry12.jpg

.blogProfile dl dt {
color: #ff0000; /* 文字の色を赤にする */
font-weight: bold; /* 文字を太字にする */
}
.blogProfile dl dd {
padding-left: 15px;
color: #0000ff; /* 文字の色を青にする */
}


メイン領域+メイン領域(インナー)


css_webry14.jpg

/* 26行目 */
.Main {
background: #F3F3F3; /* メイン領域の背景色 */
padding: 10px 20px; /* 内側の余白、上下に10px、左右に20px */
}
/* 511行目 */
.Main {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2; /* フレキシブルボックスレイアウトの並び順 */
}

css_webry15.jpg

/* 31行目 */
.Main__inner {
overflow: hidden;
}
/* 517行目 */
.Main .Main__inner {
width: 400px; /* メイン領域の横幅 */
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;
}

メイン領域の中にあるブログパーツ領域(記事下)は、管理画面から「デザイン」→「コンテンツ(サイドバー)」を選択し、記事下にブログパーツを配置すると追加される

メイン領域はトップページと記事ページで中身が異なる

.Mainの「background: #F3F3F3;」の値を変えると、メイン領域の背景色が変わる

.Mainの「order: 2;」、.Main .Main__innerのwidth以外の部分は全てフレキシブルボックスレイアウトに関する設定で、詳しくは下のページ参照

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


メイン領域の中身 - トップページ


css07.jpg

ブラウザの開発ツールを使って知識ゼロから始めるCSS編集(1)「HTML編:開発ツールの使い方とウェブリブログの新システムのレイアウトの仕組み」

.Main__contents


css_webry16.jpg

/* 532行目 */
.Main .Main__inner .Main__contents {
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;
width: 400px;
}

width以外は全てフレキシブルボックスレイアウトに関する設定

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

フレックスアイテムは.Entryで、flex-directionがないので初期値の横並び(row)の設定だが、flex-wrapがwrap(複数行に分割)の設定になっているので、.Entryを横に並べた時に.Main__contentsの横幅(width)をオーバーしてしまう場合は複数の行に分割される

flex-wrap - CSS

初期設定では.Entryのwidthは100%になっているので、1つの行に.Entryは1つしか配置することができず、.Entryの数だけ複数行に分割されることになるので、見た目は縦並びと同じになる

.Entryのwidthを50%にすると、1つの行に.Entryを2つずつ配置することが出来る

css_webry32.jpg

.Entry {
width: 50%;
}
.Entry:first-of-type {
width: 50%;
}
※.Entryに関する詳細は下の.Entryの項目を参照

.Entry


css_webry17.jpg

/* 1178行目 */
.Entry {
width: 100%;
background: transparent;
border-radius: 0;
-webkit-box-shadow: 0 0 0 0 #fafafa;
box-shadow: 0 0 0 0 #fafafa;
position: relative;
padding: 0 0 30px;
margin-bottom: 20px;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.Entry:first-of-type {
width: 100%;
padding: 0 0 30px;
}

1つの記事に対して1つの.Entry枠が作られるので、ブログ管理画面のブログ設定で、トップページ表示件数に設定した数だけ.Entry枠が作られる

.Entry:first-of-typeは、その中で一番上の.Entry枠(一番最新の記事)にのみ適用される設定で、初期設定の「padding: 0 0 30px;」は消してもデザインに影響はない

.Entryの「padding: 0 0 30px;」の値を変える時は、.Entry:first-of-typeのpaddingも同じにするか、.Entry:first-of-typeのpaddingを消しておかないと、一番上の記事の.Entry枠だけ設定が上書きされてpaddingの値が異なってしまう

css_webry33.jpg

.Entry {
padding: 0 0 30px 50px; /* 左側の余白50pxを追加する */
}
.Entry:first-of-type {
padding: 0 0 30px;
}
※.Entry:first-of-typeのpaddingは初期値のままなので、一番上の.Entry枠にだけ左側の余白50pxが追加されない

.Entry:first-of-typeの設定は、一番上に常に同じ記事を表示させておく場合などに、その記事だけデザインを変えることができるように作られたものだと思われる

.Entry__heading


css_webry18.jpg

/* 1224行目 */
.Entry .Entry__heading {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 10px;
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.Entry .Entry__heading .title {
overflow: hidden;
font-size: 1.6rem;
line-height: 1.3;
}
.Entry .Entry__heading .title a:hover {
text-decoration: underline;
}

.Entry .Entry__headingは、記事のタイトル部分を囲む枠

borderを上下左右別々に設定すると、左の線だけ太くするなどのデザインが簡単にできる

css_webry19.jpg

.Entry .Entry__heading {
border-top: 3px solid #000000; /* 上側の線 */
border-bottom: 3px solid #000000; /* 下側の線 */
border-left: 12px solid #000000; /* 左側の線 */
border-right: 5px solid #000000; /* 右側の線 */
background-color:#ffffff; /* 背景色 */
padding:5px; /* 内側の余白(paddingを設定しないと中の文字が線にくっついてしまう) */
}

.Entry .Entry__heading .titleは、枠の中の文字に関する設定で、「font-size: 1.6rem;」を変えると文字の大きさが変わる

記事のタイトルはリンクになっているので、文字の色を変える場合は、以下の記述をCSSに加える

css_webry20.jpg

.Entry .Entry__heading .title a {
color: #0000ff;
}

.EntryInnerWrap


css_webry21.jpg

/* 1210行目 */
.Entry .EntryInnerWrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 15px;
}

記事のサムネイル画像とその横の記事本文を囲む枠

フレキシブルボックスレイアウトは、flex-directionを設定しない時は初期値のrow(横並び)になるので、.EntryInnerWrap枠の中のサムネイル画像と本文の文字が横並びになっている

.Entry .EntryInnerWrapの設定を以下のようにすれば、サムネイル画像と本文を縦並びにできる

css_webry22.jpg

.Entry .EntryInnerWrap {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}

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

.EntryInnerWrap__item.-thumbnail、.EntryThumbnail、.EntryThumbnail__inner


css_webry23.jpg

/* 1217行目 */
.Entry .EntryInnerWrap .EntryInnerWrap__item.-thumbnail {
margin-right: 15px;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 30%;
}
/* 1296行目 */
.Entry .EntryThumbnail {
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
/* 1305行目 */
.Entry .EntryThumbnail .EntryThumbnail__inner {
width: 100%;
height: 130px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
line-height: 0;
}

サムネイル画像の部分は、.Entry .EntryInnerWrap .EntryInnerWrap__item.-thumbnailと.Entry .EntryThumbnailと.Entry .EntryThumbnail .EntryThumbnail__innerの3つの枠が3重になっている

一番外側の.Entry .EntryInnerWrap .EntryInnerWrap__item.-thumbnailに「display: none;」を設定すると、サムネイル画像を消すことができる

css_webry24.jpg

一番外側の.Entry .EntryInnerWrap .EntryInnerWrap__item.-thumbnailには、枠の横幅「width: 30%;」と右側の余白「margin-right: 15px;」が設定されていて、widthのパーセンテージはEntryInnerWrap枠の横幅に対するパーセンテージなので、初期値の場合は400pxが基準になって、30%だと横幅が120pxになる

「width: 50%;」とすると、サムネイル画像と本文がちょうど半々ずつの大きさになる

一番内側の.Entry .EntryThumbnail .EntryThumbnail__innerには高さ「height: 130px;」が設定されていて、画像の高さがそれよりも大きい場合は、画像の上下が切れてしまう

「height: 130px;」の部分を消してしまえば、画像が大きくてもきちんと全て表示されるようになるが、その代わりに画像の大きさのよって.Entry枠の高さが変わってしまう(サムネイル画像の大きさで高さが変わるので、記事一覧で並べた時に高さの統一性がなくなる)

.Entry .EntryInnerWrapの設定を縦並びにし、.Entry .EntryInnerWrap .EntryInnerWrap__item.-thumbnailのwidthを「width: 100%;」とすると、サムネイル画像を横幅いっぱいに表示して、その下に記事本文を配置できる

css_webry25.jpg

.Entry .EntryInnerWrap {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.Entry .EntryInnerWrap .EntryInnerWrap__item.-thumbnail {
margin-right: 0px;
margin-bottom: 15px; /* 縦並びなので、右のマージンを消して下のマージンを追加 */
width: 100%;
}

.Entry__text


css_webry26.jpg

/* 1329行目 */
.Entry .Entry__text {
line-height: 1.4;
overflow: hidden;
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
}

.Entry .Entry__textの部分にcolorやfont-sizeを追加すれば、文字の色や大きさを変えることが可能

css_webry27.jpg

.Entry .Entry__text {
color: #ff0000;
font-size: 15px;
}

.EntryPosted


css_webry28.jpg

/* 1254行目 */
.Entry .EntryPosted {
font-size: 1.1rem;
margin-bottom: 20px;
line-height: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}

css_webry29.jpg

/* 1266行目 */
.Entry .EntryPosted div + div {
margin-left: 15px;
}
.Entry .EntryPosted a:hover {
text-decoration: underline;
}

.Entry .EntryPostedは、トラックバック、コメント、日付部分を囲む枠

フレキシブルボックスレイアウトで3つの要素を横並びにしていて、「justify-content: flex-end;」の設定で右端に寄せている

以下のようにすると左寄せになる

.Entry .EntryPosted {
-webkit-box-pack: start; /* centerにすると中央になる */
-ms-flex-pack: start; /* centerにすると中央になる */
justify-content: flex-start; /* centerにすると中央になる */
}

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

.Entry .EntryPosted .trackback{display: none;}とするとトラックバック、.Entry .EntryPosted .comments{display: none;}とするとコメント、.Entry .EntryPosted .date{display: none;}とすると日付の表示を消すことができる

.Entry__readMore


css_webry30.jpg

/* 1336行目 */
.Entry .Entry__readMore {
margin: 0;
text-align: center;
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
border: 1px solid #FA7D28;
}
.Entry .Entry__readMore .ReadMore {
position: relative;
font-weight: 400;
line-height: 1;
padding: 12px 30px;
border-radius: 0px;
display: block;
color: #FA7D28;
}
.Entry .Entry__readMore .ReadMore:hover {
background: #FA7D28;
color: #fff;
}
.Entry .Entry__readMore .ReadMore.-en {
display: none;
text-transform: uppercase;
letter-spacing: .6mm;
}

.Entry .Entry__readMoreは、続きを読むの枠

.Entry .Entry__readMoreに「width: 50%;」を加えると、枠の大きさが半分になる

widthのパーセンテージは初期値の場合は400pxが基準になって、50%だと横幅が200pxになる

さらに、.Entry .Entry__readMoreのmarginを「margin: 0 0 0 auto;」とすると、続きを読むの枠が右寄せになる

「margin: 0 auto;」の場合は、続きを読むの枠が中央寄せになる

CSS: marginの正しい理解

.Pager


css_webry31.jpg

/* 1863行目 */
.Pager {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; /* 各アイテムを均等に配置 */
text-align: center;
width: 350px;
margin: 0 auto 25px; /* 上:0px、左右:auto(中央寄せ)、下:25px */
}

.Pagerは、ページ切り替え部分を囲む枠で、フレキシブルボックスレイアウトによって、ページ切り替えボタン(.Pager__itemの枠)が横並びかつ均等に配置されるように設定されている

.Pager__item


/* 1879行目 */
/* 全ての.Pager__itemに適用される共通の設定 */
.Pager__item a,
.Pager__item span {
display: block;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
background: #fff;
border: 1px solid #FA7D28;
border-radius: 1px;
color: #FA7D28;
}
/* ボタンの上にマウスのカーソルが乗っている時 */
.Pager__item a:hover {
background: #FA7D28;
color: #fff;
}
/* 現在のページ(-active) */
.Pager__item.-active span {
background: #FA7D28;
color: #fff;
}
/* 前のページに戻る(-prev) */
.Pager__item.-prev {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.Pager__item.-prev span:before {
content: "";
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 6px;
height: 6px;
border-top: solid 2px #FA7D28;
border-left: solid 2px #FA7D28;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.Pager__item.-prev a:before {
content: "";
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 6px;
height: 6px;
border-top: solid 2px #FA7D28;
border-left: solid 2px #FA7D28;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.Pager__item.-prev a:hover:before {
border-top: solid 2px #fff;
border-left: solid 2px #fff;
}
/* 次のページに進む(-next) */
.Pager__item.-next {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.Pager__item.-next span:before {
content: "";
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 6px;
height: 6px;
border-top: solid 2px #FA7D28;
border-right: solid 2px #FA7D28;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.Pager__item.-next a:before {
content: "";
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 6px;
height: 6px;
border-top: solid 2px #FA7D28;
border-right: solid 2px #FA7D28;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.Pager__item.-next a:hover:before {
border-top: solid 2px #fff;
border-right: solid 2px #fff;
}
/* クリック出来ない状態(-disabled) */
.Pager__item.-disabled span {
background: transparent;
border: 1px solid #ccc;
}
.Pager__item.-disabled span:before {
border-color: #ccc;
}

.Pager__itemは、ページによってclass名が変化し、それによってボタンのデザインが変わるようになっている

css_webry34.jpg

現在のページ : .Pager__itemの後に-activeが付いて「Pager__item -active」となる

前のページに戻る : .Pager__itemの後に-prevが付いて「Pager__item -prev」となる

次のページに進む : .Pager__itemの後に-nextが付いて「Pager__item -next」となる

クリック出来ない状態 : Pager__item -prev(もしくはPager__item -next)の後に-disabledが付いて「Pager__item -prev -disabled(もしくはPager__item -next -disabled)」となる

-prevと-nextの後に「:before」が付いているものは、左矢印、もしくは右矢印のデザインに関する項目

ボタンの色を変えたい場合は、以下の箇所を変える

.Pager__item a,
.Pager__item span {
background: #fff; /* 通常の状態のボタンの背景色 */
border: 1px solid #FA7D28; /* 通常の状態のボタンの線の太さ、種類(初期設定は直線)、色 */
color: #FA7D28; /* 通常の状態のボタンの中の数字の色 */
}
.Pager__item a:hover {
background: #FA7D28; /* 通常の状態のボタンの上にマウスのカーソルを乗せた時の背景色 */
color: #fff; /* 通常の状態のボタンの上にマウスのカーソルを乗せた時のボタンの中の数字の色 */
}
.Pager__item.-active span {
background: #FA7D28; /* アクティブ状態のボタンの背景色 */
color: #fff; /* アクティブ状態のボタンの中の数字の色 */
}
.Pager__item.-prev span:before {
border-top: solid 2px #FA7D28; /* -disabledの色で上書きされるのでこの部分の色は変えても意味がない */
border-left: solid 2px #FA7D28; /* -disabledの色で上書きされるのでこの部分の色は変えても意味がない */
}
.Pager__item.-prev a:before {
border-top: solid 2px #FA7D28; /* 前のページに戻るボタンの矢印の上部分 */
border-left: solid 2px #FA7D28; /* 前のページに戻るボタンの矢印の下部分 */
}
.Pager__item.-prev a:hover:before {
border-top: solid 2px #fff; /* 前のページに戻るボタンの矢印の上部分(ボタンの上にマウスのカーソルを乗せた時) */
border-left: solid 2px #fff; /* 前のページに戻るボタンの矢印の下部分(ボタンの上にマウスのカーソルを乗せた時) */
}
.Pager__item.-next span:before {
border-top: solid 2px #FA7D28; /* -disabledの色で上書きされるのでこの部分の色は変えても意味がない */
border-right: solid 2px #FA7D28; /* -disabledの色で上書きされるのでこの部分の色は変えても意味がない */
}
.Pager__item.-next a:before {
border-top: solid 2px #FA7D28; /* 次のページに進むボタンの矢印の上部分 */
border-right: solid 2px #FA7D28; /* 次のページに進むボタンの矢印の下部分 */
}
.Pager__item.-next a:hover:before {
border-top: solid 2px #fff; /* 次のページに進むボタンの矢印の上部分(ボタンの上にマウスのカーソルを乗せた時) */
border-right: solid 2px #fff; /* 次のページに進むボタンの矢印の下部分(ボタンの上にマウスのカーソルを乗せた時) */
}
.Pager__item.-disabled span {
border: 1px solid #ccc; /* クリック出来ない状態のボタンの線の太さ、種類(初期設定は直線)、色 */
}
.Pager__item.-disabled span:before {
border-color: #ccc; /* クリック出来ない状態のボタンの矢印の色 */
}





CSSリファレンス

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

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

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













スポンサーリンク


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