Vanilla-Sky - FC2ブログテンプレート

Vanilla-Skyテンプレート

Vanilla-Skyテンプレートはレスポンシブウェブデザインです。
パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。
「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。
設定ページ

名称
Vanilla-Sky
ゔぁにら すかい
動作確認ブラウザ
Google Chrome Firefox Safari Vivaldi Edge
ブログタイプ
全文
記事見出しレベル
h2 〜 h6
jQuery
Lazyloading
ダークテーマ対応
パン屑リスト
個別記事前後ページサムネイル
構造化マークアップ
その他機能
  • プロフィール + SNSリンクリスト
  • 画像にドロップシャドウ
  • YouTube動画縦横比固定
  • 見出し装飾
  • その他
使い方など詳細は ARTICLE DEMO 参照
Google fonts
Open Sans
Stalemate
Playfair Display
Lighthouse
ライセンス
Required 必須事項
  • Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
  • Modification 改変
  • Personal Use 個人利用
  • Commercial Use 商用利用
Forbidden 禁止事項
  • Distribution 再配布
  • Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
パソコン
タブレット
スマートフォン
最終更新 2023.10.3
  • 公式タグプラグインの位置ズレの対策
  • サムネイル付き関連記事リストを全体リンクに
更新履歴 2023.9.17
  • No imageの設定方法を変更
  • YouTube縦横比を自動調整
更新履歴 2023.8.7
  • Twitterアプリ名変更及びロゴ変更に対応
更新履歴 2023.7.18
  • IE用対応終了
  • Font Awesomeの利用を停止
  • テキストアニメーションを変更
  • プロフィール画像のアスペクト比を固定(CLS及びバリデートエラー防止のため)
  • jQueryの利用を停止, スクロールアンカーJSの利用を停止
  • カスタムプロパティ導入
  • SNSリンク追加
  • ユーザビリティの最適化
  • idセレクタによるスタイリングをclassセレクタに統一
  • RSSリンク削除
  • コメント削除アラート追加
  • 記事編集リンクをアイコン型に変更
  • その他UI調整

左右カラムの入れ替えや横幅の調整、色彩の変更等、簡単にできるようになりました。想定されるほとんどのCSSカスタマイズはスタイルシートの 注)主要カスタマイズ(variables) でできるかと思います。

カテゴリ階層表示とChromiumグリッチについては以下の記事をご覧ください。

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログ「親子カテゴリ」の階層の話とパンくずリスト

FC2ブログには 親子カテゴリ化 という機能があります。通常「親子」という場合には フォルダ階層(ディレクトリ) が関わっており、親のフォルダの下層に子のフォルダ、という形ですが、FC2では偽装しているだけで親も子も階層のレベルは同じですよ、というお話。パンくずリスト にも関わってきますので興味のある方はご覧ください。...

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

Chromium系ブラウザでページロード時にtransitionがかかってしまう件の対処

表現が難しいのだけれど、ページを表示したときに、「CSSが適用されている最中なのか?」と思わせるような挙動と言えば伝わるでしょうか。なんかガチャガチャとレイアウトが動いてから正常表示になるという感じの挙動というか。本記事はその原因と対策についてです。...

更新履歴 2022.1.6
  • FC2ブログ新機能「SEOアドバイザー」対応のためのhead要素記述方法変更
  • jQueryを3.6.0にアップデート

カスマイズ済みなどで再適用が困難な場合でもまずは修正済みテンプレートの再DLを行ってください。最新のhtmlと比較しての作業をおすすめします。

【head内容変更】
<head prefix を目印に検索し、このhead要素を最新バージョンのそれと差し替え。

【jQueryバージョンアップ】
/jquery/ の直後の数字を 3.6.0 に変更。

更新履歴 2020.5.29
  • ページ送りのJSを修正
更新履歴 2020.4.5
  • コメント返信のJS変更
  • jQueryを3.4.1にアップデート
更新履歴 2019.12.17
  • パーマリンク設定導入に伴う個別記事URL正規化
  • パーマリンク設定導入に伴うページ送り変更
更新履歴 2019.11.3
  • コメント主のリンク表示用JS及びデザインの変更
更新履歴 2019.7.31
  1. 管理画面経由で管理人名を装飾した際にテンプレートの返信ボタンレイアウトが崩れる件を修正
  2. 受信コメント一覧とコメント投稿フォームのセクションを統合
  3. コメント一覧の管理人ハンドルネームにクラス名を追加(カスタマイズ用)
  4. 記事範囲上下の余白をpaddingからmarginに変更(記事内でp要素を利用する方向け)

カスタマイズ済みなど、再DLが困難な方はお手数ですが以下の手順で修正を行ってください。また、作業の前に以下の記事をお読み頂いて、修正する・しないを決定してください。

【重要】テンプレートの変更点2つについてお知らせ

【重要】テンプレートの変更点2つについてお知らせ

既存テンプレートの以下の点について修正・変更をしたいと思います。 管理画面経由で管理人名に装飾をして コメント返信をした際に受信コメント欄のレイアウトが一部崩れる件を修正 受信コメント一覧とコメント投稿フォームのセクションを統合...

①について

</body> で検索するとhtml内に1箇所あります。この直前(すぐ上)に以下の内容を 追加

<!--permanent_area-->
<script>function add_str(arg){var str=document.getElementsByName("comment[title]")[0];str.value+=arg.title}</script>
<!--/permanent_area-->

続きまして <div class="comment-info"> で検索するとhtml内に1箇所あります。この文字列を含め title}</script> のすぐ下にある </div> まで(この文字列も含む)を以下の内容に 変更

<ul class="comment-info">
  <li><%comment_year>/<%comment_month>/<%comment_day> (<%comment_youbi>) <%comment_hour>:<%comment_minute>
  <!--comment_edit--><li><a href="<%comment_edit_link>" title="<%template_edit_comment>">EDIT</a><!--/comment_edit-->
  <li><!--comment_author--><!-- <!--/comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%comment_name>さん">REPLY</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a href="#comment_form" onclick="add_str(this);" title="To <%author_name>さん">REPLY</a><!--/comment_author-->
  <li><a href="#comment-top"><i class="fas fa-arrow-up"></i></a>
  <li><a href="#comment_form"><i class="fas fa-arrow-down"></i></a>
</ul>

続きましてスタイルシート末尾に以下の内容を 追加

.comment-info li {
  display: inline-block;
}

.comment-info li:not(:last-of-type)::after {
  content: "|";
  margin: 0 .4em;
}
②について

#community" で検索するとhtml内に1箇所ありますので #comment_form"変更

続きまして <!--/comment--> で検索し、そのすぐ下にある </article> から <div class="contents"> までを 削除

<!--/comment-->
<form action="./" method="post" name="comment_form" id="comment_form">

上記のような形になっていればOKです。

続いて <!-- コメント投稿ここまで --> で検索するとhtml内に1箇所あります。この直近、2行上にある </div>削除

</form>
</article>
<!-- コメント投稿ここまで -->

上記のような形になっていればOKです。

続いてスタイルシート末尾に以下の内容を 追加

#comment_form {
  padding-top: 40px;
}
③について

<div class="visitor-name">
で検索するとhtml内に1箇所あります。以下の通り変更(コメント一覧の管理人名を装飾しない方はこの作業は不要)

<div class="visitor-name<!--comment_author--> visitor-name-author<!--/comment_author-->">

テンプレートの背景色を反転(明色から暗色へ、など逆も然り)した際に管理画面上で装飾した管理人名の フォント色 が害になることがありますので、その場合にはスタイルシート内末尾に

.visitor-name-author .fc2_owner_comment {
color: カラーコード !important;
}

こうして背景色とバッティングしない文字色に変更することができます。必要がある方だけどうぞ。

④について

.inner-contents, で検索するとスタイルシート内に1箇所ありますのでこの文字列を 削除。以下のようになっていればOKです。

.contents {
  padding: 20px 0;
}

続いてスタイルシート末尾に以下を 追加

.inner-contents {
  margin: 20px 0;
}

.inner-contents p {
  margin: 1.9em 0;
}

記事内でp要素を利用している方向けなので必要がある方だけどうぞ。

以上です。よろしくお願いします。

更新履歴 2018.12.16
  • Font AwesomeのCSSバージョンを5.6.3にアップグレード
  • jQueryのバージョンを3.3.1にアップデート
  • レイアウト関連CSSの追加及び一部削除
  • 管理人コメントにプロフィールアイコンを自動出力
  • Google+ シェアアイコンの削除(2019年4月でサービス終了のため)
  • はてなブックマークシェアアイコン追加(Google+と差し替え)
  • コメント投稿欄を拡くしました
  • 別タブで開くリンクに noopener と noreferrer を追加(セキュリティ対策)
  • UA判別用JS削除(CSSに切り替え)

