vanillaice (Akira)

vanillaice (Akira)

Chillingテンプレート


名称 Chilling
カラム数 1 と 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー
記事幅 可変 最大960px (内寸 880px)
サイドバー幅 300px 固定
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = RSS設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
Windows/ Mac
Chrome Firefox Safari Opera Edge IE9以上 IE8以下
△ 一部表示不備あり △ 一部表示不備あり 全くもってダメ
推奨カスタム 背景変更

valid



更新履歴 2017.1.25


・ SNSシェアリンクのUTF-8エンコード

参考記事
SNSシェアリンクのエンコード


--------- 以下本文



更新履歴 2016.10.15


メンテナンス

・ FC2新変数導入に於ける関連JSの削除(html内容の切り替え) --- 動作が若干軽快になりました
・ ページ遷移エフェクトをJSからCSSに切り替え
・ No image画像変更を容易に
・ 関連記事サムネイルの整形
・ ベンダープレフィックスの整理
・ その他微調整

No image画像の変更が簡単になりました
縦横比不問(最適サイズは長辺800px程度)
画像加工不要(画像上の白マスクとNo imageのテキストは自動で乗ります)
Ctrl+F(Windows)/ Command+F(Mac) キー検索

//blog-imgs-80.fc2.com/v/a/n/vanillaice000/background-709674_1280-compressed.jpg

上記がデフォルト画像アドレスでhtmlソース内に1箇所あります
お好きな画像のURLに差し替えてください


更新履歴 2016.9.9


● リストマーカーの位置を調整しました

参考記事
list-item横の隙間について


● 最優先フォントを游ゴシック体に変更しました
● 主要公式プラグインの整形を行いました


更新履歴 2016.1.9


フッター構造を変更しました
タイトルタグを微調整しました(SEO対策)


更新履歴 2015.9.21


iOS9 リリースに伴い スマホ・タブレットではColorbox起動させないよう修正しました
(Colorbox適用版は記事の最後に掲載しています)


更新履歴 2015.9.9


・ 公式化に伴うOGP削除

テンプレ付随のSNSボタンをお使いになる方は 個人ブログ環境でのOGP設定をお願いします


2015.9.2 申請致しました → 某日 承認されました ありがとうございます



ちりんぐemo
(デコは本文と一切関係ありません いや一応)
あっさり塩味テンプレート (o'ω')ノ


TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ




仕様
・ トップページ最初の記事(一番上に表示される記事) だけ大き目配置 文章も多め
・ カスタマイズ非推奨(すみません)
・ 記事幅だだっ広


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・サイドバーの形状変更
・トップページの表示タイプ変更(要約表示から全文表示へ変更 など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更



カスタマイズ非推奨 としてありますが 腕に自信ありの方はもちろんして頂いて構いません
文字を大きくしただけでも問題が生じるでしょうから
カスタマイズする前に一度お問い合わせ頂いた方が良いかもしれない (´・ω・`)
個別記事の方は融通効きます トップページだけ注意


固定ナビゲーションについて


FC2検索バー問題emo

FC2検索バーも「固定」 こちらのテンプレナビも「固定」 ということで
当然ですが位置的に干渉し合います
で 固定ナビの方の表示階層を検索バーの一つ上に設定していますので
検索バーがナビ下(表示下位)に身をひそめる形です
どうせ見えないなら是非非表示に!!!
とはいえ お使いになりたい方もいらっしゃるでしょうから 以下の文字列をCtrl+Fキー検索されまして訳注に従ってください

/* 注)FC2検索バーを表示する方は数字を0から27pxに変更してください */

注)

でCtrl+Fキー検索されますと カスタマイズ時のナビゲーションが出てまいりますのでご確認ください


レスポンシブですので スマホでも共通デザインでお使いになられます方は
個人設定で「スマホ版非表示」にしてお使いください
それから当該テンプレートも class="shadow-attachment" 追加で画像にドロップシャドウが付くようになってます
この二点 下記の記事をご参照くださいませ

参考記事
OnTheGround

Microsoftブラウザの表示不備について


毎度のことですね Microsoft (´・ω・`)
もう別段驚きもしないわ ←

画像マウスホバー時のエフェクト不備(プロパティ未対応)
Microsoft Edgeの方はいずれ対応すると思います
Internet Explorerは開発が終わってますのでずっとこのままですのでご承知おきくださいね (´・ω・`)



ヘッダー画像の変更


Ctrl+Fキー検索

#banner {
  width: 100%;
  height: auto;
  background: url(//blog-imgs-80.fc2.com/v/a/n/vanillaice000/background-709674_1280-compressed.jpg) right center no-repeat; /* 注)バナー画像はここです */


赤字をお好きな画像アドレスに差し替えてください
サイズは不問ですが 画像の位置合わせについては下記リンク先記事を参照のこと

DaisyGreen



ご質問 不備・不具合のご報告はお気軽にどうぞ
その際には
・ ご自身のブログアドレスの明記
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点を必ずお守りください
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします


毎度ありがとうございますぅーーemo
(ぬこ 大好き)


Colorbox適用版 htmlファイル×1 (2016.1.9 現在最新版)
この日付以前にDLされました方はお手数ですが公式から再DLの上html差し替えをお願いします
** 配布終了致しました **
関連記事

Comments 25

There are no comments yet.
-  
初めまして。

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

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

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

2015/09/14 (Mon) 19:09 | EDIT | REPLY |   
Akira  
To Chillingブラウザバックの件 匿名さん

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

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

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

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

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

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

2015/09/14 (Mon) 20:36 | EDIT | REPLY |   
-  
No title

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

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

2015/09/14 (Mon) 21:13 | EDIT | REPLY |   
Akira  
To ブラウザバックの件② 匿名さん

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

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

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

2015/09/14 (Mon) 21:17 | EDIT | REPLY |   
きろろ  
たびたび申し訳ございません(/_;)

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のトップを要約表示にすることは可能でしょうか?
記事が長いので、要約で表示することができたらありがたいのですが。
ご検討くださいませ<(_ _)>

2015/10/18 (Sun) 02:16 | EDIT | REPLY |   
Akira  
To きろろさん

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

Colorboxについて

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

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

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

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

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

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

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

----------

要約表示の件

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

こちらも返事待ち(笑)

2015/10/18 (Sun) 15:51 | EDIT | REPLY |   
きろろ  
お騒がせしております。申し訳ございません(/_;)

>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のページの
要約でけっこうです。
めんどうなようであれば、忘れてください(>_<)
ご無理をなさらずに……

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

2015/10/19 (Mon) 00:29 | EDIT | REPLY |   
Akira  
To きろろさん

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

2015/10/19 (Mon) 15:06 | EDIT | REPLY |   
Akira  
To きろろさん

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

2015/10/19 (Mon) 15:49 | EDIT | REPLY |   
Akira  
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 になってるよ(笑)

2015/10/19 (Mon) 16:06 | EDIT | REPLY |   
Akira  
To きろろさん

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

-----------

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

2015/10/19 (Mon) 16:09 | EDIT | REPLY |   
きろろ  
お手数をおかけしております<(_ _)>

>動画開いたら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>

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

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

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

2015/10/20 (Tue) 01:24 | EDIT | REPLY |   
きろろ  
すみません~~~追伸です

<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>

としてあります・・・(。_。;)゜:。アセ

2015/10/20 (Tue) 01:26 | EDIT | REPLY |   
Akira  
To きろろさん

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

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

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

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

2015/10/20 (Tue) 01:33 | EDIT | REPLY |   
Akira  
To きろろさん

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

2015/10/20 (Tue) 02:00 | EDIT | REPLY |   
きろろ  
結果報告です。

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

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

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

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

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

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

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

2015/10/21 (Wed) 00:19 | EDIT | REPLY |   
Akira  
To きろろさん

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

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

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

2015/10/21 (Wed) 17:34 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2016/07/22 (Fri) 20:26 | EDIT | REPLY |   
Akira  
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;

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

2016/07/22 (Fri) 20:54 | EDIT | REPLY |   
hifumi  
トップページタイトルを全文表示したい件

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

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

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

2016/07/23 (Sat) 05:32 | EDIT | REPLY |   
Akira  
To hifumiさん

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

2016/07/23 (Sat) 14:21 | EDIT | REPLY |   
mika  

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

2016/10/20 (Thu) 10:44 | EDIT | REPLY |   
Akira  
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
のいずれか正しい値に修正をお願いします。

---------

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

2016/10/20 (Thu) 13:39 | EDIT | REPLY |   
mika  
To Akiraさん

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

2016/10/21 (Fri) 10:34 | EDIT | REPLY |   
Akira  
To mikaさん

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

2016/10/22 (Sat) 16:30 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い