Celtis_s テーマにWordPress4.5でサポートされたサイトのロゴを設置する

Celtis_s テーマ Ver1.2.0で WordPress4.5 でサポートされたカスタムロゴ機能に対応しました

この機能を使ってサイトにロゴを設置する手順を紹介します

簡単に設置できますし、サイトのヘッダーにロゴがあるとアクセントになるのでお勧めです (^^)

 

サイトロゴ

WordPress4.5 になってロゴがサポートされましたが、選択肢としては3つです

  1. ロゴは表示しない(サイトタイトルとキャッチフレーズの文字列を表示)
  2. ロゴとサイトタイトルとキャッチフレーズの文字列を両方表示
  3. ロゴを表示(サイトタイトルとキャッチフレーズの文字列は表示しない)

ここでは2と3のケースについて紹介していきます

ロゴの準備

Celtis_s テーマではヘッダー部の高さが 120px となっていますので、ロゴの高さは 90px をお勧めしています

また、幅としては、タイトル文字列と両方表示する場合は 90 px をロゴ画像のみの場合は 300 px をお勧めしています

お使いの画像編集ソフト等でどちらかのサイズのロゴ画像を作成して下さい

※サイズは Celtis_s のデフォルト状態にフィットするサイズとなっています

ロゴの設定

カスタマイズ画面からロゴを設定することが出来ます

  1. WordPress管理画面の外観→カスタマイズをクリックします
  2. サイト基本情報を選択します
  3. ロゴ選択画面が表示されるので使用するロゴをアップロードして設定します

Celtis_s_ロゴなし

ロゴサイズ 90×90 px の場合

これはサイトアイコンの画像を 90×90 にリサイズした画像をロゴとして使う場合を想定しています(もちろんサイトアイコン違う画像を使ってもなんの問題も無いです)

オプションの サイトのタイトルとキャッチフレーズを表示 をチェックすることで下記のような感じの表示となります

Celtis_s_ロゴ_90x90

※注意点としては、スマートフォン等で表示させた場合に表示エリアをオーバーしないようにタイトルやキャッチフレーズの長さに気をつけて下さい

ロゴサイズ 300×90 px の場合

これは 320px 幅のスマートフォン等での表示でも支障が出ないように 300×90 px サイズの画像をロゴとして使うことを想定しています

オプションの サイトのタイトルとキャッチフレーズを表示 を止めることで下記のような感じの表示となります

Celtis_s_ロゴ_300x90

これは適当な画像を 300×90 にした表示様子ですが、このサイズの画像をロゴとして指定する場合には画像内にサイトタイトルやキャッチフレーズを含んだものを使うことを想定しています

また、ヘッダー画像や背景画と併用することも出来ますので、色使い等でロゴと馴染むように工夫して下さい

 

カスタマイズ

Celtis_s のデフォルト状態にフィットするようにサイズ等を設定していますが、サイズを変更したい場合には functions.php 内の下記部を探して修正して下さい。また Sass で指定しているマージン値等も変わってくると思いますので _site.scss の .site-logoクラス辺りを調整して下さい

        add_theme_support( 'custom-logo', array(
            'height'      => 90,
            'width'       => 300,
        ) );
Custom Logo
New in 4.5 is the ability for users to add a logo to their sites (if their theme has declared support for it). It’s an addition to the Custom Header and Custom Background features which theme&

以上

 

今回は、Celtis_s テーマで サイトロゴを設置する為の手順を紹介しました
簡単に出来ますので、ぜひチャレンジしてみてください

 


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss