vanillaice (Akira)

vanillaice (Akira)

Jingleテンプレート
PCアイコン TBアイコン SPアイコン

Jingleテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
スマートフォン版を非表示にしてご利用ください。
設定ページ

最終更新 2017.9.22

SSL化に伴うURL正規化

名称 Jingle
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大860px
サイド --- 300px
推奨カスタマイズ 背景画像変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考 valid-html5.png
パソコン タブレット スマートフォン
パソコン タブレット スマートフォン
2カラム 1 or 2カラム(デバイス幅依存) 1カラム
サイドメニュー --- 右 サイドメニュー --- 下 or 右(デバイス幅依存) サイドメニュー --- 下
過去の更新一覧
更新履歴 2017.1.25

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

更新履歴 2016.10.12

メンテナンス
・ 全体レイアウトを再調整しました
・ カテゴリなど一部ページをリスト形式に変更しました
・ 主要公式プラグインの整形
・ 関連記事サムネイルの整形
・ ベンダープレフィックスの整理
・その他微調整

ブログタイトル下のナビゲーションはリンクの増減を想定して製作しておりません(ごめんなさい)

更新履歴 2016.1.8

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

更新履歴 2015.11.20

Windows10 Internet Explorer11及びMicrosoft Edgeで 固定した背景画像がブレるバグに対処

2015.10.28 申請致しました IEで表示不備がありましたので修正しとります すみません(汗)
承認されました ありがとうございます ( ゚Д゚)ノ

じんぐるemo

ぽんぽんと連続してリリースしてしまいましたが
うかうかしてると冬になってしまいますもので (´・ω・`)

TOP PAGE DEMO
LIST PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ

お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)

・サイドバーの形状変更(スライド化など)
・トップページの表示タイプ変更
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更
位置変更はこちらを参考にどうぞ ↓
テンプレートのカラム位置変更

背景色変更について

今回は今までとちょっと背景の指定の仕方を変えております
雪の柄ごと画像を丸っと取り替えたい方は 一つ前の秋バージョンをベースにされると良いと思います
OnTheGround

雪の画像はそのままで背景色だけ変更する方法
Ctrl+Fキー検索で #bg_hack を探します
* 2016.10.12変更 body:before を探してください

-ms-linear-gradient(top, rgb(187,203,216), rgb(232,234,236));
-webkit-linear-gradient(rgb(187,203,216), rgb(232,234,236));
-moz-linear-gradient(rgb(187,203,216), rgb(232,234,236));
-o-linear-gradient(rgb(187,203,216), rgb(232,234,236));

デフォルトがグラデーションになっていますのと
ブラウザごとに記述方法が異なるもんですから ベンダープリフィックスというのが付いてややこしいものになっておりますが
グラデーションを採用するのならば デフォルト内容をサンプルとしますと
rgb(187,203,216)
これが上部の色指定 そして
rgb(232,234,236)
こちらが下部の色指定です
上から下にかけて切り替わるグラデーションになってます
色合いを変更されます際には 上下2色を全て差し替えてください
rgb値での10進数指定をしていますが #6桁数字 の16進数でも構いません

単色にされる場合には一旦上記内容全て削除されまして
(他の文字列を巻き込み削除しないよう注意)
指定したい色コードをこんな風に入れてください(濃紺 を16進数指定する例) ↓

#1a0945;

sample

背景色を変更されました際にはテキストの色なんかも変えてくださいね 読めなくなっちゃうので(笑)

その他 これまでのシリーズと比べ大きな変更は入っておりません

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


みなさんいつもありがとうございます (/・ω・)/

関連記事

Comments 16

There are no comments yet.
snow miy  
ランキングバーナーの位置が・・・

冬versionもとっても素敵ですね♪早速使わせていただいています。

そこでおかしな現症が。
各ランキングに登録していて、そのバーナーを記事の最後、拍手の前に設置しています。
FC2のブログの確認からや直接アクセスすると問題はないのですが、Facebookやランキングのサイトからアクセスすると、バーナーが一番最後にきてしまいます。

HTML編集で<%topentry_body>と<!--more_link-->の間に入れています。
これまでもこの場所に追記して問題なく表示されていました。入れる場所がいけないのでしょうか。

お手数ですが解決法を教えてください。
よろしくお願いします。

2015/11/02 (Mon) 09:51 | EDIT | REPLY |   
Akira  
To snow miyさん

ありがとうございます ( ゚Д゚)ノ

FBから辿ると位置が変わっている、ということでしょうか。
え?違う? ( ̄∀ ̄;)
ちょっとこの情報だけではなんとも... イメージができない(笑)
とりあえず、記述場所はそれで合ってます(<!--more_link-->の直前)
個人設定の拍手の位置なのですが、
「more link の後ろ」になっているかどうか一度ご確認ください。
これが「前」になってると位置が逆転します。

状況が掴めないのでお返事待ちにしておきますね。
申し訳ないですー!

2015/11/02 (Mon) 12:00 | EDIT | REPLY |   
snow miy  
確認が…

早速のお返事ありがとうございます。

「FBから辿ると」ということで間違いありません。
うまく説明できずごめんなさい。
同じく各ランキングサイトからでも同様なことになります。

拍手の位置ですが、FC2の「環境設定」の「ブログの設定」で行っているので、「more linkの後ろ」なのかの確認が…(;´д`)
すみません💦 ど素人で💦

