Chilling - FC2ブログテンプレート「配布終了 2019年2月6日」

初めまして。

素晴らしいテンプレートですね! さっそくお借りさせてもらっています。<(_ _)>
一つ不具合なのかな？ ご質問をさせて頂きます。

このテンプレートを使用し、Read more 続きを読んだ後、ブラウザバック 前に戻ると真っ白のままになってしまいます。

IE11とGoogle Chromeで試してみましたが、Chrome時々正常に戻ったりしていました。
初心者ながらもすいません。

To Chillingブラウザバックの件 匿名さん

こんばんは。ありがとうございます

こちらはパソコンからのご閲覧でお間違いないですよね。
IE11って書いてあるからそうだと思いますが、一応確認(笑)

私の環境(Windows10 IE11, Google Chromeその他/ Mac Safari, Google Chromeその他)で同じ症状を確認することができませんでした。

iOS(iPhone OS)の8についてはブラウザバック時のホワイトフリーズバグがあるのですが、スクリプトで回避しています。
で、スクリプトの問題であるならば「時々上手くいく」ことはブラウザバックに関しては無いんですよね　(´・ω・｀)
「なる」か「ならない」かいずれかはっきりしています(笑)

一度キャッシュのクリアをされまして再度ご確認頂けませんでしょうか。
クリアされます際、不測の事態に備えまして、各サービスのアカウントやパスワードの確認も併せてお願いします。
(サイトによってはログアウト状態になることがあります)

お手数おかけします。よろしくお願いします　(*＿ ＿)

No title

お返事ありがとうございます。
キャッシュをクリアして、確認してみましたがChromeの方は問題なくブラウザバックしました。ありがとうございます。

IE11の方は駄目でしたのでおそらく、自分の環境に問題があるのかと思います。
お手数をお掛けして申し訳ありませんでした。<(_ _)>

To ブラウザバックの件② 匿名さん

いえいえ。とんでもないです。
ちょっと私の方でも調べてみましたが、IE11のブラウザバックは度々問題になっているようです。

「戻るボタンを押しても戻れない」
「戻るボタンを押すと [情報が古い云々]と表示される」
「戻るボタンを押すと真っ白に」　←ヒット(笑)

いずれも「キャッシュ」に絡んだものですが、
ソースに原因が全くないとは言い切れませんので、私の方でももう少し調べてみますね。

たびたび申し訳ございません(/_;)

Chillingの複製、トリガーを書き替えたものを削除してしまいました･ﾟ･(つД｀)･ﾟ･ ｳｪ―ﾝ

ひとりでやっとこさ、出来たのに……

現状をお伝えします！

ツベは正常に動作しております。

画像がポップアップしているのに、別ウィンドウで開かれてしまいます。

きっとトリガーをどこか書き間違えているんだと……
でも、思い出せません･ﾟ･(つД｀)･ﾟ･ ｳｪ―ﾝ

それから、こちから申し訳ないのですが
GirlOnWireのテンプレート、ツベが急に見られなくなりました。

こちらは画像は正常にポップアップされています。
ツベが昨日から「This content failed to load.」と表示されます。

記事には
<a href="http://www.youtube.com/embed/3V7EugoweM4?rell=0" target="_blank" class="youtube" title="動画"><img src="http://blog-imgs-〇〇〇/20151010011707463.jpg" alt="Coldplay" border="0" width="320" height="180" /></a>
と、記述していたのですが……謎です(/_;)

なんか、ひとつ成功するとひとつ失敗をする。
ほんとうにごめんなさい。
お暇な時でよいので、レクチャーをお願いいたします<(_ _)>

追伸

我が儘を言って申し訳ないのですが
GirlOnWireのトップを要約表示にすることは可能でしょうか？
記事が長いので、要約で表示することができたらありがたいのですが。
ご検討くださいませ<(_ _)>

To きろろさん

いえいえ。大丈夫です。そこはお気になさらず(笑)
で、ちょっとまとめますね。

Colorboxについて

・Chillingテンプレのツベは正常
・画像だと別タブでフツーに開いてしまう(ポップアップが別タブで開く？ってことかしら)

・GirlOnWireのツベが急に開かなくなった
・こちらの画像は正常

ChillingとGirlOnWireの症状がテレコ(反対)ってことでしょうか
記述内容はどちらも同じ？なのかな？

