Jingle - FC2ブログテンプレート

Jingleテンプレートのレスポンシブウェブデザイン・機能を最大限活かすため、 「スマートフォン版の表示設定」を「無効にする」ことをおすすめします。

名称
Jingle
じんぐる
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
全文
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Google fonts
Mountains of Christmas
Lighthouse
ライセンス
Required 必須事項
  • Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
  • Modification 改変
  • Personal Use 個人利用
  • Commercial Use 商用利用
Forbidden 禁止事項
  • Distribution 再配布
  • Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 ver.20 2024.2.29
  • リスト型ページネーションの複製を可能に
更新履歴 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.14
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.8.7
  • Twitterアプリ名変更及びロゴ変更に対応
更新履歴 2023.6.13
  • IE用対応終了
  • jQueryを3.7.0にアップグレード
  • カスタムプロパティ導入
  • Font Awesome停止
  • ユーザビリティの最適化
  • idセレクタによるスタイリングをclassセレクタに統一
  • RSSリンク削除
  • コメント削除アラート追加
  • YouTube縦横比固定用クラス追加
  • カテゴリ階層表示改正
  • 記事編集リンクをアイコン型に変更
  • その他UI調整

左右カラムの入れ替えや横幅の調整、色彩の変更等、簡単にできるようになりました。想定されるほとんどのCSSカスタマイズはスタイルシートの 注)主要カスタマイズ(variables) でできるかと思います。

また、Font Awesomeの廃止を行っていますので、再DLされる際はその点に注意してください。

カテゴリ階層表示とChromiumグリッチについては以下の記事をご覧ください。

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログには 親子カテゴリ化 という機能があります。通常「親子」という場合には フォルダ階層(ディレクトリ) が関わっており、親のフォルダの下層に子のフォルダ、という形ですが、FC2では偽装しているだけで親も子も階層のレベルは同じですよ、というお話。パンくずリスト にも関わってきますので興味のある方はご覧ください。...

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

表現が難しいのだけれど、ページを表示したときに、「CSSが適用されている最中なのか?」と思わせるような挙動と言えば伝わるでしょうか。なんかガチャガチャとレイアウトが動いてから正常表示になるという感じの挙動というか。本記事はその原因と対策についてです。...

更新履歴 2022.1.6
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
  • jQueryを3.6.0にアップデート
  • ブログタイトルの太字調整

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。

【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。

【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。

【ブログタイトル太字調整】
/* 注)ブログタイトルフォント関連 */ を目印に検索、このルールセットの visibility: hidden; の直下に font-weight: bold; を追加。インデントにタブや全角スペースを利用しないよう注意。

更新履歴 2020.5.30
  • ページ送りのJSを修正
更新履歴 2020.4.6
  • コメント返信のJS変更
  • jQueryを3.4.1にアップデート
更新履歴 2020.3.26
  • 個別記事ページ送りの複製を可能にしました

複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する

更新履歴 2019.12.17
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.11.11
  • コメント主のリンク表示用JS及びデザインの変更
更新履歴 2019.8.3
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)
【重要】テンプレートの変更点2つについてお知らせ

【重要】テンプレートの変更点2つについてお知らせ

既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...

①について

</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下の内容を 追加

<!--permanent_area-->
<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>
<!--/permanent_area-->

続きまして <div class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め <div class="icon-position"> のすぐ上にある </div> まで(この文字列も含む)を以下の内容に 変更

<ul class="comment-info">
  <li><%comment_year>/<%comment_month>/<%comment_day> (<%comment_youbi>) <%comment_hour>:<%comment_minute>
  <!--comment_edit--><li><a href="<%comment_edit_link>" title="<%template_edit_comment>">EDIT</a><!--/comment_edit-->
  <li><!--comment_author--><!-- <!--/comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん">REPLY</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん">REPLY</a><!--/comment_author-->
  <li><a href="#comment-top"><i class="fas fa-arrow-up"></i></a>
  <li><a href="#comment_form"><i class="fas fa-arrow-down"></i></a>
</ul>

