【解決済】Welcart Basic のタイトルをロゴ画像に変えたい

[ushi]

よろしくお願いいたします。

タイトルをロゴ画像に変える方法を教えてください。

http://www.coralreference.com/archives/156

を参照してロゴ画像(サイズ300×90)に変更することはできたのですが、レイアウトが

(変更前)　　　　　　検索ボックス
ゲスト　ログイン　新規会員登録
　カートの中

(変更後) カートの中　 ゲスト　ログイン　新規会員登録　検索ボックス

となり崩れてしまいます。レイアウトを崩さずにタイトルを画像に置き換える方法をご教授ください。よろしくお願い致します。

——————————————-
WordPress のバージョン：4.4.2
Welcart のバージョン：1.7.5
ご利用のテーマ：Welcart Basic
症状を確認したブラウザ：fire fox
——————————————–

[yasumax]

こんにちは。

テキスト（サイトタイトル）を画像に変更しただけではレイアウトは崩れません。
どの部分をどのように変更されたのかがわからないので憶測ですが、タグ構造やクラス名も一緒に変更しているのではないですか？
でしたら、それに合わせてスタイルも修正する必要があるかと思います。

[ushi]

お返事ありがとうございます。
多分私の方で余計なことををしてしまったのかもしれません！

画像変更前の状態に戻しましたので、今一度、サイトタイトルを画像に変更する方法をご教授願います。よろしくお願い致します。

[yasumax]

こんにちは。

サイトタイトルのテキスト部分を画像に差し替えてみてください。
その際、サイトタイトルを括っているタグ構造を修正する必要はありません。

[ushi]

yasumax 様

度重なる返信に感謝いたします。

>>サイトタイトルのテキスト部分を画像に差し替えてみてください。

とは具体的にどこをどのように変更するのか教えていただければ幸いです。
どうぞよろしくお願い申し上げます。

[yuiyuiflower]

こんにちは。まだ解決していないようですので、横から質問させてください。
私もサイトタイトルを画像を変えるのになかなかうまくできず困っています。
ushiさんの方法でためましたが私もレイアウトが崩れてしまいます。

■style.css
ヘッダー部分に下記を追加

/* =Header
———————————————– */
#site-title-logo {
width: 330px; /* ロゴの高さ */
height: 90px; /* ロゴの横幅 */
text-align: left;
margin-top: 40px; /* ロゴの上スペース */
margin-bottom: 40px; /* ロゴの下スペース */　　
}

を追加する

■header.php
元

<hgroup>
<h1 id=”site-title”><span><a href="”<?php">” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></span></h1>
<h2 id=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
</hgroup>

変更

<hgroup>
<h1 id=”site-title-logo“><span><a href="”<?php">” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><img src="//www.coralreference.com/wp-content/uploads/2012/02/logo.png”" width="”330”" height="”90”" /></a></span></h1>
</hgroup>

をしました。
初心者ですのでご迷惑かけてしまうかもしれませんがよろしくお願いします。

——————————————-
WordPress のバージョン：4.2.7
Welcart のバージョン：v.1.7.4
ご利用のテーマ：Welcart basic
症状を確認したブラウザ：Chrome
サーバー（会社名、サービス名）：ロリポップ
SSLの利用：　
WordPress のパーマリンク設定：
——————————————–

• この返信は8年、 7ヶ月前にyasumaxが編集しました。理由: codeタグ追加

[uishi]

width:65%
にしたら直りませんかね。
widthの幅をとって、カートとかの部分を折れ曲がらせてるようですよ。

ｈ1 id=site-title-logoを編集できたとすれば、
そこのPHPのコードはサイトのタイトルを表示するものなので、
img要素と書き換えればいいのでは。

ただ上下のマージンが気に入らないぐらいで、
わざわざsite-title-logoをcssに加えなくてもいいのでは。

レスポンシブなんでスマホ等で見たときはまた別のお話かも。

• この返信は8年、 8ヶ月前にuishiが編集しました。

[yuiyuiflower]

返信ありがとうございます。cssはいじらず、width:65%でよろしいのですね。

ところで下記はwelcart basciのheader.phpの一部ですが、ここらへんを変更すればサイトタイトルを画像に変更できると勝手に思い込んでます。

<header id="masthead" class="site-header" role="banner">
		
		<div class="inner cf">

			<p class="site-description"><?php bloginfo( 'description' ); ?></p>
			<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
			<<?php echo $heading_tag; ?> class="site-title"><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></<?php echo $heading_tag; ?>>

画像URL, img要素およびwidth:65%を、上記のどこに、どのような変更を加えればよろしいでしょうか。誠に恐縮ですがお力をお貸し下さい。宜しくお願い致します。

• この返信は8年、 7ヶ月前にyasumaxが編集しました。理由: codeタグ追加

[yasumax]

