welcartでサイトタイトルを画像に設定したい

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
生まれ年ワインショップのバナー

 初心者なら多くの人が思うと思います。私もそう!

目次

Welcartでサイトタイトルを画像に

 生まれ年ワインショップ・・・生まれ年のワインって、おしゃれですよね。なので、サイトタイトルも大きな文字のテキストではなく、ロゴ入りの画像にしたい!
生まれ年ワインショップのバナー←『生まれ年ワインショップ』のタイトル画像

タイトル部分の記載場所

 ってなことで、テーマのどこがこのテキストなんだ?と見ていると、どうやらテーマヘッダー (header.php)にあるようです!div class=”inner cf”の次の部分です。


		<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; ?>>

初期設定かダッシュボードかで設定しているサイトタイトルがテキスト表示されるよって書いてあるのだと思います。あと、クリックしたらホームへ飛ぶよってこととか。ということは、このサイトタイトル部分を画像にしてい出来たら良いということです。

具体的な変更コード

 これを、次のように変えました。


		<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)で、次のような修正をしました。


/* -- .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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

生まれ年ワインショップ

生まれ年ワインの魅力は何といっても、生きていた時間を飲むということです。自分と同じ年数を生きている飲食物なんて考えられますか?
大切な方の特別な記念日に、忘れられない生まれ年ワインを贈りませんか?

『生まれ年ワインショップ』へ

SNSでもご購読できます。

コメントを残す

*

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください