• 解決済 blisskikuchi

    (@blisskikuchi)


    現在 http://bliss.jp.net/ のサイトを作っています。
    素人なのでネットで調べながらの作業です。行き詰ってしまったのでご教授願います。
    (済みませんここで聞くべきかの判断もつかない素人です)
    当初ホームページビルダー17の機能でワードプレスサイトを作成しました。
    現在ビルダーに含まれるダッシュボードは作業が制限されるので機能を拡張しカスタマイズしています。(ビルダーのサポート外と記載あり。おそらく皆さんと同じダッシュボードだと思います。)
    ワードプレスのバージョンはWordPress 3.8.3です。

    今回ヘッダーの画像を変える作業をしました。
    経緯は
    ①カスタムヘッダーを実装するためfunctions.php内に

    // カスタムヘッダー画像を設置する
    $custom_header_defaults = array(
    ‘default-image’ => get_bloginfo(‘template_url’).’/img/wordpress-logo-hoz-rgb_small.png’,
    ‘width’ => 220,
    ‘height’ => 50,
    ‘header-text’ => false, //ヘッダー画像上にテキストをかぶせる
    );
    add_theme_support( ‘custom-header’, $custom_header_defaults );

    を記載
    ②header.php内に
    <img src=”<?php header_image(); ?>” height=”<?php echo get_custom_header()->height; ?>” width=”<?php echo get_custom_header()->width; ?>” alt=”” />
    を記載

    手順に従い画像をアップロードしたらヘッダーに画像が出ました。
    しかし以前の画像と入れ替わると思っていたのですが入れ替わらず画像が2段で表示されます。
    それらしき記載を探したのですが見つからず困っています。

    今回表示したいのが写真が6枚写っているもの、削除したいもの写真が4枚写っているものです

    おそらく画像として認識されていないのではないかと想像するのですが
    そうなるとますますお手上げです。
    よろしくおねがいいたします。

15件の返信を表示中 - 1 - 15件目 (全16件中)
  • 천궁 메텔

    (@digitmaetel)

    header.php内に現在のヘッダー画像の記述があるままだから二段で表示されていると推測します。
    外観のヘッダーから設定するのがそもそも標準でしょう。テーマに因る差異こそあれ、体制の多くがそうしてヘッダー画像を普通に設定できているので関心の向きにくいトピックに思えます。

    トピック投稿者 blisskikuchi

    (@blisskikuchi)

    ありがとうございます
    私もそうなのかなと思いましたが見つからず困ってました
    現在のheader.php内は
    <!DOCTYPE html>
    <!–[if IE 6]>
    <html id=”ie6″ xmlns=”http://www.w3.org/1999/xhtml&#8221; <?php language_attributes(); ?>>
    <![endif]–>
    <!–[if IE 7]>
    <html id=”ie7″ xmlns=”http://www.w3.org/1999/xhtml&#8221; <?php language_attributes(); ?>>
    <![endif]–>
    <!–[if IE 8]>
    <html id=”ie8″ xmlns=”http://www.w3.org/1999/xhtml&#8221; <?php language_attributes(); ?>>
    <![endif]–>
    <!–[if !(IE 6) | !(IE 7) | !(IE 8) ]><!–>
    <html xmlns=”http://www.w3.org/1999/xhtml&#8221; <?php language_attributes(); ?>>
    <!–<![endif]–>
    <head>
    <meta charset=”<?php bloginfo ( ‘charset’ ); ?>” />
    <meta name=”viewport” content=”width=device-width” />
    <title><?php wp_title( ‘|’, true, ‘right’ ); ?><?php bloginfo( ‘name’ ); ?></title>
    <link rel=”stylesheet” href=”<?php bloginfo ( ‘stylesheet_url’ ); ?>” type=”text/css” />
    <!–[if lt IE 9]>
    <script src=”<?php bloginfo( ‘template_url’ ); ?>/html5.js” type=”text/javascript”></script>
    <![endif]–>
    <?php wp_head(); ?>

    <script>
    (function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);

    ga(‘create’, ‘UA-49755373-1’, ‘bliss.jp.net’);
    ga(‘send’, ‘pageview’);

    </script>
    </head>
    <body id=”hpb-wp-17-08-01″ <?php body_class(); ?>>
    <!– コンテナ –>
    <div id=”hpb-container”>

    <!– ヘッダー –>
    <header id=”hpb-grobal-header”>
    <hgroup id=”hpb-header-main”>
    <h1>” id=”hpb-site-title”><?php bloginfo( ‘name’ ); ?></h1>
    <img src=”<?php header_image(); ?>” height=”<?php echo get_custom_header()->height; ?>” width=”<?php echo get_custom_header()->width; ?>” alt=”” />
    <h2 id=”hpb-site-desc”><?php bloginfo( ‘description’ ); ?></h2>
    </hgroup>
    <div id=”hpb-header-extra1″>
    <p class=”tel”><span>TEL.</span>047-○○○-○○○○</p>
    <p class=”address”>千葉県○○○○</p>
    </div>
    <nav id=”hpb-main-nav”>
    <h3 class=”hpb-c-index”>メインナビゲーション</h3>
    <?php wp_nav_menu( array(
    ‘theme_location’ => ‘main-nav’
    ) ); ?>
    </nav>

    <?php if ( ! is_front_page() ) {
    get_template_part( ‘breadcrumb’ );
    } ?>
    </header>

    の記述です。
    どこかお分かりになりますでしょうか?
    よろしくおねがいいたします。

    천궁 메텔

    (@digitmaetel)

    現在トップには3つの画像がありますよね。
    記事直前の画像はフロントページのタイトルの代わりに入っていますね。

    トピック投稿者 blisskikuchi

    (@blisskikuchi)

    ありがとうございます
    と言うことは下記の部分ですね。

    <h1>” id=”hpb-site-title”><?php bloginfo( ‘name’ ); ?></h1>

    少ない知識なので間違えているかもしれませんが該当部分を

    <h1><img src=”blisstop2.jpg” alt=”船橋市RTA指定ベビーマッサージ ベビースキンケア Bliss”></h1>
    にしてfunction.php内のカスタムヘッダーの部分の記述をやめると言うのが1つの方法ですか?(blisstop2.jpgは写真が6枚の使いたいほうです。)
    この方法だとhpb-site-titleの記述を削除することがが何か悪さをするのでしょうか?
    導入がホームページビルダーだったのでhpbだと思うのですがそのための記述だと思います。
    また現在タイトルの代わりに入っている画像なのに○○.jegでない事がはたしてこれが削除したい画像の記述なのか?という疑問につながっています。

    画像はたまに変えたいので今から考えた手法のほうがいいのですが

    <h1>船橋市RTA指定ベビーマッサージ ベビースキンケア Bliss</h1>

    とすれば画像はカスタムヘッダーにより使いたいものが採用され、SEO的にh1タグも記載されているとなるのでしょうか?
    All In One SEO Packを導入しているのでそこにもタイトルを記載しているのは問題ないのでしょうか?

    すみませんよろしくお願いいたします。

    천궁 메텔

    (@digitmaetel)

    <?php bloginfo( ‘name’ ); ?>は現状維持でないとエラーを起こすでしょう
    <h1>" id="hpb-site-title"><?php bloginfo( 'name' ); ?></h1>
    部分はロゴが当てられている部分で、
    width: 460px;margin-top: 45px;
    と固定されているのでここを置き換えると右側の電話番号に影響してきますね。
    SEO 的にロゴであれ文字であれ問題にはならないと思いますが、
    特別に企業ロゴなど必要でない限りは文字のほうが良いと個人的には考えていますよ。

    2つのヘッダー画像でカスタムヘッダーとするなら<?php bloginfo( ‘description’ ); ?>の下に

    <h2 id="hpb-site-desc"><?php bloginfo( 'description' ); ?></h2>
    </hgroup>
    <div id="追加のヘッダー画像"><img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" /></div>

    という感じでしょうかね。
    一番下の #hpb-title がページタイトルの代わりに画像が当てられているのでヘッダー画像をひとつにするなら不要に感じます。

    ホームページビルダーを使ってテンプレート作成されているためにクラス名が hpb で始まっているのはたしかでしょう。

    画像はたまに変えたいので今から考えた手法のほうがいいのですが

    というのは手作業で度々書き換えるかスライダーあたりを導入するしか無いでしょう。
    いずれにしろ、過去にもホームページビルダーを使用しているケースで起こったことですがカスタマイズを進めてもホームページビルダーでサイト更新を行うと元に戻ってしまうようですね。

    トピック投稿者 blisskikuchi

    (@blisskikuchi)

    ありがとうございます

    ご教授いただいた方法
    <h2 id=”hpb-site-desc”><?php bloginfo( ‘description’ ); ?></h2>
    </hgroup>
    <div id=”追加のヘッダー画像”><img src=”<?php header_image(); ?>” height=”<?php echo get_custom_header()->height; ?>” width=”<?php echo get_custom_header()->width; ?>” alt=”” /></div>

    の記述を追加する場合はやはり2段でヘッダー画像が出てしまうのでしょうか?
    希望は現状で上段に表示されている画像(blisstop2.jpg)だけにしたいです。

    うすうす気づいてはいるのですが他のテンプレートに変えたほうが話は単純そうですね。
    そうなんですホームページビルダーでサイト更新すれば画像を入れ替えるのは簡単なのですが他のカスタムしたものが全て戻ってしまうのです。
    ホームページビルダーのテンプレートの限界なのかもしれません。
    何度もすみません。

    천궁 메텔

    (@digitmaetel)

    現在の一番下の画像はトップページのタイトルの代わりに画像を使っていますよね。
    それを通常のタイトルに戻すと良いでしょう。
    他のページには文字でタイトルが出ていますね。

    トップページという固定ページをフロント固定しているのだとおもいます。
    その固定ページの
    <div id=”#hpb-title”><h2>・・・の箇所を画像指定を解除すると良いでしょう。

    ただこれがホームページビルダーの設定で画像を使うか、タイトルを使うかの選択があればいいですね。
    そうでなければ次に更新した時に元に戻ってしまうでしょう。

    SEO を気にかけておられますが、タイトルがトップページのままサイトのフロントに有るのは効果が生かされませんね。

    小規模店舗、ビジネスのホームページを作るのにホームページビルダーを使うと簡単で手間いらずです。カスタマイズして個性を出そうとすると、そこが足かせになります。
    お手本のような出来上がりになってホームページビルダーの企業をアピールするだけに終わります。
    “JustSystems Homepage Builder Version 17.0.1.0 for Windows」によって作成されました。”の記述がついて回り、メーカー側にバージョンアップをしていないことも伝えている形になります。
    また、WordPressのバージョンアップに合わせてホームページビルダーの開発が進むわけですから、ずっと後追い。WordPressは主に脆弱性の克服で進化してきていますからホームページビルダーを使っていればバージョンアップに従っていくしか無いことになりませんでしょうか。
    それをホームページの作り方はどういうものかを学習するツールだと思えば、更新やカスタマイズのコツが掴めるようになってきたら卒業しないといつまでも終わらない学習雑誌のようになります。

    現在の blisskikuchi さんのホームページはきちんとお手本的に良く出来ています。
    これはそのままブランディング・サイトとしてとどめて、blog.bliss.jp.netと言った感じで普通にWordPressだけを使ったブログサイトで個性を出して見せてはいかがでしょう。育てがいはありますよ。

    トピック投稿者 blisskikuchi

    (@blisskikuchi)

    本当にありがとうございます
    一言一句勉強になります

    固定ページテンプレート (page.php)内の
    <div id=”hpb-title”>
    <h2>” id=”hpb-page-title”><?php the_title(); ?></h2>
    </div>
    の部分ですね?
    画像指定の解除とのアドバイスをやりたいのですがどうも調べてもわかりません。
    どのように記述もしくは訂正すれば良いのでしょうか?
    聞いてばかりで申し訳ございません。

    またご指摘の通りそろそろビルダーのテンプレートに限界を感じています。
    この作業が終了してしばらくしたらワードプレス内のテンプレートに挑戦したいと思います。

    천궁 메텔

    (@digitmaetel)

    ビルダーでのテンプレートがどういう仕様に成っているのか把握できていないので、ズバリと行かないのですが。
    固定ページでトップページというテンプレートが当てられていると推察します。

    http://bliss.jp.net/wp-content/themes/hpb20140330142020/blisstop.jpg
    現在の画像をどのように指定してタイトル代わりにしましたか。
    登録するフィールドがあったのなら、削除すれば「トップページ」という文字になると思います。

    荒業としてはスタイルシートの background-image : url(blisstop.jpg); をコメントアウトしてしまいましょう。

    .home #hpb-title h2{
    	background-image : url(blisstop.jpg);
    	background-position: left top;
    	background-repeat: no-repeat;
    	height: 100%;
    	box-shadow: none;
    	margin-bottom: 0;
    	margin-top: 0;
    	padding-left: 0;
    	padding-right: 0;
    	padding-bottom: 0;
    }

    トピック投稿者 blisskikuchi

    (@blisskikuchi)

    ありがとうございます
    ホームページビルダーにワードプレス用の編集ページがありそこで骨組みを作って以後ワードプレスのダッシュボードで作業しているのですがその骨組みを作っている際、トップ画像を入れ替えると言う手順にしたがって画像を指定しただけでした
    ちょうど
    http://www.justsystems.com/jp/users/hpb/guide/hpb_wordpress_web.pdf
    の15ページのような作業をしたのではないかなと記憶してます。
    ダッシュボードで作業をし始めてからホームページビルダーの画面に戻って作業をした際に保存内容が戻ったり、上手く作動しなかったりかなり痛い目にあっているので出来れば戻りたくないと考えています

    ホームページビルダーを介したため大変ややこしくなっています。
    ご紹介していただいた荒業が良さそうですね。

    似た手法でFTPサーバーよりblisstop.jpgを削除してしまおうとも思ったのですがそれだと大きなバツ印の画像が出てしまうのだろうと思っています。
    荒業はそれが出ずにいけそうでしょうか?

    background-image : url(blisstop.jpg);
    の記述を
    background-image : url(blisstop2.jpg);
    に変えれば良いなんて単純なものではないのですよね?

    何度もアドバイス大変助かります。本当にありがとうございます。

    천궁 메텔

    (@digitmaetel)

    ホームページビルダーのマニュアル参考になりました。
    オブジェクトに画像を事前に登録しておけば、作業は直感的という仕様ですね。
    サーバーとの接続の都合が保存内容が戻ったり、を起こしているのだと思います。

    現在のホームページ・ビルダーの設定をカスタマイズしないで、
    ここの画像だけを変えることで維持するのが、ホームページ・ビルダーの仕組み上はベストかもしれないですね。

    似た手法でFTPサーバーよりblisstop.jpgを削除してしまおうとも思ったのですがそれだと大きなバツ印の画像が出てしまうのだろうと思っています。

    では、大きなバツ印の画像が出ますね。

    background-image : url(blisstop.jpg);
    の記述を
    background-image : url(blisstop2.jpg);
    に変えれば良いなんて単純なものではないのですよね?

    これは良いヒントになりました。

    荒業を実行しないでもスタイルシートはそのままに、
    現在の画像と同サイズ 横幅980px 高さ300px の画像に統一して。
    bliss.jp.net/wp-content/themes/hpb20140330142020/
    に FTP でアップロード。

    6枚の画像を季節で入れ替えたい場合は、
    blisstop-1.jpg〜blisstop-6.jpg
    みたいなファイル名でアップロードして、末尾の数字を消した画像が表示されるようにするのではどうでしょう。

    トピック投稿者 blisskikuchi

    (@blisskikuchi)

    ありがとうございます

    background-image : url(blisstop.jpg);
    の記述を
    background-image : url(blisstop2.jpg);
    に変えれば良いなんて単純なものではないのですよね?
    を実行してみたら採用したい画像2段になりました。
    (成功例1)

    ためしに荒業もしてみました。
    するとカスタムヘッダーで設定したほう(上段)が残り
    下段は他のページと同じようにグレーの網掛けのタイトル欄と980×300のスペースのみになりました。
    カスタムヘッダーの気に入っている所は、他の固定ページにもヘッダー画像が表示され見栄えが良い点です。
    このグレーのタイトルにテキストを表示させ、980×300のスペースをなくしてしまうことは出来るのですか?(他の固定ページと同じように)
    .home #hpb-title{
    margin-top: 0;
    margin-left: -10px;
    margin-right: -340px;
    padding-left: 0;
    padding-right: 0;
    clear: both;
    width: 1000px;
    height: 303px;
    position: relative;
    }
    .home #hpb-title h2{
    background-image : url(blisstop2.jpg);
    background-position: left top;
    background-repeat: no-repeat;
    height: 100%;
    box-shadow: none;
    margin-bottom: 0;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    の部分の
        background-image : url(blisstop2.jpg);
    をコメントアウトし(荒業)
    height: 0px;(もしくは1pxが良いのかな?)
    にすればよいのかな?と考えました。
    ただそこに表示させるテキストもどのように記述して良いのか分かりません。
    この方法が可能ならあわせてご教授願います。

    もし出来ない、おかしくなる、ようでしたら他の固定ページのヘッダー画像はあきらめて前出の成功した方法(成功例1)にしてカスタムヘッダーをやめます。

    すごくたくさんのアドバイスいただき貴重なお時間を割いていただいておりますので最低限やりたいことは出来ましたので以後頑張りたいと思います。

    천궁 메텔

    (@digitmaetel)

    All In One SEO Packを導入している

    ということなので、
    トップページのテキストはトップページの All In One SEO Pack の記述を要約したものでよろしいでしょう。

    height: 0px;(もしくは1pxが良いのかな?)
    にすればよいのかな?と考えました。

    2px ぐらいにするとライン代わりになって装飾になるかと思います。

    カスタムヘッダーで設定したほう(上段)が残り
    下段は

    不要であれば
    display:none;が良いでしょう。

    トピック投稿者 blisskikuchi

    (@blisskikuchi)

    digit@maetelさん 
    出来ました。

    2px ぐらいにするとライン代わりになって装飾になるかと思います。
    →2or1pxだと旗の素材の端っこが残って変だったので0pxにしてみました

    ただそのやり方でよいのかなどの判断はdigit@maetelさんのおかげです。
    すごく勉強になりました。
    実はもう1つ前回の質問の内容が解決していないのですが、今回の件ですこしスタイルシートのことが分かったのでがんばってみます。
    貴重なお時間を割いていただき本当にありがとうございました。

    トピック投稿者 blisskikuchi

    (@blisskikuchi)

    解決済みにし忘れました
    皆様ありがとうございました

15件の返信を表示中 - 1 - 15件目 (全16件中)

トピック「ヘッダーの画像が入れ替わりません」には新たに返信することはできません。