①きろろさんが現在どのようにJSをhook upしているかがわかりませんので、
コードを教えてもらえますでしょうか。

* hook up = Javascriptの接続・実行コード関連づけ

②CSSファイルのリンクは入っているでしょうか(忘れていないかどうか)

この件はとりあえずお返事待ちで。

----------

要約表示の件

GirlOnWireのページの下の方に、本文なしのファイルを掲載しております。
見た目的にはそちらと同じような感じで、Read more の上に要約が入ってれば良いのかしら。

こちらも返事待ち(笑)

お騒がせしております。申し訳ございません(/_;)

＞Chillingテンプレのツベは正常
・画像だと別タブでフツーに開いてしまう(ポップアップが別タブで開く？ってことかしら)＜
そうです(/_;)

＞・GirlOnWireのツベが急に開かなくなった
・こちらの画像は正常 ＜
そうなんです(/_;)

chillingは自分でトリガーを書き直して、以前使えていたのですが
間違えて複製を削除してしまったんです。
で、何をどういじくったらよいのやら頭が真っ白(ё_ё)
って、どう書き直しても、ツベは普通なのに、画像がポップアップの途中で別ウインドウに行ってしまいます。

GirlOnWireは、Akiraさんのレクチャーどおりにhtmlを書き直して
正常に動いていたんですが、ツベが突然「This content failed to load.」と表示されてしまい、Akiraさんにお手数を何度もかけるのも気が引けて、
AkiraさんのcolorboxをDLして、htmlをそのまま使用しました。

でも、やはり画像は正常動作するのですが
ツベが表示されません。ポップアップはされるのですが……

あれぇ……
私、何かしでかしたのかしら(ё_ё)

＞ hook up = Javascriptの接続・実行コード関連づけ ＜
これに関しては、現在特別私が書き替えてるところはありません。

Chillingの複製は削除してしまい、もとのテンプレートを複製して、
そこにLinkのなかにcolorboxのcssを仕込んで……

body、直前に前日に記述したいつものように私が使っているスクリプトを
仕込んだのですが……

要約表示の件ですが、
GirlOnWireのページを見てきました。
あの要約は本文なしなので、画像が要約に表示されていないのでしょうか？

Akiraさんの要約は、アイキャッチ風になっていますよね？
アイキャッチのように表示されるのであれば、GirlOnWireのページの
要約でけっこうです。
めんどうなようであれば、忘れてください(>_<)
ご無理をなさらずに……

ふたつのテンプレートがテレコになっているのが、なんとも不可思議です(ё_ё)

To きろろさん

きろろさんのコード、ちょっと私の方で整理してみますね。
少しお待ちください。
今日中になんとか。頑張る(笑)

To きろろさん

ちょっと今作業中なんだけども、確認です。
先日教えて頂いた、記事に記載したツベの埋め込みコードなんだけども、
動画開いたらWelcome to the jungleチェロ版でした。
でも画像のalt見るとColdplayって書いてあるんですよね。
これは合ってるのかしら(笑)
Coldplayの動画と間違えたってこと？　(´・ω・｀)
え？どゆこと？(笑)
それかここ重要じゃない？
ちょっと不明　（￣∀￣；）

To きろろさん

Chilling

まず手順として、きろろさんが使うのは
「通常版」です。
「Colorbox適用版」ではなく。

通常版にColorboxのCSSファイルを<link>で追加します。
私のファイルを使うのならばファイル名は
http://blog-imgs-82.fc2.com/v/a/n/vanillaice000/colorboxmin_v.css
です。

次に
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
このjqueryのファイルを探します。
これから実行コードを書くわけですが、上のファイルと</body>の間のどこかに書きます。
jqueryのファイルよりも「前」にコードを書いても動作しません。
ですから</body>の直前に書くのが確実です。
Chillingの場合には
<script src="http://blog-imgs-82.fc2.com/v/a/n/vanillaice000/fade500tmbcompress.js"></script>
の直下、ということになります。

実行コードの内容は以前と同じ、ということですよね。

<script>
$(function(){
$.fn.colorbox.settings.bgOpacity = "0.5";
$(".cpModal").colorbox();
$("a[rel='fade']").colorbox({transition:"fade"});
$("a[rel='slide']").colorbox({slideshow:true});
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$('a[rel^=lightbox]').colorbox();
});
</script>