ブログはこちらです。
http://miy100.blog.fc2.com/

ご面倒おかけしますが、ブログ内のランキングやFBから辿ってみてご確認いただけないでしょうか。
申し訳ございませんが、よろしくお願いします_(_^_)_

2015/11/03 (Tue) 13:02 | EDIT | REPLY |   
Akira  
To snow miyさん

あー。なるほど。わかりました。
えっとですね、やはり個人設定の方を修正して頂く必要がありそうです。
FBから辿ると「個別記事」へジャンプします。
で、現在Snow miyさんの「トップページ」では拍手を含めFB等のSNSボタン関連がランキングよりも「後」に。
個別記事では逆転して「前」になってます(ご確認ください)。

環境設定 > ブログの設定 > 拍手ボタンの設定
この一番下の項目に「拍手ボタンの表示位置」というのがありますので、ここを「追記リンクの後」に変更お願いします。

2015/11/03 (Tue) 13:22 | EDIT | REPLY |   
snow miy  
変更してみました

度々の質問で申し訳ございません(´;ω;`)

ご指示通り「追記リンクの後」にしようと設定を見たところ、「後」になっていました。
もう一度「後」のまま更新をしてみましたが変わりありませんでした…(当然かな💦)

急いではおりませんので、他になにが影響しているのかわかりましたら教えてください。
よろしくお願いします_(_^_)_

2015/11/04 (Wed) 08:21 | EDIT | REPLY |   
Akira  
To snow miyさん

ごめんなさいね。
私がFC2の仕様を勘違いしておりました。
そうかー ( ̄∀ ̄;)
FC2の拍手はJavascriptでFC2が後付けをするわけですが、追記リンクの「前」「後ろ」しか選べないですよね。
で、その位置の判定はバナーなどを無視します(当然っちゃー当然ですが)ので、こういう逆転現象が起こるようです。
ちゃんと調べなかった私のミスです。
お手間取らせてしまい申し訳ない (*_ _)
以下の方法をお試しください(JSで挿入します)

</body>

の直前に以下を追加

<script>
$(function() {
$('<div style="text-align:center; margin: 30px auto;">バナー関連ソースコード</div>').insertBefore('.fc2_footer');
});
</script>

これなら確実だと思います。
バナーの位置合わせ(水平)はセンターにしてあります。
寄せを変更する場合には

text-align: ここにleftright;

バナーの垂直方向の余白指定が

margin: 30px auto; ですので、
もっと余白を取りたければ 30 を大きくしてください。
一度お試し頂きまして、不備があるようでしたらお申し付けください、

2015/11/04 (Wed) 09:16 | EDIT | REPLY |   
きろろ  
息子さんのご入学おめでとうございます<(_ _)>

お祝いがすっかり遅くなって申し訳ありません<(_ _)>
改めて、ご入学おめでとうございます!(^^)!

Jingle、クリスマス用にDLさせていただきました。
それから、Faint。承認されていたんですね~
こちらもDLさせていただきました。
colorboxの導入は今回、私でもできました!(^^)!

で、質問なんですが……
こちらに書いてよろしいのか、判断にまよったのですが……
トップ記事に書かせていただきます。

Faintのサイドバーなんですが。
HOME,Index,任意のリンクしか表示されないんです。

任意のリンクはカテのことですよね?
タグとか、FC2のプラグイン(リンク)とかが表示されないのはなぜなんでしょうか(>_<)

お暇な時でかまいませんので、レクチャーをお願いいたします<(_ _)>

2015/11/05 (Thu) 01:13 | EDIT | REPLY |   
snow miy  
うまくいきません(´;ω;`)