続きましてスタイルシート末尾に以下の内容を 追加

.comment-info li {
  display: inline-block;
}

.comment-info li:not(:last-of-type)::after {
  content: "|";
  margin: 0 .4em;
}
②について

#community" で検索するとhtml内に1箇所ありますので #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <h3 class="another-title">Leave a comment</h3> までを 削除

<!--/comment-->
<form action="./" method="post" name="comment_form" id="comment_form">

上記のような形になっていればOKです。

続いてスタイルシート末尾に以下の内容を 追加

#comment_form {
  padding-top: 40px;
}
③について

<p class="visitor-name"><%comment_name>&nbsp;&nbsp;<script>a="<%comment_url>",""!=a&&document.write('<a href="'+a+'" target="_blank" rel="nofollow noopener noreferrer"><i class="fas fa-link"></i></a>');</script></p>
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<p class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->"><%comment_name></p>

テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に

.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}

こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。

④について

.inner-contents { で検索するとスタイルシート内に1箇所ありますので padding: 20px 0;margin: 20px 0;変更

続きまして、スタイルシート末尾に以下を 追加

.inner-contents p {
  margin: 1.9em 0;
}

記事内でp要素を利用している方向けなので必要がある方だけどうぞ。

以上です。よろしくお願いします。

更新履歴 2019.1.22
  • Font AwesomeのCSSバージョンを5.6.3にアップグレード
  • jQueryのバージョンを3.3.1にアップデート
  • レイアウト関連CSSの追加及び一部削除
  • UA判別のJSを削除しCSSに変更
  • Pinterest, はてなブックマークのシェアアイコンを追加
  • SNSホバー時の背景色を各社ブランドカラーに変更
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • パンくずリストを導入
  • 構造化マークアップを導入

不具合修正ではありませんので旧バージョンのままでもお使い頂けますが、パンくずリスト・構造化マークアップの導入など比較的大きな追加変更が含まれます ので是非アップデートをご検討ください。

更新履歴 2018.1.16
  • 大規模なメンテナンスを行いました。

詳細は以下のページでご確認ください。

定番テンプレート7作品メンテナンスのお知らせ

定番テンプレート7作品メンテナンスのお知らせ

以下のテンプレート7作に於いて大規模なメンテンナスを行いました。 公式配布ソースは修正済みです。 不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。 Sakura_daylight Sakura_daylight2 Sakura_nightglow Capricious Ranchu OnTheGround Jingle...

更新履歴 2017.9.22
  • SSL化に伴うURL正規化
更新履歴 2017.1.25
  • SNSシェアリンクのUTF-8エンコード
更新履歴 2016.10.12
  • 全体レイアウトを再調整しました
  • カテゴリなど一部ページをリスト形式に変更しました
  • 主要公式プラグインの整形
  • 関連記事サムネイルの整形
  • ベンダープレフィックスの整理
  • その他微調整

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

更新履歴 2016.1.8
  • フッター構造を変更しました
  • タイトルタグを微調整しました(SEO対策)
更新履歴 2015.11.20
  • Windows10 Internet Explorer11及びMicrosoft Edgeで 固定した背景画像がブレるバグに対処

本記事内容は2023.6.13アップデート以降が対象です。

じんぐる

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

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
LIST PAGE DEMO
画像クリックでデモ画面へ
ARTICLE DEMO
画像クリックでデモ画面へ

カスタマイズのコツ

A few tips on customizing

1. カスタマイズ対象部位の見つけ方
カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索を利用するとページ内の対象文字列をすぐに見つけることができます。

2. ご質問の前に
カスタマイズされるであろうと想定される部位については 予めガイダンスを付けてあります
注)
で検索すると出てきますので、カスタマイズ前にご確認ください。
もしかしたら既に答えが記されているかもしれません。

3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために 全角スペースを利用してしまう方が大変多いです
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。

ご質問・ご相談の前に

Please read the document before posting your issue.

自己解決のためのページを用意しています。ご質問の前に該当するものが無いか事前のご確認をお願いします。

ご質問の前に「テンプレあるある」

お受けできないご質問・ご相談

I'm sorry I couldn't be of any help.

  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き
  • アフィリエイトの都合を優先した仕様変更の指南

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「利用しない」

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

テンプレート共通カスタマイズ

Common customization.

ほぼ全てのテンプレートで共通する内容についは以下の記事をご参照ください。

テンプレート共通カスタマイズ

テンプレート共通カスタマイズ

* FC2提供全テンプレートを意味するものではありません。vanillaice(Akira)作テンプレートのみを指します。 2023年9月時点で共有されているテンプレートの、ほぼ全てに共通するカスタマイズ項目の説明です。...

記事編集リンクについて

The position of edit link.

記事編集リンクは 個別記事、タイトル下の管理人アイコン をクリックすると別タブで開きます。

ご質問・ご相談時のお願い

Cautions before asking for something.

ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には

・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除

上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。

また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。

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

snow miy
2015/11/02 (Mon) 09:51

ランキングバーナーの位置が・・・

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

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

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

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

Akira
2015/11/02 (Mon) 12:00

To snow miyさん

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

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

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

snow miy
2015/11/03 (Tue) 13:02

確認が…

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

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

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

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

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

Akira
2015/11/03 (Tue) 13:22

To snow miyさん

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

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

snow miy
2015/11/04 (Wed) 08:21

変更してみました

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

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

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

vanillaice (Akira)
Akira
2015/11/04 (Wed) 09:16

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/05 (Thu) 01:13

息子さんのご入学おめでとうございます<(_ _)>

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

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

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

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

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

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

snow miy
2015/11/05 (Thu) 09:34

