vanillaice (Akira)

vanillaice (Akira)




新着サムネイル 画像反映テストです
関連記事
Posted by

Comments 9

There are no comments yet.
Akira  
ぱぴぷぺぽさんをこちらへ誘導

こちらで仕切り直しを (o'ω')ノ

ちょっとまた一旦頭をクリアにして整理しましょう。
ここをこうしてこうして… という流れ作業ではやはり逆に効率が悪いと思うんです。
なので少し難解かもしれませんが、仕組みなどの説明も致しまして理解を促そうと思う(笑)

折を見てのコメントで細切れになりますがご容赦くださいね (*_ _)

● まず確認事項

①DLしたソースにファイルの追加をしていないかどうか
②希望は「拡大された画像を拡大状態を保持しながらスライド」させたい
③これまでは記事投稿時に画像に直接なんらかの記述を行っていた
(rel="○○")

まずここまでで一旦投稿します

2015/09/01 (Tue) 13:20 | EDIT | REPLY |   
Akira  

一番良い方法

① 現在のソース内容からCSSファイルアドレスを以前使っていたファイルのものに置き換える

<link rel="stylesheet" href="http://blog-imgs-71.fc2.com/v/a/n/vanillaice000/colorboxvanilla.css">


② 以下のJSファイルを以前のものに置き換え

<script src="http://blog-imgs-71.fc2.com/v/a/n/vanillaice000/jquerycolorbox.js"></script>


③トリガー書き換え(これは不要の場合もあります。その場合は以下内容の「削除」のみ)

<script>
$(function(){
$('.inner-contents img').addClass("gazou");
$('.gazou').closest('a').addClass("expand");
});
$(function(){
$("a.expand").colorbox();
});
</script>

2015/09/01 (Tue) 13:48 | EDIT | REPLY |   
Akira  

● トリガーについて

トリガー というのはhtml専門用語ではなく、英単語の意味として使っています。
「引き金」「きっかけ」のことです。
何をしたらどんな効果が出るようにするのか、その発動条件だと思ってください。

私のソース内にある Colorbox(以下 Cboxと称す)の発動条件は以下の通り

・画像の<a>タグに クラス名 expand が付いている
・画像の<a>タグに target="_blank" が指定されている

これが必須条件です。
で、以前お使いになられていたLightbox (以下 Lboxと称す)の条件等については私ではわかりません。
<a>タグの rel属性を用いてグループ化していた、ぐらいのことしかうかがい知れません。
何故ならトリガーになる「クラス名」などは基本的に使う人物が任意で決定するからです。

上のコメントに書いた「ファイル差し替え」については、ファイル自体をぱぴぷぺぽさんが所有している、というのを大前提にして言っています。
これが仮にテンプレ製作者さんのサーバーにあるファイルの場合にはおすすめしません。
直リンクになってしまいます。
私のテンプレートを利用しているのに、Lboxの動作だけ前テンプレ作者さんのサーバーファイルにアクセスして動作させる、という大変失礼な行為になってしまいます。

----------

過去画像にtarget="_blank"が指定されていない件ですが、これはつけておいた方が今後のためにも良いような気がします。
理由

・FC2ツールバーのデフォルトで指定されているから
・プラグイン発動条件になっていたり、他スクリプトとの干渉を防ぎやすくなるから

ブランク指定は昔から議論対象になっていますが、ソースの正確さ・美しさ等を度外視して「利便性」を考えたときには「指定した方が良い」と個人的に思います。

過去画像へのtarget追加はJavascriptでできますが、Lboxとの干渉があるかどうかはわかりません。

2015/09/01 (Tue) 13:59 | EDIT | REPLY |   
Akira  

ファイルの差し替えができるのであれば、今までやっていた要領で画像をUPしていけば良いだけです。
まずそこをぱぴぷぺぽさんの方で方針決めてください。

Lboxのトリガーは
rel="lightbox"
だと思いますので、今まで通りそれで使えるはず。
その場合には上に記したソース内容を修正 あるいは 削除しないと干渉してしまいます。

一度これでお試しになられたらどうかしら。
そしたらあっさり元通りってことも(笑)

2015/09/01 (Tue) 14:05 | EDIT | REPLY |   
Akira  

