Simplicityの特徴 › フォーラム › Simplicity2に関する話題何でも › 特定のカテゴリにチェックが入っている記事だけエントリーカードのサムネイルにマークをつけたい
- このトピックには9件の返信、1人の参加者があり、最後にdoにより7年、 10ヶ月前に更新されました。
-
投稿者投稿
-
-
2016年11月24日 10:08 PM #47884doゲスト
カテゴリーAにチェックが入っている記事の場合、エントリーカードの画像の左上に周りを透過した画像をつけたいです。
画像の左上の星マークです。
よろしくお願いいたします![管理者修正:画像の表示]
- このトピックは7年、 10ヶ月前にわいひらが編集しました。理由: 画像の表示
-
2016年11月24日 10:25 PM #47886Hidekichiゲスト
> カテゴリーAにチェックが入っている記事の場合
ここがどういう状態かを詳しく説明してください。どのようにしてチェックを入れて、入れたらどういうふうになっているかなど。
またリンクは某掲示板みたいにうるさい人はいないので、普通に直リンでlinkボタンを使って書いてください。何なら初めての方は必ずお読みくださいにあるようなサービスを利用しても良いかと思います。
-
2016年11月24日 11:45 PM #47892doゲスト
>またリンクは某掲示板みたいにうるさい人はいないので、普通に直リンでlinkボタンを使って書いてください。
わかりました。次回以降気を付けます!
例えば、レビュー記事でおすすめとそうでないものがあったとして、おすすめのものには普段のカテゴリーに加えて「おすすめ」というカテゴリーにチェックを入れて投稿しているんです。なので例えば良いスマホゲームだった場合には「スマホゲーム」というカテゴリーと、「おすすめ」いうカテゴリーの二つにチェックをいれて投稿している形です。
エントリーカードからカテゴリー内容は文字で見ることもできるのですが、良いものだけをパッとみてわかるようにおすすめにチェックが入っているものはエントリーカードの画像部分に印が出るような仕組みにしたいと考えています。
説明の至らない点があったら申し訳ないです。
宜しくお願いします! -
2016年11月25日 1:02 AM #47908Hidekichiゲスト
サンプル: 特定のカテゴリーがついているリストアイテムに星を入れる | codepen
こういうことでしょうか?
サンプルでは、「カスタマイザー設定」、「設定いろいろ」のカテゴリに星をつけてます。 -
2016年11月25日 10:23 AM #47912doゲスト
はい!その通りにやりたいです!
宜しくお願いいたします!!
-
2016年11月25日 1:36 PM #47914Hidekichiゲスト
サンプルの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: ....; //とる }
このような感じに書き直さないとダメかと思います。
-
2016年11月25日 2:13 PM #47916Hidekichiゲスト
念の為、jsは子テーマjavascript.jsに追記です。
-
2016年11月27日 12:51 PM #47977
-
2016年11月27日 1:14 PM #47978Hidekichiゲスト
> 試しにテストというカテゴリー記事をアップしてみました
この「テスト」がついているリストアイテムをfirefoxあるいはchromeで右クリックして、要素を調査(あるいは検証)を選択してデベロッパーツールを開き、該当リストの.entryクラスがある箇所に「favorite」が含まれているかどうかをまず確認してください。
favoriteが入っていて何も表示されない場合は、fontAwesomeの問題かもしれません。
favorite自体が入っていない場合は、デベロッパーツールのconsoleタグにエラーが出ていないかどうか、また入れられた「テスト」が文字化け等していないかなどを確認する必要があります。他の原因としてキャッシュもあるかもしれません。最低限firefox、chromeでプライベートウィンドウやシークレットウィンドウでキャッシュを受けない環境でまず確認してください。プラグインのキャッシュがあればそれも停止、サーバーのキャッシュ設定があればそれも停止、autoptimizeやヘッドクリーナー等のcssやjavascriptをまとめてしまうようなプラグインはもちろん停止で確認してください。
それでも原因がわからない場合はサイトアドレスを公開してもらうのが手っ取り早いです。しかし内部的な問題の場合は外からはわからないこともあります。
-
2016年11月27日 9:30 PM #47998doゲスト
ヒデキチさん、できました~~!!
何が原因なのかは特定できなかったのですが、プラグインをonoff切り替えたりヒデキチさんのアドバイスを一つ一つ確認しながら進めていたら、いつの間にかちゃんと実装できていました!ありがとうございます!!
いつも丁寧に教えて頂き感謝です。
-
-
投稿者投稿
- トピック「特定のカテゴリにチェックが入っている記事だけエントリーカードのサムネイルにマークをつけたい」には新しい返信をつけることはできません。