うまくいきません(´;ω;`)

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

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

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

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

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

Akira
2015/11/05 (Thu) 10:33

To snow miyさん

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

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

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

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

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

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

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

Akira
2015/11/05 (Thu) 10:36

To きろろさん

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

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

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

snow miy
2015/11/05 (Thu) 13:18

(;'∀')

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

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

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

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

Akira
2015/11/05 (Thu) 15:16

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

snow miy
2015/11/05 (Thu) 17:08

できました♪\(^o^)/

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

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

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

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

きろろ
2015/11/06 (Fri) 00:13

見落としてました(>_<)

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

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

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

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

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

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

vanillaice (Akira)
Akira
2015/11/07 (Sat) 09:26

To snow miyさん

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

Akira
2015/11/07 (Sat) 09:29

To きろろさん

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

さっちぃ
2017/12/02 (Sat) 18:36

ヘッダーにメッセージ

こんばんは。
今頃になって、このjingleのテンプレに気付きました。
クリスマス用に使用させて頂きます。

ど素人なのでトンチンカンな質問になると思いますが…
ヘッダー内のブログ名の左上辺りにメッセージ文的なものを入れることは可能でしょうか?
例えば、All-about-usのWelcomeみたいなものです。
『Merry christmas』や『Happy New Year』等アレンジして入れることが出来ると良いなと思いましたので。
そりゃあ、無謀だよ!って言われそうですけど…

それから、記事の飾りの葉っぱ?の画像ですが、消す方法は明記してあったのですが、替えることは可能でしょうか?

vanillaice (Akira)
Akira
2017/12/02 (Sat) 20:26

To さっちぃさん

こんばんは ( ゚Д゚)ノ

> ヘッダー内のブログ名の左上辺りにメッセージ文的なものを入れることは可能でしょうか?〜

htmlソースの
<div id="blog-name-container">
の上に

<div id="任意の名称">テキスト内容</div>

を入れ、CSSソースに

#任意の名称 {
内容
}

を追加すればできますが、どの位置合わせにするかで難易度が変わります。
中央に寄せる場合には短いテキストであれば特に問題はないと思いますが、左寄せ・右寄せだと難易度が上がりますね。
レスポンシブですから全体幅(メインカラム + サイドカラム)との体裁があります。
また、ブレイクポイント設定(画面幅に応じてCSS内容を変更する)も必要になってきます。

-------
> 記事の飾りの葉っぱ?の画像ですが〜替えることは可能でしょうか〜

できますが、差し替える画像によります。
デフォルトと縱橫サイズが全く同じであればURLを変更するだけです。
この部分は position: absolute というCSSを利用していますが、absoluteは少しでも数値設定を間違えるとスマホでモバイルフレンドリーになりません。
現在のデフォルトが
right: -22px;
top: -40px;
で、特に right: -22px; は守らないとスマホで画面超過します。
この数値を守れるのであればそんなに難しくはないと思います。
(right指定の許容数値は -22pxなのでそれを超える数値、例えば -25pxなどに設定しないようにしてください。
要するにこれ以上右には寄せられないよ、という意味です。)

加えて、absoluteは今回のパターンで言うと記事タイトルと重なる可能性があります ので、そうならないようタイトルの方に右のpaddingを設けています。
デフォルトの画像よりも横サイズが大きい場合にはこのpadding値を大きくする必要があります。
該当箇所は
.entry-ttl

padding: 0 70px 10px 0;
の赤字部分ですので、差し替える画像と重ならないよう数値変更してください。

---------- 追記

現在のページの状態を拝見しました。
背景画像を変更されていますが、その内容では全画面背景にはなりません。
私のパソコンは比較的画面が大きいので、背景画像の「右」と「下」がかなり寸足らずの状態です。

https://blog-imgs-116.fc2.com/v/a/n/vanillaice000/capturebackground89283th.jpg

body:before

display: block;
含み、その行から
position: fixed;
含まずその上までを一旦全て削除し、

background: url(アドレス) center center /cover no-repeat;

にすれば全画面になりますが、現在の使用画像では解像度が足りないように思います。
最低でも横1500px程度は必要。
この設定だとスマホでスクロールのたびに画面がガクガクしますので、

background: url(アドレス) center center /auto 110% no-repeat;

にするとガクつきはなくなりますが、拡大率は上がります。

横については repeat-x にする方法もありますが、現状の画像ですとシームレスではありませんので継ぎ目が目立つと思います。
こちらのテンプレートは背景設定が特殊ですので、本文中の但し書きの通り背景画像を取り替える場合にはOnTheGroundからの改変をおすすめします。

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

ただ、使用画像の特徴を見ると全画面表示には適さないですよね。
こういうタイプは「上」と「下」を別の画像で用意してどちらも見切れが起こらないようにするのが通常です。
ポイントが上下だけですので、間の白い部分は無駄というか表示負荷がかかるだけなので。
上ポイント画像 + 白背景色 + 下ポイント画像
にするのが最適解ではあります (´・ω・`)

全画面背景の特徴
https://vanillaice000.blog.fc2.com/blog-entry-569.html
https://vanillaice000.blog.fc2.com/blog-entry-566.html

さっちぃ
2017/12/03 (Sun) 11:18

To Akiraさん

こんにちは。

ナント!背景から問題有りだったんですね。知らなんだ…
画像を取り替えてみたのですが、どんな具合になってますかね?
これでも寸足らずだったら、デフォルトのグラデーションを変更して使います。

葉っぱの画像の件、了解しました。
メッセージ文の件は、挑戦してみます。

vanillaice (Akira)
Akira
2017/12/03 (Sun) 23:59

To さっちぃさん

こんばんは ( ゚Д゚)ノ

そうですね。見切れなどなくなりましたので良いと思います。
ただし cover値を採用されましたので、タブレット・スマホでスクロールをし始めると同時に背景が若干拡大されます。
そちらについてはスマホの特徴(ステータスバーの状態)とプロパティの特徴との絡みですので、実際に目視確認をしてくださいね。
(ちなみに私はそれほど苦になりません)
お疲れ様です :)

H.LY
2020/02/11 (Tue) 23:52

Sorry that I can’t write this in Japanese......I am also not good at English......
I am not sure if this is a part of “お受けできないご質問・ご相談”.

I am trying to remove the white part behind the article and comments, but I have no idea which part of the code it is. I hope it put the articles and comment part on “background “.

H.LY
2020/02/12 (Wed) 00:22

To H.LYさん