今回 target="_blank" は「ページ遷移エフェクト」の除外対象としてのトリガーにもなっています。
これがついていない<a>にはページ遷移エフェクトが適用されてしまいます。
ですから上記方法でLboxに差し戻しをされるのであれば、過去画像にtarget="_blank"を追加するか、Lboxのトリガーが確実にわかっているのであれば(たぶんrel="lightbox")それを除外要素として指定するかです。

target指定はLboxそのものと干渉しそうなので、以下の方法が良いかもしれない。

検索

<script>
$(function(){
$('#wrapper a').addClass("animsition-link");
$('a[target=_blank]').removeClass("animsition-link");
$('a[href^=#]').removeClass("animsition-link");
$('.side_bar a').removeClass("animsition-link");
$('.pagenation a').addClass("animsition-link");
$('.read-more-open-a').removeClass("animsition-link");
$('.read-more-close-a').removeClass("animsition-link");
$('.nonmover').removeClass("animsition-link");
});
</script>

赤字追加で以下の通り

<script>
$(function(){
$('#wrapper a').addClass("animsition-link");
$('a[target=_blank]').removeClass("animsition-link");
$('a[href^=#]').removeClass("animsition-link");
$('.side_bar a').removeClass("animsition-link");
$('.pagenation a').addClass("animsition-link");
$('.read-more-open-a').removeClass("animsition-link");
$('.read-more-close-a').removeClass("animsition-link");
$('.nonmover').removeClass("animsition-link");
$('a[rel=lightbox]').removeClass("animsition-link");
});
</script>


あるいはページ遷移エフェクトそのものを削除するか。
エフェクトを削除するとページのローディングが速くなります。
(Valparaiso記事の最後の方にやり方を記しています)

2015/09/01 (Tue) 14:15 | EDIT | REPLY |   
ぱぴぷぺぽ  
よくわかりませんが、とりあえず解決しました。

再三に及ぶ質問に答えていただき本当にありがとうございました。

とりあえず解決しました。
①ランキングバナーはちゃんとリンクしています
②フリ写4コマ劇場など連続表示が必要な物はちゃんと作動しています
③それ以外の記事内での複数の画像に関しては連続表示必要でないのでそのまま
④アップした画像からリンクは貼れないが諦める

これって最初からできていた内容なのか頭の中がごっちゃになってよくわかりません(笑)

もうこれでこの件はおしまいっ!

本当にありがとうございました。

スライダーに入っている文字の色変更はどこでするのでしょうか?(ちょっとええかげんにしろ)

素敵な新作が公開されることを楽しみにしています。
(もう、このような質問は2度としませんのでご安心を)

2015/09/01 (Tue) 21:38 | EDIT | REPLY |   
Akira  
Re ぱぴぷぺぽさん

とりあえずは解決でしょうかしら。

画像ハイパーリンクのことですかね。
target="_blank" が指定してある、あるいは
class="nonmover"
を<a>タグに記述することでできるようになりますよ。
これは記事作成時の作業で、テンプレ内容の編集ではありませんですー。

ご質問はどうぞ気兼ねなくなさってくださいませe-454
ホントにお疲れさまでした (´・ω・`)_旦

2015/09/01 (Tue) 22:30 | EDIT | REPLY |   
Akira  
To ぱぴぷぺぽさん

ぎゃー!スライダーの文字色の件忘れてるじゃないかー!
ごめんなさい。今書いてないこと気づいた ( ̄∀ ̄;)
すぐやりますー!

------------

CSSソース末尾に以下を追加。

.item > span {
color: カラーコード;
}

これで変更できます。
遅くなりました。申し訳ないです (´・ω・`)

2015/09/02 (Wed) 14:13 | EDIT | REPLY |   
Ann Weaver  
http://priscilarodrigues.com.br/url/v

I came across your 画像テスト - 未分類(個人的テスト等) website and wanted to let you know that we have decided to open our POWERFUL and PRIVATE website traffic system to the public for a limited time! You can sign up for our targeted traffic network with a free trial as we make this offer available again. If you need targeted traffic that is interested in your subject matter or products start your free trial today: http://stpicks.com/27 Unsubscribe here: http://priscilarodrigues.com.br/url/11

2017/08/11 (Fri) 09:12 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
2017.8.8 本日より10日ほど留守にしますのでお返事遅れます。すみません