vanillaice (Akira)

vanillaice (Akira)

Velonicaテンプレート


名称 Velonica
カラム数 2
プラグイン対応 ○ (右サイドメニュー)
レスポンシブ対応
サイドメニュー デフォルト 右
記事幅 可変 最大 810px (内寸 730px)
サイドバー幅 固定 300px (内寸 260px)
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
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 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム 非推奨 etc.


valid-html5.png


今年の夏は例年の旅行に加え、キャンプに行く予定です
なんでこの歳でキャンプ!!! すっげーヤダし!!!
(相方と長男がやる気満々)



ゔぇろにか ← 心象風景
承認されました。ありがとうございます。



TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ



仕様
・トップページはグリッドレイアウト (注: IE11でCSS装飾不備あり 後述)
・要約表示タイプ
・サイドメニュー スクロールアンカー


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・トップページの表示タイプ変更・レイアウト変更(要約表示から全文表示へ変更, カラム数変更 など)
・レスポンシブの固定幅化。
・テンプレートと無関係なプラグイン導入のお手伝い。


カスタマイズをブラウザ上で行う方は
Ctrl+F(Windows)/ Command+F(Mac) キー検索をご利用ください
また
注)
で検索されますとカスタマイズのガイダンスが出てきますので事前にご確認をお願いします



IE11でのCSS装飾不備について

トップページの各記事はマウスオーバーで背景にぼかしがかかりますが、IE11についてはblurのCSSが未実装ですのでぼかしはかかりません。
IEは開発が終了していますので「そのうち正しく表示されるかもしれない」という可能性はゼロです
同ベンダーのMicrosoft Edgeはblur実装済み、動作確認済みです。


カスタマイズ非推奨です

個別記事は特に問題ありませんが、トップページの方。
文字を大きくするだけで体裁が壊れてしまいます(程度にもよりますが)
複雑な入れ子構造にもなっていますので、結構苦労するかもしれません (´・ω・`)
もちろん腕に覚えのある方は自由に変更して頂いて構いません。
どうしても文字サイズを変更したい方(大きくしたい方)は

var e=100

緑の数字が表示文字数の指定ですので、ここを少ない数字に変更して頂くと良いかな、と思います。


サイドバーのドロワーについて

一定の横幅を下回ると、右にあるサイドメニューが折りたたみ(ドロワー)に変更されます。
今回はJSではなくCSSでの実装なのですが、パソコンではドロワー内のスクロール内容が終わるとそのままメイン側がスクロールを始めますので 二重スクロールバー状態になってしまいます。
それを避けるためにデフォルトでは メインにスクロールストップ をかけてます。
ところがJSとは異なり、現在地のままではなくページ最上部までメインが戻ってしまいます。
強制最上部と二重スクロールバー、どちらがよりウザいか、って話しになるんだけども (´・ω・`)
動作をご確認頂きまして、この挙動が嫌だなぁとお感じになる方は

<div id="wrapper" class="pc-control">

緑のクラスを 削除 してください。
以下のようになっていればOKです。

<div id="wrapper">

その代わり二重スクロールバー(笑)
すみません ^^;


サイドバーのアコーディオンについて

今度は左右ドロワーではなく上下に開閉するアコーディオンの方。
プラグイン3へ登録されているものはアコーディオン対象外 にしてあります。
全て折りたたむ場合には全プラグインをカテゴリ1 or 2 へ移動させるか、移動が面倒な方はあるいは

<div class="non-side-drawer">

緑の文字列を削除して以下になるよう修正してください。

<div class="side-drawer">

アコーディオン不要の方は

<!-- 注)サイドメニュー折りたたみ不要の方ここから削除 -->

上記を目印にガイダンスに従って該当項目を 削除
続いて

.side-drawer

で検索するとCSSソース内に1箇所ありますので、その括りの

display: none;

の一行を 削除
全2手順でお願いします。

修正については以上です。
ページ遷移の際はアコーディオンの開閉状態を保持したまま移動します。
クッキーによって一定期間は状態保存が行われます。


No image画像変更

個人環境設定の「サムネイル代替画像の設定」で指定したものが優先されますが、この機能を利用しない方向けにデフォルト設定を行っています。
今回はNo imageとしてだけでなく、全記事リストページ(INDEX)の ページ送りの背景 にも設定してあります。

//blog-imgs-106.fc2.com/v/a/n/vanillaice000/veronicanoimageth.jpg

htmlソース内に1箇所、CSSソース内に1箇所、合2箇所あります。
html内のものはトップページのNo image画像、CSSのものはページ送り背景です。

縮尺掲載, 1000×666, 54KB, public domain




ナビゲーション内「About」について
こちらは予備リンクです。
誘導したいページがあれば、About を適切なテキストに置き換えた上で、リンクアドレスを設定してください。
不要であれば削除。

該当部位検索
注)予備リンク

カスタマイズ
<li><a href="ここにリンクアドレス">テキスト</a>


デフォルトのままでは空リンクですので、削除あるいはリンク設定いずれかの処理をおすすめします。


ドミナントカラー

以下が基本色調です
数字の部分だけを抜き出してCtrl+F(Windows)/ Command+F(Mac) キー検索されますと 不透明度つきのものも全て出てきますので上手に活用してください。

例) 51,51,51


rgb(142,105,145) 基本リンク色 など
rgb(240,240,240) 全体背景色 など
rgb(62,54,88) ページ送り背景色 など