丁寧な説明をしていただきありがとうございました。

早速追加してみました。
「バナー関連ソースコード」に各ランキングのコードを入れればいいのですよね。
試してみたのですが何も表示されませんでした…

何度も回答ありがとうございました。

今のままでも十分満足していますので、引き続き使用せさてもらいます(*^-^*)
春の桜バージョンから季節ごとに使用させてもらっています。
今後も繰り返し使用していくつもりです♪

お手数おかけしました。
ありがとうございました。

2015/11/05 (Thu) 09:34 | EDIT | REPLY |   
Akira  
To snow miyさん

お時間いただいておりますー!

今バナーの方のコードをチェックしましたが、こちらの構文の方にちょっと問題が ^^;
アンカー(リンク設定)が重複していたり、入れてはいけないところに</ br>が入っていたり。
で、私の方で整形し直しました。
スクショ ↓

--- 削除しました ---

これで問題がなければ、JSを含めたコード内容は以下の通りです(</body>直前に貼り付け)

--- 削除しました ---

バナーの方を修正していますので、コード内容は要保存です(他の方のテンプレートでも使えます)
リンクのアドレスだけ抜いてありますので、確認されまして正しく入力してください(3箇所)
お試しくださいませ ( ゚Д゚)ノ

(ご本人のスクショ確認が終わりましたら、スクショ・コード共に削除しますのでお知らせくださいね。)

2015/11/05 (Thu) 10:33 | EDIT | REPLY |   
Akira  
To きろろさん

あらー。お返事がテレコになっちゃった!
きろろさんごめんね ( ̄∀ ̄;)

えと。左にあるのは「ヘッダー」です。
サイドバーは右側に収納されております。
右上ハンバーガーボタンクリックでプラグイン全部出てきますー。
ちょっとわかりにくかったね。ごめんなさいね ^^;

