フォーラムへの返信

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • フォーラム: テーマ
    返信が含まれるトピック: ヘッダ画像について

    こんにちは。

    ヘッダー画像を一番上にするためには<body>の直後にヘッダーの<img>が来るようにすればよいと思います。
    ただ、WordPressの場合、phpを修正する必要がありますので注意して作業をしていただければと思います。
    (すみませんが私自身で動作確認をすることができません…ダメだった場合いつでも修正できる状態で試していただきたいと思います。)

    googleで探してみると似たようなお話で、分かりやすいブログがありましたので載せておきます。
    http://beebee.peewee.jp/2013/06/19/01/

    Twenty Twelveを少し変えただけということですので、Twenty Twelveの例で話を進めます。

    ヘッダー画像のコードが書かれているのは「header.php」というファイルです。その中に、

    <?php $header_image = get_header_image();
            if ( ! empty( $header_image ) ) : ?>
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
    <?php endif; ?>

    というような部分があるかと思います。そこを<body <?php body_class(); ?>>の直後に移動して見てください。こんな感じになると思います↓

    <body <?php body_class(); ?>>
    		<?php $header_image = get_header_image();
    		if ( ! empty( $header_image ) ) : ?>
    			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
    		<?php endif; ?>
    <div id="page" class="hfeed site">

    無事、画像が上に表示された場合、画像が中心には表示されていないかもしれません。その場合は、
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
    の部分の前後を
    <div id="header-img"></div>
    で囲ってcssで

    #header-img{
      text-align:center;
    }

    としてあげれば、センタリングされるかと思います。(header-imgというid指定は一例ですので、お好みで変えてください。)

    これで出来るとは思うのですが…上記のとおり、検証していませんので不具合が出るかもしれません。参考程度になればと思います。

    フォーラム: テーマ
    返信が含まれるトピック: ページ分割()のデザイン変更について

    KAZUKING1213さんこんにちは。

    再度拝見したところ、コードが反映されていないようですね。

    <!--?php wp_link_pages('before=
    <div id="nextpage">&after=</div>
    &next_or_number=number&pagelink=<span>Page %</span>'); ?>

    上記のコードを書くと
    <div id="nextpage"><a href="リンク"><span>Page 1</span></a></div>
    このように<div>で囲まれ、そのidは"nextpage"になります。また、実際にweb上で表示されるのは「1 2 3…」ではなく「Page 1 Page 2 Page 3…」となるはずです。

    返信いただいた文中のソースでは、
    <p>ページ: <a href="ページURL">1</a> 2 <a href="ページURL&page=3">3</a>
    ということですから、「monochrome」のデモ画面上の『Layout Test』という投稿記事にあるページナビと同じということだと思います。

    そこで、確認なのですが、
    「monochrome」の、投稿記事のページナビ部分のphpコードは、「single.php」というファイル内の22行目です。以下20行目から24行目を示します。

    <div class="post_content cf">
        <?php the_content(__('Read more', 'monochrome')); ?>
        <?php wp_link_pages(); ?> //←この部分がページナビ
       </div>
      </div>

    この部分を先ほどの<!--?php wp_link_pages('before=<div id="nextpage">~に変えることで、普通は反映されるはずなのですが…。

    ●「single.php」ファイル内22行目<?php wp_link_pages(); ?>

    <!--?php wp_link_pages('before=
    <div id="nextpage">&after=</div>
    &next_or_number=number&pagelink=<span>Page %</span>'); ?>

    に書き換えていますか?

    ●「page.php」というファイル内にも<?php wp_link_pages(); ?>がありますが、これは固定ページのページナビです。デモ画面で言うなら、スクロールして一番下にある黒い四角いページナビの部分です。デザインはこちらを希望、とのことですが、KAZUKING1213さんが今カスタマイズしたいのは投稿記事の方のページナビだと思われますので、間違えない様に注意してください。

    フォーラム: テーマ
    返信が含まれるトピック: ページ分割()のデザイン変更について

    こんにちは。

    実際のページではどのようになっているのかは分かりませんが、cssが反映されない理由として考えられるのは、

    ①外部cssの場合、そのcssが何らかの理由で読み込まれていない。
    →他のレイアウトに影響がないとなると、これは考えにくい。もし読み込まれていなかったら、cssファイル分割でもしていない限り、ページ全体のレイアウトがおかしくなるため。

    ②htmlにid,classの記述がない、もしくは指定が間違っている(文字間違いなど)。
    →こちらの可能性が高いように思います。今一度、ご自身のページナビ部分のhtml上のid,class指定がどのようになっているか確認してください。
    「d-31n studio」さんの記事のPage2では

    2ページ目以降はリンクが貼られるので問題ないのですが
    ランクを貼られていない当ページのソースをみるとただの”1”とでてるだけ・・

    色々調べ 試して失敗して その結果下記の様なスタイルにたどり着きました。

    <!--?php wp_link_pages('before=
    <div id="nextpage">&after=</div>
    &next_or_number=number&pagelink=<span>Page %</span>'); ?>

    上のタグの説明をしますと 呼び出したページナビの前後に入れるソース(beforeとafter)を足してページナビに属性を付けます。
    Page %は Pageが数字の前にくる文字。%が数字になります。変更する場合はPageの所(%はそのまま)を変更します。
    そしてページナンバーの前後にspanを付けました。 <li>でも試してみましたがうまくいきませんでした・・

    とありますが、この部分は上記のようにphpに記述しましたか?Page1で言われていた
    <!--?php wp_link_pages(); ?-->
    だけにしていませんか?

    記述してあれば、

    さて、spanで括られた数字ですが リンクの貼られた2ページ目以降は下記の様なソースになってしまいます。
    <a href="http://www.d-31n.com/blog/wp-plugin/1976/2/"><span>Page 2</span></a>
    リンクタグの間にspanが入ってしまいますので CSSで設定するときも span a などでなく a spanとなります。

    とあるようにリンクタグaの中に<span>が入った形になっているはずです。また、<div id=”nextpage”>の記述もphp内でおこなわれているので、前述の

    <!--?php wp_link_pages('before=
    <div id="nextpage">&after=</div>
    &next_or_number=number&pagelink=<span>Page %</span>'); ?>

    をphpに記述していないと<div id=”nextpage”>というタグも入りません。

    「<div id=”nextpage”>」「リンクタグの中の<span>」この2つがhtml上にないようでしたら、当然「d-31n studio」さんで掲載されているcssをコピペしても反映されません。php内に先ほどのコードが書かれていないと思われますので、
    <!--?php wp_link_pages(); ?-->
    の部分を

    <!--?php wp_link_pages('before=
    <div id="nextpage">&after=</div>
    &next_or_number=number&pagelink=<span>Page %</span>'); ?>

    にしてみてください。

    フォーラム: テーマ
    返信が含まれるトピック: テーマribbonでfirefoxのみでデザインが崩れる

    こんにちは。

    色々ためしてみた結果、cssの

    .post-single-content {
    float: left;
    font-size: 14px;
    line-height: 22px;
    }


    width: 100%;を追加して指定すると正しく表示されました。

    たぶん、親要素に対して子要素は100%で表示するように、いちいち指定しなくてはいけないのかもしれません。

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