スポンサーリンク

wordpress初心者の方向けのCSS

自分が忘れないためにも、メモとして記入して行こうと思います。
是非wardpressを初めたばかりの方は参考にしてください!

簡単に見出しをカッコよくするにはどうするか?

専門書は沢山ありますが、初めてwordpressを始めた方には、どれも難しく、どこから手をつけていいかわからないと思います。
そこで、まずはタイトルや見出しをカッコよくしていく方法を探して見ましょう!

テーマを変える

まず考えられる方法としては、wordpressのテーマを変える方法です。選んだテーマによって外観が変わるのでとっても簡単です。ただし、この方法だと外観の全てが変わるので、その外観が全て気に入っている場合の時だけ有効だと思います。大抵の場合、選んだテーマをそのまま使うのではなく、少し自分好みに変えたいところが出てくるはずです。

追加CSSで変えたいところだけ変える

自分好みに変更するとなると、CSSを追加する方法があります。CSSというとすっごく難しいイメージがありますが、私が思うにイメージ通り難しいと思います。ただし、私のような初心者でもできるくらいの簡単な方法もあります。簡単なので是非チャレンジしてください!

CSSを追加する方法

CSSとは外観を装飾する(変える)ためのもので、CSSを使うと文字を大きく したり、赤文字 にしたりすることができます。この機能を使って、見出しをカスタマイズしていきます。

CSSはどこにある

では、まずCSSはどこにあるのか?
ダッシュボード→外観→テーマの編集に進むと、スタイルシートと書いてあるフォルダがあります。これには、テーマで使用されているCSSが記述されているのですが、そこに追加で記述することも可能です。ただし、編集の際に間違って他のところをいじってしまうと、他のところにも影響が出てしまいますし、テーマの更新時に記入していたところが消えてしまったりするので、初心者の方にはここに記述することはおすすめしません。

そこで、ダッシュボード→外観→テーマのカスタマイズ に進むと、CSS追加 のタブがあります。ここには、何も書かれていないので、単純に追加したいCSSを記述して行くだけ です。間違ってもここだけを編集すれば済むので、他のCSSに影響もすくないので、追加でCSSを記述する場合は、この場所にしましょう!

何を記述するか

場所が決まったので、あとはCSSを記述するだけですが、初心者の方にはコピペをお勧めします!まずは真似てみて、そこから学んでいった方が効率がいいからです。そしてコピペするならとっても便利なサイトなので参照してください。

CSSのコピペだけ!おしゃれな見出しのデザイン集

もう少しカスタマイズするには?

コピペした内容は、h1タグに対するCSSになっていると思います。これは一番大きい見出しタグです。他の見出しタグにもCSSを掛ける為には、h1をh2やh3などに変えるだけです。それだけで、それぞれを個別の見出しタグに適応することができます。また、数値やコードを変えると、色や大きさ、位置なども調節することができるので、もっと自分好みにしたい方は挑戦してみてはどうでしょうか?



ただし、これだけでは満足できない方やもっと個別にCSSを適応させたい方も出てくると思うので、それはまたご紹介したいと思います。

スポンサーリンク

Twitterでフォローお願いします

おすすめの記事