長男への祝辞ありがとうです (`・ω・́)ゝ
あんな発音でよく受かったなー と(笑)

2015/11/05 (Thu) 10:36 | EDIT | REPLY |   
snow miy  
(;'∀')

早々の回答ありがとうございます!
しかも隅々まで確認していただいて…💦

やっぱり私が間違っていたのですね(;'∀')
全くの素人なのでネットで調べてなんとかやってみたといった具合で。
お恥ずかしい限りです。

送っていただいたもので問題ないのでコピーして貼り付けてみました。
でも、ダメでした。とほほ。

</body>は一番最後ですよね。
そもそも入れる場所を間違っていたりしてΣ(゚д゚lll)ガーン

コードはしっかりコピー取らせてもらいました!
削除してOKです!

念のため各ランキングのアドレスをお送りします。

【村】
"http://art.blogmura.com/glassart/ranking.html"

【ランキング】
"http://blog.with2.net/link.php?1638860:1771"

【FC2】
"http://blogranking.fc2.com/in.php?id=893947"


これで最終にしますね。
ご迷惑おかけします(o_ _)o))

2015/11/05 (Thu) 13:18 | EDIT | REPLY |   
Akira  
To snow miyさん

今動作確認しました。
表示もされ、リンクも問題なくクリックできました。
もしかして「プレビュー」画面のみでの確認ではないでしょうか。
「更新」をしてご確認くださいね。
コード内容もう一度載せます。
今後はアドレスも入れてありますが、URL超過で送信できませんので●を入れてあります。
貼り付けの際に忘れずに削除お願いします。

<script>
$(function() {
$('<div style="text-align:center; margin: 30px auto;"><div><span style="color:#ffccff">★-★-★-</span> <span style="color:#666666">下のボタンをクリックしてね♪</span><span style="color:#ffccff">-★-★-★</span></div><div><span style="color:#FFFF00">★-★-★-</span><span style="color:#666666"><u>ランキングの応援お願いします</u></span> <span style="color:#FFFF00">-★-★-★</span></div><div><a href="ht●tp://art.blogmura.com/glassart/ranking.html" target="_blank"><img src="http://art.blogmura.com/glassart/img/glassart88_31.gif" width="88" height="31" alt="にほんブログ村 美術ブログ ガラス工芸へ" style="padding: 5px 0;"></a></div><div><a href="ht●tp://blog.with2.net/link.php?1638860:1771" title="ガラス工芸・グラスアート ブログランキングへ"><img src="http://image.with2.net/img/banner/c/banner_1/br_c_1771_1.gif" width="110" height="31" style="padding: 5px 0;"></a></div><div><a href="ht●tp://blogranking.fc2.com/in.php?id=893947" target="_blank"><img src="http://blogranking.fc2.com/ranking_banner/a_01.gif" style="padding: 5px 0;"></a></div><div style="text-align: right; padding-top: 5px;">みなさんの応援が励みになります<span style="color:#FF0000">♥</span></div></div>').insertBefore('.fc2_footer');
});
</script>

記述場所スクショ ↓

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/html/%202015-11-05%2015.11.00_zpswxv0bovj.jpg~original

2015/11/05 (Thu) 15:16 | EDIT | REPLY |   
snow miy  
できました♪\(^o^)/

ありがとうございます!
思い通りのものとなりました(*^▽^*)
完璧です‼

大変お手数おかけしました(^▽^;)

来年も引き続き季節ごとに使用させてもらいます♥

本当にありがとうございました!
感謝・感謝です(人''▽`)☆

2015/11/05 (Thu) 17:08 | EDIT | REPLY |   
きろろ  
見落としてました(>_<)

Faint、右側にメニューバーがありました(>_<)
すみません~~~、見落としておりました。

早速のお返事ありがとうございました。

ちなみにFaintもJingle、MaBelleも
今回、Akiraさんのcolorbox.cssをlinkの最後に追加して
/bodyの直前に私の使っているスクリプトをコピペしてみました。

不思議なんですよ……
3つのテンプレート、すべて正常に動作するんです。
target_blankを使わないで、class="cpModal" title="No Title"のコマンドで動くんですよ。
ツベも同様です。なんで GirlOnWireが動作しなかったのか不思議です。

一応お知らせしておきますね。

私の早とちりで、お騒がせしました<(_ _)>

2015/11/06 (Fri) 00:13 | EDIT | REPLY |   
Akira  
To snow miyさん

お返事遅くなりましたー!
できましたか。安心しました。
こちらこそ勉強させて頂きました。
ありがとうございますe-454

2015/11/07 (Sat) 09:26 | EDIT | REPLY |   
Akira  
To きろろさん

遅くなりました (*_ _)
たぶんエフェクトの関係じゃないかと。
target_blank指定でエフェクト不適用、とかなんとかを私がやっているもので ^^;
毎度お手数おかけします。
いつもありがとうですー (/・ω・)/

2015/11/07 (Sat) 09:29 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
該当テンプレートの専用記事にお願いします。無関係な記事でのコメントはお控えください。
テンプレートカテゴリ