2019/01/13SHAREツイートシェアはてブGoogle+PocketLINEサイトタイトルをロゴ画像に変更したいたびたびいただくご質問で、「サイトのタイトルをオリジナルの画像にしたい」という声があります。残念ながら賢威6.2の管理画面には、サイトタイトルを画像に変更する機能は付いていません。※賢威7では設定可能です。そこで今回の記事では、サイトタイトル部分をロゴ画像に変更して、さらにスマホ表示の際に適切なサイズに調整し真ん中に表示させるカスタマイズをしてみたいと思います。今回の記事の目的サイトタイトルをロゴ画像に変更FTPを使って画像をアップしようアップした画像の表示方法を覚えるスマホ表示を考えてCSSを調整しよう「サイトタイトルをロゴ画像に変更する」と聞くと、ただimgタグに変えれば済むように思いますが、それだけではスマートフォンの表示の際に見栄えが悪くなってしまうかもしれません。スマホ表示での画像サイズを考えた調整や、そもそも画像をどうやってアップするのか、アップした画像をどのように記述して表示させればいいのか、を順番にみてきましょう。画像の設定方法を覚えておけば、テンプレートのカスタマイズの幅も広がりますので、はじめて「php」ファイルを触るという方も挑戦してみてはいかがでしょうか。いえ、予期せぬミスはつきものですので、しっかりバックアップは取っておきましょう!いざという時のためのWebサイトデータのバックアップ最初に変更するコードを見てみます「header.php」のサイトタイトルを出力している箇所を、画像タグに変えるだけなので、実際には以下のような記述の変更になります。?></p></div></div></div><!--▲ヘッダー-->書き換えたコードだけを見てみると以下のようになっています。?>というWordPressタグを使って、適用されているテーマのURLを取得しているところです。そのうえでコードを順番にみていくと、賢威テンプレートの中の「images」ディレクトリの中の任意「画像ファイル」となっています。いうことで、この場所にロゴ画像をアップしてあげればいいということになりますね。※賢威では画像ディレクトリが「images」となっているので揃えましたが、任意の画像ディレクトリを作成しても問題ありません。?>というタグを紹介していますが、直接画像URLを書いても問題ありません。?>を利用すると分かりやすくなるかもしれません。?>/images/[画像のファイル名]//展開するとサイトURL/wordpress/wp-content/themes/keni62_wp_corp_150408/images/[画像のファイル名]//直接画像のURLを書いても、もちろん大丈夫です上記の書き方で[画像のファイル名]を任意に変更することで、どこにでも表示させることは可能になります。WordPress用の書き方にはなりますが、画像表示の際に利用してみてください。ロゴ画像を用意しよう変更するコードをみていきました。ここまででカスタマイズできた方も多いかもしれませんが、続いてはロゴを用意して、アップしていく流れに進んでいきます。「logo.png」という実際にいさろぐで使用しているロゴ画像を例にしてみました。上記のようなロゴ画像(画像のファイル名は任意の名前で構いません)をサイトタイトルと入れ替えていきます。ロゴ画像の作成には「無料のバナー作成ソフト」の記事も参考にしていただければと思います。設置するロゴ画像を準備したところで、FTPソフトを利用してサーバにアップしてきます。アップする場所は先ほど解説をした、賢威テンプレートの中の「images」ディレクトリの中です。FTPソフトを使ってロゴ画像をアップロードご自身のサーバのWordPressがインストールされている場所をFTPソフトでみてみます。上記のようなディレクトリにアクセスし、画像をアップロードしていきましょう。アップロードができたら、はじめに紹介をしたコードの変更をおこないます。コピー&ペースト貼り付ける際には、[画像のファイル名]を「logo.png」と変更することをお忘れなく。そのままコードを入れ替えると、このようにタイトル部分が画像に変わったかと思います。スマホ表示を意識して大き目の画像を用意していたので、そのままのサイズで表示されています。大きくなりすぎているので、見栄え的にもう少し小さくしたいですよね。「design.css」を調整してロゴ画像のサイズを変更しようここではPCで表示した際に、画像のサイズを300px程度に調整するCSSを追記してみます。{width:300px;}「design.css」に上記のCSSを追加すると以下のように画像が小さくなります。これである程度完成なのですが、スマートフォンで見た際のロゴ画像のサイズも少し調整してみたいと思います。「mobile.css」でスマホ表示の調整をしようカスタマイズをおこないサイトタイトルをロゴ画像に変更しました。この状態をスマホで見ると、以下のようになっています。ロゴ画像をスマホ用ではもう少し小さくして、中央に寄せるような調整をしてみたいと思います。{width:150px;}上記の記述を「mobile.css」に追加することで、スマホ表示の際に画像を150pxに、表示位置を中央にすることができました。賢威7でも同じようにカスタマイズ可能です賢威7ではデフォルトの機能として、サイトタイトルを画像にすることが可能ですが、サイズなどの微調整をおこなうことはできません。そのためサイズや位置の調整が必要な場合は、今回の記事のようなCSSの調整で対応してみてください。PC表示の調整は「base.css」スマホ表示の調整は「rwd.css」にてカスタマイズでおこないます。今回は賢威でよくある質問のひとつ、「ロゴ画像に変更したい」について取り上げてみました。画像に変更すること自体は意外とカンタンだったと思いますが、CSSの微調整をあわせておこなうことで、より綺麗に表示させることができます。最近ではスマホからのアクセスの方が多いというサイトやブログは少なくありません。スマホ表示を意識してCSSの調整などをおこなうこともポイントのひとつです。これからもカスタマイズの記事では、レスポンシブウェブデザインを考えた記述をお伝えできればと思います。賢威をご利用の方には基本的なカスタムだったかもしれません。白身魚にはあんかけが合う!カレイの和風野菜あんかけさいとういさを名古屋を拠点にウェブマーケター・ディレクターをしている、さいとういさをです。日々の備忘録としてCMSや制作の気付きなどを書いています。作曲やベースの演奏などもゆったりと。