(一部外してあります)
・<a>タグにtarget="_blank"をつける(relへの変換はしない = target〜を消してrel〜ということはやらない)
・一番最後の行はLightboxからColorboxへ移行した人向けの内容なので、現在は使うことがないはず。
また、これは入れておかないと、過去に rel="lightbox" と書いて起動させていたものが無効になってしまいます。

で、failed to load の原因なんですけどもね。
動画のアドレスの末尾のrelが rell になってるよ(笑)

To きろろさん

コード内容の意味をわかっており、トリガーになるクラス名を間違っていないと仮定すると、
やっぱり記事作成時のアドレスだとか、半角スペースが全角になっているだとか、記号が全角になっているだとか。
そちらを疑った方が良いと思います　(´・ω・｀)
一度記述内容をチェックしてみると良いねー　(´・ω・｀)
なにせ半角ひとつ、文字列ひとつ間違えただけで起動しなくなりますもので。

-----------

GirlOnWireの要約の件、少しお時間くださいね。

お手数をおかけしております<(_ _)>

＞動画開いたらWelcome to the jungleチェロ版でした。
でも画像のalt見るとColdplayって書いてあるんですよね。
これは合ってるのかしら(笑)
Coldplayの動画と間違えたってこと？　(´・ω・｀) ＜

ぎゃっ！
チェロです……タイトル「Coldplay」になってましたか？
コピペして使い回していたので、変なことになってしまい申し訳ありません(ё_ё)

現状報告をいたします。

まず、いつものように
http://blog-imgs-82.fc2.com/v/a/n/vanillaice000/colorboxmin_v.css を使用させていただいております。

次に、ctr+Fで検索して
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> を探し出しました。

次に、実行コードをテンプレートにコピペいたしました。

GirlOnWireは
< /body>の直前に、


Chillingは
<script src="http://blog-imgs-82.fc2.com/v/a/n/vanillaice000/fade500tmbcompress.js"></script>
真下に実行コードをコピペしました。

結果……
GirlOnWireは画像もツベもポップアップしません。
Chillingは画像がダメで、ツベがポップアップしています。

記事に書いた画像は

<a href="元画像.jpg" target="_blank" class="expand" title="かぼちゃ">"><img src="サムネイル画像.jpg" alt="lgf01a201409271100.jpg" border="0" width="250" height="167" /></a>

<a href="http://www.youtube.com/embed/DNyKDI9pn0Q?rell=0" target="_blank" class="youtube" title="タイタニック"><img src="動画サムネイル画像.jpg" alt="タイタニック" border="0" width="320" height="180" /></a>

やはり、トリガーのせいではないでしょうか？
一応、どちらのテンプレートも新しくＤＬいたしました。

きゃっ！
リンク先が多すぎるとコメントできないんですね。
urlを日本語に置き換えてみました。
おわかりになれるでしょうか？

何度もお手数をおかけしまして
申し訳ございません(/_;)

すみません～～～追伸です

<a href="元画像.jpg" target="_blank" class="expand" title="かぼちゃ">"><img src="サムネイル画像.jpg" alt="lgf01a201409271100.jpg" border="0" width="250" height="167" /></a>

の、かぼちゃ">">

ここはちゃんと

<a href="元画像.jpg" target="_blank" class="expand" title="画像"><img src="サムネイル画像.jpg" alt="lgf01a201409271100.jpg" border="0" width="250" height="167" /></a>

としてあります・・・（。＿。；）゜：。ｱｾ

To きろろさん

ちょっと今製作中でコメント主のお名前が出ないです。
わかりにくいかもでごめんなさいね。
---------

きろろさんの画像トリガーは cpModal ですので、expand では起動しません(笑)

かぼちゃの方
→ class="cpModal" に変更

ツベの方 アドレスの末尾
→ rell=0 を rel=0 に変更

To きろろさん

あとGirlOnWireの要約表示の件なんですけれど。
サムネイルが必要ということですと、大幅にhtml, CSSを書き直す必要が出てきてしまいます。
なので今回はごめんなさいですー　(*_ _)

結果報告です。

Akiraさんのレクチャーどおりにした結果、

Chillingは、画像、ツベ両方ともポップアップいたしました。
ありがとうございました<(_ _)>

問題はGirlOnWireでした。
GirlOnWireは今度はツベはポップアップされるのですが、
画像がダメでした。ポップアップする振りすらしてくれません。

