特定のカテゴリにチェックが入っている記事だけエントリーカードのサムネイルにマークをつけたい

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも 特定のカテゴリにチェックが入っている記事だけエントリーカードのサムネイルにマークをつけたい

  • このトピックには9件の返信、1人の参加者があり、最後にdoにより4年、 1ヶ月前に更新されました。
9件の返信スレッドを表示中
  • 投稿者
    投稿
    • #47884
      do
      ゲスト

      カテゴリーAにチェックが入っている記事の場合、エントリーカードの画像の左上に周りを透過した画像をつけたいです。

      http://fast-uploader.com/file/7035548283146/

      画像の左上の星マークです。
      よろしくお願いいたします!

      [管理者修正:画像の表示]

      • このトピックは4年、 1ヶ月前にわいひらわいひらが編集しました。理由: 画像の表示
    • #47886
      Hidekichi
      ゲスト

      > カテゴリーAにチェックが入っている記事の場合

      ここがどういう状態かを詳しく説明してください。どのようにしてチェックを入れて、入れたらどういうふうになっているかなど。

      またリンクは某掲示板みたいにうるさい人はいないので、普通に直リンでlinkボタンを使って書いてください。何なら初めての方は必ずお読みくださいにあるようなサービスを利用しても良いかと思います。

    • #47892
      do
      ゲスト

      >またリンクは某掲示板みたいにうるさい人はいないので、普通に直リンでlinkボタンを使って書いてください。

      わかりました。次回以降気を付けます!

      例えば、レビュー記事でおすすめとそうでないものがあったとして、おすすめのものには普段のカテゴリーに加えて「おすすめ」というカテゴリーにチェックを入れて投稿しているんです。なので例えば良いスマホゲームだった場合には「スマホゲーム」というカテゴリーと、「おすすめ」いうカテゴリーの二つにチェックをいれて投稿している形です。

      エントリーカードからカテゴリー内容は文字で見ることもできるのですが、良いものだけをパッとみてわかるようにおすすめにチェックが入っているものはエントリーカードの画像部分に印が出るような仕組みにしたいと考えています。
      説明の至らない点があったら申し訳ないです。
      宜しくお願いします!

    • #47908
      Hidekichi
      ゲスト

      サンプル: 特定のカテゴリーがついているリストアイテムに星を入れる | codepen

      こういうことでしょうか?
      サンプルでは、「カスタマイザー設定」、「設定いろいろ」のカテゴリに星をつけてます。

    • #47912
      do
      ゲスト

      はい!その通りにやりたいです!

      宜しくお願いいたします!!

    • #47914
      Hidekichi
      ゲスト

      サンプルのjs欄はまずまるごとコピペでイケると思います。
      コピペ後に、
      var checkCat = ["カスタマイザー設定","設定いろいろ"];

      var checkCat = ["おすすめ"];
      と変更してください。これで.post-meta .categoryに「おすすめ」があれば、その親を辿って一番近い.entryに「.favorite」と言うクラスを追加します。もしチェックしたいカテゴリがあれば、サンプルのようにして複数のワードを,区切りで入れます。

      次にcssですが、サンプルではscssで書いてあるのでcss欄の下向き三角からview compiledを押してcssに変換されたものを子テーマstyle.cssに貼り付けます。

      ここまでをまとめると、jQueryによってマッチしたカテゴリがそのリストアイテムにあった場合、

      <div class="entry favorite">
        <div class="entry-thumb">
          <img>
        </div>
      </div>

      こうなります。

      これらの処理により、.entry.favoriteの中にある.entry-thumbに対して何かしらのスタイルをすることができるようになるという仕組みです。
      サンプルでは、font-awesomeの星を表示しています。が、ここに何かしら独自の画像を入れたいということになると、

      .entry.favorite .entry-thumb::before {
        display: block; //場合によってはinline-block;
        width: 任意のサイズ;
        height: 任意のサイズ;
        background-image: url("画像のパス");
        background-repeat: no-repeat;
        background-position: center center; //任意の位置
        background-size: cover; //任意の指定
      
        position: absolute; //そのまま
        top: 0; //そのまま、あるいは微調整
        left: 0; //そのまま、あるいは微調整
        font-size: 2em; //とる
        font-family: "fontAwesome"; //とる
        content: ""; //このようにカラにする
        color: yellow; //とる
        text-shadow: ....; //とる
      }

      このような感じに書き直さないとダメかと思います。

    • #47916
      Hidekichi
      ゲスト

      念の為、jsは子テーマjavascript.jsに追記です。

    • #47977
      do
      ゲスト

      早速試してみました!view csscomplied css に切り替えたものをスタイルシートに、JSはjavascript.jsにまるまる張り付けて、var checkCat内を”テスト”にして、試しにテストというカテゴリー記事をアップしてみました。
      しかし、星マークがうまく出てきませんでした。
      プラグインのFont Awesome 4 MenusとFont Awesome Iconsをダウンロードして有効化しても変わりませんでした。
      申し訳ありませんがよろしくお願いします!

    • #47978
      Hidekichi
      ゲスト

      > 試しにテストというカテゴリー記事をアップしてみました

      この「テスト」がついているリストアイテムをfirefoxあるいはchromeで右クリックして、要素を調査(あるいは検証)を選択してデベロッパーツールを開き、該当リストの.entryクラスがある箇所に「favorite」が含まれているかどうかをまず確認してください。
      favoriteが入っていて何も表示されない場合は、fontAwesomeの問題かもしれません。
      favorite自体が入っていない場合は、デベロッパーツールのconsoleタグにエラーが出ていないかどうか、また入れられた「テスト」が文字化け等していないかなどを確認する必要があります。

      他の原因としてキャッシュもあるかもしれません。最低限firefox、chromeでプライベートウィンドウやシークレットウィンドウでキャッシュを受けない環境でまず確認してください。プラグインのキャッシュがあればそれも停止、サーバーのキャッシュ設定があればそれも停止、autoptimizeやヘッドクリーナー等のcssやjavascriptをまとめてしまうようなプラグインはもちろん停止で確認してください。

      それでも原因がわからない場合はサイトアドレスを公開してもらうのが手っ取り早いです。しかし内部的な問題の場合は外からはわからないこともあります。

    • #47998
      do
      ゲスト

      ヒデキチさん、できました~~!!
      何が原因なのかは特定できなかったのですが、プラグインをonoff切り替えたりヒデキチさんのアドバイスを一つ一つ確認しながら進めていたら、いつの間にかちゃんと実装できていました!

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

      いつも丁寧に教えて頂き感謝です。

9件の返信スレッドを表示中
  • トピック「特定のカテゴリにチェックが入っている記事だけエントリーカードのサムネイルにマークをつけたい」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)