[未解決] タイトルを画像に変えたい

[jakina]

Welcart ライブデモでは[Welcart ライブデモ]と表示されている左上のh1テキストが入る位置を画像に変えたいです。テキストはtext-indent:-9999px;で見えないようにしました。<■■a href=”○○○”>■■<im■■g src=”○○○” /><■■/a>をheader.phpの

<div id=”header”>のすぐ下に記述したのですがalt=”○○○”は表示されるのですが画像が表示されません。何か良い方法は無いでしょうか？

後、商品詳細ページをクリックした際

Welcart ライブデモの商品詳細ページのようにrightバーを表示させたいです。今は商品詳細ページにleftバーと商品詳細ページが

表示されている状態です。ご教授頂けると幸いです。

よろしくお願いします。

※htmlソースを投稿に記述すると消えてしまうみたいなので

■で区切りました。■は無視してください。

[yasumax]

ロゴ画像を直接header.phpにimg要素で入れる場合は、h1内の文字をtext-indentで枠外に飛ばす必要はありません。

header.phpの48行目を

<<?php echo $heading_tag; ?> id="site-title"><a href="<?php echo home_url( '/' ); ?>" title="<?php bloginfo( 'name' ); ?>" rel="home">><img src="●●" alt="<?php bloginfo( 'name' ); ? />" width="●●" height="●●" /></a></<?php echo $heading_tag; ?>>

に変更すればサイトタイトルが画像に変わります。（●●内は適宜変更してください。）

alt属性の文字しか表示されないのは、画像までのパスが間違っているためだと思いますので、ソースを表示して確認してください。

また、商品詳細に関しては、別問題となりますので新たにトピックを立てていただけると助かります。

[jakina]

ご回答ありがとうございます。商品詳細については別途トピックを立てさせて頂きます。

head.php48行目から

<<?php echo $heading_tag; ?> id=”site-title”>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></<?php echo $heading_tag; ?>><p class=”discprition”><?php bloginfo(‘description’); ?></p>

までを<<?php echo $heading_tag; ?> id=”site-title”>” title=”<?php bloginfo( ‘name’ ); ?>” rel=”home”>>” width=”○○” height=”○○” /></<?php echo $heading_tag; ?>>に変更

したところページが真っ白になってしまいました。

ソースを元に戻すと戻ったのですが、何か記述が違うのでしょうか？

[yasumax]

申し訳ありません。

alt属性のところの記述が誤っておりました。

alt="<?php bloginfo( 'name' ); ? />"

を

alt="<?php bloginfo( 'name' ); ?>"

に修正してお使いください。

[jakina]

すいません。<<?php echo $heading_tag; ?> id=”site-title”>” title=”<?php bloginfo( ‘name’ ); ?>” rel=”home”>><■img ■src=”images/logo.png” alt=”<?php blo■ginfo( ‘name’ ■); ■?>” width=”○○” height=”○○” /></<?php echo $heading_tag; ?>>と記述しておりますが

画像が表示されません。

imagesのフォルダ内にlogo.pngが入っているのも確認できているので

パスの指定は間違いないみたいです。

[nanbu]

こんにちは、jakina さん。

その辺りはphpコードが混じって複雑なのであまり触らない方が良いかと思います。

スタイルシートだけでロゴ画像を表示できますので試してみてください。

h1#site-title a,

div#site-title a {

background-image: url(images/image_logo.jpg);

background-repeat: no-repeat;

display: block;

height: 200px;

width: 300px;

text-indent: -9999px;

}

[jakina]

CSSだと画像に対してのリンク付けができないので

で画像を置きたいのです。

ロゴをクリックした時にホームに戻るようにしたく思います。

お手数おかけし申し訳ございません。

[nanbu]

上記の方法で、ロゴをクリックした時にホームに戻ります。

お試し下さい。

[投稿者]

投稿