もう、これ以上お手数をおかけするのも心苦しいので
Colorbox適用版を使用しています。
過去記事がおかしなことになっていますけどｗ
気にしない～方向で。

Botanicalなど、Akiraさんの過去のテンプレートは
普通に動作しているんですけどねえ……

GirlOnWireの要約の件、承知いたしました。
無理なことをお願いしてすみませんでした。

それでは新作を期待しております。
寒暖差がある時期ですから、お体に気をつけてくださいね!(^^)!

To きろろさん

GirlOnWireダメでしたか　(´・ω・｀)
たぶんトリガーと記事内記述内容の整合性だと思うんだけど。
時間見てColorbox説明記事の方に追記しておきますね。
(整合性の詳細)

要約記事の件はごめんなさいね。
サムネイル入れるとブレイクポイント(デバイス管理)が結構あれでそれなもので　^^;

はい。きろろさんもご自愛くださいませー！

管理人のみ閲覧できます

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

To Chilling記事タイトル省略の件 内緒さん

ありがとうございます (･ω･)ゞ

Ctrl+Fキー検索

.element-title

いくつかヒットしますが一番最初のものが対象です。
この項目の

white-space: nowrap;
-webkit-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;

上記を全て削除します。
これで全部表示されるようになりますが、あまりにタイトルが長い場合はデザインが「崩れる」とは言わないまでも、ちょっと不格好になることも ^^;
場合によっては下の日付が外に押し出されて表示されないこともあります(トップページ)。
その点をご了承頂きまして、修正をお願いします。

トップページタイトルを全文表示したい件

Akira様、素早いお返事ありがとうございます！

コメント、シークレットになっちゃってましたね(笑)
全然内緒じゃないのに;

早速やってみます♪
素敵なテンプレートなので、本当に嬉しいです^ ^

To hifumiさん

そうでしたか(笑)
はい。わかりにくい点がありましたらその旨お伝えくださいませ

はじめまして！
テンプレート使用させていただいております。
記事のサムネイルが表示されない状態が続いております。
よくある質問に記載されている事項などは確認済みですが治りませんでした(T_T)
自身でカスタマイズしたので、どこか消してしまったか…？と思いましたが見当たらず…
お力を貸していただければ幸いです。
よろしくお願いいたします。

To mikaさん

ありがとうございます (●'0'●)/

> 記事サムネイルが表示されない件

Ctrl+F(Windows)/ Command+F(Mac) キー検索

imgLiquidFill

を目印にして頂きますと

<div class="imgLiquidFill" style="background: url(省略) right right /cover no-repeat;"></div>

赤色の部分のrightですが、ここは画像の垂直(上下)位置の指定で、rightという値は存在しません。
top
center
bottom
のいずれか正しい値に修正をお願いします。

---------

これで解決するとは思いますが、ちょっと私の方にお葬式ができてしまいまして。
明後日まで自宅に戻れませんのでお返事が遅くなります。
ごめんなさいね。

To Akiraさん

迅速にご対応いただき、ありがとうございます。
指示の通り修正したところ、改善されました！
お忙しいところ、本当にありがとうございました。
テンプレート、とっても愛着が湧いています。
今後も楽しみにしております(*^_^*)

To mikaさん

直ったようで良かったですー。
こちらこそありがとうございます。
お疲れ様でした

はじめまして。こちらのテンプレートを愛用させて頂いております。
一つ画像について教えて頂きたいことがあります。
記事内の画像に写真のような白枠を付けたいのですが
スタイルシートに挿入する仕方がわかりません。
お忙しい中申し訳ございませんが、
ご相談に乗って頂ければ嬉しいです。
宜しくお願いいたします。

To Tetsukoさん

ありがとうございます (o'ω')ﾉ

> 記事内の画像に写真のような白枠を付けたい〜

スタイルシートの挿入の仕方、ということはCSSデザインのソースは既にお持ちで、どこに書いたら良いのかがわからないということでしょうか。
基本的にはCSSソース(テンプレ管理画面下段「スタイルシート」)の末尾で良いですよ。
それともデザインの仕方・CSSソース自体が欲しいということなんでしょうか。
その場合は私ではTetsukoさんの具体的なイメージはわかりませんので以下の記事をご参照ください。

https://vanillaice000.blog.fc2.com/blog-entry-554.html

To Akiraさん

ご返信ありがとうございます。
言葉足らずでごめんなさい。

