Jingleテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ
| 名称 | Jingle |
| 動作確認済みブラウザ |
|
| トップページ記事並び | 全文表示タイプ |
| 記事幅 | メイン --- 最大790px サイド --- 280px |
| 記事内で使える見出しレベル | h2からh6まで |
| jQuery導入 | あり(v3.4.1) |
| Font Awesome導入 | あり(v5.6.3 CSS) |
| Lazyloading導入 | なし |
| 構造化マークアップ | 個別記事のみ 「BreadcrumbList(パン屑リスト)」 「BlogPostiong」 |
| Page Speed Insigtsスコア |
|
| 固有機能 |
・ 画像にドロップシャドウ ・ 動画縦横比固定 使い方詳細はARTICLE DEMOを参照 |
| 推奨カスタマイズ | 色調変更 |
| ライセンス |
Required 必須事項 ・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by) Permitted 許可事項 ・Modification 改変 ・Personal Use 個人利用 ・Commercial Use 商用利用 Forbidden 禁止事項 ・Distribution 再配布 ・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません |
| 備考 |
|
| パソコン | タブレット | スマートフォン |
|
|
|
| 2カラム | 1 or 2カラム(デバイス幅依存) | 1カラム |
| サイドメニュー --- 右 | サイドメニュー --- 下 or 右 (デバイス幅依存) | サイドメニュー --- 下 |
- FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
- jQueryを3.6.0にアップデート
- ブログタイトルの太字調整
カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。
【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。
【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。
【ブログタイトル太字調整】
/* 注)ブログタイトルフォント関連 */ を目印に検索、このルールセットの visibility: hidden; の直下に font-weight: bold; を追加。インデントにタブや全角スペースを利用しないよう注意。
過去の更新一覧
- ページ送りのJSを修正
- コメント返信のJS変更
- jQueryを3.4.1にアップデート
- 個別記事ページ送りの複製を可能にしました
複製時の注意点含め本記事の章を追加しましたのでご確認ください。
章をすぐに確認する
- パーマリンク設定導入に伴う個別記事URL正規化
- パーマリンク設定導入に伴うページ送り変更
- コメント主のリンク表示用JS及びデザインの変更
- 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
- 受信コメント一覧とコメント投稿フォームのセクションを統合
- コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
- 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)
【重要】テンプレートの変更点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> <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要素を利用している方向けなので必要がある方だけどうぞ。
以上です。よろしくお願いします。
- Font AwesomeのCSSバージョンを5.6.3にアップグレード
- jQueryのバージョンを3.3.1にアップデート
- レイアウト関連CSSの追加及び一部削除
- UA判別のJSを削除しCSSに変更
- Pinterest, はてなブックマークのシェアアイコンを追加
- SNSホバー時の背景色を各社ブランドカラーに変更
- 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
- パンくずリストを導入
- 構造化マークアップを導入
不具合修正ではありませんので旧バージョンのままでもお使い頂けますが、パンくずリスト・構造化マークアップの導入など比較的大きな追加変更が含まれます ので是非アップデートをご検討ください。
- 大規模なメンテナンスを行いました。
詳細は以下のページでご確認ください。
定番テンプレート7作品メンテナンスのお知らせ
以下のテンプレート7作に於いて大規模なメンテンナスを行いました。 公式配布ソースは修正済みです。 不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。 Sakura_daylight Sakura_daylight2 Sakura_nightglow Capricious Ranchu OnTheGround Jingle...
- SSL化に伴うURL正規化
- SNSシェアリンクのUTF-8エンコード
- 全体レイアウトを再調整しました
- カテゴリなど一部ページをリスト形式に変更しました
- 主要公式プラグインの整形
- 関連記事サムネイルの整形
- ベンダープレフィックスの整理
- その他微調整
ブログタイトル下のナビゲーションはリンクの増減を想定して製作しておりません(ごめんなさい)
- フッター構造を変更しました
- タイトルタグを微調整しました(SEO対策)
- Windows10 Internet Explorer11及びMicrosoft Edgeで 固定した背景画像がブレるバグに対処
本記事内容は2019.1.22アップデート以降が対象です。
じんぐる
ぽんぽんと連続してリリースしてしまいましたが、うかうかしてると冬になってしまいますもので (´・ω・｀)
サンプル
Samples
画像クリックでデモ画面へ
画像クリックでデモ画面へ
画像クリックでデモ画面へ
カスタマイズのコツ
A few tips on customizing
1. カスタマイズ対象部位の見つけ方
カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索を利用するとページ内の対象文字列をすぐに見つけることができます。
2. ご質問の前に
カスタマイズされるであろうと想定される部位については 予めガイダンスを付けてあります。
注)
で検索すると出てきますので、カスタマイズ前にご確認ください。
もしかしたら既に答えが記されているかもしれません。
3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために 全角スペースを利用してしまう方が大変多いです。
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。
お受けできないご質問・ご相談
I'm sorry I couldn't be of any help.
- サイドバーの形状変更
- トップページの表示タイプ変更(全文表示から要約表示へ変更、グリッド並び数変更 など)
- レスポンシブを固定幅化
- カラム数・配置変更
- 今回は左右カラム入れ替え非推奨です(ポイント画像がabsolute配置のため)
- デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
- テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き
必須個人設定
Necessary personal settings
スマートフォン版の表示設定「利用しない」
レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。
検索バーの設定「利用しない」
タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。
コメント設定 > コメンテーターの情報「記憶する」
管理人コメントにプロフィールアイコンを表示できます。この設定を怠ると表示できません。
背景色変更
How to change the background color
背景の色を変更して頂けます。雪の柄ごと画像を丸っと取り替えたい方は一つ前の秋バージョンをベースにしてください。
OnTheGround - FC2ブログテンプレート
OnTheGroundテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...
雪の画像はそのままで背景色だけ変更する方法
まずスタイルシート内の 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;
背景色を変更されました際にはテキストの色なんかも変えてくださいね。読めなくなっちゃうので。
個別記事ページ送りを複製する方へ
Cautions when copying pagination in permanent page
2020.3.26バージョンから個別記事のサムネイルつきページ送りを複製掲載できるようにしました。html内を <!-- 個別記事ページナビ --> で検索し、すぐ上にある <!--permanent_area--> を含め、<!-- 個別記事ページナビここまで --> のすぐ下にある <!--/permanent_area--> までを含めた範囲をコピーし、希望の位置に貼り付けてください。
ご質問・ご相談時のお願い
Cautions before asking for something.
ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には
・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。
また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。
いつもありがとうございます (●'0'●)/
There are no comments yet.