急いでいますので雑な記事ですが…
Luxeritasをサクッと徹底カスタマイズする。その1【ヘッダー編】
明けましておめでとうございますって言いたいところなんだけどもう2月なんですよね。
すみません忙しくて。即本題に入ります。
茶番要らない方は2.から読むように。
Contents
WORDPRESSの定番テーマLuxeritasを徹底カスタマイズする。(茶番)
結局無料テーマが一番(ケチ)、ってことでLuxeritasを使っていることが多いんですけど、
これって親テーマとか子テーマとかあって一筋縄ではいかない感じしますよね。
っていうか触るの怖いですよね。
子テーマを編集するのか親テーマを編集するのかすらもわからない状態から
カスタマイズに挑戦していこうと思います。
基本、そこまで時間を裂きたくないのでサクッと編集できる部分で
見た目が大きく変わるところを中心にカスタマイズしていこうと思います。
ヘッダー画像をつける。
まずはヘッダー画像とかつけてみたいと思います。
KV、キービジュアルってやつですね。
適当に画像を持ってきてつけてみようと思います。
KVは実際どのくらいの大きさがいいのか
KVの大きさは凄く大きくてもいいですがなんとなく横1920pxで適当に作ってみました。
みんな横幅1920pxだしね。たぶんね。
結局どこを編集すればいいのかっていうと
WORDPRESSにログインして「Luxeritas」メニューのカスタマイズ(外観)
をクリック。
とするとこんな感じになります。(プライバシー保護のため一部ぼかしてあります。)
左メニューをスクロールしていくと
「背景・タイトル・ロゴ画像」という項目があります。
ここをクリック。
すると以下のような画面になると思います。
「サイトタイトルを画像にする」「ワンポイントロゴ画像」とああ、これだなって感じの項目があります。
では早速サイトタイトルを画像にしてみましょう。
今作った素敵なKVをアップロードしてみます。
するとなんということでしょう。
あっという間にKVが完成しました。
ちなみに1920px*400pxくらいで作りました。
ところがここで問題が。
KVの大きさが微妙です。
なんやこれ・・・。
もっとこう、横幅いっぱいまで広がるものかと思っていました。
ちょっと気になっていた「サイトタイトルを画像にする」という表現。
これもしかしてKV画像を設定するところじゃないんじゃね？
ということで、もう一つの
「ワンポイントロゴ画像」も設定してみることにしました。
まずはロゴ画像を作成。
なんと素晴らしいデザイン。大きさは600px*600pxです。
こいつを「ワンポイントロゴ画像」に設定してみます。
え？
ブラウザの機能で縮小表示したものです。
なんやこれ・・・。ちょっと思ってたのと違う・・・。
ヘッダー背景画像
いやいや・・・あるやんもっとスクロールしていくと「ヘッダー背景画像」なるものが。
ここに先程作ったKVを入れ込んでみましょう。
画像をご覧ください。「横幅いっぱいにする」という素晴らしい選択肢も用意されている。
もちろんチェック。
しかし、タイトルとディスクリプションの背景に画像が設定されてしまった。
まあ・・・そうよね。そうなんよね。
ということはだな、「サイトタイトルを画像にする」というのはこの「タイトル」の部分を画像で表現するということになりそう。
ヘッダーを作るときまとめ(茶番要らない方はこちらから読んでね)
「ロゴ」+「サイトタイトルの画像」+「背景画像」を作る。
今までの茶番をまとめると
「ロゴ」+「サイトタイトルの画像」+「背景画像」
でヘッダーのKVを構成するという作りになっているわけだ。
それでは作っていこう。
画像をポンッと置いとくだけでいいのでそんなんええわテーマファイルとかCSSとかいじりたいんじゃって方はコチラ
つまり最終的に3つのパーツを使ってこのようなものを作りたいわけだ。
作って書き出してみた。
さてこの3つのパーツ。作って書き出してみました。
まずは背景。
そしてロゴ。
最後はブログタイトル(画像にする意味あるのか？って思ってしまう。)
これらをそれぞれ
「サイトタイトルを画像にする」「ワンポイントロゴ画像」「ヘッダー背景画像」に入れこんでみる。
WORDPRESSにログインして「Luxeritas」メニューのカスタマイズ(外観)
をクリック。
そして「背景・タイトル・ロゴ画像」という項目があります。
ここをクリック。
ブログタイトル用画像の挿入
「サイトタイトルを画像にする」部分にブログタイトル用画像を差し込む。
まずはブログタイトルが差し込まれた。
ロゴを挿入
「ワンポイントロゴ画像」の部分にロゴの画像を挿入する。
おっそれっぽくなってきたか？
背景の挿入
それではちょっと左メニューをスクロールして「ヘッダー背景画像」に背景画像を入れてみる。
求めていたものはこれだ。
「公開」ボタンをちゃんと押しておく。
するとこのような見た目となった。
まあアリなんじゃないでしょうか？
ヘッダー作るだけでかなり疲れましたね。
次回は細かいところをデザインカスタマイズしていこうかな。