【WordPress】 記事内の見出しを初心者でも判るようコピペで変更!

★記事が気に入ったらシェアお願いします★

記事内の見出しのカスタマイズ

外観を色々いじったり、プラグインやウィジェットが豊富なWordPressですが、カスタマイズしていると、記事の見出しも気になってきちゃいます。

という訳で今回はこのサイトで使用している見出しと、変更方法を紹介します!!

と言っても、ほぼコピペなので初心者さんでも簡単に変更出来ちゃいます。(^^)

  基本的な見出しは6種類

WordPressで使用している見出しは基本的に6種類。
他にももっと使えるようですが、設定の方法が判りません(笑)

というか6つもあれば十分なので、これを上手く使い分けていく感じですね!

あと全て基本的にSimplicityのテーマを元に使用しています!
他のテーマで使用する場合は適当に調整して下さい(^^;)

 

   基本の設定方法

このサイトは「初心者の方でも判り易く、コピペで出来る!」をモットーとしてますので、style.cssへの記述方法から紹介します!

判る方は飛ばしちゃって下さい♪

 

style.cssとはサイト内の色々なスタイル(デザインのような物?)を変更する為のファイルです。
style.cssにコードを記述する時は、バックアップを取ったり、子テーマ等を使用しましょう♪

 

・子テーマの作成方法

Simplicityの場合は
1.コチラのサイトから子テーマをダウンロード
2.ダッシュボードの“外観”から、“テーマ”を選択し、新規追加タブをクリック。アップロードタブを押して、先ほどダウンロードしたファイルをアップします。
3.そのまま有効化するだけ!

それ以外の場合は
[wordpress 子テーマ]で検索(笑)

 

子テーマを作成したら、ダッシュボードの“外観”から“テーマの編集”を選択。

テーマの編集

 

するとこういう画面になるので、左上のプルタブから“Simplicity child”を選択し、その直ぐ下のファイルの一覧から“スタイルシート style.css”を選択します。

themes-child2

 

下の様な事が書かれた画面になるので、今後style.cssに記述”する場合は

/* Simplicity子テーマ用のスタイルを書く */の下に、追加でコードをどんどん記述(コピペ)していく事でデザイン等を変更する事が出来ます。

  このサイトで使っている見出し

では基本的な使い方も判った所で、当サイトで使用している見出しをコードと一緒に紹介します!

 

見出し1

これは記事のタイトルに使用しています。

説明の必要ありませんね!

 

見出し2

タイトルの後の小タイトル等に使用しています。

子テーマのstyle.cssに次の様に記述して色や線の幅を変更しています。

見出し3

まだ使っていません。(笑)

取り敢えずこのサイトに合わせて色を変更しています。

 

見出し4

小さい見出しに使用しています。

見出し3と同じく、デフォルトに色を付けただけ。

   見出し5

WordPressの記事などのカッチリした時に使っています。

見出し5と6は“賢威カスタマイズ研究所”さんの物を色を変えて使用しています。

  見出し6

見出し5とは違いポップで使い易く、色々な所で使用しています。

見出し5や6の様な長いコードは、埋め込み窓の右上に“copy”というタブがあるので、それを使うとコピーしやすいです。

見出しの色変更などは “color”とか“#ffffff”とかっていう風になっている所を変えるだけなので簡単だと思います!

色々なサイトでデザイン見本などもあるので、ぜひぜひ皆さんに合うデザインを見つけてみて下さい♪

 

下は私が参考にしたサイトさんです。

あんまりにも多く見ると迷って決められなかったりするので、サクッとシンプルなのを使うのがおすすめです!

Facebookで“いいね”
スポンサーリンク

★記事が気に入ったらシェアお願いします★

★フォローはこちら★

onlineshop-banner-moba

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です