And the アイマ of ブラグタイトル.
(Why can’t I leave an all English comment?)

vanillaice (Akira)
Akira
2020/02/12 (Wed) 02:53

To H.LYさん

kk.. you got it.

Press multiple keys (Ctrl + F) at the same time and enter " .main-body { " in the search box to find target data. You can find text strings like the following.

box-shadow: 6px 6px 6px rgba(0,0,0,.1);

and

background: rgba(255,255,255,.8);

All you have to do is delete these two lines :)

-----
The reason why you can not leave pure English comments which does not include Japanese is I have no choice but to set it up to avoid getting spam as much as possible. Sorry for inconvenience! (so pls ignore the following Japanese.)

Jingle - FC2ブログテンプレートのコメントです

H.LY
2020/02/12 (Wed) 13:22

ありがとうございます!!!!
I was afraid I have to do something in html Orz that sounds horrible......

All the templates you build are sooo good! Thank you for replying me so soon!

vanillaice (Akira)
Akira
2020/02/13 (Thu) 19:54

To H.LYさん

You're very welcome. pls feel free to ask me any question :)

お疲れ様でした :)

H.LY
2020/05/01 (Fri) 22:17

hi it's me again......
when i tap any tag, category or search something in the searching block, i found that the form is different from the homepage. How can i make them the same? Or is that possible?

どうもありがとうございます

vanillaice (Akira)
Akira
2020/05/01 (Fri) 23:06

To H.LYさん

Hi H.LY :)

Do you mean you want to use 'display all' layout in any pages? Of course it's possible.

1. Find [ <main id="primary"> ] in html (use Ctrl + F key). You can see
<!--not_edit_area--><!--not_titlelist_area--><!--not_search_area--><!--not_category_area--><!--not_tag_area--><!--not_date_area-->
just below. Then change this line as the following.
<!--not_edit_area--><!--not_titlelist_area-->

2. Find [ <!--comment_area--> ]. You can find
<!--/not_date_area--><!--/not_tag_area--><!--/not_category_area--><!--/not_search_area--><!--/not_titlelist_area--><!--/not_edit_area-->
just above. Then change this line as the following.
<!--/not_titlelist_area--><!--/not_edit_area-->

3. Delete appropriate area, following the capture below.

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/capuser20200501-1----1200.png
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/capuser20200501-2----1200.png
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/capuser20200501-3----1200.png
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/capuser20200501-4----1200.png

よろしくお願いします。

青い花
2020/11/30 (Mon) 00:29

お忙しいところを失礼します

いつもお世話様になっておりましてありがとうございます。

いつまでも初心者というのに
実は勝手で申し訳なかったのですが記事欄の幅をあと100pxちょっとくらい
広げられて900pxくらいの画像を載せられればとside menu?を
右に寄せさせていただきましたが良かったでしょうか。

