WEBページの配置、スタイル(表示形式)、デザイン、簡単なアニメーションなど”装飾”を担うスタイルシート言語『CSS』を、Wordpressの記事や固定ページのタイトルや小タイトル、即ち、「見出し」を一律して装飾する為の「見出しデザイン」を自由自在にカスタムしてに役立つ部分を主軸として超簡単入門講座を記事と動画(記事下)で解説します。

Sponsored Link

STEP1:cssとは

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、WEBページのスタイル(表示)を指定するための言語です。
文書のスタイル(見栄え)など表示を制御するしくみをスタイルシートといいます。
HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSがWordpressでは採用されています。

CSSは、HTMLと組み合わせて使用する言語です。 HTMLがWEBページ内の各要素の意味や情報構造を定義しているのに対して、CSSではそれらをどのように装飾して表示するのかを指定します。簡単なアニメーションも可能です。

WEBページを制作する言語として広く利用されているHTMLだけでウェブページの見栄えを制御することもできなくはありません。
しかしそれでは検索エンジンやコンピュータに対して煩雑で理解されにくい文書構造になってしまうだけでなく、WEBサイトおよびWEBページのスタイル(表示)を一括して変更することが不可能となってしまいます。

現行のHTML5では、 HTML文書からスタイル(表示形式)に関する指定を分離することが望ましいとされています。
HTMLでは文書構造のみを定義して、 スタイルについてはスタイルシート(CSS)で指定することが推奨されています。

STEP2:CSSの超基本となる3つの要素

cssの3要素

Webページの表示スタイルを決定する時に、CSSでは次の3つの要素を用います。

・セレクタ – どのHTMLタグに対してスタイルを指定するのか
・プロパティ – 何のデザインを指定するのか
・値 – プロパティの具体的数値を指定

STEP3:CSS見出しデザインの構造

h2セレクタとH2:beforeセレクタが指定する位置

最も簡単な見出しデザインを自分で作ろう

HTMLのClass属性で多種類の見出しデザインを使い分ける

CSS見出しデザインをWordpressのどこに挿入するのか?

・通常のテンプレート(WordPressテーマ)では
ログインした状態でWordpressトップページ上段のメニューバー⇒「カスタマイズ」⇒「追加CSS」をクリックすると下の画像の場所に辿り着きます。後はコードをコピーした状態でマウスを右クリックして「プレーンテキストで貼り付ける」。

・追加CSSが無いテンプレートの場合
ダッシュボード⇒「外観」⇒「CSS編集」をクリックします。

WordPressにCSS見出しデザインを実装した時のHTML記述

css html wordpress

自作するH2見出しデザイン

最も簡単な見出しデザインを自分で作ろう
最も基本的なデザインのCSSコードを用意しましたので、読み解いて、実際に自分で書いて習得していきましょう。

h2セレクタとH2:beforeセレクタが指定する位置

最も簡単な見出しデザインを自分で作ろう

PaddingとMarginが指定する間隔の位置を理解しよう


値を1つ指定した場合:例:padding: 0.3em ; /指定した値が[上下左右]の間隔になります。/
値を2つ指定した場合:例:padding: 0.3em 0.5em; /記述した順に[上下][左右]の間隔になります。/
値を3つ指定した場合:例:padding: 0.3em 0.3em 0em; /記述した順に[上][右左][下]の間隔になります。/
値を4つ指定した場合:例:padding: 0.3em 0.3em 0.3em 0em; /記述した順に[上][右][下][左]の間隔になります。/

さらに細かく知りたい場合……

padding margin

 

見出しデザインのCSSコードを読み解き、自分で書いてみよう

最も簡単な見出しデザインを自分で作ろう

 

ボーダーを変更しよう

border-bottom

見出しデザインの自作orカスタムに役立つ参考リンク集

CSSスタイルシートリファレンスはコチラ
CSSでの色のカラーコードは全部で4種類の表現形式がある。
16進数形式 例:#2E8B57
RGB形式 例:rgb(46,139,87); RGBA形式 例 rgba(46,139,87,1);
カラーネーム 例:red
自分の好みの色を探したい場合はGoogleで「色見本」と検索すれば一発⇒コチラ
カラーネームはコチラのサイトでチェック
UTF-8文字コードに対応したテキストアイコン(例:✒)などをCSSで表記する場合⇒コチラ




見出しデザインをCSSで実装
Wordpressの為の最低知っておきたいHTML入門

📖合わせて読みたい

raptureダウンロード インストール
Gメールを複数取得する方法
独自ドメインメールアドレス取得方法
独自メールアドレスをGmailで送受信するための設定
サイト表示速度を速くする方法
ブログタイトルの決め方
Facebook いいねページ 作成方法
保護中: Facebookページプラグインを取得して記事下に設置してファンを獲得しよう!
Googleの検索エンジンがサイトを評価する普遍的9つの要素
ブログにとって普遍的で最強のSEOとは
ブラックハットSEOに要注意
保護中: 【WordPress】SEOに強い記事の書き方を実演
コピーライティングで私が心掛けるたった5つのこと
Power Point 使い方 基本操作 YouTube
著作権フリーの画像を検索エンジンから探す方法
著作権フリー画像&動画の見つけ方
WoodsPress(ウッズプレス)ワードプレスWEBサイト作成完全動画マニュアル
ViVidWood(ヴィヴィドウッズ)デザイン&画像制作 完全動画マニュアル
WoodsTalk(ウッズトーク)

Thank you
for
reading!
from
IBORC.com

☥IBORCを応援して下さい。