サムネイルにタイトルを重ねるスタイルを他のウィジェットにも適用したい場合

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など サムネイルにタイトルを重ねるスタイルを他のウィジェットにも適用したい場合

このトピックには11件の返信が含まれ、1人の参加者がいます。3 週間、 6 日前 ヌル さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #48238

    ヌル

    2時間ほど格闘して1㎜の進歩も見られなかったため
    投稿させていただきます。(正確には1度投稿したはずが出来ていなかった。。。)

    現在以下のページのサイドバーでSimple GA Rankingというプラグインを使用して
    記事ランキングを表示させておりますが、このウィジェットにも
    サムネイルにタイトルを重ねたスタイルを適用したいと思っております。

    セレクタをあちこちに追加してみたり、Simplicityのスタイルシートから
    拡張部分のコードを持ってきて追加してみたりといろいろと試しましたが
    基礎も理解できていない素人は駄目ですねやっぱり(^^;

    お知恵を拝借させていただければと思います。

    これは独り言なのですが・・・・フォーラムへの投稿を送信した際、
    タイムアウトとなっている場合に画面を下方にスライドするとエラーメッセージ
    が表示されているのがわかりますが、そのまま気付かずにページ移動すると
    ・・・って事が数回ありました(;´・ω・)

    送信前のプレビュー画面や、エラーメッセージの上部表示などがあれば
    少しいいかなぁなんて…

  • #48244

    Hidekichi

    そのランキングのhtmlがどういう構造かにもよりますが、例えば

    <li>
      <div class="thumb"><img></div>
      <div class="text">何かしらのテキスト</div>
    </li>

    このような構造なら、liが親要素になりますので、liにposition:relativeを入れます。
    .thumb、.textはposition:absoluteを入れます。

    こうすると、親要素は通常通り表示され、その中の子要素が絶対配置になります。絶対配置とは、relativeの要素の中の座標で表示できるようになるということです。

    サンプル: imgをそのまま何とか使う | jsFiddle

    で、imgタグはちょっと使いにくいので、jQueryで背景画像にすることもできます。

    サンプル: imgを背景にする | jsFiddle

    僕的にはこっちのをオススメしますが(いろいろやりやすいので)、手を入れればimgでも色々できます。
    とにかく元のhtmlがどのような構造であるかが重要です。それがわかればどのようにもできると思います。

  • #48245

    Hidekichi

    返信したんですが、表示されないのでわいひらさんの救援待ちです。

  • #48246

    ヌル

    Hidekichiさん

    了解致しました(⌒-⌒; )

    いつもありがとうございます!

  • #48254

    ヌル

    Hidekichiさん

    ご返信ありがとうございます。

    現在出力されている構造はこういう状態です。

     <aside id="simple_ga_rankig-2" class="widget widget_simple_ga_ranking">
    <h3 class="widget_title sidebar_widget_title">週間人気記事ランキング</h3>
     <ol class="sga-ranking">
      <li class="sga-ranking-list sga-ranking-list-1">
       <div class='ranking-img'>
        <a href="URL" title="○○○"><img src="○○○" alt="○○○" title="○○○"></a>
       </div>
        <a href="○○○"class="sga-simplicity-merge" title="○○○">○○○</a>
      </li>
    //以下入れ子構造続く

    出力されるタイトルにClassが振られていなかったので、プラグイン側で
    タイトルにClassを出力する様に編集はしたのですが。

  • #48256

    Hidekichi

    サンプル: jQueryの方で指定のhtmlにあわせてみた | jsFiddle

    ul を .sga-ranking
    .thumb を .ranking-img
    .text を .sga-simplicity-merge

    と読み替えれば前のサンプルのまんまイケると思います。今回のは全部適用しました。
    リンクがあるのでそこだけcssに追加してます。

    jQuery使わないバージョンの方はwidthやらを指定すればいい感じにできると思います。
    サイドバーに入っている場合widthは300px(336px)だろうと思うので計算もしやすいです。
    これが#maimの中に入っている場合はメディアクエリやらも必要になりますが。

    元々のSimplicityのcssの兼ね合いもあると思うので、必要のないプロパティは打ち消すなどの対応も別途必要かと思いますが、olで書かれているのでさほど手を入れなくてもイケるのではなかろうかと思います。

  • #48263

    Hidekichi

    jQueryで中身を変更する際、画像が縮小されたりするのがチラっと見えたりするので、人手間加えると軽減できます。

  • #48264

    Hidekichi

    投稿してもた。
    で、人手間とか怖いよ、なんぞそれ。

    サンプル: ひと手間加えてちらつき軽減 | jsFiddle

  • #49058

    ヌル

    Hidekichiさん

    レスが大変遅くなりました。

    やっと時間が出来ましたので、頂いたサンプルコードを用いて
    早速調整を実施しました。

    いい感じにはなったのですが、

    #sidebar li {
    margin-bottom: 10px;
    }

    を調整すればサムネイル間のマージンを変更出来るのですが、
    カテゴリリストまでマージンが変わってしまいます。

    書き方が悪いのか、どこにマージンを設定しても効かないのは
    この#sidebar liの方が上書きされていると言うことでしょうか?

  • #49060

    ヌル

    少し思ったのですが、Simplicityに標準で設定されている【最近の投稿】に
    適用されるスタイルをそのまま適用できればコードが増えないかな・・・と
    思ったりもしたのですがどうでしょう。

  • #49066

    Hidekichi
    #sidebar .xxx li {
      margin-bottom: 10px;
    }

    のように、.xxx部分に適用したい範囲のセレクタを入れればよいだけです。.xxx部分だけにmargin-bottomが適用されます。

    サンプル: サンプルでは.sga-ranking liにmargin-bottom追加 | jsFiddle

  • #49071

    ヌル

    Hidekichiさん

    ありがとうございます!!

    概ね期待通りの仕上がりになりました。

    モバイル表示の際に画像のサイズが微妙に大きくて左右にずれる挙動も、
    mobile.cssに画像サイズの調整値を入れて調整したらうまく纏まりました。

    本当にありがとうございます<(_ _)>

トピック「サムネイルにタイトルを重ねるスタイルを他のウィジェットにも適用したい場合」への新規返信追加は締め切られています。

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