不具合修正ではありませんので旧バージョンのままお使い頂けます。注意点がありますので以下の記事を参照した上でアップデートをご検討ください。

【重要】テンプレートのアップデートについて, Font Awesomeについて

【重要】テンプレートのアップデートについて, Font Awesomeについて

既存テンプレートの一部に若干の修正を加えようと思っています。目的としては Google Adsenseのリンクユニットを記事内で掲載される方向けCSSの追加 Font Awesomeのアップグレード (注: SVGへの切り替えは無し) サイドメニュー部のinput要素のCSS調整 管理人コメントにプロフィールアイコンを自動出力 今回スピード対策は行いません。本当は同時に行うのが良いのでしょうが、今回は時間の都合もありますので次回以...

更新履歴 2018.1.12
  • メンテナンスを行いました

詳細は以下のページでご確認ください。

Vanilla-skyメンテナンスのお知らせ

Vanilla-skyメンテナンスのお知らせ

Vanilla-skyテンプレートのメンテンナスを行いました。 公式配布ソースは修正済みです。 不具合の修正ではありませんので、再度DLを行うか否か新仕様をご確認の上でお決めください。...

更新履歴 2017.4.17
  • iPhoneでfixedされたinputが固定されないバグのApple修正に伴いhackを削除
【重要】iPhoneでfixed指定されたinputが固定されないバグが解消されました

【重要】iPhoneでfixed指定されたinputが固定されないバグが解消されました

ナビゲーションが固定されており そのナビゲーションの中にサイト内検索が含まれているテンプレート全般に関係しています。 これまでiPhoneでは固定ナビゲーション内のinput要素をクリックすると、滞在中の位置から強制的にページ最上部まで引き戻される、というバグがありましたが、こちらが解消されています。 (iOS10.3.1)...

更新履歴 2017.3.1
  • コンテンツのピン留めJSとTwitterウィジェットJSが衝突する件を修正
更新履歴 2017.2.15
  • ページmiddleボタンが効かない件を修正

サイドメニューが下へ繰り越した際に出てくる「middle」のボタンを押しても何も起こらないミスの修正です
毎度申し訳ございません orz

Vanilla-Sky修正のお知らせ

Vanilla-Sky修正のお知らせ

んーと。いつ承認されたかでしょうか(KEMIO風に)昨日… かな… 今日?で、もう修正 (・υ・)ホントごめんなさい。ホントごめんなさい ページmiddleボタンが効かない件修正でございますー!右サイドメニューが下へ繰り越した際に出てくる middle のボタンですが、押しても何も起きませーん (´・ω・`)オブジェクトの名前を間違えたからでーす (´・ω・`) ←...

本ページの内容は2023年7月18日メンテナンス以降のバージョンが対象です。