管理人コメントと訪問者コメントを分ける方
デフォルトはグレー背景アイコン。
サンプル




CSSソース末尾に以下を追加

.name管理人ハンドルネーム:before {
  background-color: カラーコード;
}

管理人ハンドルネーム の部分は普段コメント欄でお使いのお名前に差し替えてください。
カラーコードは rgb(●,●,●) の10進数表記 #●●●●●● の16進数表記のどちらでも構いません。
サンプルのカラーコードは rgb(148,170,201)

プロフィール画像などを設定する場合は以下の通り。

.name管理人ハンドルネーム:before {
  content: "";
  background: url(画像アドレス) center center /cover no-repeat;
}


サンプル



* この方法をお使い頂けないハンドルネームの方 *
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)
注意) ハンドルネームを判別してデザインを振り分けています。
同じハンネの方がコメントされますと管理人のそれと同じデザインを踏んでしまいますので割りきってお使いください。



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




みなさんいつもありがとうございます (●'0'●)/
関連記事
Posted by

Comments 10

There are no comments yet.
べえ  

はじめましてべえといいます。

かっこよいテンプレートですね。初めてレスポンシブデザインのテンプレートに変更
しました。ありがとうございます。
サイドバーのアコーディオンを変更してみましたが、ちょっと手間取りました。
とても参考になるブログで、勉強になります。まだまだ試行錯誤中ですので、
テンプレートを変更するかもしれませんが、これからもよろしくお願いいたします。

ところで、キャンプは楽しいですが夏は暑くて厳しいですね。今週末に行く予定ですが、
USB扇風機3台持っていきますw

2017/08/04 (Fri) 01:24 | EDIT | REPLY |   
Akira  
To べえさん

ありがとうございます

カスタマイズお疲れ様でした。
少しでもお役に立てましたら幸いですー。

キャンプ…。結局相方に懇願してコテージに変更してもらいました。
ヘタレと呼ぶなら呼べば良いさ、って感じで(笑)
あと、チーズフォンデュをする予定なのですが、野外だとばかり。
コテージだから室内でした。
「それキャンプじゃなくね (;`ー´)o」
って発言したら大ブーイングくらいました(微笑み)
とりあえず頑張りまーす(なにをどう頑張るかもわかってないけど)

2017/08/04 (Fri) 01:47 | EDIT | REPLY |   
べえ  
1ヶ月使いました。

こんにちは。

一ヶ月使った結果ですが、8月は毎年アクセスが落ちる時期なんですが、
7月の倍くらい来ました ^^ 7月はPCからのアクセスのほうが6割以上
でしたが、8月はスマホが70%くらいと大逆転です。
ありがとうございました。

古い画像が小さい記事で、サムネイルを取得できない不具合がある
のですが、これはFC2の関数自体が悪いのでしょうか?
ちなみに120×90くらいの画像を使った記事です。

2017/09/11 (Mon) 20:24 | EDIT | REPLY |   
Akira  
To べえさん

こんばんは (●'0'●)/

アクセスについては、べえさんが良い記事を書かれているということに他なりません。
こちらこそご利用頂き光栄です

> 古い画像が小さい記事で、サムネイルを取得できない不具合がある〜

拝見しますので該当ページのURLをいくつかお知らせください。
FC2独自変数の仕様自体は「極小画像は対象外」といった縛りはありませんので、何か別の原因があるかと思います。

2017/09/11 (Mon) 23:07 | EDIT | REPLY |   
べえ  

 お返事ありがとうございます。

 とりあえず、URLを書いておきます。特に小さな画像で記事を
書いてある初期のものだけのようです。
http://beebaku.blog88.fc2.com/blog-entry-37.html
http://beebaku.blog88.fc2.com/blog-entry-40.html
http://beebaku.blog88.fc2.com/blog-entry-41.html
http://beebaku.blog88.fc2.com/blog-entry-59.html

2017/09/11 (Mon) 23:25 | EDIT | REPLY |   
Akira  
To べえさん

拝見しました。
この原因は「ファイル名称にカッコが付いているため」です。

参考記事
http://vanillaice000.blog.fc2.com/blog-entry-467.html

ちょっと記事内容が古く、若干の仕様変更が入ってますので書き換えなければいけないのですが、ファイル名カッコについては以前と同じくサムネイル対象から外れます。
対策としてはファイル名変更しかありません。
よろしくお願いします (o'ω')ノ

2017/09/11 (Mon) 23:30 | EDIT | REPLY |   
べえ  

お返事ありがとうございます。

ちょうど画像がものすごく小さく、修正しようかと思っていたところですので、
不具合のある画像を差し替えます。ありがとうございました。

2017/09/12 (Tue) 01:54 | EDIT | REPLY |   
Akira  
To べえさん

そうですね。それが一番だと思います。
お疲れ様です

2017/09/12 (Tue) 23:40 | EDIT | REPLY |   
べえ  
できました

こんにちは。

画像を差し替えたら確かに直りました。ありがとうございます。

2017/09/13 (Wed) 21:06 | EDIT | REPLY |   
Akira  
To べえさん

「カッコつき名称は対象外」という特徴は当面変わらないと思いますので、名称を付ける際には今後もご注意くださいね。
お疲れ様です

2017/09/13 (Wed) 21:25 | EDIT | REPLY |   

Leave a reply

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