陶磁器ファンよりWordPressオリジナル・テーマを無料提供いたします。

オリジナルテーマで編集できるのは「ヘッダー」、「タイトルバー」および「背景」です。

ヘッダーは上図の青の枠線内。タイトルバーは赤の枠線内です。

タイトルバーの編集

タイトルの文字色を指定する

ダッシュボードの「外観」→「カスタマイズ」をクリックします。

表示されたページの左サイドメニューから「タイトルバー」をクリックします。

まず、タイトルの文字色を指定します。

※初期設定では、タイトル文字の書体がゴシック体、文字の太さが標準、タイトル文字の大きさが200%、文字の色が黒、タイトルバーは背景色が白となっています。

カラービッカーで青色を指定してみます。

右側のプレビュー画面のタイトルの文字色が変わりました。

タイトル文字の大きさを指定する

タイトル文字の大きさは初期設定では200%となっています。プルダウンから250%をクリックします。

右側のプレビュー画面を見ると確かに文字が大きくなりました。

タイトル文字の書体を変更する

初期設定状態では、タイトル文字の書体はゴシック体で表示されていますが、これを明朝体に変えてみます。

ダッシュボードにログインしている状態でサイト表示されている場合、上部メニューの「カスタマイズ」をクリックして「カスタマイズ」のメニューにアクセスすることが可能です。

「カスタマイズ」の「タイトル編集」で「タイトル文字の書体」を明朝体にします。

タイトル文字が明朝体に変わりました。更新を有効にするには「保存して公開」ボタンをクリックしてください。

タイトルエリアの背景色を変更する

タイトルエリアの背景色は初期設定では白色になっています。背景色を変えてみましょう。

「タイトルバーの背景色」の「現在の色」ボタンをクリックするとカラービッカーが表示されます。

下部の黒、白以外のボタンをクリックすると上図のようになりますので画面上をクリックするとカラーが変化しますのでお好みの色に設定します。(もちろん右側のプレビュー画面にも変更内容が反映されます。)

フロントページのヘッダーをスライド表示にする

フロントページのヘッダーは初期設定ではデフォルトのヘッダー画像が表示されていますが、これをスライドにして見ましょう。

スライド表示させるためには複数枚のヘッダー画像を用意しアップロードします。

画像をアップロードする

ダッシュボードの「メディア」→「新規追加」をクリックします。

「ファイルを選択」をクリックします。

アップロードしたい画像ファイルをクリックして「開く」ボタンをクリックします。

ファイルが追加されました。右側の「編集」ボタンをクリックします。

「画像を編集」ボタンをクリックします。

「画像縮尺の変更」で新規サイズの横寸法(上図の場合、1920)を940に変更します。

変更したら「縮尺変更」ボタンをクリックします。

※横寸法変更と同時に縦横比を保ったまま縦寸法も変化します。

ここで一挙にトリミングしたいところですが、ブラウザのリロード(再読み込み)ボタンをクリックします。

再度、「画像の編集」ボタンをクリックします。

画像の上をクリックしたまま動かすと明るい部分が表示されますのでその四隅をマウスで動かして明るい領域の大きさを変えます。

「画像のトリミング」で選択範囲が940×380になり、明るいトリミング部分に問題がなければ、画像の左上のトリミングのアイコンをクリックします。

最後に「保存」ボタンをクリックします。

枚数には制限はありませんが、最大でも5枚が限度でしょう。

ヘッダーにスライドで表示させる画像が3枚揃ったと仮定して、実際に画像を追加してみましょう。

外観のカスタマイズで「ヘッダー画像」をクリックします。

「新規画像を追加」をクリックします。

 

「メディアライブラリ」の中からヘッダー画像を選択します。

右下の「選択して切り抜く」をクリックします。

次の画面では「切り抜かない」をクリックします。

以上の操作を繰り返し行って、必要枚数だけヘッダー画像を登録します。

スライドにテキストを表示させる

スライドにテキストを表示させるには、

外観→カスタマイズの「スライド内テキスト編集」をクリックします。

最初に表示される画像のテキストは「一番目のスライドのテキスト」のテキストフォームに入力します。2番目、3番目と最大5つまで設定することができますが、ヘッダー画像が1枚だけのときは例えテキストが入力されていても表示されません。

「テキストに縁取りを入れる」チェックボックスにチェックを入れるとテキストに縁取りが付きます。

※テキストの縁取りはブラウザがインターネットエクスプローラーの場合、IE9以前には対応しておりません。

フロントページ以外のヘッダーを変更する

フロントページのヘッダーはスライド表示が可能ですが、それ以外のページはスライド表示に対応しておりません。

デフォルト(初期設定)の状態ではデフォルトの画像が表示されています。

では、このデフォルトの画像を変更してみましょう。

画像サイズは、幅940ピクセル高さ200ピクセル。

まず、素材となるヘッダー画像を作成しますが、「フロントページのヘッダーをスライド表示にする」で説明しましたのでここでは割愛します。

ダッシュボードの「外観」→「カスタマイズ」をクリックします。

「ヘッダー画像(フロントページ以外)」をクリックします。

「画像の変更」ボタンをクリックします。

「メディアライブラリ」からアップロードしたヘッダー画像をクリックして右下の「画像の選択」をクリックします。

以上で、フロントページ以外のヘッダー画像が変更されました。