Decoy修正のお知らせ

このコメントは管理人のみ閲覧できます

Akira

To Bliss grayscale解除の件 内緒さん

すげー！かっこいい！
カスタマイズ頑張られたんですね。
PNGレイヤーの処理も完璧じゃないですかー。
かっこいい ・ω・
そして最近yahooからお引越し組さんの多いこと(笑)

本題です。
imgに直接grayscaleを指定されたんですね。
こういう時はimgではなくaの方に指定します。
以下修正作業内容。

● 現在の指定の削除処理

img へのgrayscale指定全て 及び
transitionも削除
(要するに新たに設けた .gallery-cell img への項目全て削除して元あったものだけ残す。)

● .gallery-cell img:hover の項目削除

--------

追加項目

● aタグへ改めてgrayscale指定

.gallery-cell a {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}

transition指定は不要です。

● 追加

.gallery-cell a:hover {
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);
filter: grayscale(0);
}

こちらが解除用。

削除2項目、追加2項目です。
これでできるはずですのでお試しください。

あと、キャプション(薄い黒のオーバーレイ)ですが、説明文が割りと長くていらっしゃいますのでスマホから見ると文字がオーバーフロー(黒範囲からはみ出す)しています。
Ctrl+Fキー検索

.img-caption

こちらのheight: 50%;を
height: 80%;
あるいは 90%ぐらいに大きくされると良いかな と。
または
パソコンでの見た目には問題ありませんのでそのままにしておいて、ブレイクポイントの

/***----- media less than 768 include iPad mini
--------------------------------------------------***/

この括りの

.sp-hide {
display: none;
}

の直下に

.img-caption {
height: 80%;
}

これでもOKです。
目視確認しながら調整してみてくださいませ。

Akiraさんこんばんわ。改めましてはじめまして。
FATDRGONと申します。
勝手にテンプレお借りしてぶしつけな質問だったのに
親切丁寧なご回答感謝の至りです！
ご回答通りにCSSを書き直したところグレースケールの件解決しました！

この度Yahoo!ブログからFC2ブログにお引越ししてきたのですが
あんなことやこんなことやりたいなというアイディアがAkiraさんのテンプレートに凝縮されていて感動しております。

Yahooからの移転は当方稚拙なゲームプレイブログなもので特に意味はないのですが
FC2でHTMLとかCSSとか未知の世界に踏み込んだ気がして大変良い勉強になりました。

Akiraさんの明るいイメージのテンプレートをお借りしたのに、
結構暗い感じに仕上がってしまって申し訳ないなぁと思いつつ、
これからもカスタマイズを精進したいと思います。

素敵なテンプレート作成を応援しております！
今後ともよろしくお願いいたします！

ご丁寧にありがとうございます:-D
カスタマイズは苦労もありますが楽しいと思いますよ。
yahooは何もできないですもんね(笑)

はい。こちらこそよろしくお願いします('-'*)