フォーラムへの返信

15件の返信を表示中 - 1 - 15件目 (全28件中)
  • フォーラム: プラグイン
    返信が含まれるトピック: raindrops でのWP PageNaviの設置の仕方

    どうも、久しぶりの書き込みになってしまい、申し訳ありません。
    PCが壊れて修理に出しており、今日まで書き込みできなくて申し訳ありません。

    その後、
    http://www.tenman.info/wp3/manualraindrops/archives/943
    を発見してfunction.phpにPHPコードを追加したところ、
    上部のページナビゲーションはすべて消えました。
    3つのサイトで同じ症状だったのですが、http://trendrank.main.jp/
    含め、全サイトで表示はOKです。

    補足で状況を書いておきますと、
    >>トップページ左側上方にも「過去の投稿」としてページナビゲーションが
    左上に表示されていたこの「過去の投稿」リンクはBreadcrumb NavXTを
    パンくずリストに使用したとき、出るようで、上記
    http://www.tenman.info/wp3/manualraindrops/archives/943
    のPHPコード追加で消えています。

    >>右カラムの最上方にも数字で「1,2・・・」
    というのは、PageNavi 設定でpagenavi-css.css を使用にしたら消えました。
    エキストラサイドバー、「一番右のカラム」ではなく、ヘッダーの下のfloat:rightに表示されていたようです。
    見間違えですいませんでした。

    ということで、遅くなりましたが全部解決させていただきましてありがとうございました。
    また何かありましたらよろしくお願いいたします。

    解決済み

    了解いたしました。こちらのフォーラムでraindropsで質問をします。
    本当にどうもありがとうございました。
    またよろしくお願いします。

    ありがとうございます。コード貼り付けによって正常に表示されるようになりました。

    .anm1 img,
    body.search-results .anm1 img{

    }
    に書き換えていただくと正常に表示できると思います。
    >>では、なんで私のサイトは、正常に表示できていたのか?

    確かに、自分も最初にそちらのサイトを見てみた時は正常に表示されていました。
    ですが何度目かの表示からそのようになり、自サイトを表示させるためにchromeを再立ち上げしたときからその表示になっていたと思います。

    >>投稿エディタに記述したスタイルは、自動的に投稿IDが付加されるために、詳細度が強くなり、

    なるほど、勉強になりました。今後のcss関連で不具合が出た場合、投稿のCSSエディタで記述して表示してみれば、どこが原因なのか特定が早くなりそうですね。
    今後、サイトを作っていく上でまた難関にぶち当たったら、そのときはまたお願いいたします。
    こちらの質問は一度解決済みにさせていただいて、今後は
    http://www.tenman.infoの方になるべく書き込むようにしますね。
    それではどうもありがとうございました。またよろしくお願いいたします。

    >>1.303は、すでにレビュー申請に出してありますので、1.304でバグの修正を行いますので、ご了承ください。

    了解いたしました。少しでもお役に立てたら光栄です。
    今後ともよろしくお願いいたします。

    >>現象が再現できないので、現象が再現できるサイトなどを提示いただければ まだ調べようもあるかと思いますが、どうですか?

    どうもありがとうございます。そうでしたね、具体的にご覧いただくのが早かったですね。
    自分のサイトを晒してもいいものなのか分からなかったのでつい長くなってしまいました。
    すいません。

    こちらが一覧ページ(トップページ)
    http://trendrank.main.jp/
    こちらがSearch Results :です。
    http://trendrank.main.jp/?s=

    現在の状態ではheight:135px;を削除した状態にしておりますが、
    .anm1 img {
    width:1440px;
    height:135px;
    max-width:none;
    }
    とした場合の画像を付けておきます。
    http://trendrank.main.jp/wp-content/uploads/2015/06/135.jpg
    続けて カスタマイザー / 概要表示 の設定です。
    http://trendrank.main.jp/wp-content/uploads/2015/06/settei.png

    と、ここまできて
    >>検索結果ページ
    >>http://www.tenman.info/wp3/manualraindrops/?s=%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8

    このページなのですが、自分のchromeではこのように表示されています。
    http://trendrank.main.jp/wp-content/uploads/2015/06/テスト用.png
    これはブラウザの設定か何かでしょうか?

    少し他のブラウザでも調べてみます。
    申し訳ありませんが、現在ご報告できることはここまでになります。
    それではどうぞよろしくお願いいたします。

    何度もすいません。ご報告までに。

    >>スタイルが明示されていないので 一般論ですが、片方が 1440×135 他方では 180×135
    >>という結果になるためには、hayato-y さんが anm1にheight 135px を指定しているため
    >>に、縦方向は、同サイズ 横については、表示サイズで表示されていると推定されます。

    上記のanm1 cssからheight:135px;を削除して
    横幅のみ設定したcssにすると、serch-resultだけが
    横幅180px、縦17pxの非常に小さな画像で表示されました。
    それ以外は表示は変わらず、通常通りアニメーションされています。

    >>1440×135は、ソースの画像サイズではありませんか?

    トップページではそのソースの画像サイズで表示されています。
    180×135の画像を8つ連結して横1440×135が元々の画像サイズです。
    overflow: hidden;で8つのうち一番左側の画像が表示されていて、
    :hoverすると一つずつ画像が切り替わっていくのですが。
    serch-resultだけが、width: 180px;の中にはじめから画像全体が縮小されて収まっており、
    :hoverすると画像が一瞬消えます。

    これはserch-resultの元々設定してあるスタイルと競合しているのではないかと思うのですが・・・

    どうもありがとうございます。
    加えて書き込んでくれといわれた「投稿に記述された html と style」を勘違いしてました。すいません。加えて当方のブラウザはChromeです。
    アニメーションの元々のスタイルは以下になります。

    .anm1 {
    border: 1px solid #DDDDDD;
    display: inline-block;
    overflow: hidden;
    position: relative;
    vertical-align: top;
    width: 180px;
    }
    .anm1 img {
    width:1440px;
    height:135px;
    max-width:none;
    }
    .type1 img:hover {
    -webkit-animation:type1 infinite steps(8,end) 3s;
    -moz-animation:type1 infinite steps(8,end) 3s;
    animation:type1 infinite steps(8,end) 3s;
    }
    @-webkit-keyframes type1 {
    100% { -webkit-transform:translate3d(-1440px,0,0); }
    }
    @-moz-keyframes type1 {
    100% { -moz-transform:translate3d(-1440px,0,0); }
    }
    @keyframes type1 {
    100% { transform:translate3d(-1440px,0,0); }
    }

    埋め込まれる画像のスタイルはnobitaさんに書き込んでいただいたのとほぼ同じだと思います。これでのスタイルが上手くいっていないということになります。

    >>http://www.tenman.info/wp3/manualraindrops/archives/1567
    >>雑なサンプルですが、こんな感じの延長線上の事をしたいという事でいいんですよね。

    その通りです。こういった感じのアニメーションに:hoverをつけてアイキャッチ画像的なトップページから参照可能な画像をタップ、もしくはhoverで中の画像をトップページや検索結果から「個別記事urlに移動しなくても」確認できる仕組み。を探していました。

    先ほどの1440×135、180×135の話ですが、serch-result以外のページでは画像サイズ1440×135で、overflow: hidden;されているように画像が認識されています。
    要素を検証すると、画像がhiddenされた形、つまり記事の部分をはみ出して隠れた部分まで
    要素として検出されます(つまり、表示としては1440×135の画像が表示されていることになっています)。しかし、serch-resultでは180×135の画像としてしか表示されず、つまりhiddenされずに180×135の窓の中に画像が縮小され、また、要素としてもoverflow分を含めず180×135の窓の中しか認識されていないので困っていたのです。
    serch-resultだけがこのような表示になりますので、親要素のserch-resultのスタイルのことかと思ってました。すいません。

    >>どんどん使っていただき、問題が発生したら、また質問してください。
    >>バグは、あるかもしれませんが、可能な限り対応しますよー
    現在作成中のアニメーションのサイト以外にも4つほどこれを応用したサイトを
    作ろうと思っていまして、今のところこのraindropsとプラグインを組み合わせて作ろうと思っていました。ですので、細かいこともたくさん聞いておきたいと思い、質問が多くなってしまいました。申し訳ありません。それでは、よろしくお願いいたします。

    遅れてすいません。少しネットに繋げられなかったので
    <div class=”yui-u first raindrops-expand-width” role=”main”>
    <ul class=”index archives front-page index”>
    <li class=”loop-1″>
    <div id=”post-17″ class=””>
    <article class=”post-17 post type-post status-publish format-standard has-post-thumbnail hentry category-1 rd-tpl-index raindrops-mod-new”>
    <h2 class=”h2 entry-title “>
    <span><span class=”h2-thumb”><img width=”48″ height=”36″ src=”http://アイキャッチ画像001.jpg&#8221; class=”attachment-48×48 wp-post-image” alt=”” style=”vertical-align:middle;”></span><span class=”entry-title-text”>記事タイトル</span> </span>
    </h2>
    <div class=”posted-on”>
    <span class=”meta-prep meta-prep-author”>
    ~投稿日等 <div class=”entry-content clearfix”>
    <div class=”anm1 type1″><img alt=”” src=”http://画像001.jpg”&gt;
    </div>
    本文 <br class=”clear”>

    以上が「要素を検証」で出てきた一覧ページのスタイルです。
    以下が「検索結果」のスタイル。
    <div class=”yui-u first raindrops-expand-width” role=”main”>
    <ul class=”search-results”>
    <li class=”loop-1″>
    <div id=”post-17″ class=””>
    <article class=”clearfix post-17 post type-post status-publish format-standard has-post-thumbnail hentry category-1 rd-tpl-search raindrops-mod-new”>
    <h2 class=”h2 entry-title “>
    以下はまったく一緒。
    本文 <br class=”clear”>

    と、するとulのclassが”index archives front-page index”と”search-results”違うだけ
    だと思い、(loop-1でそちらは一緒)それぞれの指定されているスタイルを見に行きましたところ、
    serch-resultは
    .search-results,
    .search-results > li{
    margin:0;
    padding:0;
    }
    .search-results > li{
    list-style:none;
    }
    このようにstyle.cssに記述されています。cssにはserch-result特有のサイズ指定がしてありませんので、記事一覧と同じスタイルが適用されていると思ったのですが、
    「要素を検証」の画像スタイルで見ますと、「記事一覧」の方の当該画像が画像サイズ(1440×135)、「serch-result」が(180×135)と表示されます。
    これはどういったことなのでしょう?
    記事一覧は「段組レイアウト」、検索結果は「上から横いっぱいに1記事づつ」表示されているのでそちらで表示する画像のサイズも設定されてしまっているのでしょうか?
    phpなどを見ても原因がわかりませんでしたので質問いたしました。
    よろしくお願いいたします。

    本当にすみません。これで最後にします。

    img要素については、max-widthが、全体に強めに指定されています。
    (例えば、投稿から、画像がはみ出さない用途のために)
    なので、その辺りは、CSSで調整いただけるとうれしいです。

    これというのはどこのCSSのことでしょうか?
    色々調べてみた結果、
    記事一覧ページと月別アーカイブのアニメーション部分の要素を検証すると
    この使用画像の本来の大きさ、1440×135と表示されるのですが、
    serch resultでは180×135(natural 1440×135)
    と表示されています。
    多分、PHPの検索結果(serch.php)だと思い、それを確認してから
    serch resultとそれに関わるimageのcss記述部分を探しているのですが、
    max widthが指定してあるような箇所が見当たりません。

    考えられるところでは検索結果(serch.php)の中身を記事一覧ページ(index archives frontpage index)と同じものに書き換えるくらいしかわからなかったのですが、
    それを実行しても大丈夫でしょうか?

    本当に何から何まで聞いてしまって申し訳ないのですが、どうぞよろしくお願いします。

    チャイルドテーマのfunctions.phpに以下のコードを追加してください

    add_filter( ‘template_include’, ‘nobita_template_include’ );

    function nobita_template_include( $template ) {

    $template_sp = str_replace( ‘date.php’, ‘index.php’, $template );

    if ( file_exists( $template_sp ) ) {
    $template = $template_sp;
    }
    return $template;
    }

    追加しましたところ、月別アーカイブではアニメーションが効果するようになりました。
    ありがとうございます。

    >>この問題の修正方法が判明したので、書き込んでおきます。
    >>https://gist.github.com/tenman/1d3c74d59e1c3b1855fd
    >>を、( rawボタンを押してから コピーし )チャイルドテーマのfunctions.phpに貼り>>付けていただくと、アニメーションが動作するようになります。

    こちらに関しては、上のコード追加で月別アーカイブはアニメーション表示されるように
    なりました。こちらからのhttps://gist.github.com/tenman/1d3c74d59e1c3b1855fd
    コードを追加しても動作は異常ありません。

    >>検索結果画面について、一つ確認をしていただきたいのですが、
    >>カスタマイザーの概要表示セクションをクリックしていただき、
    >>検索結果ページの投稿本文 のラジオボタンの設定が 
    >>本文表示 の場合は、画像が表示されます
    >>概要文表示 の場合は、概要タイプの選択 で  HTML in Excerpt が選択されている時>>には、画像が表示されますが、WordPress Excerpt の場合は、画像が表示されません

    こちらですが、検索結果画面ではラジオボタンの設定が上記のどの場合でもすべて同じく、横180×縦135の8個連結なので横幅1440pxの画像を横180pxのcssでoverflow:hiddenしてそれをアニメーション切り替えしておりますが、元の1440pxの画像が「縮小され」て横180pxの中に表示されています。WordPress Excerptに設定した場合でも、サイトの表示は一緒です。

    現在の状況としては以上になります。どうぞよろしくお願いします。

    どうもすみません。

    もう一つお教えいただきたく、書き込んだのですが。
    現在、段組み+アニメーション機能のついた画像という
    構成ですべてのページで表示されるようカスタマイズしています。

    そのままの設定でも Category Archives ではアニメーション機能ごと
    画像が表示になるのですが、 Search Results と 月別アーカイブ の一覧表示にすると
    Search Resultsでは画像が表示されますがアニメーションが機能しておらず、
    月別アーカイブでは画像そのものが表示されない状況です。

    上でお教えいただいた
    .home .index li{~
    以下のチャイルドテーマのstyle.cssに
    .search-results .index li{~
    のように新しいスタイルを追加してみましたが、上手く機能しませんでした。
    検索結果画面、Search Resultsと月別アーカイブの表示スタイルを指定している
    cssはどこになっていますでしょうか?

    お教えいただけますと幸いです。どうぞよろしくお願いします。

    ・・・すいません。ありがとうございます。
    その通りで、改行があり、消したら直りました。
    何度もお手間を掛けさせまして申し訳ありませんでした。

    本当にありがとうございました。

    追記
    加えて他の「テーマ」に属する設定の変更をしたときも一部出ています。
    よろしくお願いいたします。

    ありがとうございます。調べたところ、バージョンは3.6.1でした。
    4.2.2に変更したところ、上記のすべてのエラーが出なくなりました。
    ありがとうございました。

    ですが、
    チャイルドテーマの functions.phpに
    $raindrops_new_customizer_support_child= true;

    こちらを試したところ、テーマカスタマイザーは正常に作動しましたが、
    チャイルドテーマの functions.phpを書き換えたとき(ファイルを更新)に

    Warning: Cannot modify header information – headers already sent by (output started at /home/public_html/サイト名/wp-content/themes/mysite/functions.php:17) in /home/public_html/サイト名/wp-includes/pluggable.php on line 1196

    が出るようになりました。
    元の記述に戻しても、エラーは出ています。
    style.css等、他のファイルを更新してもまた、同じエラーです。
    原因は何でしょうか?

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