Grace(ブログ内限定配布)

Grace(ブログ内限定配布)

ブログ内限定配布
2015/09/10
vanillaice (Akira)
vanillaice (Akira)
HTML5 CSS3 RWD Limited

配布終了致しました。

Grace

名称 Grace
カラム数 1 と 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー 右/ ブラウザ縮小・スマホ 下
記事幅 可変 最大1176px (内寸 1096px)
サイドバー幅 300px (内寸 260px)
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = RSS設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
Windows/ Mac
Chrome Firefox Safari Opera Edge IE
×
サイドバーのスクロール不全
推奨カスタム 背景色変更


valid-html5.png



更新履歴 2017.10.5


SSL化に伴うURL正規化及び混在コンテンツ排除


更新履歴 2016.1.10


タイトルタグを微調整しました(SEO対策)
新着サムネイル復活しました


更新履歴 2015.12.4


Google feed api 廃止に伴う新着サムネイル仕様変更

Google自体がこちらのAPIを排除してしまいましたので
この日付以前にDL頂きました方については新着サムネイルが反映されません
お手数ですが再DLをお願い致します


更新履歴 2015.9.22


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




リジェクト食らいましたわ (´・ω・`)
理由 = FC2検索バーをイジってるから

マジか(笑)
まあそうだわな (´・ω・`)
だから書いたらマズいんやろなー と思っておりましたわ
でもはみ出てるじゃん! じゃあ直してくれよemo
タブレットユーザーないがしろにすんなよemo

というわけでケチがつきましたので限定にします
残念ですが 過去テンプレも修正します... はぁ... 萎えるぜお...
ファイル等の掲載しばしお待ちくださいませ
記事の最後に掲載しました


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



ぐれいすemo


Sample トップ
Sample 個別


th_36365.jpg


仕様

・ Internet Explorer ユーザーさんごめんなさい
・ サイドバーは下まで行くと固定されます
・ トップページはグリッドレイアウト
・ ブラウザ縮小,スマホ ではナビゲーションバー上部固定
・ img に class="shadow-attachment" 追加で画像にドロップシャドウ
ZIPファイルにはhtmlファイルが2つ CSSファイルが1つ入っています
htmlファイルはデフォルトとColorbox適用版です


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



IEのスクロール不全について


またしてもガクブル現象
原因はなんとなくわかってるけど直しきらんemoji
もうあきらめたemoji
Windows10 IEだけかなー (´・ω・`)
Windows7, 8 のときは問題なかったはず… もうアップグレードしちゃったから確認の術がございません
IE切りはちょっと無謀かもしれませんが まあいいじゃん ←
ご納得頂ける方のみお使いください(すみません)
今回のテーマは"ボトムアンカー(サイドバーがコンテンツより短いときに下で止まる)作ろうぜ"ですので
いまさら方針変更したくないです 重ね重ねすみません(汗)


-------- 2015.9.12 追記

友人にお願いしてWindows7, 8での動作確認をしてもらったところ
Windows10 以外でそういった症状はないようです
10は移動系のスクリプトやプロパティに気になるところが多々…
Windows10の方はMicrosoft Edgeでお願いします(笑)


----------- 以上 追記致しました


トップページのタイトルについて


今回はメイソンリーではなくグリッドを採用していますので
タイトルの文字数に縦幅を左右されるとサイズが揃わなくなってしまいます
よってサイズ超過した場合には

三点リーダ表示で省略されます

* グリッド = 方眼レイアウト/ メイソンリー = サイズ違いをタイル状に並べるレイアウト


ページtop/ bottomボタンについて


これちょっと前から気になって記事にもしているのですが
長文が多い方 コメント数が多い方で スマホ版を非表示にしてレスポンシブでご利用の方
まあ… スマホ版が設定されていても閲覧する方はPC版でご覧になるかもしれませんのでアレですが

スクロールして該当位置までスルスルーっと移動するのがスムーススクロールボタンですよね
スマホではあまりに縦幅が長いと表示が追いつかずにブラウザダウンしてしまうことがあります
動作を秒数指定しているのでそういうことが起ります
縦1000px移動と 縦8000pxの移動とがあったとして
動作完了までの時間を 500ミリ秒 とかね (´・ω・`)
すると距離が短い場合にはゆっくり 長い場合にはスピード早っ! みたいな感じです

もうあらかじめ環境がわかっている方はこのスムーススクロールのJavascriptを変更してください(任意です)
その代わりスマホよりも高スペックなパソコン環境からは
なんかえらいゆっくり移動すんねんなー (´・ω・`)
ってことになります
ご自分の環境と照らし合わせてお決めください

Ctrl+Fキーで以下の文字列を検索
<script src="https://blog-imgs-82.fc2.com/v/a/n/vanillaice000/fade500tmbcompress.js"></script>

ファイル差し替えで以下の通り
<script src="https://blog-imgs-82.fc2.com/v/a/n/vanillaice000/cons_rate_scroll10_800tmb.js"></script>


動作完了までの秒数でなく 移動速度を指定していますので
スマホブラウザが落ちる というのはまず起こらないと思います
私のこのページなんかはもうかなり厳しいです ↓

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

9.10 現在 当ブログで同じ Graceを設定して スクロールだけ変えていますので
動作をご確認の上 変更されます方はどうぞ


ページ遷移エフェクトについて


今回は自分なりに動作を軽量化してみました
それでも「重い」「遅い」と感じられます方は 以下の文字列を目印に訳注に従ってエフェクト削除をしてください(記述削除)

HTMLソース内
<!-- 注)ページ遷移アクション不要の方ここから削除 -->

CSSソース内
/* 注)ページ遷移エフェクト不要の方ここから削除 */


計2箇所です


コメント欄の訪問者URLについて


ちょっとアドバイス頂きまして
訪問者さんのブログにジャンプするのは 別窓の方が良いんじゃない? 的な
私もそう思います(笑)
私が個人で使うバージョンについては target="_blank" で開くようにしました
で みなさんに配布するバージョンなんですけども
FC2の変数が別窓で開くようにできていないんですよね (´・ω・`)
なので私はJavascript使ってやってるわけです
んー どうしようかと悩みましたが
カスタマイズされる際に困ることにもなろうかと 変数見ながらみなさんたぶんやるよね (´・ω・`)
ということで 配布するものについては従来通りFC2変数に倣う形にしておきますね


フォントについて


最優先フォントを 游ゴシック に設定しています
かすれるから変えたんじゃねーのかよ 懲りねーな ●`з´●
とか言わないのー (´・ω・`)
リクエスト頂きまして このテンプレにはやっぱこのフォントじゃね? と((((笑)
そうですね メイリオではちょっと寂しいかな ^^;
デフォルトはこのままにしておきます
かすれが気になる方は変更お願いします
Ctrl+Fキー検索

body { /* 注)基本フォント関連 */
  background-color: rgb(243,243,243);
  font-size: 13px;
  color: rgb(51,51,51);
  line-height: 1.7;
  font-family: 'PT Sans', '游ゴシック', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif;
}

下から二番目の行 font-family を以下の通り修正

  font-family: 'PT Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, '游ゴシック', 'Yu Gothic', sans-serif;



------

えっと まだ申請していません (´・ω・`) 申請しましたー
なんかねー 説明サムネイルが壊れちゃうんです
様子見て今日・明日中に申請しまーす ( ゚Д゚)ノ

IEがアレでソレなのでリジェクトくらうかもしんない
その際にはブログ内限定配布でー (´・ω・`)
みなさんいつもありがとうございます!
ブログ内限定配布