昨年末ころからブログを再開したのですが、まずは、記事を書き溜めることを優先していましたが、そろそろカスタマイズしていこうと思います。
最近のWordPressの場合、デフォルトではTwenty Seventeenというテンプレートを利用していますが、時間の短縮のためにもとりあえず、テンプレートのカスタマイズで対応していきます。
※カスタマイズしていくうちに、不要なコードなどが気になるので、一から作り直すかも。
Twenty Seventeenの特徴
Twenty Seventeenの特徴としては、まず、バカでかいヘッダーメディアがあります。
画像だけでなく、動画も設置出来るようで、メニューの外観のカスタマイズから設定可能。
あとはレスポンシブ対応していて、閲覧するデバイスのウィンドウサイズに合わせてレイアウトが変わります。
他の要素はかなりシンプルな見た目になっているので、カスタマイズのベースとしては必要十分なものです。
欲を言うと、もっとスッキリしたHTMLとCSSのコードにしたいところですが。
カスタマイズしたい箇所
デフォルトのTwenty Seventeenの見た目で変更したいところは、
- ヘッダーメディアを削除
- トップページ、カテゴリーページもワンカラムに
- 見出し要素の装飾
- フォントの変更
などです。
ヘッダーメディアを削除
ヘッダーメディアの削除は、管理画面の外観＞カスタマイズから、画像も動画も指定しなければOKです。
このあたりは、汎用のテンプレートの便利なところですね。
トップページ、カテゴリーページもワンカラムに
投稿や固定ページは、個別に全幅の指定が出来るのですが、トップページ、カテゴリーページのPC表示の場合、初期設定ではサイドバーが表示されてしまいます。
ウィジェットのサイドバーの箇所に何も入れてなくても、左右に分かれたレイアウトになってしまうので、文字量が多めのページだと、ちょっと見づらい感じになります。
この変更はテンプレート自体を変更しないと行えないので、子テーマを作成して変更することにしました。
見出し要素の装飾
Twenty Seventeenだと文字の太さ、大小だけで見出し要素を区別しているので、日本語のサイトだと少々寂しくなります。
追加CSSに記載しても良いのですが、テンプレートのアップデート時に上書きされる不安もあるので子テーマに記載しました。
フォントの変更
Twenty Seventeenでは、Windowsではメイリオ、Macではヒラギノ角ゴが指定されていますが、游ゴシック体にしたいところ。
これも子テーマのCSSに記載することで解消出来ます。
とりあえず目をつぶる箇所
カスタマイズしていくと、CSSが膨大だったり、横幅の切り替えが細かすぎたり、floatでレイアウトしていたり、divじゃなくても良い箇所などがあったり、コーダーとして気になる箇所は多々あるのですが、今回はスルー。
また時間のある時に、修正するか、一からテンプレートを作成します。
子テーマを作成
子テーマを作成すると、大元のテンプレートをいじらずに、カスタマイズを反映させることが出来るので、とても便利です。
WordPressの更新や親テーマが更新された場合でも、カスタマイズした箇所が上書きされることはないので、HTMLやCSSをカスタマイズしたい方にはオススメ。
子テーマの使い方は、また別の記事で解説したいと思います。
【2018/01/13追記】
子テーマを使うべき理由を別途記事にしました。
WordPressテンプレートのカスタマイズに子テーマを使う理由
まとめ
WordPressのデフォルトのテンプレートは、シンプルなものが多いですが、ちょっとカスタマイズするだけで、使い勝手の良いものにすることが出来ます。
別のテンプレートを使って自分好みのサイトにすることも出来ますが、元のテーマをカスタマイズすることで調整することも出来るので、使っているテンプレートに納得が行かない場合には、カスタマイズしてみましょう。
コメント