Welcart Basic のタイトルをロゴ画像に変えたい

2016 年 3 月 25 日

ホーム フォーラム テンプレート(テーマ) Welcart Basic のタイトルをロゴ画像に変えたい

このトピックには15件の返信が含まれ、6人の参加者がいます。12 ヶ月前 yasumax さんが最後の更新を行いました。

15件の投稿を表示中 - 1 - 15件目 (全16件中)
  • 投稿者
    投稿
  • #77937

    ushi
    参加者

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

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

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

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

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

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

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

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

    #77939

    yasumax
    キーマスター

    こんにちは。

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

    #77948

    ushi
    参加者

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

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

    #77952

    yasumax
    キーマスター

    こんにちは。

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

    #77964

    ushi
    参加者

    yasumax 様

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

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

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

    #77970

    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 のパーマリンク設定:
    ——————————————–

    • この返信は1 年、 6 ヶ月前に  yasumax さんが編集しました。理由: codeタグ追加
    #77971

    uishi
    参加者

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

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

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

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

    • この返信は1 年、 6 ヶ月前に  uishi さんが編集しました。
    #77974

    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%を、上記のどこに、どのような変更を加えればよろしいでしょうか。誠に恐縮ですがお力をお貸し下さい。宜しくお願い致します。

    • この返信は1 年、 6 ヶ月前に  yasumax さんが編集しました。理由: codeタグ追加
    #77979

    yasumax
    キーマスター

    こんにちは。

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

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

    #77987

    ushi
    参加者

    yasumax 様 uishi 様

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

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

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

    ・header.php

    ・(     )の部分の記述?コード?

    ・(     )のように変更すればレイアウトが崩れることなくサイトのタイトルを画像に変更できる。

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

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

    #77993

    uishi
    参加者

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

    img要素はベタで
    <(半角です)img src=”画像へのURL/logo.gif” />

    Attachments:
    You must be logged in to view attached files.
    #78013

    ushi
    参加者

    ushi様

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

    #79713

    cranio-therapy
    参加者

    ushi様

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

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

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

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

    #79722

    uishi
    参加者

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

    #80866

    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 のパーマリンク設定:日付と投稿名
    ——————————————–

    • この返信は12 ヶ月前に  yasumax さんが編集しました。
15件の投稿を表示中 - 1 - 15件目 (全16件中)

このトピックに返信するにはログインが必要です。