学校役員なので毎日がめっちゃブルー、あきらでございます (;ωq`)

ゔぁにら すかい
2月9日 申請致しました。

サンプル

Samples

TOP PAGE DEMO
画像クリックでデモ画面へ
LIST PAGE DEMO
画像クリックでデモ画面へ
ARTICLE DEMO
画像クリックでデモ画面へ

カスタマイズのコツ

A few tips on customizing

1. カスタマイズ対象部位の見つけ方
カスタマイズをブラウザ上で行う方は
Ctrl + F --- Windows
Command + F --- Mac
キー検索を利用するとページ内の対象文字列をすぐに見つけることができます。

2. ご質問の前に
カスタマイズされるであろうと想定される部位については 予めガイダンスを付けてあります
注)
で検索すると出てきますので、カスタマイズ前にご確認ください。
もしかしたら既に答えが記されているかもしれません。

3. 全角スペースの利用に注意
ソースコードの見た目(文頭)を揃えるために 全角スペースを利用してしまう方が大変多いです
この全角使用が思わぬレイアウト崩れを引き起こすことがあります。
ソース内でスペースを打つ必要がある時はキーを押下する前に半角に変更する癖付けをしましょう。

お受けできないご質問・ご相談

I'm sorry I couldn't be of any help.

  • デフォルトテンプレートと無関係なhtml, CSS, JS等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き
  • アフィリエイトの都合を優先した仕様変更の指南

必須個人設定

Necessary personal settings

スマートフォン版の表示設定「利用しない」

スマートフォン版の表示設定「利用しない」

レスポンシブ設定。パソコン・タブレット・スマートフォンなど全てのデバイス閲覧を本テンプレートで共通化します。この設定を怠るとスマートフォンではスマートフォン専用テンプレートで表示されてしまいます。

検索バーの設定「利用しない」

検索バーの設定「利用しない」

タブレット端末で検索バーがビューポートを超過する(はみ出す)ため。

テンプレート共通カスタマイズ

Common customization.

ほぼ全てのテンプレートで共通する内容についは以下の記事をご参照ください。

テンプレート共通カスタマイズ

テンプレート共通カスタマイズ

* FC2提供全テンプレートを意味するものではありません。vanillaice(Akira)作テンプレートのみを指します。 2023年9月時点で共有されているテンプレートの、ほぼ全てに共通するカスタマイズ項目の説明です。...

記事編集リンクについて

The position of edit link.

記事編集リンクは 個別記事ヘッダー下の管理人アイコン をクリックすると別タブで開きます。

ご質問・ご相談時のお願い

Cautions before asking for something.

ご質問 不備・不具合のご報告はお気軽にどうぞ。
その際には

・ ご自身のブログアドレスの明記 (鍵付きで構いません)
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除

上記3点をお約束としてくださいね。
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします。

また、質問を投げっぱなしで放置する方は以降二度と回答することはありませんのでご理解をお願いします。

みなさんいつもありがとうございます (●'0'●)/

相槌
2017/02/09 (Thu) 11:11

No title

わー可愛い!素敵ですね
画像大きめ表示で華やかです〜
私は詩や短文中心なのでちょっと敷居高めですが…!汗

今設定されてるテンプレートもすごく綺麗です(*´︶`*) トップにaboutがくっ付いててお洒落!
こちらのリリースも楽しみに待ってます♡

vanillaice (Akira)
Akira
2017/02/09 (Thu) 17:32

To 相槌さん

ありがとうございます。
励みになります (●'0'●)/
現在設定しているものは調整中で、次回申請予定です。
よろしくお願いします :)

洸咲 和苗(コウサキ カナエ)
2017/02/17 (Fri) 12:52

Vanilla-Skyのトップページ表示について

Akiraさん、始めましてこんにちは。洸咲 和苗(こうさき かなえ)と申します。
こちらで提供されているテンプレートは、どれも洗練されており使い勝手も良く、いつも大変重宝しています。
今回リリースされました、こちらのVanilla-Skyも早速ダウンロードさせていただきました。
大変見やすい表示となり、とても気に入っております。

今回は、Vanilla-Skyのトップページ表示について質問がございます。
こちらのページにありますTOP PAGE DEMOでは、各記事ごとにアイキャッチ画像のような写真が表示されているのですが、これはどのように画像を設定をすれば表示がされるようになるのでしょうか。

今までは、Alternativeを愛用しておりまして、こちらではFC2ブログ管理画面から新しく記事を書くから設定できる「メタタグ編集→アイキャッチ画像→アイキャッチ画像を選択する」で画像を設定をすればトップページにはその画像が表示されておりました。

しかし、今回こちらのVanilla-Skyを適用したところ、トップページの各記事では画像が表示されなかったため、私の認識や設定に何か誤りがあるのだろうと考えているのですが、お恥ずかしながら分からないままでございます。

どのようにすれば、こちらのTOP PAGE DEMOのように各記事ごとに写真が表示されるのかご教示頂ければ幸いです。
お忙しい中恐縮ではございますが、何卒よろしくお願いいたします。

vanillaice (Akira)
Akira
2017/02/17 (Fri) 16:44

To 洸咲 和苗(コウサキ カナエ)さん

こんにちは。ありがとうございます :)

> トップページにアイキャッチ画像が表示されない件

FC2ブログのトップページは大別して2種の形式があります。
① 全文表示
② 要約表示

以前お使い頂いていたAlternativeは「要約」
そして今回のVanilla-Skyは「全文」です。

要約タイプと全文タイプの違いは以下の記事
http://vanillaice000.blog.fc2.com/blog-entry-397.html

アイキャッチ画像設定の特徴は以下の記事
http://vanillaice000.blog.fc2.com/blog-entry-420.html

=====

