Grace(ブログ内限定配布)
2015年09月10日
配布終了致しました。
| 名称 | Grace |
| カラム数 | 1 と 2 |
| プラグイン対応 | ○（サイドバー集約型） |
| レスポンシブ対応 | ○ |
| サイドバー | 右/ ブラウザ縮小・スマホ 下 |
| 記事幅 | 可変 最大1176px (内寸 1096px) |
| サイドバー幅 | 300px (内寸 260px) |
| 任意個人設定 | レスポンシブ利用 = スマホ版非表示設定 新着サムネイル利用 = RSS設定 SNSシェアボタン利用 = メタタグ設定 |
| その他 | FC2検索バー非表示推奨 |
| Chrome | Firefox | Safari | Opera | Edge | IE |
|---|---|---|---|---|---|
| ○ | ○ | ○ | ○ | ○ | × サイドバーのスクロール不全 |
| 推奨カスタム | 背景色変更 |
更新履歴 2017.10.5
SSL化に伴うURL正規化及び混在コンテンツ排除
リジェクト食らいましたわ (´・ω・｀)
理由 = FC2検索バーをイジってるから
マジか(笑)
まあそうだわな (´・ω・｀)
だから書いたらマズいんやろなー と思っておりましたわ
でもはみ出てるじゃん！ じゃあ直してくれよ
タブレットユーザーないがしろにすんなよ
というわけでケチがつきましたので限定にします
残念ですが 過去テンプレも修正します... はぁ... 萎えるぜお...
ファイル等の掲載しばしお待ちくださいませ
記事の最後に掲載しました
----------- 以下本文
ぐれいす
Sample トップ
Sample 個別
仕様
・ Internet Explorer ユーザーさんごめんなさい
・ サイドバーは下まで行くと固定されます
・ トップページはグリッドレイアウト
・ ブラウザ縮小,スマホ ではナビゲーションバー上部固定
・ img に class="shadow-attachment" 追加で画像にドロップシャドウ
・ZIPファイルにはhtmlファイルが2つ CSSファイルが1つ入っています
htmlファイルはデフォルトとColorbox適用版です
・ サイドバーは下まで行くと固定されます
・ トップページはグリッドレイアウト
・ ブラウザ縮小,スマホ ではナビゲーションバー上部固定
・ img に class="shadow-attachment" 追加で画像にドロップシャドウ
・
htmlファイルはデフォルトとColorbox適用版です
お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・サイドバーの形状変更
・トップページの表示タイプ変更(グリッドからメイソンリー or 全文表示へ変更など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更
・トップページの表示タイプ変更(グリッドからメイソンリー or 全文表示へ変更など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更
IEのスクロール不全について
またしてもガクブル現象
原因はなんとなくわかってるけど直しきらん
もうあきらめた
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がアレでソレなのでリジェクトくらうかもしんない
その際にはブログ内限定配布でー (´・ω・｀)
みなさんいつもありがとうございます！
関連する記事
