日々の仕事の息抜きでAWS LightSail を使ってWordpress を作ってみたのですが、それをやるだけやってきちんとテーマやデザインの設定をせずに放置してましたが、折角ならきちんと愛着をもって管理したいので、この度デザイン刷新をしてみました。
基本的にテーマにお金はあまりかけたくないので、AWS LightSail 以外は無課金でやっていきます。
この記事を読むと
この記事を読むと、Web開発初心者がWordPressテーマ Prefer のスタイルを整えてカッコいい感じに仕上げることができます。
Preferとは
WordPress を 初期インストールした時に入っているテーマです。そのまま使おうとすると使い勝手が良くない初期テーマの中では割とシンプルで使いやすいかなと思っています。
しかし、Preferもそのままだとあまりイケてないので、少し自分好みに変えてから使っていきましょ。
スタイルの反映
スタイルの反映には、CSSを利用します。
基本的にブログは読者が読みやすい方が好まれるので、突飛なスタイルを当てる必要はありません。
上手な人や人気ブログの真似をしていくといいと思います。
それでは早速やっていきましょう。
スタイルの設定方法
まずは記事投稿する画面に移動していきます。投稿 > 新規投稿 の順に遷移しましょう。
そして適当な見出しや文章を入力してみましょう。
入力された文書・見出しのことを以降はブロックと呼んでいきます。
ブロックメニューを編集する
上記で設定したブロックのうち１つを選択しましょう。
そして、右側のサイドメニューのタブが「ブロック」になっていることを確認してください。
ブロックメニューの中の高度な設定を開いてみましょう。
高度な設定メニューを開いた時、追加CSSクラスという項目があります。
この追加CSSクラスに設定したテキストがブロックのクラス名になります
CSSをクラスに適用する
ブロックに対してクラスを設定することができたら、そのクラスに対するスタイルをテーマに追加していきます。
テーマに対してスタイルの反映を行うためには、カスタマイズ画面にある追加CSS項目に移動します。外観 > カスタマイズ > 追加CSS の順に遷移しましょう。
追加CSS入力
追加CSS入力欄では、自由にCSSを記述することができます。
Prefer テーマを構成するために組み込まれているクラスに対しても、スタイルを適用することができますが、既存のクラスには独自のスタイルを当てるのはお勧めしません。
上述のブロックメニューで設定した独自クラスに対してのスタイルに関する記述のみに留めておくと、余計な修正を行ってPrefer を壊してしまう心配もありません。
コピペで簡単にスタイルを当てよう
上述した通り、ブログで利用するスタイルは凝ったものではなく、シンプルな方がユーザーは読みやすいです。
そのため、頑張ってスタイルを作ってもいいと思いますが、超シンプルなコピペのスタイルでも必要最低限は満たせているかなと考えています。
そこで今回利用した簡単なコピペ事例が紹介されているサイトをいくつかご紹介します。
おすすめ図書
CSSをコピペではなく、自分で考えて書いてみたい方は、HTML・CSSを網羅的に学習できるWeb開発系の書籍がおすすめです。
まとめ
Preferテーマでスタイルを設定するときのまとめです。
- ブロックに対してクラスを設定しよう!!
- 独自に設定したクラスに対して、追加CSS設定を使ってスタイルを当てよう!!
- スタイルはコピペでも十分!!
これでだれでもカッコいいWordpressページを持つことができるぞー !!
コメント