こんにちは。

サイトのタイトル部分を画像に差し替えるだけです。
サイトのタイトルはWordPressのテンプレートタグを利用して出力しています。
・WordPress Codex　テンプレートタグ/bloginfo

サイトのタイトルを括っているh1タグやaタグ等、タグ構造やクラス名を変更した場合は適宜スタイル修正する必要があります。

[ushi]

yasumax 様　uishi 様

度重なる返信に感謝いたします。
今一度お聞きしますが、

>>サイトのタイトル部分を画像に差し替えるだけです。

の部分をより具体的に教えていただけますでしょうか。

・header.php
の
・（　　　　　）の部分の記述？コード？
を
・（　　　　　）のように変更すればレイアウトが崩れることなくサイトのタイトルを画像に変更できる。

といった形でご教授いただけると大変助かります。
ちなみに、子テーマを作成してそれを使用してます。Header.phpも子テーマフォルダーにコピー済みです。

ロゴ画像のurlは把握しています。また画像はテーマフォルダー（Welcart Basic）のimagesフォルダーにもコピーしてあります。logo画像の名前はlogo.gifです。
お忙しい中、大変恐縮ですが何卒よろしくお願い申し上げます。

[uishi]

子テーマまで作れて、わからないというのが疑問です。
難しく考えすぎてるのでは？
原点に立ち返って、ご自身が示した参照元を見るとわかると思いますよ。
変更点赤字で2箇所しかないから。
site-title-logoは変える必要がないと思います。
h1
　a
　　img　＜-　ここが
　　　　　　　もともとはブログのタイトルを
　　　　　　　出力するテンプレートタグbloginfo
　/a
/ｈ1
というだけですよ。

img要素はベタで
＜（半角です）img　src=”画像へのURL/logo.gif”　/＞

Attachments:

You must be logged in to view attached files.

[ushi]

ushi様

詳細な解説ありがとうございます。お蔭様でタイトルを画像に変更することができました。
お手数おかけしました。感謝いたします。

[cranio-therapy]

ushi様

こんな時期に横やりですみません。
上に書いてあるようなことを試してみたのですが、画像がエラー表示され、真っ白になります。

ushi様が修正された箇所を、詳しく教えていただけないでしょうか。

画像の保存方法ですが、jpgではなく、pngの方がいいのでしょうか？

——————————————-
WordPress のバージョン：4.5.3
Welcart のバージョン：1.8.6
ご利用のテーマ： Welcart Basic
症状を確認したブラウザ：Firefox
サーバー（会社名、サービス名）：lolipop
——————————————–

[uishi]

コピペだと半角スペースでなければならないところが全角スペースになってしまったりすることがネットだとよくあります。投稿のはimgとsrcの間が全角スペースになってます。
コピペじゃなくて、一から手打ちしてみるとどうでしょうか。

[3707y10]

Welcart Basic　のテキスト部分を画像に変更したのですが
右側にある検索、ゲスト｜ログイン｜新規会員登録、カート中ボタンの
位置がずれてしまいました。
テキストの時は横並びにカートの中、その上にゲスト・・・その上に検索と
Welcart Basic (theme0001)デモサイトと同じ並びだったのですが・・・。

タイトルロゴに変更した作業内容は下記となります。

header.php の下記部分を

<header id="masthead" class="site-header" role="banner">
<div class="inner cf">
<p class="site-description"><?php bloginfo( 'description' ); ?></p>
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> class="site-title"><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></<?php echo $heading_tag; ?>>

下記のように変更しました。

<header id="masthead" class="site-header" role="banner">
<div class="inner cf">
<p class="site-description"><?php bloginfo( 'description' ); ?></p>
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> class="site-title-logo"><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img />

style.cssも変更（#site-title-logo 内容を追加）したのですが、何も変わらないです

/* =header
-------------------------------------------------------------- */

header {
	position: relative;
	width: 100%;
	margin-bottom: 1.4286em;
	border-bottom: 3px solid #efefef;
}
#site-title-logo {
 width: 250px; /* ロゴの高さ */
height: 60px; /* ロゴの横幅 */
text-align: left;
 margin-top: 40px; /* ロゴの上スペース */
margin-bottom: 40px; /* ロゴの下スペース */　　
}

という作業をおこないました。どのように修正したらよいのでしょうか
よろしくお願い致します。

——————————————-
WordPress のバージョン：WordPress 4.6.1
Welcart のバージョン：バージョン 1.9.0
ご利用のテーマ：Welcart Basicバージョン: 1.2.2
症状を確認したブラウザ：IE
サーバー（会社名、サービス名）：cpi
SSLの利用：　なし
WordPress のパーマリンク設定：日付と投稿名
——————————————–

• この返信は8年、 1ヶ月前にyasumaxが編集しました。

[投稿者]

投稿