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

チャイルドテーマの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に設定した場合でも、サイトの表示は一緒です。

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

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

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

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

遅れてすいません。少しネットに繋げられなかったので
<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）と表示されます。
これはどういったことなのでしょう？
記事一覧は「段組レイアウト」、検索結果は「上から横いっぱいに１記事づつ」表示されているのでそちらで表示する画像のサイズも設定されてしまっているのでしょうか？
phpなどを見ても原因がわかりませんでしたので質問いたしました。
よろしくお願いいたします。

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

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

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

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

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