記事欄に900px(くらい)の画像を載せるにはどうしたら良いでしょうか。
無理でしょうか。
primaryのあたりを少しいじってみましたが全くダメでした(汗

急ぎませんのでよろしくお願いいたします。

vanillaice (Akira)
Akira
2020/11/30 (Mon) 21:53

To 青い花さん

こんばんは。

まず決定して頂きたいのは

①全体幅を維持した上で記事幅を大きくするのか(デフォルト全体幅 1300px)
(この場合はサイドメニュー(右カラム)を小さくします)
②全体幅を大きくするのか
(この場合はサイドメニューはデフォルトの最大280pxを維持します)

ここが決まらないと対処できないので、方針に合うものを選択してください。
そしてこのJingleテンプレートはレスポンシブデザインなので、仮にメインカラム(記事幅)を大きくしても、閲覧者全員が同じサイズで見るわけではありません。
青い花さんが見て記事に掲載された画像が横900pxだとしても、小さめのパソコンやタブレットなど、他の誰かのデバイスでは600pxや800pxといったサイズになる可能性もある、という点をしっかり理解してくださいね。要は「常に900px表示」ではなく「最大で900px表示」になる処置を行うことになります。
青い花さんの場合でも閲覧ブラウザの横幅をマウスで小さくすることで状況を確認できます。
レスポンシブの説明は以下の記事を参照してください。

参考記事: 今更だけど「レスポンシブ」ってなんぞ?
https://vanillaice000.blog.fc2.com/blog-entry-491.html

---------- 方針①の場合
現時点でご自分で行われた変更では、サイドメニューが180px指定になっています。これをそのまま活かす場合は方針の①です。
ただしあまり小さいと文章の折返しが多くなり文章が非常に読みづらいので、できれば250px程度は確保していただきたいなぁ、と思います。ここはお任せします。

まず
.side-menu {
で検索するとスタイルシート内に2箇所出てきます。最初のものが対象です。
width: 180px;
となっているはず(ご自身で決めた数値です)なので、本当にこの数値で良いのかどうか検討し、適切に書き換え(あるいは180pxそのまま)、その上ですぐ上にある

#secondary

width: 200px;
赤字部位が現状200(ご自身で決めた数値です)になっていますので、先程決めたのと 同じ数値 を入れてください(現状では食い違っています)

続きましてすぐまたその上にある
#primary

max-width: calc(100% - 50px - 280px);
赤字部位にも同じ数値を入れてください。
これで、決めたサイドメニューの横幅を3箇所に記入していることになります。

180pxを指定した場合、この処理でデフォルト790pxだった記事幅が890pxになります。あくまでも「最大で」890pxです。900pxにするには170pxに指定する必要がありますが、個人的には狭すぎると思います ^^;

ここまでが①、全体幅維持、メインとサイドの割り振り(各占有率)を変更、という方法です。

---------- 方針&②の場合
まずはご自身で変更した部位をデフォルトに戻します。
さきほど変更指南をした3箇所に 280 を入れてください。これがJingleの初期設定です。

続きまして、
#float-container {
で検索すると5箇所ありますが、最初のもののみが対象です。
max-width: 1300px;
赤字部位1300を 1410 に変更。

記事の幅だけでなく全体が大きくなりますので、大型のパソコンでないと900pxでは見られない可能性があります。青い花さんのパソコンサイズももちろん関係します。

------------
いずれにしろ「誰にでも900pxで表示されているとは限らない」点に留意してくださいね。ピンと来ない場合はくどいようですが、青い花さんのブラウザをマウスで小さくしてみて、何が起こるのか、レスポンシブとは何なのか、を確認してください。
よろしくお願いします :)

青い花
2020/12/01 (Tue) 01:44

こんばんは

お忙しいところを早速返信いただきまして
誠にありがとうございます。

htmlやスタイルシートなどはほんとに複雑怪奇です。
それを初心者にも分かるようにご丁寧に説明いただき、
プリントして早速数値を変更させていただいて希望どうりの
レイアウトになりましたがどうでしょうか?

>>>レスポンシブ
1,2度読んだだけでまだ理解ができないので
何度も読ませていただいて考えますね。

また分からない事が出て来ましたらその時は
またよろしくお願いいたします。
この度はどうも有難うございました。

vanillaice (Akira)
Akira
2020/12/02 (Wed) 00:25

To 青い花さん

こんばんは ('0')/
現在、最大870pxですが大丈夫でしょうか。不都合がありましたら同じ手順で修正してくださいね。
お疲れ様でした :)

夜月
2024/02/24 (Sat) 16:28

jQuery・ページ送り複製・明暗切替について

はじめまして☆
先月末に、こちらのテンプレートをDLして、お借りしています。
ブログの記事も読みやすくて、初心者に毛が生えただけの私でもカスタマイズしやすく、とても助かっています。
ありがとうございます。

いくつか、質問があるのですがm(_ _)m

1つ目です。
こちらのテンプレートは「jQuery導入」とありますが、具体的にはどの部分が相当するのでしょうか?
HTMLの最後の方にある~/jquery/3.6.0/jquery.min.js~の所と、トラックバックにjavascriptの文字があるので、その部分でしょうか・・・?
というのも、できれば、jQueryを撤去したいなと、考えています。
トラックバックに関しては、今までされたことがなくこれからも不要と考えているので、HTMLでまるごと削除してしまっても大丈夫という事でしたら削除したいなとも考えています。

