vanillaice (Akira)

vanillaice (Akira)

2017.10.5 配布終了致しました

長い間ご利用頂きありがとうございました


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



2016.10.28 ブログ内限定配布に切り替え致しました

DOWNLOAD のボタンを押すとテキストファイル1点 CSSファイル1点 計2点の入ったZipフォルダをダウンロードして頂けます
.htmlでなく.txtのファイルなのは 変換を防ぐための処理ですので
htmlエディターをお持ちで無い方は

ブラウザ上にドラッグ&ドロップ

Ctrl+A(Windows)/ Command+A(Mac) キーで全選択

Ctrl+C(Windows)/ Command+C(Mac) キーでコピー

Ctrl+V(Windows)/ Command+V(Mac) キーでテンプレート編集画面にペースト

という手順でお願いいます


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



botanical


名称 Botanical
カラム数 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応 × PC版のみ
サイドバー
記事幅 624px(内寸584px)
サイドバー幅 280px(内寸238px)
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = RSS設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
Windows/ Mac
Chrome Firefox Safari Opera IE11 IE10以下
難アリ いやもうホント(汗)
推奨カスタム ストライプ色変更


valid


更新履歴 2016.1.10


全体を微調整しました(SEO対策含む)


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



更新履歴 2015.9.22


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


更新履歴 2015.9.9


・ 画像軽量化
・ Javascript軽量化
・ 公式化に伴うOGP削除
・ FC2検索バーがタブレットでレイアウトを壊す問題に対処

リリース済テンプレ随時更新のお知らせ

お手数おかけします よろしくお願いします


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


2015.3.25 申請予定でございます (o'ω')ノ  承認されました ありがとうございます


Sample トップ
Sample 個別
DOWNLOAD(ZIP)

FAQ



まず Internet Explorer での表示について
こちらヒジョーに難アリです
ページ上部に写真が3枚表示されますが
下に日付が付いてますよね この日付が該当記事へのリンクになってます
これが ie では出ないのだわemo
ieは昔から position 関連タグが苦手ですね バグりますしね…
互換設定及びie8以下なんてひどいもんです(笑)
position 絡みの opacity, z-index もアカンですね ieは
此の辺のお話しは専門的になりますので割愛します
要は ie の方ごめんなさいemo ってことです


仕様
・ 最新画像表示は「現像中」をイメージして作成しました
・一度押したリンクがわかるようにしました
・画像の抽出は各記事の一番最初にあるものを一枚づつ 最大3枚の表示です (固定画像ではありません)
・ストライプ背景部分の色は変更可能です


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



=============== 画像の抽出について


1ページあたりの記事掲載数は任意で変更ができますが
最新画像表示 (洗濯バサミ) に掲載できるのは 3枚限定です
各記事から一枚づつ 一番最初に貼られているものを抜き出します
同じ記事から複数枚 というのはできません ご了承くださいませ

ページ内に画像掲載のある記事が3記事以下の場合
歯抜け状態になりますので こちらもご了承くださいね
必ずしも3枚表示されるわけではない ということです

