WordPressテーマluxeritasでは見た目をカスタマイズしてロゴ画像や背景画像を使う事によって文字より凝ったデザインにしたり、あるいは画像を透過して背景として装飾デザインも可能です。
このウェブサイトタイトルのヘッダーに色を施しただけで何の工夫も無い状態から変更を試みます。
色の選択もLuxeritasではヘッダーに背景色が簡単につけられると分かってその時になんとなく選んだ色で、特に工夫も何もありません。字だけです。でもサイト表示スピードが売りのLuxeritasであまり画像を組み込見過ぎるのも意味が無い気もします。
ただ、adsenseの設定をQuickStart広告という自動的にadsense側で挿入する設定にしてみたら、タイトル下にadsenseが挿入されることが増えました。自動的に挿入されるのでいいのですけど、間延びした感じもあるのでタイトル横あたりにadsenseを表示させてタイトル下には挿入しないようにしたいとは考えていました。タイトルとadsenseを回り込み設定とかになるとは思いますが、ロゴ画像でピクセルが決まっていたほうがモバイルでどのように表示されるのか？とかわかりやすいのでその流れで一度ロゴでタイトルを表示してモバイルでどうなるのか？も見てみたいと思っていました。実際に導入するかはともかく、ヘッダーやタイトルに画像を組み込みテストをしてみます。
スポンサーリンク
サイトタイトルを画像にする
文字タイトルから画像への変更です。文字で「クチコミウェブサイト.COM」となっているサイトタイトルを以下の黄色背景の画像を制作して差し替えてみます。
「↑こんな画像なら指の画が入っただけで文字と変わらないだろ！」という声が聞こえて来そうですが、まずは簡単に作ったタイトル画像でテストです。
↓
画像を選択でメディアライブラリから用意しておいたタイトル画像を選択します。ローカルにタイトル画像がある場合はメディアライブラリへの保存と同時に画像選択します。
↓
タイトルに文字で「クチコミ・ウェブサイト.COM」ってあったのを削除する必要は無いようです。
画像が文字のあったところに挿入されて文字は消えました。
↓
挿入するとメニュー側の下に「削除」「画像の変更」ボタンが表示されます。「削除」ボタンをクリックすると簡単に挿入した画像は消えて、元にあった「クチコミ・ウェブサイト.COM」タイトル文字表示に切り替わります。
↓
簡単に戻るので気軽に画像テストして、気に入らない結果でも、元に戻るのはボタン一つです。ただ、今はテストなので再びロゴ画像を挿入しました。
↓
クリックで画像選ぶだけで挿入できますし、「削除」ボタン一つで元に戻せて本当に簡単です。
ワンポイントロゴ画像
サイトタイトルの左に画像を挿入できるとのことです。
↓
ローカルにある猫画像をメディアライブラリにアップロードして選択します。
↓
背景を透過してあるのですが何故か白く背景に色がついてしまう箇所が出てくるのと、猫じたい大き過ぎました。
↓
こちらも「削除」ボタンをクリックするとすぐに画像を削除できます。
ワンポイントロゴ画像がロゴの左側に挿入されることが分かりました。透過については画像が悪いのかもしれません。不明です。透過を使わない通常の画像なら問題無いでしょう。
背景画像
背景画像って使った経験があまり無いのですけど、最近はどんなものなのでしょうか？手がかりも無く始めて行くのはワクワクと不安いっぱいですけど、どうやらアップロードした画像は「削除」ボタンクリックで全て無かった事のように元に戻るようなのでLuxeritasの場合がいろいろ試す事が出来ます。
もう10年以上前にWeb用に海の写真を使ったことがあってさらにかなり「シャープ」加工をしたり、Photoshop ccで輪郭抽出とかグラフィックっぽく加工してサイズと描画調節を適当にして背景ですからかなりぼかしてみました。背景に使うだけですから適当です。どうせうっすらとしか見えないようにしてしまうので必要無いのでしょうけど、どういう画像が必要なのかも分からない状態で加工したのでとりあえず、海だと分かる感じにしました。
まずは海画像を「背景画像」として選択するので、「背景画像」→「画像を選択」をクリックします。
↓
今回は海画像がすでにメディアライブラリにすでにアップロードしてあるので、「メディアライブラリ」タブから海画像を選択します。
↓
表示する画像にチェック印が入って右側に画像情報が表示されます。必要な情報を挿入して「画像の選択」ボタンをクリックします。
↓
「海画像」が背景画像として表示されました。縦方向と横方向に並んで表示されていきます。ヘッダーの部分もうっすらと画像が透けて表示されました。ただこのままだと縦にずらずらと一杯ならんでいますし、画像の幅も十分なものでは無いので端と端のところで色彩が変化していて、背景画像としてはちょっと目立ちすぎです。
背景画像透過
背景画像透過スライダーを右に動かすことで背景画像をかなり色を薄くすることができます。
↓
スライダーを右に動かして背景画像を薄くしました。
「背景固定」は背景画像がスクロールしても記事は上下に表示されていきますが、背景はスクロールせずに固定表示となります。
背景画像の配置方法
Topは画像がブラウザの上から下に並んだ状態。
Middleにするとブラウザの中央から上下に並んだ状態。
Bottomはブラウザの下から上に並んで表示されます。
Leftは画像がブラウザの左から順に並んだ状態。
Centerにするとブラウザの横幅中央にから左右に画像が並んだ状態
Rightはブラウザの右から順に並んで表示されます。
デフォルトで「repeat」になっているので画像が並んで表示されています。
no-repeatを選択すると画像は一つのみの表示になります。
auto 画像の縦横比率のまま自動設定で表示されます。
contain 画像の縦横比率のまま画面一杯に画像全体が収まるように拡大縮小をされ表示されます。
cover 画像の縦横比率の小さいほうが拡大され、ブラウザに幅に合わせた表示になります。
100% auto 幅いっぱいに広がって余白があれば並んで表示されます。
auto 100% 縦方向いっぱいに広がって表示されます。
100% 100% 比率は無視して縦横にいっぱいに広がって表示されます。
サイドバー背景画像
「画像を選択」をクリックします
↓
サイドバーの背景画像を図の猫画像230px × 248px にしてみました。
↓
画像が左上から右と下と右斜め下にどんどん配置されていきます。
サイドバーの背景画像については透過も配置方法の選択も無いので、この猫画像のように邪魔になる色はあらかじめ避けるか、画像ソフトで加工する必要があります。
↓
画像を選択すると左側コントロールメニューに選択した画像が挿入され視覚的に確認できます。
「削除」ボタンでサイドバー背景画像が消えます。
「画像変更」ボタンでまたメディアブラウザに戻るので別の画像を選択し直しも容易です。
ヘッダー背景画像
ヘッダー背景画像はコンテンツの背景画像設定とほぼ同じです。
↓
サイズ720 × 147の画像を選択してみます。
↓
横幅が十分じゃないのでまた並べて表示されています。並べられた端は色の違いが目立ちます。配置方法でいくらかはカバーできますけど、最初から大きめの画像にするか並んでも違和感無い感じにするか試しながら挿入しましょう。
□横幅いっぱい
「ヘッダー背景画像の配置方法」の設定にもよりますが、これをチェックすると横幅の表示が縮小されることなく、画像幅固定で表示されます。ただし「ヘッダー背景画像の配置方法」の設定によっては縮小も拡大もされることがあります。
ヘッダー背景画像の配置方法
Topは画像がブラウザの上から下に並んだ状態。空と海があれば空部分の上から表示。
Middleにすると上下の真ん中が中心になります。上下の同配分で空と海があれば真ん中に水平線。
Bottomはブラウザの下から上に並んで表示されます。空と海があれば海部分の下から表示。
Leftは画像がブラウザの左から順に並んだ状態。
Centerにするとブラウザの横幅中央にから左右に画像が並んだ状態。画像のセンタリングから左右に並びます。
Rightはブラウザの右から順に並んで表示されます。
デフォルトで「repeat」になっているので画像が並んで表示されています。
no-repeatを選択すると画像は一つのみの表示になります。一つ表示でLeftなら左寄りに一つ、Centerなら画像中央揃い（センタリング）されて一つ、Rightなら右寄りと組み合わせでいろいろ表示させ方を変えられます。
auto 画像の縦横比率のまま自動設定で表示されます。
contain 画像の縦横比率のまま画面一杯に画像全体が収まるように拡大縮小をされ表示されます。
cover 画像の縦横比率の小さいほうが拡大され、ブラウザに幅に合わせた表示になります。
100% auto 幅いっぱいに広がって余白があれば並んで表示されます。
auto 100% 縦方向いっぱいに広がって表示されます。
100% 100% 比率は無視して縦横にいっぱいに広がって表示されます。
画像の大きさとヘッダーの幅によってかなり背景画像の見え方が変わってきます。どれか組み合わせていけばより効果的な背景画像になるバランスになると思います。
ロゴ画像
このカスタマイズメニューの一番上が「サイトタイトルを画像にする」とあってそこには通常ロゴでサイトタイトルが記入された画像になると思うのですが、ここでも「ロゴ画像」というカスタマイズです。
どこに入るのかと挿入してみました。
「画像を選択」をクリックします。
↓
メディアライブラリからロゴ画像を選択します。（無ければ「ファイルをアップロード」から画像をメディアライブラリにアップロードします。）294 × 60の画像を選択しました。
↓
図のようにグローバルナビの下、記事の上に中央揃えで配置されます。
「グローバルナビの上」のチェックボックスにレ点チェックを挿入すると、ロゴ画像がグローバルナビの上のタイトル下に移動して挿入されます。