CSSサンプルコード

このページでは書籍・特典PDFで紹介したCSSのサンプルコードを掲載しています。

ブログカスタマイズの際のコピー＆ペースト用としてご利用下さい。

書籍内のサンプルコード

26. 見出しのスタイルをカスタマイズしよう

173ページ

.top-headline {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 2px solid #222;
  border-bottom: 2px solid #222;
  font-weight: bold;
}

174ページ

.top-pr3-headline {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
}

176ページ　見出しサンプル：下線つき見出し（実線）

.headline {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 10px;
  padding-left: 0;
  border-bottom: 1px solid #222;
  font-size: 1.4em;
  font-weight: bold;
  color: #222;
}

176ページ　見出しサンプル：下線つき見出し（破線）

.headline {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 10px;
  padding-left: 0;
  border-bottom: 1px dashed #222;
  font-size: 1.4em;
  font-weight: bold;
  color: #222;
}

177ページ　見出しサンプル：左に線つき見出し

.headline {
  padding-top: 5px;
  padding-right: 0;
  padding-bottom: 5px;
  padding-left: 10px;
  border-bottom: 4px dashed #222;
  font-size: 1.4em;
  font-weight: bold;
  color: #222;
}

177ページ　見出しサンプル：左に線つき見出し(背景色あり)

.headline {
  padding-top: 5px;
  padding-right: 0;
  padding-bottom: 5px;
  padding-left: 10px;
  background-color: #eee;
  border-bottom: 4px dashed #222;
  font-size: 1.4em;
  font-weight: bold;
  color: #222;
}

27. ボタンのスタイルをカスタマイズしよう

180ページ

.wp-block-button a {
  padding: 10px 30px;
  border-radius: 4px;
  font-size: 15px;
}

29. 情報のまとまりごとに背景色を変えてみよう

185ページ

.top-section {
  background-color: #fafafa;
}

186ページ

.alignfull.top-section .wp-block-column {
  max-width: 930px;
  margin-right: auto;
  margin-left: auto;
}

187ページ

.top-section {
  background-color: #fafafa;
  /* 余白調整のために追加▼ */
  padding-top: 50px;
  padding-bottom: 50px;
}

31. 投稿内の見出しのスタイルをまとめてCSSでカスタマイズしよう

193ページ(1)

.entry-content h2 {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 15px;
  border-left: 4px solid #222;
}

193ページ(2)

.entry-content h2 {
  padding-top: 5px;
  padding-right: 15px;
  padding-bottom: 5px;
  padding-left: 15px;
  background-color: #f1f1f1;
}

194ページ

/* .top-headline だけだと .entry-content h2 より優先度が高くならないため .entry-content を追加 */
.entry-content .top-headline {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top:2px solid #222;
  border-bottom:2px solid #222;
  /* .entry-content h2 に追加した左の罫線を打ち消す */
  border-left: 0; 
  font-weight: bold;
}

195ページ

/* .top-pr3-headline だけだと .entry-content h3 より優先度が高くならないため .entry-content を追加 */
.entry-content .top-pr3-headline {
  padding:0; /* .entry-content h3 に追加したpaddingを打ち消す */
  background-color: unset; /* .entry-content h3 に追加した背景色を打ち消す */
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
}

32. 太字のデザインをCSSカスタマイズする

197ページ(1)

strong {
  font-weight: bold;
}

197ページ(2)

strong {
  color: #c53d43; /* #c53d43 を変えると文字色が変更できる */
  font-weight: bold;
}

199ページ

strong {
  background: -webkit-linear-gradient(transparent 60%, #c1e0ff 60% );
  background: linear-gradient(transparent 60%, #c1e0ff 60% );
  font-weight: bold;
}