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

OnTheGroundテンプレート

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

名称 OnTheGround おん ざ ぐらうんど
動作確認済みブラウザ Google Chrome Firefox Safari Vivaldi Edge
トップページ記事並び 全文表示タイプ
記事幅(PC 最大) メイン --- 960px(内寸 900px)
サイド --- 280px(内寸 270px)
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.4.1) なし
Google fonts導入 Dancing Script
Font Awesome導入 あり(v5.6.3 CSS) なし
Lazyloading導入 なし
OSダークモード対応 なし
構造化マークアップ 個別記事のみ
「BreadcrumbList(パン屑リスト)」
「BlogPostiong」
Lighthouseスコア
(トップページ平均)
OnTheGround Lighthouseスコア
固有機能
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • その他
使い方詳細はARTICLE DEMOを参照
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン
2カラム
サイドメニュー --- 右
タブレット
1 or 2カラム
サイドメニュー --- 右 or 下
(デバイス幅依存)
スマートフォン
1カラム
サイドメニュー --- 下
最終更新 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.13
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.8.7
  • Twitterアプリ名変更及びロゴ変更に対応
更新履歴 2023.6.4
  • IE用対応終了
  • jQuery使用停止
  • カスタムプロパティ導入
  • Font Awesome使用停止
  • ユーザビリティの最適化
  • idセレクタによるスタイリングをclassセレクタに統一
  • RSSリンク削除
  • コメント削除アラート追加
  • YouTube縦横比固定用クラス追加
  • 記事編集リンクをアイコン型に変更
  • カテゴリ階層表示の改正
  • Chromiumのtransitionグリッチへの対策(hack)
  • その他UI調整

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

また、jQueryの廃止や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 に変更。

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

更新履歴 2020.5.30
  • ページ送りのJSを修正
更新履歴 2020.4.9
  • 訪問者コメントリンク用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.11
  • 全体レイアウトの見直し, 調整
  • 主要公式プラグインの整形
  • 関連記事サムネイルの整形
  • ベンダープレフィックスの整理
  • その他微調整
更新履歴 2016.1.9
  • フッター構造を変更しました
  • タイトルタグを微調整しました(SEO対策)
更新履歴 2015.11.22
  • Windows10 Internet Explorer11及びMicrosoft Edgeで 固定した背景画像がブレるバグに対処
更新履歴 2015.9.21
  • iOS9 リリースに伴い スマホ・タブレットではColorbox起動させないよう修正しました
更新履歴 2015.9.9
  • 公式化に伴うOGP削除

テンプレ付随SNSボタンをご利用の方は ブログ環境でのメタタグ個人設定をお願いします

本ページの内容は2023年6月4日メンテナンス以降のバージョンが対象です。

おん ざ ぐらうんど ('0')/
予定より遅れてしまいましたが定番テンプレの秋仕様です。

サンプル

Samples

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

カスタマイズのコツ

A few tips on customizing

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

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

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

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

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

sawa
2015/09/02 (Wed) 17:17

いただいてきました~(笑)

早速「OnTheGround」をいただいてきました~♪

iPhone6+Safariでプレビューしてみましたところ、画面を指で上下にスクロールすると、背景画像が若干ピクピクと移動します。
左右方向? ちょっと複雑な方向 (^_^; アハハ…
それがちょっと気になります。
とりあえずお知らせまで~ ^^

追記です。
他に・・・

・ スクロールボタン(top middle bottom)が1回で反応しなくて2回タップが必要です。

・ 新着記事の new! マークの表示位置に違和感が (;^_^A アセ

Akira
2015/09/02 (Wed) 18:13

To sawaさん

sawaマネージャー、ご出勤おつです (o'ω')ノ

それね…。
『iPhoneの縦サイズがコロコロ変わっちゃうよ。どうすんだよ。』問題(笑)
このサイトさんがわかりやすい ↓

テクブロ様
http://www.tecblo.com/css/1314.html

iOS7まではminimal-uiがあったので問題なかったんです。
でもiOS8でサクっとその機能、minimal-ui自体が廃止されちゃった((((笑)
なんでー?! ( ノД`)シクシク…

これ気持ち悪いよねぇ (´・ω・`)
ビミョーにうごうごするの。
なんとかしようと思ったら、スマホだけ画像差し替えるか…。
んでもスマホとタブレットは『ランドスケープ』ってのがあるじゃんね (´・ω・`)
これ困ったなー。

もうすぐiOS9が発表されるので(9月15日頃?)、それ確認して改善が見られなければ真剣に考えます。
それまでしばし我慢してね(はぁと)としか言いようが…(笑)
ごめんねー (´・ω・`)

Akira
2015/09/02 (Wed) 18:20

To sawaさん

> ダブルタップが必要

えっマジですか? ((((´=д=`))))
とりあえず、私の環境 iPhone5S iOS7 では問題ない。
主人が来たらiPhone6 iOS8で検証してみます。
重ねてすみません。

> newマークの位置

これはお好きな場所へ移動してくださいませ。

Ctrl+Fキー検索

<script>
nw('<%topentry_year>','<%topentry_month>','<%topentry_day>','<%topentry_hour>')
</script>

タイトル横に入れるにはこれを

<!--/not_permanent_area-->
<%topentry_title>
<!--not_permanent_area-->

太字部分の「前」か「後ろ」に移動です。
お手数おかけしますー!

vanillaice (Akira)
Akira
2015/09/02 (Wed) 18:28

今主人のでやりました (o'ω')ノ
特に問題ないんだけども、もしかしたら右に寄りすぎててしっかり押せないのかもしれません。

#pagetop {
bottom: 190px;
right: 8px;
}

#pagebottom {
right: 8px;
}

#pagemiddle {
display: none;
position: fixed;
z-index: 9999;
bottom: 140px;
right: 8px;
font-family: 'Bitter', serif;
font-size: 11px;
width: 40px;
height: 40px;
border: 1px solid rgba(179,145,138,.5);
border-radius: 50%;
background: rgba(255,255,255,.4);
color: rgb(94,157,31);
}

赤字の数字を12pxぐらいにされるとしっかり押せると思います。
一度お試しください。
男性には的が小さくて押しにくいかもしれないね。
もう少しボタン自体を大きくした方が良いかしら。
それとも邪魔になるかしら。
どうかしらマネージャー(笑)

なつき
2015/09/02 (Wed) 18:49

こんばんわ~

~早速DLさせていただきました。いつも素敵なテンプレートをありがとうございます(*˘︶˘*).。.:*♡
newマークの位置を変えたくて来てみたらコメントに書いてありました笑
私はiPhone6+の最新OS?だと思いますけどちゃんとボタン押せますよ(*ˊૢᵕˋૢ*)(*ˊૢᵕˋૢ*)(  ૢ⁼̴̤̆ ꇴ ⁼̴̤̆ ૢ)~ෆ

vanillaice (Akira)
Akira
2015/09/02 (Wed) 18:58

To なつきさん

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

やっぱり少し大きくした方が良いのかもしれないですよね。
女性はネイルなんかがあるのでいい感じに軽く押すけれど(笑)
主人は興味が無いなりに
「もう少し左にあった方が押しやすいんじゃねーの。あとちっさい。」
って申しておりました((((笑)

sawa@Akiraマネージャー(笑)
2015/09/02 (Wed) 19:22

スクロールボタンのこと

晩ご飯終わりました(笑)から確認してみましたが

背景画像のブレとnew!マークは承知致しました~ ^^

でね、スクロールボタンなんですけど、いまサイズをとりあえず12pxにして

指と先の細いタッチペンでポイントを何度も変えて操作してみましたけど、やっぱりダブルタップが必要なんです。
ちなみに iPhone6+iOS 8_4_1+Safari です。

1回目のタップでMENU等文字が薄くなるだけでアクションは起こらず、もう1度のタップで動きます。

ボタンサイズは12pxが好みな私です(笑)
ちなみにおデブじゃありません(爆)


Akira
2015/09/02 (Wed) 20:45

To sawa@Akiraマネージャー(笑)さん

出先からですー!
情報入ったのでご報告。

マネージャー!
iOS8 4.1のバグだそうですよ!(笑)
帰宅したらURL貼りますー!

sawa@Akiraマネージャー(笑)
2015/09/02 (Wed) 20:55

やっぱり!

私もバグ情報掴みました(爆)
リンク全部ダブルタップが必要になっちゃってます~ (・・,)グスン
面倒だわぁ iPhone捨てようかしら (´ヘ`;)ハァ
お騒がせ致しました~ m(_ _)m

vanillaice (Akira)
Akira
2015/09/02 (Wed) 21:30

To sawa@Akiraマネージャー(笑)さん

いやいや。sawaさんが言ってくれなかったらきっと一生気づかなかった (´・ω・`) ←
いつもありがとうです :)

しかしiPhoneバグ多いなー ( ̄∀ ̄;)

sawa@Akiraマネージャー(笑)
2015/09/02 (Wed) 23:09

とりあえずの解決方法

とりあえずの解決方法を考えて来ました(笑) 

CSSでlinkの

a:hover {
opacity: .4;
}

 を

a:hover {
opacity: 1 ;
}

でダブルタップを回避出来ました~
ご参考まで~ (^_-)vブイ

Akira
2015/09/02 (Wed) 23:25

To sawa@Akiraマネージャー(笑)さん

hoverがついてると… みたいなことなの?かな?
えー ( ̄∀ ̄;)
感圧タッチ開発中のその関係かなー。
hoverに不具合出して感圧なんてできるんかい(笑)
不安 ( ̄∀ ̄;)

Akira
2015/09/03 (Thu) 00:13

To sawa@Akiraマネージャー(笑)さん

sawaさん…。
iPhoneのフッター広告が一番下までスクロールすると上に移動するよ…。
いつから?(笑)
ちょっとヤダー!なにこれ ((((´=д=`)))))

ちなみにiPhone5ではなりません。
えー!(笑)

-------------

と思ったらまた戻った…。
絶対上にあったよ。
スクショ取り忘れた… 無念(笑)
なんだったんや…。

さくら
2015/09/13 (Sun) 17:05

カレンダー

とてもすてきなテンプレートで
ダウンロードさせてもらおうと思ったのですが
サイドバーのカレンダー
大 小 二つあるのですが
小さい方を消すわけにはいかないのでしょうか。
PC初心者で何もわからずコメントしています。
もしできるのでしたらやり方など
ご教示願えないでしょうか。

vanillaice (Akira)
Akira
2015/09/13 (Sun) 20:14

To さくらさん

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

> カレンダー ダブル表示の件

一番上のカレンダーはテンプレ内のものですが、もう一つの「小さい方」はテンプレとは無関係な「公式プラグイン」ではないかと思います。
個人設定から外して頂くことが可能です。

ブログ管理画面「プラグインの設定」を開きまして、カレンダーのラジオボタンのチェックを外し、設定ボタンをクリックです。
よろしくお願いします :)

さくら
2015/09/26 (Sat) 22:19

取れました!

ありがとうございました。
お借りしますのでよろしくお願いします。

vanillaice (Akira)
Akira
2015/09/27 (Sun) 08:21

To さくらさん

ご報告ありがとうございます。
安心しました。お疲れ様でした :)

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