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

  • 解決済 hayato-y

    (@hayato-y)


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

15件の返信を表示中 - 1 - 15件目 (全47件中)
  • こんにちは、

    投稿ページに指定しているスタイルルールを、ループページで適用しようとした場合
    そのまま、ループページでそのスタイルを適用しようとすると、他の投稿へルールが適用されてしまう事がよくあります。

    なので、その画像ブロックだけにスタイルが適用されるようにすればいいと思います。
    ただ、IDを振ると、ループページでは、複数の同一IDが使われることになるので、お勧めできません。
    特別なクラスで、そのアニメーションブロックだけにスタイルが適用されるように工夫すれば大丈夫だと思います。

    私が作っているテーマで、個別投稿に付属するエディタでスタイルを指定すると ループページでもそのスタイルが反映するといった機能を実装しています。

    カスタマイズの役に立つかどうかは解かりませんが、お暇な時にでもみてみてください。

    具体的な説明が大変なので、、、

    (投稿のCSSエディタの使い方は、投稿ページの右上のヘルプをクリックすると使用例が書いてあります)

    raindrops

    >>nobita
    どうもありがとうございます。早速、raindrops、使用させていただきました。
    当方が求めるアニメーションのスタイルも適用でき、満足しています。
    このテーマを使用して自分の望みどおりのサイトが構築できそうです。
    加えて甘えさせていただけたらと思いまして、質問がございます。
    トップページ(ループページ)でのレイアウトは現在のraindropsでは上から下に順に記事が
    並ぶスタイル

    記事1
    記事2
    記事3

    ですが、これを

    記事1 記事2 記事3 
    記事4 記事5 記事6

    のように3列、もしくは4列
    カスタマイズしたいと思います。
    アニメーション付の写真と少しの説明文だけをトップページに
    表示するためです。
    この場合、style.cssを変えるだけで可能でしょうか?
    お教えいただけたら幸いです。
    どうぞよろしくお願いいたします。

    使っていただきありがとうございます。

    段組みの大ざっぱなスタイル例は

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

    のようにできます。

    トップページ等ループページでは、li要素で表示しています li要素には、loop-1,loop-2…
    とクラスが自動的に設定されるので、段組みの時に必要になる フロートのクリアやマージンのカットなどに使えると思います。

    その他にも、組み込み機能でグリッド表示もできます。

    固定ページを作成し、ページ属性メタボックスのテンプレートを front portfolio templateに設定していただくと、グリッド表示もできます。

    >>nobita
    どうもありがとうございます。早速、試してみまして、2列の表示まで出来ました。これを3,4と増やしていければ思ったとおりのサイトが作成できそうです。
    質問なのですが、
    http://www.tenman.info/wp3/manualraindrops/チャイルドテーマの作成方法
    のとおりにmysiteというチャイルドテーマを作成し、
    http://www.tenman.info/wp3/manualraindrops/archives/979
    のとおりに段組レイアウトにした結果、サイトの表示は2列までの段組で表示され、成功したのですが、管理者ページ(ログインページ)での表示が
    Warning: Cannot modify header information – headers already sent by (output started at /home/users/1/サイト名/web/wp-content/themes/raindrops/functions.php:10476) in /home/users/1/main.jp-trendrank/web/wp-includes/pluggable.php on line 1196
    のようになり、編集できなくなりました。使用しているロリポップサーバのFTPからファイルを再度上書きしたり、色々やってみたのですが上手くいきません。
    何か原因は考えられますでしょうか?よろしくお願いいたします。

    こちらのチャイルドテーマを

    http://www.tenman.info/download/child-raindrops

    使ってみていただけますか?

    Warning: Cannot modify header information – headers already sent by (output started at /home/users/1/サイト名/web/wp-content/themes/raindrops/functions.php:10476) in /home/users/1/main.jp-trendrank/web/wp-includes/pluggable.php on line 1196

    この種のエラーが出る時には、

    例えば、ファイルの編集に Windows の NotePad を使っているような場合

    https://notepad-plus-plus.org/

    等に変更して、(BOMなし)UTF-8で保存する。

    functions.php に、PHP区間以外に、空行がある場合

    <?php
    //前方の空行
    ?>
    
    <?php
    //PHP区間間の無用な空行
    ?>

    どうもありがとうございます。
    再度raindropsをアップロードし、同じ工程で設定していったところ、functions.phpの設定・保存の後に同じ10467行目で今度は
    syntax error, unexpected ‘<‘ in
    が出ています。再アップロードはすべて
    http://www.tenman.info/wp3/manualraindrops/チャイルドテーマの作成方法
    からの直接コピー&ペーストですのでノートパッドは使用していないです。
    たびたび申し訳ありませんが、よろしくお願いします。

    再アップロードはすべて
    http://www.tenman.info/wp3/manualraindrops/チャイルドテーマの作成方法
    からの直接コピー&ペーストですのでノートパッドは使用していないです。

    直接コピー&ペーストというところですが、直接ペーストというのは、テーマの編集などでペーストしたという事ですか?

    もう少し詳しい手順が知りたいのですが、、、

    テーマの編集などにペーストしていない場合は、以下について回答ください

    それと、インストールされたバージョンは Raindrops 1.297 でよいですか?

    PHPのバージョンは解かりますか?

    >>nobita
    ありがとうございます。
    手順をすべて書き出します。
    まず、RAINDROPを削除(ロリポップのFTP上から)
    その後、Wordpressの新規テーマのアップロードからRAINDROPをZIPの形でアップロード。
    ロリポップFTP上でmysiteフォルダを作成。
    http://www.tenman.info/wp3/manualraindrops/チャイルドテーマの作成方法
    から
    /*
    Theme Name: mysite
    Author: Your name
    Author URI: http://example.com
    Version: 0.1
    Template:raindrops
     */
    をstyle.cssとしてcssファイル作成。AuthorとAuthor URIは自分のものに書き換えています。加えてFTP上でこのstyle.cssにアニメーションのcssを記述、保存。
    この時点では以上なしです。
    その後、wordpress上の親テーマRAINDROPSのfunctions.phpの最後に
    <?php

    add_action( ‘switch_theme’, ‘puddle_uninstall’ );

    function puddle_uninstall(){

    delete_option(“raindrops_theme_settings”);
    }
    ?>
    を加えました。この後、先ほどの状態になっています。

    長くなりましたので二つに分けました。
    インストールしたバージョンは Raindrops 1.297。
    PHPのバージョンはロリポップサーバで5.3で設定してあります。

    色々とご面倒おかけして申し訳ありませんが、どうぞよろしくお願いします。

    詳細な説明ありがとうございます。

    その後、wordpress上の親テーマRAINDROPSのfunctions.phpの最後に

    この部分ですが、チャイルドテーマに functions.php を作成いただきコードを記述いただけますようお願いします。

    説明書の方の説明が紛らわしかったようなので、説明書の方の説明を修正しました。

    <?php
    
    add_action( 'switch_theme', 'puddle_uninstall' );
    
    function puddle_uninstall(){
    
    delete_option("raindrops_theme_settings");
    }
    ?>

    補足:

    このコードは、チャイルドテーマをアンインストールした場合に、設定値をリセットするものですが、現時点での挙動に 注意点があります。

    今年の4月末、公式テーマのテーマオプションのルールが変更になり、テーマでの設定がテーマオプションページから、テーマカスタマイザーで設定るようになりました。

    現在、テーマカスタマイザーでテーマの変更が可能になっていますが(ver4.2.2)
    カスタマイザーを使ってテーマを変更した場合は、上記のスクリプトが動作しないという事が確認されています。

    例えば、もうレインドロップスは、使わないよ といった場合はお手数ですが、
    管理画面 / 外観 / テーマ / より 他のテーマに変更いただくと オプション値が削除されますので、そういった場合に限っては、旧来のテーマ設定のページでテーマを変更してください。

    ありがとうございます。早速、functions.phpをチャイルドテーマに作成しました。
    調子よく動いています。
    こちらの読み違い、勘違いでもあったかも知れません。申し訳ありません。
    お教えいただいたとおりに、やってみます。ありがとうございました。

    すいません。お願いします。もう一度ですが、対応策をお教えください。

    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘raindrops_add_header_archive_description’ not found or invalid function name in /wp-includes/plugin.php on line 406

    知らない間に記事の表示ページに以上の文が表示されるようになってしまいました。
    状況は先までのことを一連を設定したその後、何も弄っていません。
    チャイルドテーマの設定をし、チャイルドテーマで設定した段組みで
    ページは表示されていますが、上記のメッセージが表示されているのが原因かも知れませんが
    ページが表示されるまで少し遅いような気もします。

    申し訳ありません。お手数掛けますが、よろしくお願いいたします。

    チャイルドテーマで、テストしてみたのですが、こちらではエラーが再現できませんでしたので、もう少し情報をください。

    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'raindrops_add_header_archive_description' not found or invalid function name in /wp-includes/plugin.php on line 406

    エラーの発生している場所は、カテゴリ等のアーカイブを表示している時に、カテゴリの説明が記述されている場合、htmlのヘッダーのmeta要素で、

    <meta name="description" content="カテゴリーの説明をmeta要素のdescripttionに表示します" />

    というタグを自動生成する部分で発生しているようです。

    なので、

    どんなアーカイブ表示(カテゴリとか、月次アーカイブとか、タグアーカイブとか)を行っている時に発生しているのか教えていただけますか?

    それと、現在カテゴリやタグ等の説明文を使っているかどうかも教えてください。

    Raindropsのバグによって、問題が発生している場合でも、チャイルドテーマの、functions.phpに若干コードを追加すれば解決できるという見通しなので、お手数ですが、情報提供お願いします。

    ありがとうございます。
    >>どんなアーカイブ表示
    トップページ、所謂「記事一覧」です。
    カテゴリやタグは未使用、それ以外もまだ未設定のものは多いのですが・・・
    現在、表示されるよう設定されているのは、
    最初の記事、デフォルトの「hello world」のみです。
    どうぞよろしくお願いします。

    カテゴリをすべて削除
    投稿をすべて削除
    タグをすべて削除

    等して、再現を試みてみましたが、残念ながら エラーの再現が出来ませんでした。

    チャイルドテーマのfunctions.php を 以下のように変更してみてください。

    <?php
    add_action( 'switch_theme', 'puddle_uninstall' );
    
    function puddle_uninstall(){
    
    	delete_option("raindrops_theme_settings");
    }
    //ここから上は、すでに書いてあると思います
    // 追加分は、ここから
    function raindrops_add_header_archive_description() {
    
    	return;
    }
    //ここまでです。
    ?>

    これで、エラー部分の置き換えができますので、エラーは出なくなると思います。
    (テストできないので、ちょっと躊躇しますが、、、)

    これで、うまくいったら 次の設定もしておくといいです。

    WordPressのルートに wp-config.php というファイルがあります。

    そのファイルを開いて、

    <?php
    	define('WP_DEBUG_LOG', true);
    	define('WP_DEBUG_DISPLAY',false);
    ?>

    という定数を追加します。

    これは、エラーが発生した場合に、ディスプレイにエラーを表示せずに、

    wp-config/debug.log

    に、エラーを書き出す設定です。

    エラーは、気が付かないうちに、特定のページ等で出ることがあるので、利用者に見えないように設定しておくのがお勧めです。

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