【WordPress】プラグインを使わずに見出しを装飾する【Twenty Seventeen】

はい!こんにちは!
今回のテーマは

【WordPress】プラグインを使わずに見出しを装飾する

です。

前回の記事でWordPressはインストール出来ましたでしょうか?


参考記事 ブログの始め方
DIYer

目次 1 【入門編】ブログの始め方【初心者向け】1.1 【WordPress】1.2 ブログを作成して公開するまで1.2…


多くの記事を書いていると『そろそろ自分のブログも個性を出していきたいな…』と思ってくるでしょう。
そこでまず初めに思いつくのが見出しの装飾なのではないでしょうか?
今回は多くのプラグインが出ているなか、プラグインを使わずにCSS(HPの装飾、今回は見出しh1からh6)をいじってみよう!という記事です。

CSSとは?

簡単に言いましょう。
文字の装飾、大きさ、色等、その他に記事の配置、文字間の隙間や、ページなどの配置をどのようにするか決める(指示する)言語です。
書き方にも決まりがありますが、実際に使ってみながら覚えていきましょう。


ざっくり↓

HTML…文章を書く(構造を書く)

CSS…文章を装飾する(構造を装飾する)

Javascript…文章、画像等に動きを持たせる


難しく言うと…CSS(Cascading Style Sheets)カスケーディング・スタイル・シートの略になります。ウェブページの装飾(配置、文字の装飾等)を指定するための言語です。 HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する時には、スタイルシート言語の1つであるCSSが一般的に利用されます。CSSは、HTMLと組み合わせて使用する言語になります。 HTMLはウェブページ内の文字等を表示情報を構築するのに対して、CSSではをそれらをどのように装飾するかを指定します。 例えば、ウェブページがスクリーンに表示される際の色・サイズ・レイアウト等を指定することができます。

うーん、なんでこうウェブサイトを作る人って物事を難しく言いたがるんだろうね?横文字ばっかでわっからん!って方も多いはず(笑)

スポンサーリンク

愚痴は横に置いておいて、、、

まずは、、、

見出しってどこの部分?

なのかを画像で説明しておきましょう。今回説明するところのCSSを変更するとここが変わるよ!っていうのを理解してもらえると助かります。

投稿で書いている記事については自分で見出しを付けているので理解されていると思います。

では、ブログ全体でどこにh1からの見出しがついているのかを見ていきましょう。


各見出しの参考画像

h1


h2


h3


ブログの基本デザインに関係するのはここまでです。h4からは投稿記事等で使用しない限りはブログ全体に影響する物はありません。

私はブログのデザインに統一感を持たせたいなと思い、直接CSSを変更しましたが、記事だけで使いたい!という方は、『AddQuicktag』というプラグインがおススメです。

それでは、

実際にどこを変更すればいいのか?

を説明していきますが、

その前に…
必ずバックアップを取ってから変更を行ってください!
もし、手違いがありサイトのデザインがぐちゃぐちゃになった時に直せなかったら大変です。もう一度言いますよ?バックアップを取ってからですよ?責任とれませんよ?

では本題へ参りましょう。

外観>テーマの編集>スタイルシートを開きます。

その中でTABLE OF CONTENTS:の、5.0 Typographyを見ていくと『H1{』から始まるコードがあるはずです。

この『』から『』までの間を書き換えていきます。

とはいっても書き方が分からない方もいるはず…なので今回はCSSをコピペ出来るサイトをご紹介したいと思います。

CSS参考サイト→サルカワ様の『CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

こちらのサイト様、親切丁寧お洒落で見やすい!私もよく拝見させて頂き参考にさせて頂いています。

慣れるまではシンプルなコードを選んで貼っていくといいでしょう。

色の変更方法はコードの#から始まる3桁、又は6桁の英数字を打ち変えると変更できます。

カラーコード参考サイト→『HTML,CSS ホームページの背景色や文字色 (フォントカラー)

例えばサイト様では左に線のCSSコードは、

h1 {padding: 0.25em 0.5em;color: #494949;background: transparent;border-left: solid 5px #7db4e6;}

こうなっていましたね。

私のサイトでは、

h2,.home.blog .entry-title {padding: 0.25em 0.5em;color: #222222;background: transparent;border-left: solid 5px #cd853f;}

こうなっています。

サイト様のコードをh2で使いたかったのでh2の{}の中にコードをコピペして、色を変えるとこのような形になります。このような感じで自分のスタイルシートを更新していき、最後にファイルを更新のボタンを押すと、完成です!

終わったら自分のサイトを開き、きちんと反映されているか確認してみて下さいね。お疲れさまでした!

まとめ

気を付けるポイントとしては、CSSの構造を理解するまでは、

  • 『{』より前は変えない!
  • 使いたい見出しh1からh6までの『{ }』の中に使いたいコードをコピペする!
  • カラーコードは変えてもOK!

これさえ守れば初めての方でも簡単に出来ちゃいます。

経験者の方は書く場所さえわかれば楽勝ですね!

こういうCSSのコードを書いて下さってるサイト様はいっぱいあるので、書き方を覚えて知識が増えてくると、ブログの執筆活動もまた一段と楽しい物になりますね。

質問等はコメントより受付てますので気軽に質問してください♪


2018.4.14 追記

CSSを直接触るのに抵抗がある方の為に、オフラインでCSSを練習できる方法の記事をアップしました♪

DIYer

はい!こんにちは! 今回は 目次 1 CSSをオフラインで書いて練習する方法1.1 練習する環境を作成する。1.1.1 …


今回の記事はここまでになります。

最後まで読んで頂き感謝!

それではまた次の記事で。。。

最新情報をチェックしよう!