WordPress(ワードプレス) 初心者が見出しタグを変更するには? Simplicity2の子テーマダウンロード方法

始めにSimplicity2(テーマ)を使い始めて一ヶ月くらいたちましたが、変わらす扱いやすいです。

しかし最近は見出しタグ(h2・h3)などが気になるようになってきました。

同じテーマのSimplicity2を使っている方でもブログのページが全然違います。

見出しタグ変えるだけでも訪問者の方の印象はかわっていきますよね?

そこで、私自身も見出しタグなど変えていきたいと思います。

見出しタグを変えるにはカスタマイズやstyle.cssの編集が必要になります。

カスタマイズ?style.css?と難しく思うかもしれませんが、初心者の私でも簡単にできました。そこがSimplicity2(テーマ)のいい所です。

まずは見出しタグを変えるにはどうすればいいか説明していきます。

WordPress(ワードプレス) テーマ Simplicity2の子テーマダウンロード方法

見出しタグって何?

見出しタグとは、文字を大きくしたり小さくしたり印象付けるために使います

・見出し1「h1」・見出し2「h2」・見出し3「h3」・見出し4「h4」
この様に数字が小さい方が文字は大きくなります。


これは上からh2・h3・h4を使って見ましたがデザインがすべて違います。

これらを今からカスタマイズして変えていきましょう。

カスタマイズすると、見た目も印象も変わります。

まずはSimplicity2子テーマについて説明します

子テーマって何?と思うかもしれませんが、今使っているSimplicity2(テーマ)が親になります。そこで、Simplicity2の子供のテーマを一度インストールします。

子テーマとは?
・親テーマと違い、子テーマをダウンロードすることで、親テーマのバージョンアップの時にstyle.cssカスタマイズした物が消えることがなくなる。
・また子テーマは親テーマと違いstyle.css編集で失敗しても画面が真っ白になったりしないので安心に作業が進める。

子テーマをダウンロードすることにより初心者の方でも失敗がなくなります。
私は一度、親テーマのstyle.cssを触ったら画面が真っ白になりました。

あの時直すまでに時間もかかり大変でしたので、必ず子テーマをダウンロードしてください。
この様なことが起きないように子テーマが作られています。

次に子テーマをダウンロードしていきます。

Simplicity2の子テーマダウンロード

Simplicity2の子テーマダウンロードの方法について説明していきます。

ここからSimplicity2の子テーマダウンロードのサイトに直接行けます

まずはダウンロードサイトに行きます。

「ダウンロード」をクリックします。

simplicity2-childと書いてあるのが子テーマのファイルです。

「ダウンロードファイル」をデスクトップなどわかりやすい所に保存してください。

 

ワードプレスに子テーマを取り込もう

ダウンロードができたらワードプレスにログインします。

外観の中のテーマをクリックします。

 

テーマの中の「新規追加」をクリックします。

 

テーマ追加の横の「テーマアップロード」をクリックします。

 

先ほどのファイルを「参照」してから「今すぐインストール」をクリックします。

 

テーマの所にこの様なシンプルな物があれば成功です。
simplicity2-childを「有効」にして、カスタマイズしていきます。

simplicity2子テーマで見出しタグをカスタマイズしよう

これからカスタマイズしていきたいと思います。

外観の中の「テーマ編集」をクリックします。

 

スタイルシート(style.css)を選択します。

この様に表示されると思いますので、「子テーマ用のスタイルを書く」の下に赤枠で囲ってありますが、ここにコードを貼り付けていきます。

見出しタグのコードをいれていこう

ここのサイトを参考にしました
simplicity2ではh2の見出しタグは始めこのようになっています。

.article h2 【見出し種類】
border-left:1px solid #000;【見出しのスタイル・色】
margin: 40px -29px 20px;【見出しの間隔】
padding:25px 30px;【見出しの余白】
font-size:26px;【文字の大きさ】
}

これらを変えていこうと思います。

 

このままコピーすれば使えます。


.article h2 {
background-color: #afeeee;
border-left: 0 none;
color: #fff;
padding: 15px 30px;
}
.article h3,
#comment-area h3,
#related-entries h3{
font-size:23px;
border-bottom:5px solid #afeeee;
padding:10px 0;
}
.article h4 {
padding: .25em 0 .25em .75em !important;
border-left: 6px solid #afeeee !important;
border-bottom: none !important;
}

基本的にh1はトップで使うので、h2・h3・h4まで変更しました。

色や幅は変えれますので参考にしてください。

 

h4に関しては!important;を使っています。

.article h4 {
padding: .25em 0 .25em .75em !important;
border-left: 6px solid #afeeee !important;
border-bottom: none !important;
}

!important;とは?

・ブラウザの設定で、!important;をいれれば、どのWebページでも背景色が黒で文字色が白で見ることができます。
・要素が同じ場合、優先順位を変更するために用意されている。

 

これをスタイルシートに貼りつけます。

貼り付けた後「更新」をクリックすれば反映されます。

この後、親テーマのSimplicity2を有効にすると反映されませんので、そのまま子テーマを使用してください。

最後に

親テーマでのスタイルシートを変更した時は、位置がずれていたみたいで画面が真っ白になりました。

直すまでに時間がかかりますので必ず子テーマで行ってください。

子テーマをダウンロードすることにより、プラグインも減ります。

Simplicity2ならではの子テーマで簡単に設定できるようになっていますので、初心者の方も試してみてはいかがですか?

参考→間違いない!WordPress初心者 おすすめプラグイン
参考→【最新】8日で承認 Googleアドセンス承認までのまとめ
参考→あなた知らないの?楽天スーパーポイントを賢く貯めてお得に使う6つの方法
参考→【初心者】アフィリエイトの始め方 用意する物
参考→【Simplicity2】カスタマイズ タイトルロゴを作ろう
参考→【Simplicity2】カスタマイズ グローバルナビ設定方法

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