simplicityの新着記事ウィジェットに、「サムネイルなし」を追加してもらうことはできますか?

Simplicityの特徴 フォーラム 要望・機能追加など simplicityの新着記事ウィジェットに、「サムネイルなし」を追加してもらうことはできますか?

このトピックには11件の返信が含まれ、2人の参加者がいます。3 ヶ月、 3 週間前わいひら わいひら さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #49274 返信

    simpfan

    こんにちは。いつもお世話になってます。

    今回は機能要望なのですが、Simplicityの「新着記事」ウィジェットに、「サムネイルなし」を追加してもらうことはできますか?
    これはページの読み込みが少しでも早くなるかなぁと思うのと、もともとサムネイル画像を用意していないテキスト主体のサイトにも活かせるかと思うからです。
    かといってJetpackの「最近の投稿」ウィジェットには、Simplicityの「新着記事」ウィジェットのような

    「トップページには表示しない」

    という機能がないからです。

    ご検討よろしくお願いします。

  • #49277 返信

    Hidekichi

    サムネイルはcssで消せますし、Jetpackの「最近の投稿」も.homeから続くウィジェットのセレクタの指定でトップに表示させないということはできますので、多くの人が望まない限りいつも通り実装は難しいのではないかと思います。

  • #49283 返信
    わいひら
    わいひら
    キーマスター

    今のところは、そこまで需要がない(需要がない割には機能追加が大変)と思われるのと、CSSで比較的簡単に消すことができるので、機能追加することは考えてないです。

  • #49285 返信

    simpfan

    Hidekichiさん、わいひらさん、ありがとうございます。

    なるほど、CSSで書くのが簡単なんですね。
    ……とはいえ、僕にはまったくわからないのですが、それはどのように書けばいいのでしょうか?

  • #49287 返信

    みき

    サムネイルを消すcss

    .widget_new_entries .new-entry-thumb { display:none; }
  • #49288 返信

    みき

    どちらを使われているのか分からなかったので
    もう一つ書いておきます

    .widget_new_popular .popular-entry-thumb { display:none; }

    上が新着人気記事ウィジェットです
    ちなみに先ほどのは新着記事ウィジェット
    新着記事のほうにはトップページで表示するみたいな選択がありました
    (ということは新着人気記事の方か 笑)

    新着人気記事のほうで
    トップページは表示させないようにするcss

    .home .widget_new_popular { display:none; }

    こんな感じだと思います

    反映されない場合はシークレットモードで確認してみてください

  • #49289 返信

    みき

    ただ

    ページの読み込みが少しでも早くなるかなぁと思う…

    は分からないですね
    cssでdisplay:none;(非表示)にしているだけなので
    裏では読み込んでいるはずです

    ほかにも良い方法はあると思うので
    他の方にお任せします
    (自分ではこれが限界です)

  • #49295 返信

    simpfan

    みきさん、ありがとうございます。

    こちらの当初の意図は、Simplicityの「新着記事」を利用したうえで

    「トップページでの表示」

    にチェックを入れないまま、#49287のコードを適用することで実現することを確認しました。

    が、いずれにしてもサムネイルを読み込んでいて、表示速度にも影響しないということなのでしたら、せっかくなので今までどおりサムネイルも表示しておこうと思います。

    いろいろと勉強になりました。
    ありがとうございました。

  • #49296 返信

    Hidekichi

    > サムネイルを読み込んでいて
    > 表示速度にも影響しない

    それはちょっと違います。
    サムネイルを読み込むはずの<img src="画像パス">を出力するためのphpの処理、及びデータベースの問い合わせはあるかも知れませんが、無い方がもちろん高速ではあるもののここらはたいていマイクロ秒の世界です。
    — ここまで サーバー内の処理 —

    — ここからブラウザの処理 —
    cssでdisplay:noneするということは、上記内容をブラウザが処理する際、どこにある画像かを画像パスをたどり(サーバーへのhttpリクエスト)、それを見つけて表示する(httpレスポンス及びレンダリング)をキャンセルするということです。

    html内の情報としてimgへのパスやらその他は書いてあるでしょうが、それはテキストデータであり数百、数千、数万と増えても1MB以下の世界かと思います。が、画層が平均50KBとして20個あればそれだけで1MBになるでしょう?

    なので画像や動画、外部のサーバーからのデータ取得などは時間がかかるため、そこらをどのように軽減するかがページの表示速度にダイレクトに影響する部分です。

    たとえばyoutubeの場合、動画プレイヤーをそのまま貼れば、それは不要なデータのオンパレードです。おそらくどんな言語でも読めるように色々なデータが用意されているのと、プレーヤー自体もこれらを含めてとても重いわけですが、そこに動画データを読み込むためのリクエストとレスポンスが加わります。
    なので、youobeはプレーヤーを直接埋め込まず、動画のサムネイルを取得しておきクリックしたらプレーヤーを読み込むようにすることで高速化が望めます。

    しかし最も速いのは、テキストでaタグを使い、該当の動画へのリンクを埋めておくことです。これ以上速度は無いかと思いますが、そのリンクが本当にその動画へのリンク化はリンクをマウスオーバーした時に表示されるブラウザのステータスを見ないとわかりませんし、いちいちhtmlのソースを確認するのも面倒です。

    そのためブログカードでogp情報を読み取ったりして表示したりするなどの手法ができたわけです。

    wordpressで言えばたいていの人は僕みたいにキャッシュを切って利用していませんから、画像があろうがなかろうがほぼ同じ程度の速度で表示されるはずです。

    キャッシュというのは本来phpでリクエストを受けてから処理する部分を同じアドレスへのアクセスなら既に作られたデータを返すことで高速にデータのやり取りをする機能です。これはサーバーだけでなくブラウザにも備わっているので、両方が上手く機能すればかなり高速に動作するはずですが、先に書いたように僕がキャッシュを切っている理由の一つでもありますがブラウザのキャッシュはHDDへのアクセスが増えるだけで実際大きな効果が受けられるかはとても悩ましい問題なのです。

    うまく機能すればそれ以上のことはありませんが、上手く機能しない場合は意味がありません。firefoxならば余計にキッシュは切ったほうが良いと言われています。

    兎にも角にも表示速度の向上を望むなら、データの軽減とhttpリクエストを減らすということが1番です。cssを縮小化したり、画像の最適化、無駄なプラグインを読み込まないとか、アドセンスをやめるとか。

    だいたいここらは何かと何かを比較した時に表示速度を犠牲にしても表示するべきかを考えるべき部分です。
    これとこれとを有効にしたいから、こっちをやめようとか。

    ただ多くの場合、これ以前に無駄があるために遅い場合がほとんどです。
    Simplicityの場合、シンプルと言いながらリクエストに答えるために結構猥雑なhtmlの構造になっていたり、もう少し簡素に作れるはずの部分がありながら機能を入れるためにやむなくそうしてある部分が多々あります。

    #related-entries .related-entry-titleとか。
    #related-entriesの中にあるのであるからtitleだけで良いはずです。cssは使い回しにこそ極意があるため、他の部分と共通なスタイルを.titleに持たせてスタイルの共有をするのが良いのですが、サムネイル大だの、そこに重ねるなどの機能があるために(関連記事に限ったことではないですが)、使い分けをせざるを得ないという事なわけです。

    通常は上記で言えば、
    #related-entries .image.titleなどとしてクラスを組み合わせることで応用も聞くわけですが、わかりやすくするために.related-entry-titleなどとして、「どこの何」と命名されていると思われます。

    とまぁ横道にそれましたが、高速化を望むのであれば自分が利用するに当たってこれはいらないと思う部分は、ばっさり切るのが案外高速化に繋がるかも知れません。また高速なサーバーやサービスに乗り換えるのが手っ取り早いです。

  • #49299 返信

    みき

    cssでdisplay:noneするということは、上記内容をブラウザが処理する際、どこにある画像かを画像パスをたどり(サーバーへのhttpリクエスト)、それを見つけて表示する(httpレスポンス及びレンダリング)をキャンセルするということです。

    キャンセルをするのですね
    勉強になりました
    これも誤解があるかもしれませんが個人的にはcssはデザインを変更するためのものだと思っていたので
    あくまでdisplay:noneは非表示にするだけだと思っていました

    高速化を望むのであれば自分が利用するに当たってこれはいらないと思う部分は、ばっさり切るのが案外高速化に繋がるかも知れません。また高速なサーバーやサービスに乗り換えるのが手っ取り早いです。

    画像をどうするかよりは明らかに速くなりますからね

    明らかにサイズが大きいサムネイルであればカットしたほうがよさそうですね
    小さければあった方が良さそう…

    詳しい説明ありがとうございました!!

  • #49300 返信

    Hidekichi

    キャンセルするというのには語弊があるかも知れません。MDNによると、

    様々なディスプレイボックスタイプに加えて、値 none を使用すると、要素を非表示にできます。none は、すべての子孫要素も非表示にします。文書は、要素が文書木に存在しないかのようにレンダリングされます。

    display | MDN

    というふうにあります。
    「要素が文書木に存在しないかのようにレンダリングされます。」この部分で文書ツリーに内容にレンダリングされるというのは僕は「無視される」ととっています。ここからその部分は(文書ツリーの中に記述はあるがcssにてdisplay:noneがあるために)レンダリングしない、つまりスキップあるいはキャンセルして他のレンダリングに進むと意図していると思ってます。

  • #49306 返信
    わいひら
    わいひら
    キーマスター

    #related-entries .image.titleなどとしてクラスを組み合わせることで応用も聞くわけですが、わかりやすくするために.related-entry-titleなどとして、「どこの何」と命名されていると思われます。

    分かりやすくするのと、一意のクラス名を入れておきたかったので、そのようになっているのですが、確かにclass=”related-entry-title title”とかにしておいてもいいかもしれませんね。
    時間ができたら、ちょこちょこ加えて行こうと思います。

返信先: simplicityの新着記事ウィジェットに、「サムネイルなし」を追加してもらうことはできますか?
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)