2つ目です。
1800記事を超えているので、ページ送り(○の中に数字がある方です)を、ブログの記事より上(であればどこでも良いです)に、複製して設置したいと考えています。
トップエントリー、タグ、カテゴリページで、可能であれば設置したいです。
どのようにカスタマイズすれば良いでしょうか・・・?
今まで、見た目に関する変更や個別記事で1行増やす、というようなカスタマイズはしましたが、配置を大きく変える変更はまだしたことがありません。
ですがもし、サポートはできないけど、複製しても問題はない、ような内容でしたら、カスタマイズに挑戦したいと思います。
初心者はさわるのやめた方がいいという場合は、やめることにします。
その判断もまだ付いてない状態です、すみません(汗)

3つ目です。
全文タイプで、ライトダークモード切替可能なテンプレートを公開される予定はありますでしょうか?
もしもリクエスト可能なら、リクエストさせていただきたいですm(_ _)m

長々と、一度に3つも質問すみません(汗)
お時間に余裕のある時に、お返事頂ければと思います。よろしくお願いしますm(_ _)m

vanillaice (Akira)
vanillaice (Akira)
2024/02/25 (Sun) 00:39

To 夜月さん

こんばんは ('0')/

jQueryについては『ブログタイトルのエフェクト』のみに用いています。他のJSは全てネイティブJSに書き換えましたのでjQueryは不要です。既にタイトル部位のvisibilityを書き換えてエフェクトを外されていますので削除されても他の部位への影響はありません。削除対象は

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

のスクリプト要素一行です。

トラックバックのJSは単独で動きますのでjQueryとは連動していません。また、コメントHTML周りにもJSが付いていますがこちらは外さないようにしてくださいね。
トラックバックのHTMLは不要と思えば削除されても良いと思います。私もそうしています。

-----
ページ送りの複製は個別記事のみ対象になっていますので、現状のまま複製しても動きません。以下の内容にJSを差し替えた上で、必要HTML部位を複製し、希望の位置へ記載してください。

<script>const pagination=(b,d)=>

という書き出しのものが対象JSなので以下のように書き換えます。

<script>const pagination=(e,a)=>{let l="<%total_pages>";if(""===l)return;let r="<%current_page_num>",t="<!--nextpage--><%nextpage_url><!--/nextpage-->";""===t&&(t="<!--prevpage--><%prevpage_url><!--/prevpage-->");let s=".html",i=-1;t.slice(-5)===s?i=t.lastIndexOf("-"):(s="",i=t.lastIndexOf("="));let p=t.slice(0,i+1);l=Number(l);let c=1==r?'<li class="pager-item"><span class="current_page">1</span></li>':`<li class="pager-item"><a class="pager-item-anchor" href="<!--not_category_area-->${p}0${s}<!--/not_category_area--><!--category_area--><!--page_area--><%firstpage_url><!--/page_area--><!--/category_area-->">1</a></li>`,g,n,o=a-4;for(a>=l?(g=2,n=l-1):r<=o/2+2?(g=2,n=a-2):r>l-o/2-1?(g=l-a+3,n=l-1):n=(g=r-Math.floor(o/2))+o-1,g>2&&(c+=`<li class="pager-item"><a class="pager-item-anchor omit" href="${p}${Math.ceil(g/2)-1}${s}" title="${Math.ceil(g/2)}ページへ">…</a></li>`),i=g;i<=n;i++)i==r?c+=`<li class="pager-item"><span class="current_page">${i}</span></li>`:c+=`<li class="pager-item"><a class="pager-item-anchor" href="${p}${i-1}${s}">${i}</a></li>`;n<l-1&&(c+=`<li class="pager-item"><a class="pager-item-anchor omit" href="${p}${Math.ceil((n+l)/2)-1}${s}" title="${Math.ceil((n+l)/2)}ページへ">…</a></li>`),l>1&&(c+=r==l?`<li class="pager-item"><span class="current_page">${l}</span></li>`:`<li class="pager-item"><a class="pager-item-anchor" href="${p}${l-1}${s}">${l}</a></li>`);let m=document.getElementsByClassName(e);for(let _=0;_<m.length;_++)m[_].insertAdjacentHTML("beforeend",c)};pagination("pager-list",7);</script>