記事読ませていただきました。
イメージはOpenテンプレートのような
写真風の白枠です。
全ての記事に適用するように
スタイルシートに入れたいです。
色々ソースを探したのですが
私の知識では反映されませんでした。
（色や枠の厚さの変え方はなんとなくわかりました）
申し訳ないのですが、CSSソースをお願いしたいです。

To Tetsukoさん

> 全ての記事に適用するように〜

参照して頂いたページは「独自クラス」なので画像全てに自動的に装飾をつけることはできません。
原則として個人装飾ソース作成のお手伝いは致しません。が、今回は関連記事があるということで一部応じます。

.inner-contents img:not(.emoji):not(.fc2_footer img) {
border: 10px solid white !important;
outline: 1px solid rgb(221,221,221);
}

上記内容をCSSソース末尾に記載してください。

以下注意事項です。
① IEでは全バージョンを通じてoutlineプロパティ未対応です。
② エディターから表示させるモバイル絵文字とSNSシェアボタン(ブログ個人設定での掲載のみ)は適用除外にしていますが、それ以外はいかなる画像であっても枠がつきます(記事範囲だけです。サイドメニューなどは含みません)

よろしくお願いします。

>原則として個人装飾ソース作成のお手伝いは致しません～

無理を言ってしまい申し訳ありませんでした。

スタイルシートにそのまま末尾に貼り付けましたが、反映されませんでした。

/***------------------------------------------
personal settings
------------------------------------------***/

/* shadow for image */
.shadow-attachment {
box-shadow: 6px 6px 6px rgba(0,0,0,.2); /* 注)記事内画像に自動ドロップシャドウ 不要な方は削除 */
}

.emoji {
vertical-align: middle;
}

.inner-contents img:not(.emoji):not(.fc2_footer img) {
　border: 10px solid white !important;
　outline: 1px solid rgb(221,221,221);
}

ここでよろしかったでしょうか？
何度もすみません。

To Tetsukoさん

大変失礼しました。
.inner-contents
ではなく
#inner-contents
です。クラス名でなくアイディーに変更してください。
お手数おかけします。

昨日はご対応していただき、ありがとうございました。

#に変更しましたが、反映されませんでした･･･。

To Tetsukoさん

ではこうしてみてください ↓

#inner-contents img:not(.emoji) {
border: 10px solid white !important;
outline: 1px solid rgb(221,221,221);
}

.fc2_footer img {
border: 0 !important;
outline: none !important;
}

CSS装飾というのは本来は要素に直接当てるものではありません。
今回の場合

「記事範囲内にあるimg全てに枠の装飾をつける」
↓
「絵文字のimgには枠をつけない」
↓
「拍手ボタンについた枠を外す」

こういう段階を踏んでます。
要素への直接指定というのは余分なもの・意図しないものにまで付けてしまいます。
ですから本来は
「適用したいimgにだけクラス名を付け、そのクラス名を持つものにだけ装飾をつける」
というのが一番望ましい形です。
今後TetsukoさんさんがSNSボタンを追加したり、ランキングバナーを導入したり、あるいは関連記事をサムネイルつきで表示させたりした場合、これらを追加で「除外」する必要が生じます。
除外するのではなく、適用したいものにだけ指定するというのが一番です。
なんでも「自動で」ではなく、ご自身が記事を書かれる際に「htmlを書く」という意識は必要です。
htmlを書くと言ってもクラス名を書くだけですが。
新投稿画面をお使いのようなので難しいのかなぁ、とも思いますけれど。
うーん。新投稿画面の方はCSSでなくJSの方が良いかもしれないなぁ (´・ω・｀)
取り敢えず今回はこちらの方法で。

過去記事の画像はもうどうしようもありませんので今回はこれで仕方がないと思いますが、今後の運営の仕方によってはさらに修正が必要になる、ということは知っておいてください。
よろしくお願いします。

反映しました！ありがとうございます。
仰るとおり、今後運営していく上で
もう少し知識を付けないと難しいと思いました。
今回はAkiraさんから教えていただいたこのやり方でしばらく様子を見てみます。

お手数お掛けして申し訳ありませんでした。
今後の新しいテンプレートも楽しみにしております。
本当にありがとうございました！！

To Tetsukoさん

いえー。何度もお手数おかけしました。
こちらこそありがとうございます。
お疲れ様でした