初心者なら多くの人が思うと思います。私もそう！
Welcartでサイトタイトルを画像に
生まれ年ワインショップ・・・生まれ年のワインって、おしゃれですよね。なので、サイトタイトルも大きな文字のテキストではなく、ロゴ入りの画像にしたい！
←『生まれ年ワインショップ』のタイトル画像
タイトル部分の記載場所
ってなことで、テーマのどこがこのテキストなんだ？と見ていると、どうやらテーマヘッダー (header.php)にあるようです！div class=”inner cf”の次の部分です。
|
1 2 3 4 5 6 |
<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 href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></<?php echo $heading_tag; ?>> |
初期設定かダッシュボードかで設定しているサイトタイトルがテキスト表示されるよって書いてあるのだと思います。あと、クリックしたらホームへ飛ぶよってこととか。ということは、このサイトタイトル部分を画像にしてい出来たら良いということです。
具体的な変更コード
これを、次のように変えました。
|
1 2 3 4 5 6 |
<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 href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="https://umaredoshi-wine.jp/wp-content/themes/welcart_basic-child/images/site-title.jpg" alt="生まれ年ワインショップ～ヴィンテージワイン～"></a></<?php echo $heading_tag; ?>> |
画像は事前にWordPressにアップしておきます。「メディア」のところから（これは多分ほとんどの方が分かりますよね）でも良いですが、私はFFFTPで直接imgフォルダにアップしましたのでそのアドレスを記載しています。「メディア」からアップした場合は、画像を選択すると、画像のアドレスも調べられます。そのアドレスを、上記の私の画像部分と入れ替えて、altタグの画像の説明も書き変えればOKなので、このままコピーして、子テーマのheader.phpの部分を書き変えてください。
これでOKだった方と、ちょっとサイズや位置が微妙な方がいらっしゃるでしょうか。おそらく画像によって違うのではないかと思います。私は、子テーマのスタイルシート (style.css)で、次のような修正をしました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* -- .site-title（サイトタイトルの画像を左寄せに） -- */ h1.site-title, div.site-title { text-align: left; } h1.site-title img, div.site-title img { width: auto; height: auto; } /* -- .site-title（サイトタイトルをスマホで少し小さく） -- */ @media only screen and (max-width: 680px) { h1.site-title img, div.site-title img, .snav{ display: inline; margin: 0; padding: 0; } } |
この部分は、意味が分かる方は上記をコピーして、ご自由に変更してみてください。私はこの設定で、現在のサイトタイトルを画像表示しています＾＾
お願い
検索でここにたどり着いた方は、自営業者さんでWelcartを導入しようと思っている方だと思います。役に立った方は、ビジネスでの贈り物に当店「生まれ年ワインショップ」もしくは、日本初のプレゼント専門ワインショップ「プレゼントワインショップ」をご利用いただけると嬉しいですm(__)m