<script>と</script>、それぞれ上下に独自変数が存在しています。それらは削除や変更をしないよう注意してください。

複製対象HTMLは

<!-- リスト型ページネーション -->

で検索し、そのすぐ上の行(独自変数)も含めたひとまとまりです。独自変数をミスすると動かなくなりますので注意してください。

-----
ダークテーマ対応の全文表示は作りかけのものがありますがリリースできるとしても春… 夏(6月以降)になるかと思います。あまり時間が取れないもので気長にお待ち頂ければ幸いです。でもって好みに合わなかったらごめんなさい ^^;

----- 追記
廃止タグの書き換え、頑張られたんですね。お疲れ様です :)

夜月
2024/02/25 (Sun) 01:48

こんばんは。早速のお返事ありがとうございます!m(_ _)m
jQueryはあのタイトルのエフェクトだったのですね!
素敵なエフェクトなのですが、ゲームのキャラクターの方を目立たせたくてつい(*ノノ)
トラックバックは外すことにします。
ページ送りの件は、しっかり中身を読んでから、慎重に作業を進めたいと思います。詳しい記述をありがとうございます。
自分で勝手にせず、質問して良かったです。
ダークテーマの件ですが、お返事ありがとうございます。
決して急かすわけではなく、本家本元のテンプレートがいつか公開されるのなら嬉しいなと思いまして。
私の好みはちょっと特殊なので(汗)置いておいて下さいw
テンプレートを楽しみにしています。
これからも、色々な記事の続きを読みにまいります。丁寧なお返事をありがとうございました。
・・・あ、廃止タグは、まだ古い記事には大量に残っていると思われます(*ノノ)ぼちぼち修正作業を進めていきたいです(泣)

おかげさまで、上手く設置することができましたm(_ _)m

vanillaice (Akira)
vanillaice (Akira)
2024/02/27 (Tue) 18:34

To 夜月さん

こんばんは ('0')/

ページ送り複製の件、私の方でも動作確認できました。お疲れ様でした :)

夜月
2024/02/28 (Wed) 14:37

idについて

こんにちは(*'-')ノ
おかげさまでブログが読みやすくなりました、ありがとうございました。
1つ追加で質問があるのですが。
私が複製をしたので、id="pager-list"が2つ存在することになりましたが、こちらはこのままで良いでしょうか?
id重複に関する記事を読んでふと気になったのですが、スクリプトの方に一カ所pager-listがあるので、むしろ変えてはいけないのかな・・・?とも思いまして。
現時点で問題が発生しているわけではないので、お時間に余裕のある時に、よろしくお願いしますm(_ _)m

vanillaice (Akira)
vanillaice (Akira)
2024/02/28 (Wed) 15:43

To 夜月さん

こんにちは ('0')/

そうでした。伝え忘れてしまいました。そのidは以前にJSのターゲットとして用いていたものです。
今回 #pager-list から .pager-list に変更しましたのでidは不要です。
なので双方から削除するか、複製の方だけ削除でもOKです。スタイリングには利用していませんので問題は生じません。

夜月
2024/02/28 (Wed) 16:18

素早いお返事感謝ですm(_ _)m
もうこのidは不要なのですね。まだまだ単語を追いかけるのに必死です(笑)
こちらの状況に合わせてJSを書き換えて下さって、本当にありがとうございました。
双方のidを削除して、動作を確認しました('◇')ゝ

vanillaice (Akira)
vanillaice (Akira)
2024/02/28 (Wed) 16:22

To 夜月さん

いえいえ。こちらこそ説明足らずでごめんなさい。そして気づきをありがとうございます。恐らく他にも同じことを希望される方がいそうなので、これを期に書き換えていこうと思います :)

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)