同様に 同ページ内に画像掲載のある記事が3つ以上あっても
最大で3枚までの表示 ということでございます (o'д`o)ゝ


================ カスタマイズ


カスタムでご注意頂きたい点は

背景色の変更をされませんようお願い致します

洗濯バサミの素材がですね
画像サイズの調整のために わざと白の背景色をつけてあります
ブログ全体背景の色を変更されますと 素材周りが浮いてしまいますので
全体背景色は「白」限定 ということでお願いします (*_ _)
(記事内背景色は変更可)

その代わりというのもなんですが ストライプの部分は画像ではありませんので
色の変更を簡単にして頂けるようになっております

sample
sample


ストライプの色を変更されますと 他の色味も調整したくなるであろう
ということで CSSソース内に注訳をたくさん付けておきました



① 基本リンク色
② 記事の文字サイズ
③ 記事の文字色
④ ストライプの色
⑤ ブログ名のフォント
⑥ ブログ名文字サイズ
⑦ ブログ名文字色
⑧ 記事の見出しの色
⑨ Read More背景色
⑩ Read More文字色
⑪ 個別記事フッター背景色
⑫ 記事フッターリンク文字色
⑬ 関連記事・トラバ背景色
⑭ サイドバー各タイトル部分背景色
⑮ コメント投稿本文の背景色
⑯ submitボタン文字色
⑰ Submitボタン背景色
⑱ deleteボタン文字色
⑲ deleteボタン背景色
⑳ コメント投稿パスワードなどの背景色
㉑ フッターに並ぶボタンの色
㉒ トップ・ボトムボタンの色
㉓ ページ送りの背景色


上記内容は全て CSSソース(管理画面下の段です) に注訳として付けてありますのでご確認ください

sample

sample

sample

sample

sample



よろしくお願いたしますーemo



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


歯抜けはイヤっ!emo
な方へ向けてのTips (小技)

FC2の仕様で抜き出せるものは「サイズを問わず 記事の最初に掲載されている画像」
なので これを逆手に取る方法があります
記事には画像を載せたくないけれど アイキャッチとして洗濯バサミに吊るしたい
というとき 以下のような一文を記事の一番最初に貼り付けてください

<img src="画像パス" style="width: 0; height: auto;">


画像パス というのは画像のURLのことですね
FC2へアップロードした画像のみです 他ホスティング系サイトからの直リンク掲載は不可です

ゼロかけるゼロ ピクセルの画像を掲載する という手段でございます
ですから目には見えません
が 抽出は行われるので 洗濯バサミの方へは表示される という仕組みです

ただこれは個人的におすすめしません
閲覧される方が戸惑うことがありますよね
画像を見ようと思って開いたら 記事内のどこにもねーじゃねーかよ (´・ω・`)
的な((((笑)

あるいは 記事に例えば5枚の写真があるとします
そのうちの3番目に貼り付けたものがお気に入りなので アイキャッチとして吊るしたい
でも3番目だし…入れ替えると記事の内容に沿わなくなるし…
こんなときにも上の方法で 表示したい画像を 0 ✕ 0 サイズで貼り付けておく と
そゆことです (´・ω・`)


-------------- 追記 2015.4.13

sample

W3C HTML5 Valid
バリデーションクリア修正致しました



Colorbox適用版 html×1 (2016.1.13 現在最新)
この日付以前にDLされました方はお手数ですが公式から再DLの上html差し替えをお願いします


* Colorbox版 配布終了致しました
関連記事

Comments 9

There are no comments yet.
-  
管理人のみ閲覧できます

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

2015/03/26 (Thu) 00:15 | EDIT | REPLY |   
vanillaice (Akira)  
@内緒の「き」さんへ

お待たせ致しましたe-257
DL後に不備などありましたらご遠慮なくお申し付けくださいませe-454

画像の件
はい。FC2にアップロード、他サイトからのリンク表示に関わらず、画像にハイパーリンクがついていればマウスオーバーで画面が薄くなるようにしてあります。
FC2の仕様ではなく、私のテンプレ仕様です。

2015/03/26 (Thu) 10:41 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/03/27 (Fri) 01:47 | EDIT | REPLY |   
vanillaice (Akira)  
@内緒の「き」さんへ

ご丁寧にありがとうございますe-257

そうでしたか。
スペックのことももう少し考えないといかんですね ( ̄∀ ̄;)
みなさんの貴重なコメントがとってもヒントになることが多いです。
感謝ですe-348

2015/03/27 (Fri) 11:32 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/04/20 (Mon) 20:26 | EDIT | REPLY |   
Akira  
To 内緒の「S」さん

コメント欄の太字・斜体について

ご迷惑をおかけしております (*_ _)
この原因は私がCSSスタイリングで使用した「normalize CSS」にあると思います(ブラウザ間の特性を打ち消して揃えるための書式です)
申し訳ない ( ̄∀ ̄;)

以下をCSSソースの末尾に追加して頂くことで機能するかと思います。
(コピペでどうぞ)

strong, b {
font-weight: bold;
}


i {
font-style: italic;
}

2015/04/20 (Mon) 20:48 | EDIT | REPLY |   
Akira  

試しつつ投稿しましたが機能しました (o'д`o)ゝ

日本語のフォントの斜体については、該当フォントが斜体を用意しているかどうかによりますので、
斜体が存在しないフォントの場合には斜めになりません。
英字などのフォントは全て斜めになりますe-257

上記内容を追加して頂くと、過去投稿分も全てそれに倣います。

お手数おかけします。
よろしくお願いします (*_ _)

2015/04/20 (Mon) 20:50 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

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

2015/04/20 (Mon) 23:13 | EDIT | REPLY |   
Akira  
To 内緒の「S」さん

絵文字処理はご自分でされたんですね。
素晴らしいですーe-257
お手数おかけしました。
ありがとうございますe-454

2015/04/21 (Tue) 00:44 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
該当テンプレートの専用記事にお願いします。無関係な記事でのコメントはお控えください。
テンプレートカテゴリ