Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

Grace

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


valid-html5.png



更新履歴 2016.1.10


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


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



更新履歴 2015.12.4


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

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


更新履歴 2015.9.22


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


-------- 追記 2015.9.19


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

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

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


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



ぐれいすemo


Sample トップ
Sample 個別

DOWNLOAD
FAQ



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="http://blog-imgs-82.fc2.com/v/a/n/vanillaice000/fade500tmbcompress.js"></script>

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


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

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



------------ 追記 2015.9.20


ご期待通り ← リジェクトされましたので(原因は違うけど) こちらにZIP置いておきます 記事の上の方にあります DOWNLOADクリックでどうぞ
特にコメント等必要ありません そのままお持ち帰りください
FC2さんにご指摘を頂いた(emo)箇所については訂正済みです



Colorbox適用版


Colorbox = ページ内画像拡大スクリプト
クリック ↓

sample

起動条件
<img>
<a>
で囲われており 同じアドレスが与えられている

ご利用頂けないパターン
・画像を「アルバムへリンク」している方
・画像ハイパーリンク(外部ページへの遷移)をご利用の方(ランキング, SNS, 拍手等含む)

仕様
・過去掲載画像の全てに適用されます

条件と照らしあわせてご利用の有無をお決めください
(上級者の方はデフォルトのhtmlへご自分でColorboxファイル適用されることをおすすめしています)

参考: Colorbox上級編

関連記事

Comments 9

There are no comments yet.
長谷川  
お世話になっています

字がかすれるんですね。Macなのでよくわかりません。
通ったら使わせて頂こうと思います。
これだけ高度なテンプレートなのに丁寧なサポートをここまでしてくれる作者って今までにいなかったと思います。
いい物を作り続けてこれからも宜しくお願いします。

2015/09/11 (Fri) 09:06 | EDIT | REPLY |   
長谷川  

Colobox版一足先に頂いて帰ります。
わからないところはまた聞きに来るかもしれませんがそのときは宜しくお願いします。

2015/09/11 (Fri) 09:08 | EDIT | REPLY |   
Akira  
To 長谷川さん

お返事遅くなりました (*_ _)

今iPhoneからですが、画面拡大しないようにするの忘れちゃった (´・ω・`)
ごめんなさい。書き換えます(笑)
お手数ですが再度DLお願いします ( ̄∀ ̄;)

----------

CSSの方だから関係ないんだった (´・ω・`)
公式の方修正しましたー。

2015/09/12 (Sat) 13:12 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/09/18 (Fri) 16:23 | EDIT | REPLY |   
Akira  
To テーブルの件 内緒さん

遅くなってしまいました!
明日改めて、記事にします。
たぶんその方が良いよね (´・ω・`)
長ったらしくなると思うので(笑)

2015/09/19 (Sat) 03:22 | EDIT | REPLY |   
長谷川  
こんばんわ

承認されなかったんですね。
昔からFC2はそういう体質があります。
ZIP頂いて行きます。
大切に使わせて頂きますo(^_^)o

2015/09/20 (Sun) 20:42 | EDIT | REPLY |   
Akira  
To 長谷川さん

はい。そうです(笑)
どうぞお持ちください。
お手数おかけします ^^;

2015/09/21 (Mon) 03:14 | EDIT | REPLY |   
ごぉにゃ  
始めまして

こんにちは。
まさに私が探し求めていたデザイン!
一から自分で作れないので、
本当に嬉しいデス。

多少変えたりもしていますが、
大事に使わさせていただきます(*^_^*)

2016/04/23 (Sat) 16:23 | EDIT | REPLY |   
Akira  
To ごぉにゃさん

こんにちは。
ご丁寧にコメント頂きありがとうございます

2016/04/24 (Sun) 11:11 | EDIT | REPLY |   

Leave a reply

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