ワードプレス

HTML・CSSカスタマイズ【パーツテンプレート】

customized_parts

Highlighting Code Block【カスタマイズ】

Highlighting Code Blockのプラグインを導入し記事内に入れた場合は下の表示になります。
HTMLCSSJSを視覚的に区別する為に、boderで色分けをしています。

@charset "UTF-8";

HTML編集に切り替えるとdivclassに新規でclassを追加する。

customized1
HTML編集

追加CSSにそれぞれのCSSを追加していきます。

customized2
追加css

HTML記述の場合

class名hcb_wrap_htmlを追加して色を付ける。
・カラー:#f16528

.hcb_wrap {
    border: 3px solid #ececec;
    border-radius: 5px 5px 5px 5px;
    margin-top: 3em;
    position: relative;
    z-index: 0;
    display: block;
    padding: 0;
}
.hcb_wrap_html {
	border-color: #f16528;
}
.hcb_wrap.hcb_wrap_html pre[data-file]:before {
    background-color: #f16528;
}

CSS記述の場合


class名hcb_wrap_cssを追加して色を付ける。
・カラー:#30a9de

.hcb_wrap {
    border: 3px solid #ececec;
    border-radius: 5px 5px 5px 5px;
    margin-top: 3em;
    position: relative;
    z-index: 0;
    display: block;
    padding: 0;
}
.hcb_wrap_css {
	border-color: #30a9de;
}
.hcb_wrap.hcb_wrap_css pre[data-file]:before {
    background-color: #30a9de;
}

js記述の場合

class名hcb_wrap_jsを追加して色を付ける。
・カラー:#dab92c

.hcb_wrap {
    border: 3px solid #ececec;
    border-radius: 5px 5px 5px 5px;
    margin-top: 3em;
    position: relative;
    z-index: 0;
    display: block;
    padding: 0;
}
.hcb_wrap_js {
	border-color: #dab92c;
}
.hcb_wrap.hcb_wrap_js pre[data-file]:before {
    background-color: #dab92c;
}

↓下記本はいちばんやさしいHTML5&CSS3の教本シリーズ。

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方
いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方

▪いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方
講義+実習のワークショップ形式で、実践的なWebサイトを作りながら学べる「はじめてでも挫折しない」HTML&CSSの入門書です。

↓下記本は自身がこの1冊でWebすべての基本が身についたお勧めの本です。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
1冊ですべて身につくHTML & CSSとWebデザイン入門講座

▪1冊ですべて身につくHTML & CSSとWebデザイン入門講座
HTMLとCSSとWebデザインを一気にまるごと学べる!1つのサイトを実際に作りながら学んでいくやさしい作りになっている本です。「これからWebサイトを作り始める初心者」「HTMLとCSSを基本から学びたい人」「美しいデザインのWebサイトを作りたい人」「Webの最新技術を学びたい人」この1冊で必要なことがすべて学べます。

book
created by Rinker
¥2,486 (2022/10/04 17:48:05時点 楽天市場調べ-詳細)

文字が白くなってしまう現象が最適化でも上手くいかなかった場合は下記画像の通りすべてにチェックをいれて更新で改善すると思います。

  • 言語の表現
  • 行数の表示設定
  • コピーボタン
  • フォントスムージング
チェック項目
チェック項目

↓さらに、一歩進んだWebサイト制作の知識を学びたい方はこちらもお勧めです。

ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座

▪ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
Web界隈やデザイナーに大人気で、Web関連の情報やデザインについて記事が学べる『Webクリエイターボックス』の管理人、Manaさんによる渾身のHTML&CSSとWebデザインの実践知識が一気に学べる本です。

book
created by Rinker
¥2,728 (2022/10/04 16:49:50時点 楽天市場調べ-詳細)

↓また、さらに初心者から抜け出すために必要な知識を学びたい方ようです。

▪プロの「引き出し」を増やす HTML+CSSコーディングの強化書
HTML・CSSの基本をマスターして初心者を脱して、コーダー/マークアップエンジニアとして制作現場でバリバリ活躍する力をつけたい。そんな方に向けた本です。

プロの「引き出し」を増やす HTML+CSSコーディングの強化書
プロの「引き出し」を増やす HTML+CSSコーディングの強化書
book
created by Rinker
¥3,190 (2022/10/04 22:06:53時点 楽天市場調べ-詳細)

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA