Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

OnTheGroundテンプレート


名称 OnTheGround
カラム数 1 と 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー
記事幅 可変 最大940px(内寸 860px)
サイドバー幅 300px 固定
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = RSS設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
Browser SupportIn principle, current and previous version

Chrome

Firefox

Safari

Opera

Edge

IE11

License
Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム 背景変更

valid-html5.png



更新履歴 2017.1.25


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

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


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



更新履歴 2016.10.11


メンテナンス

・ 全体レイアウトの見直し, 調整
・ 主要公式プラグインの整形
・ 関連記事サムネイルの整形
・ ベンダープレフィックスの整理
・その他微調整


更新履歴 2016.1.9


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


更新履歴 2015.11.22


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


更新履歴 2015.9.21


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


更新履歴 2015.9.9


・ 公式化に伴うOGP削除

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


------ 以下本文


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


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


TOP PAGE DEMO
LIST PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ




これまでのシリーズの違いなど

・ スマホからの操作性向上
・ サイドバーはスマホサイズになるとメインコンテンツ下へ繰り越し 背景色「白」が追加されます
・ カレンダーとサイト内検索を追加しました
・ 画像にクラス追加でドロップシャドウがつきます


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



今までのものと大きな違いはありません
Javascriptの利用は最小限に留めています
ちょっと寂しい気がしましたので ブログタイトルだけCSSエフェクトを付けておきました

最初は和風な感じだったんですけどね
ガチンコの「和」になってしまいまして
…神社・仏閣ブログ?? (´・ω・`) みたいな
そこで英語テキストなんかを入れて方向転換(笑)

パソコン閲覧時 サイドバーに背景はつけていませんが
スマホの狭い画面だと背景画像と文字が重なりますので
読みにくいので白背景をつけています


スマホ版の非表示選択ができるようになりましたので
レスポンシブでお使いになられます方は

環境設定 > ブログの設定 > スマホ版の表示設定

sample

こちらで個人設定をお願いします

続きまして今度は PC版とスマホ版を分けてお使いになる方に向けての説明です
下の項目に「スマートフォン版への案内~」というのがありますが
テンプレのデフォルトでは表示させないようになっていますので ここの設定だけでは出てきません
テンプレの右上にモバイル版への誘導ボタンは用意してありますが
バーの表示を行いたい方はお手数ですが以下の文字列をCtrl+Fキーで検索されまして カスタマイズナビに従ってください
(このページからのコピーは ドラッグ選択後 Ctrl+Cキーでどうぞ)

「スマートフォン版で表示」を出したい場合ここから削除

iphoneontheground.jpg


画像にドロップシャドウは自動でつけるようにはしてありません
みなさんが画像を記事に貼り付けされます際に

<a href="画像アドレス" target="_blank"><img src="画像アドレス" alt="onthewe-compressed.jpg" border="0" width="1000" height="666" class="shadow-attachment" /></a>

class="shadow-attachment"
を追加してください
ちょっと長ったらしいですけれども クラス名が他と偶然同じだったりすると
レイアウトがグッチャグチャに崩れてしまいますので それを避けるためでございます (´・ω・`)




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


みなさんいつもありがとうですー!


-------------- 追記 2015.9.2


iPhone不具合情報 ( ̄∀ ̄;)
(sawaさん情報提供あざす!)

ページtopボタンを二度押ししないと動作しない というiPhone iOS8.4.1 バグがあるそうです
iPhoneでもiOS8.4.1以外は発生しません
詳細(って言ってもたいしたこと書いてない)はコチラ ↓

リンク二度押ししないと反応しない方「iOS8.4.1バグ」

こういった情報はとても助かりますー
「なんかおかしいぞ?」と思われましたら臆せずご報告ください
デバイスバグの場合もありますし 個人環境に起因する場合 そして私のミスの場合もあります どうぞ気兼ねなさらずお申し付けくださいね


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

Comments 17

There are no comments yet.
sawa  
いただいてきました~(笑)

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

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

追記です。
他に・・・

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

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

2015/09/02 (Wed) 17:17 | EDIT | REPLY |   
Akira  
To sawaさん

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

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

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

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

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

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

2015/09/02 (Wed) 18:13 | EDIT | REPLY |   
Akira  
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-->

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

2015/09/02 (Wed) 18:20 | EDIT | REPLY |   
Akira  

今主人のでやりました (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:28 | EDIT | REPLY |   
なつき  
こんばんわ~

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

2015/09/02 (Wed) 18:49 | EDIT | REPLY |   
Akira  
To なつきさん

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

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

2015/09/02 (Wed) 18:58 | EDIT | REPLY |   
sawa@Akiraマネージャー(笑)  
スクロールボタンのこと

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

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

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

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

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

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


2015/09/02 (Wed) 19:22 | EDIT | REPLY |   
Akira  
To sawa@Akiraマネージャー(笑)さん

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

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

2015/09/02 (Wed) 20:45 | EDIT | REPLY |   
sawa@Akiraマネージャー(笑)  
やっぱり!

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

2015/09/02 (Wed) 20:55 | EDIT | REPLY |   
Akira  
To sawa@Akiraマネージャー(笑)さん

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

しかしiPhoneバグ多いなーe-351

2015/09/02 (Wed) 21:30 | EDIT | REPLY |   
sawa@Akiraマネージャー(笑)  
とりあえずの解決方法

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

CSSでlinkの

a:hover {
opacity: .4;
}

 を

a:hover {
opacity: 1 ;
}

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

2015/09/02 (Wed) 23:09 | EDIT | REPLY |   
Akira  
To sawa@Akiraマネージャー(笑)さん

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

2015/09/02 (Wed) 23:25 | EDIT | REPLY |   
Akira  
To sawa@Akiraマネージャー(笑)さん

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

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

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

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

2015/09/03 (Thu) 00:13 | EDIT | REPLY |   
さくら  
カレンダー

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

2015/09/13 (Sun) 17:05 | EDIT | REPLY |   
Akira  
To さくらさん

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

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

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

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

2015/09/13 (Sun) 20:14 | EDIT | REPLY |   
さくら  
取れました!

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

2015/09/26 (Sat) 22:19 | EDIT | REPLY |   
Akira  
To さくらさん

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

2015/09/27 (Sun) 08:21 | EDIT | REPLY |   

Leave a reply

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