サポート » テーマ » 記事本文中のcssアニメーションをそのままサムネイルで表示する方法

  • 解決済 hayato-y

    (@hayato-y)


    「Simplicity」を使っています初心者です。カスタマイズ方法を知りたいです。よろしくお願いします。「本文中にアップロードされている画像に適用されているスタイル」を「一覧のサムネイル」でも適用させるカスタマイズの方法です。自ブログでは本文中の画像にマウスhoverさせるとアニメーションされるスタイルをcssで適用させています。横10連の画像を-webkit-animationで一こまづつ、マウスhoverで開始されるアニメーションです。
    これをトップページの記事一覧のサムネイルでも同じようにアニメーションさせたいと思っています。アニメーションだけではなく他のcssスタイルも取り入れるつもりなので、出来れば個別記事に埋め込まれた画像のスタイルを「そのままサムネイル画像として読み込む(div class=ごとサムネイル化する)」ことのできるようなカスタマイズ、もしくは「記事ごとにサムネイルに何らかのcssでのスタイルの指定」が出来るようにする方法、もしくは「トップページの記事一覧の部分にそのまま個別記事の全内容を(cssのdivスタイルごとの本文中画像を含む)そのまま表示する」のいづれかの方法を探しています。よろしくお願いします。

15件の返信を表示中 - 31 - 45件目 (全47件中)
  • チャイルドテーマの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に設定した場合でも、サイトの表示は一緒です。

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

    横180×縦135の8個連結なので横幅1440pxの画像を横180pxのcssでoverflow:hiddenしてそれをアニメーション切り替えしておりますが、元の1440pxの画像が「縮小され」て横180pxの中に表示されています。

    img要素については、max-widthが、全体に強めに指定されています。
    (例えば、投稿から、画像がはみ出さない用途のために)

    なので、その辺りは、CSSで調整いただけるとうれしいです。

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

    ありがとうございます。

    投稿の編集にあるCSSエディタを使用する場合には、必要になる設定です

    大体これで一段落ですかね、?

    よろしければ、解決済みに変更しておいてください

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

    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)と同じものに書き換えるくらいしかわからなかったのですが、
    それを実行しても大丈夫でしょうか?

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

    こちらでも、調べてみますので

    投稿に記述された html と style を書き込んでみてください

    それがないと、検証が出来ないので、、、

    遅れてすいません。少しネットに繋げられなかったので
    <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” 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”>
    </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などを見ても原因がわかりませんでしたので質問いたしました。
    よろしくお願いいたします。

    「要素を検証」の画像スタイルで見ますと、「記事一覧」の方の当該画像が画像サイズ(1440×135)、「serch-result」が(180×135)と表示されます。

    Chrome等の要素を検証で表示されるソースは、DOMソースです。

    画像のサイズは、実際にブラウザで表示されている画像サイズが表示されます。

    Raindropsテーマでは(他のテーマでも大体一緒ですが)

    画像は、親ブロック要素からはみ出さないように、max-width:100%(細かくは、99%等、レイアウトの都合で、多少指定が異なる部分もあると思いますが)が指定されています。

    高さについては、通常 auto が指定されますので、親ブロック要素のサイズをはみ出さないように、画像は拡縮されます。

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

    ただ、1440×135 というのは、テーマのレイアウト構成からみて、DOMソースでは、大きすぎるサイズに見えます。

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

    いずれにしろ、180×135のサイズで、画像を表示させるとするなら、一般的には、以下のスタイルで可能だと思います ( スタイルが提示できないようなので、何とも言えないところがありますが )

    .anm1{
        overflow:hidden;
        width:180px;
    }
    .anm1 img{
        width:1440px;
        height:135px;
        max-width:none;
    }

    後は、画像の切り替えのためのCSSなどがあれば、スライドショーみたいな表示になると思います。

    http://www.tenman.info/wp3/manualraindrops/archives/1567

    雑なサンプルですが、こんな感じの延長線上の事をしたいという事でいいんですよね。

    投稿のCSSエディタにスタイルを記述すると、他の投稿のスタイルの影響を受けずに、それぞれ異なる アニメーション等が書けるのが Raindropsのセールスポイントでもあるので、
    どんどん使っていただき、問題が発生したら、また質問してください。

    バグは、あるかもしれませんが、可能な限り対応しますよー

    どうもありがとうございます。
    加えて書き込んでくれといわれた「投稿に記述された 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とプラグインを組み合わせて作ろうと思っていました。ですので、細かいこともたくさん聞いておきたいと思い、質問が多くなってしまいました。申し訳ありません。それでは、よろしくお願いいたします。

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

    >>スタイルが明示されていないので 一般論ですが、片方が 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の元々設定してあるスタイルと競合しているのではないかと思うのですが・・・

    先日のサンプルを、再度別のサーバーでテストしましたが

    http://www.tenman.info/wp3/manualraindrops/files/test-result-anm.jpg

    検索結果での、表示の変化は特に感じられませんでした。

    http://www.tenman.info/wp3/manualraindrops/archives/1567

    検索結果ページ

    http://www.tenman.info/wp3/manualraindrops/?s=%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8

    も同様に表示されています

    何かしらの、要因があると思いますが、

    例えば、カスタマイザー / 概要表示 

    検索結果ページの投稿本文 が 概要表示

    概要タイプの選択 が HTML in Excerpt

    に設定されている場合には、先頭表示されている文字列長によっては、

    アニメーションhtmlの一部が削除された状態で終了タグが埋め込まれる等が想像可能ですが、 本文表示 になっていればそのような事にはならないです。

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

    この質問の途中で、

    raindrops_add_header_archive_description()

    がエラーを出しているという指摘がありましたが、

    同様の指摘が、海外のユーザーからもありました。

    再度 検討したところ、説明欄 のないアーカイブの場合も動作していることがわかりました。

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

    https://wordpress.org/support/topic/call_user_func_array-error-1?replies=3#post-7114171

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

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

    こちらが一覧ページ(トップページ)
    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
    これはブラウザの設定か何かでしょうか?

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

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

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

    状態が把握できました

    .anm1 img

    とスタイル指定していただいている部分を

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

    に書き換えていただくと正常に表示できると思います。

    では、なんで私のサイトは、正常に表示できていたのか?

    動くサンプルを作成する時に スタイルを 投稿のCSSエディタで書いてしまっていたのが原因です。

    http://www.tenman.info/wp3/manualraindrops/archives/1567/entry-css-editor

    投稿エディタに記述したスタイルは、自動的に投稿IDが付加されるために、詳細度が強くなり、body.search-results .anm1 img を打ち消していたのが原因でした。

    障害となった、テーマのスタイル指定 body.search-results .hentry img が必要な詳細度なのかどうかは、今のところチョット判断できませんが、テストの上必要なさそうであれば、今後のバージョンで削除するつもりです。(1.304に間に合わせたいと思います)

    http://trendrank.main.jp/wp-content/uploads/2015/06/%E3%83%86%E3%82%B9%E3%83%88%E7%94%A8.png

    私も、このコメントを書くために表示してみたところ、同様に表示されていてちょっとびっくりしました。

    このサイトでは、RaindropsのおすすめプラグインQuick Cache(Zen Cache)を使っているのですが、キャッシュを削除すると正常に表示されるようなので、キャッシュの影響みたいですが、ちょっと謎です。

    関連しそうな事

    特定のブラウザの訪問とキャッシュのタイミングが重なり、キャッシュファイルが作成されると、例えば body要素に ブラウザを検出して動的に記述されるはずの ie8 といったクラスが、キャッシュで、どのブラウザに対しても ie8 として表示してしますという問題が過去にあり、
    現在のブラウザ判定は、javascriptから動的に body 要素にクラスを振り分ける処理をしています。

    が、何がどう影響して、提示画像のようになったのかすぐには答えは出せそうにありません。

    お手数をおかけしました。

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

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

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

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

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

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

    すみませんが、Raindropsの質問は、

    このフォーラムにお願いしまーす。

    他のレインドロップスを利用になっている方の事を考えると、見つけやすい のと

    私が、自分のサイトの方が海外からのスパムなども多く 見落とす可能性大なためです。

    よろしくお願いします。

15件の返信を表示中 - 31 - 45件目 (全47件中)
  • トピック「記事本文中のcssアニメーションをそのままサムネイルで表示する方法」には新たに返信することはできません。