サイトやブログのヘッダータイトルをロゴ、画像に変える方法

Pocket

 

WordPressサイト,ブログのヘッダータイトルをロゴマークにして

印象付ける、オリジナリティを出す、ブランド化する

などは個人の運営者さんなんかでもしっかりやっている方も多いですよね

やはりイメージを印象付けれれるので早く覚えてもらうなどにもいいですし、、

 

そこでヘッダータイトルをロゴ画像に変えるやり方について書いておこうと思います

 

rjam-logo-min

 

〜〜項目〜〜〜〜〜〜〜〜〜〜

❤︎1、WordPressテーマのphpファイルで書き換える場合
1-1,ロゴ画像をサイトにアップロードしておく
1-2,header.phpファイルを作成する

❤︎2、テンプレのカスタマイズで設定できる場合

〜〜〜〜〜〜〜〜〜〜〜〜

スポンサーリンク

 

❤︎1、WordPressテーマのphpファイルで書き換える場合

1-1,ロゴ画像をサイトにアップロードしておく

タイトルロゴをまずはサイトのメディアにアップしておく

 

image upload-min

 

Upload

 

ドラッグしたらアップされてます

media up

 

で、その画像のURLをコピーしておく

 

1-2,header.phpファイルを作成する

ヘッダータイトルをロゴ画像化するには、phpファイルを編集しないと変更できないテーマもある

子テーマを使わずに直接ファイルを編集するのもアリだけど、テーマの更新のたびに編集し直すのも面倒なので、できれば子テーマの方が楽だと思う

 

子テーマの作り方は、下記のページで書いてますので参照ください

WordPress子テーマの作成とアップロード(誰にでもできる超簡単な方法)

子テーマをサーバーのファイルマネージャーから直接アップロードする方法

 

*header.phpの編集

❶その親テーマのheader.phpファイルをまずコピーしておいて、それを下記のように編集し、header.phpファイルを新たに作成しておく
(すでに子テーマにあるなら、そのファイルを編集する)

header.phpファイル下記の、 <?php bloginfo( ‘name’ ); ?>の部分を

<div id="page" class="hfeed">
  <header id="branding" role="banner">
      <hgroup>
        <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
        <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
      </hgroup>

 

下記のように書き換える

<img src="http://(画像のURL)" style="width:26.66666em;height:auto;max-width:100%;" alt="<?php $blogname = get_bloginfo( 'name' ); echo esc_attr( $blogname );?>" 

 

下図の画像の方が色的にはわかりやすいかも…..

 

つまり、下記のようにファイルを編集する

    <hgroup>
        <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="http://(画像のURL)" style="width:26.66666em;height:auto;max-width:100%;" alt="<?php $blogname = get_bloginfo( 'name' ); echo esc_attr( $blogname );?>" </a></span></h1>
        <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
      </hgroup>

先ほど事前にアップした画像のURLをimg arc=にコピペ
左右幅は with → 26.66666(400pxくらい)
高さはheight→auto;max100%

参考にさせていただいたサイトさん
レスポンシブテーマの、サイトタイトルを画像に変更する|WordPress Snippet
(外部サイトさんへ飛びます)

 

❷その編集したheader.phpファイルをサーバーのファイルマネージャーからアップロードする

子テーマをサーバーのファイルマネージャーから直接アップロードする方法

 

あとは表示されたものを確認しながら大きさなど調整が必要ならする

header logo sample

 

 

❤︎2、テンプレのカスタマイズで設定できる場合

で、最近のテーマでは、phpの編集するまでもなく、デフォルトのカスタマイズでロゴ画像を直接アップできちゃうものがほとんどです

上記のように子テーマphpで編集が面倒であれば、簡単にできるテーマに変えてしまうのも手だと思う

例えば

Twenty Fifteenでもすぐに画像にできる

外観> カスタマイズ

custamaize

 

ロゴをアップして
サイトタイトルキャッチフレーズを表示のチェックを外す

header logp

 

これだけでOK

 

テーマ(テンプレ)によっては、ヘッダー画像のスペースにアップしてサイトタイトルキャッチフレーズを表示のチェックを外すだけで表示できるのもある
(Twenty Elevenなんかはそうですが、各ブログ個別ページのヘッダーにアイキャッチが表示されるようにしてる場合はサイトのタイトルがわかりづらくなっちゃいますね笑)

他、色々便利なテーマも無数にありますので試してみるといいと思う

 

ってことで是非ヘッダー画像をロゴに変えてオリジナリティを高めてみてください

 

しゃらんるわあああぁあ❤︎

PHPによるWordPressカスタマイズブック [ 藤本壱 ]

価格:3,024円
(2017/1/28 12:42時点)
感想(2件)

一歩先にいくWordPressのカスタマイズがわかる本

新品価格
¥2,894から
(2017/1/28 12:44時点)

 

\(`^`)b

スポンサーリンク

 

REACH_rh.jam project / Creative Support
REACH_rhがあなたのクリエイトをサポートします
サポート内容をチェックしてみる ↓

rhjampj_v-min

 

❤Twitter, Facebook, G+, Feedly にて当サイト更新情報配信中です
宜しくどうぞ御贔屓に<(_ _)><(_ _)><(_ _)>

 Twitter   asset.f.logo.lg   btn_g_red_normal.png-34

follow us in feedly

 

関連コンテンツ

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

3 × four =