WordPress

WordPressサイトの作成 #03 ヘッダロゴまわりの設定

WordPressとテーマ”Astra”を使ったサイト構築のメモ。

ヘッダにロゴを設定し、サイトタイトルやキャッチフレーズと組み合わせて表示する。

 

使用サーバー:ロリポップ

使用テーマ:Astra

 

ヘッダにサイトロゴを登録する

Astraのヘッダ設定内で、ロゴ画像を登録する。

Astra設定>Header Builder>ロゴと進み、Generalタブでロゴを指定。

参考

Header Builderの本体部分の設定が下に表示されているが、ここでは使用しない。

WordPressサイト構築 #0016

Header Buliderからロゴ画像を指定

 

[ロゴを選択]をクリックして、ロゴ画像ファイルをアップロード。

WordPressサイト構築 #0017

[ロゴを選択]をクリック

 

ライブラリからロゴ用画像を選択。

WordPressサイト構築 #0018

アップロードしたロゴ画像を選択

 

画像のプレビューで切り抜きが可能だが、ここでは[切り抜きしない]。

WordPressサイト構築 #0019

ロゴ画像の切り抜きはしない

 

指定したロゴがヘッダ内の、サイトタイトルの前(左側)に表示される。

WordPressサイト構築 #0020

サイトタイトルの前にロゴが表示される

 

ロゴ画像のサイズを調整

「ロゴ幅」のスライダーを調整することで画像の横幅を調節できる。

横幅の変化に応じて縦幅は自動的に調節される。

WordPressサイト構築 #0021

ロゴの横幅を調整する。

 

Retinaディスプレイ用のロゴを登録

Apple製品で使われているRetinaディスプレイは、従来のディスプレイの約2倍の解像度をもっているため、専用のロゴ画像を用意しておけばより高精細な表示ができる。

「レティーナ端末で別のロゴを使用しますか?」にチェックを入れると、Retina用の画像を別に指定できる。

画像は通常のロゴに対して2倍の画素数で作成しておく。

通常のロゴと同じサイズで表示されるため、ロゴ幅の指定は共通。

WordPressサイト構築 #0022

Retinaディスプレイ向けのロゴ画像

 

サイトタイトルをロゴの下に移動する

デフォルト設定では、サイトタイトルとロゴ画像は横並びに配置される。

「インラインロゴ&サイトタイトル」のチェックを外すと、ロゴ画像の下にサイトタイトルが移動する。

WordPressサイト構築 #0023

サイトタイトルをロゴの下に表示。

 

サイトタイトルを表示しない

サイトタイトルの文字はチェックボックスをオフにすることで、非表示にできる。

WordPressサイト構築 #0024

サイトタイトルを非表示にする。

 

キャッチフレーズを表示する

サイトタイトルのほかに、キャッチフレーズを表示させることもできる。

「サイトキャッチコピーを表示する」のチェックボックスをオン。

キャッチフレーズは、WordPressの一般設定に入力したものが自動的に表示されている。

WordPressサイト構築 #0025

キャッチフレーズを表示させる

 

ファビコンの登録

ファビコン(Favicon:ブラウザのタブ上に表示される小さいアイコン)の指定もHeader Builder内で行う。

ファビコンは512×512ピクセル以上で作成しておく(WordPressの推奨値)。

WordPressサイト構築 #0026

ファビコンを登録する

 

-WordPress

© 2021 FLYINGJUNK.NET