サポート » テーマ » テーマ AccessPress Parallax のサービスセクションのアイキャッチ表示

  • 解決済 かわねこ

    (@wpmid)


    お世話になります。
    昨日きづいたことを加えます。

    私はプログラミングに詳しくなく、想像でしかないのですが
    Chrome のデベロッパーツールやスマホから確認してみますと、
    アイコンを生成するのに

    ○の中にアイキャッチの画像を padding 15px(右か左)に指定し入れている

    といった作業の後に、画面サイズに合わせてアイコンを縮小していくのであろうと思うのですが、実際にスマホやパッドで表示すると

    ○やアイキャッチを縮小してから padding 15px の位置指定

    といった手順となり、○の中に納まらないように感じます。
    *しかし配布のデモの場合は正しく表示されています。

    昨日は、このスレの初めの投稿を AccessPress Parallax のテーマのフォーラムに
    質問し、そのあとにいろいろ気が付きました。

    本日聞きたいことは、そもそもここのカテゴリに合わないかもしれませんが
    1)二か所以上に同じ質問を投げる(マルチポスト)のは問題になりますか?
    2)これは仕様として諦める方が良いのか、引き続き配布元のフォーラムに質問した方が良いでしょうか。
    あるいは、当方英語もコーディングの用語も稚拙ゆえ他に良い方法がありましたらご教示頂ければ嬉しいです。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • gblsm

    (@gblsm)

    検証したところアイキャッチ画像(アイコン)は欠落しませんでした。
    4月15日にバージョンが上がったのでもう一度試してみてはいかがですか。

    トピック投稿者 かわねこ

    (@wpmid)

    gblsmさま、ご返答ありがとうございます。
    検証までしていただき深く感謝いたします。

    15日の更新もタイムリーにしてみましたが、残念ながら改善されませんでした。
    サイトのURLを示したいところですが、メンテナンスモードでアクセスできません。
    申し訳ありません。

    このテーマの当該アイコン生成は、円の中にパディング15px(右か左)にアイキャッチ画像を入れ、画面サイズに縮小 といった流れでしょうか?
    (タグでどう書けばよいかわからなくてすみません)

    それがスマホ等では、アイキャッチに指定した画像が縮小後に読み込まれようとて15pxが足りず画像が表示されない、という印象です。(勝手な想像です)
    結果、画面サイズによって
     「楕円」が表示(アイキャッチ画像無)
    といった状況です。

    画像の読み込みのタイミングを遅らせるようなプラグインのためかな、とプラグインを停止してみましたが今のところ変わりありません。
    もう少し探ってみます。

    ちなみに、デモサイトの当該アイコンはアイコンフォントをテーマファイルに保存し読み込んでいるような気がするのですが、そもそも私の指定の仕方(指定投稿のアイキャッチ画像が読み込まれるという解釈)はあっているのでしょうか。

    gblsm

    (@gblsm)

    PCでChromeでも再現しているのですよね。Chromeのデベロッパーツールを使ってスタイルの当たり方を確かめてはどうでしょう。

    検証したもので表示されたページのソースを見ると次のようになっていました。

    <div class="clearfix service-list odd wow fadeInLeft" data-wow-delay="0.25s">
      <div class="service-image">
        <img src="http://example.jp/wordpress/wp-content/uploads/example.png" alt="例">
      </div>
      <div class="service-detail">
        <h3>投稿タイトル</h3>
        <div class="service-content">投稿本文</div>
      </div>
    </div>

    楕円はクラス service-image にCSSでスタイルが当たっています。border-radius が 50% なので四角が楕円になりますね。
    style.css:1296

    .service-list .service-image{
    	border-radius:50%;
    	margin-top: 15px;
    	overflow: hidden;
    	border:1px solid;
    	border-color: inherit;
    	background:rgba(255,255,255,0.1);
    }

    画像の大きさは相対指定 16% になっています。
    responsive.css:10

    @media screen and (max-width: 1200px){
    	/* 中略 */
    	.service-list .service-image{
    		width: 16%;
    		height: auto;
    	}
    	/* 中略 */
    }

    追記:service-imageは投稿のアイキャッチ画像でした。

    천궁 메텔

    (@digitmaetel)

    横からごめんなさい。一言。

    かわねこさんへ

    他のプラグインは無効化している。
    以前のスタイルシートは残っていない。
    ブラウザのキャッシュは削除済み。
    以上の状態での、試みしていますか。

    トピック投稿者 かわねこ

    (@wpmid)

    お世話になります。
    gblsmさま、맹조さま、アドバイス心より感謝いたします。
    サーバや私の身辺のトラブルに見舞われすっかりお返事が大変遅れてしまい、
    申し訳ありませんでした。

    結論から申し上げますと解決いたしました。

    経緯としては、他所のマルチサイトに新規子サイトを設け、テーマAccessPress Parallaxを導入し、近い環境にしてデータをインポートしたところ、表示がほぼ上手く(というのは、少しアイコンが小さすぎであるが欠ける事はない)なされました。

    ———-ちなみに、不具合の最中は、맹조さまのおっしゃるようにプラグインは停止し、スタイルシートが効かないよう親テーマで行い、キャッシュもクリアしました——

    近い環境というのは、プラグイン周りでしたが、大きく違ったのは、今回うまく表示されていなかったサイトはかなり前のバージョンからWPをいれていた事と、いくつもテーマを着替えさせていた事でした。
    以前、テーマを変えてばかりいてうまく表示されなくなった場合、WPを最初から上書きしてしまう暴挙をして回避していました。
    今回も、思い切ってWPを頭から走らせたところ、レスポンシブでもアイコンが落ちなくなりました。

    本来ならそのソース等をお示ししなくてはいけないのですが、あれこれトラブル続きで
    アドバイスを検証しないまま事を進めてしまいました。
    よってソースを失念してしまい、詳細を書けなくなってしまいました事もお詫びいたします。
    お時間を取って頂き、本当にありがとうございました。

    トピック投稿者 かわねこ

    (@wpmid)

    不具合解消のヒントとして本日試してわかったことを追記します。

    私はプラグインJetpackをいつもジャンプスタートで導入します。
    設定をカスタムし始めたのは最近です。
    今回、同じようにJetpackを有効にしたところ、またアイコンが落ちてしまいましたので、
    関連しそうな機能を一つづつ停止していったところ、「Photon」の停止で表示が復活しました。

    解決済みのあとの追記となりますが、ご報告いたします。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「テーマ AccessPress Parallax のサービスセクションのアイキャッチ表示」には新たに返信することはできません。