要約記事タイプというのは、トップページにおいてサムネイル形式で記事のリスト表示をするために用いられます。
一方の全文記事タイプは、トップページでも個別記事と同じ内容をそのまま表示します(「本文」のみ。「追記」以降はread moreで個別記事へ誘導)
これらを踏まえて、
アイキャッチ画像設定というのはサムネイルを指定するためにあります。
記事内に直接添付するのとは違い、この設定を用いて指定した画像は記事内には出てきません。
ということは、記事内容をそのまま表示させる全文タイプの場合には無効になります。
乱暴な言い方をすれば、
「アイキャッチ画像設定は全文表示タイプのテンプレートでは意味がない」
全文タイプを希望される方というのは、記事内容(画像含む)を変更されたくない方でもあります。
画像・テキストの並び位置やテキスト改行の位置など、ともかく自分が書いた通りに表示してくれ、という方にむいているのが全文表示。
ですから私の方で特に手は加えていません。

ここまでご理解頂いた上で、アイキャッチ画像を表示させたい場合には以下のようなソース変更をお願いします。
Ctrl+F(Windows)/ Command+F(Mac) キー検索

<div class="inner-contents">

htmlソース(管理画面上段)内に1箇所ヒットします。
このすぐ下に以下の内容を追加

<!--not_permanent_area-->
<div class="topentry-image">
<%topentry_image>
</div>
<!--/not_permanent_area-->

これだけで表示は行われます。
アイキャッチ画像の特徴を踏まえて、個別記事では表示させない設定です。
ここまでがhtml修正

続きましてCSS修正。
3パターンご説明しますので、最も適していると思われる内容をCSSソース(管理画面下段)の末尾に以下を追加してください。

① 画像のサイズは元サイズ依存でOKの場合(画面横幅よりも画像のそれが大きい場合には自動縮小で記事幅いっぱいで収まりますが、逆に画面幅よりも画像のそれが小さい場合には寸足らずになります。(画像の寄せは「左」です))

.topentry-image {
padding-bottom: 20px;
}

画像と本文との間に距離を20px設ける処置です。
これを書かないと記事冒頭部分と画像の下辺が密接します。
20の数値はご希望に沿うように変更して頂いて構いません。

② 画像寸は元サイズ依存のままで、画像をセンタリングしたい場合(記事横幅よりも画像横幅が小さいときに見た目が多少整います)

.topentry-image {
padding: 20px;
text-align: center;
}

③ 画像寸を常に記事幅いっぱいにする(横サイズ100%)
(元画像が小さすぎると拡大されますので解像度が落ちます。同じページ内の他の記事のアイキャッチ画像横幅を全て同じ表示サイズに揃えることができます)

.topentry-image {
padding: 20px;
}

.topentry-image img {
width: 100%;
}

========

最後に注意点ですが、仮に記事の本文内に直接画像を添付した場合、その画像はそのまま表示されます。
洸咲さんが毎回アイキャッチ画像を設定されているのであれば、
記事内容の上にはアイキャッチ画像+記事のどこかに添付画像
という形になります。
アイキャッチを設定せずに記事に直接画像を添付しただけの場合には、
記事内容の上に添付画像+記事のどこかに添付画像
というかたちになりますので、重複表示のような格好になります。
こちらについては洸咲さんの記事の書き方や方針に左右されますので、全文表示でサムネイル表示を行った際の弊害ということで事前にお知らせしておきますね。
よろしくお願いします。

洸咲 和苗(コウサキ カナエ)
2017/02/17 (Fri) 19:01

無事に編集ができました。

Akiraさん、こんばんは。お忙しい中とても丁寧にご対応くださり、誠にありがとうございます。
該当記事を拝読し、FC2ブログの特性を知り、その上でAkiraさんがどのようなテンプレートをお作りされているのか、私にも理解することができました。
注意点についても、細やかなお心遣い誠にありがとうございます。Akiraさんの的確な御指示により、私でもすんなりとテンプレートを編集することができました。
お蔭様で、更に自分のブログに愛着が湧き、これからも更新をがんばろうと思えました。何から何まで本当にありがとうございます。

日々お忙しい中でのテンプレートの作成やユーザーへの対応は、誠に大変かとは存じますが、これからも応援しております。
この度は大変お世話になりました。

vanillaice (Akira)
Akira
2017/02/18 (Sat) 16:51

To 洸咲 和苗(コウサキ カナエ)さん

ご希望に沿う形になりましたでしょうか。
励ましのお言葉もありがとうございます。
もうめちゃくちゃ励みになります(笑)
お疲れ様でした :)

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)