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

2017年02月09日
テンプレート
6
HTML5 CSS3 RWD
Vanilla-skyテンプレート

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

最終更新 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について

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

名称 Vanilla-Sky
動作確認済みブラウザ
トップページ記事並び 全文表示タイプ
記事幅 メイン --- 最大760px
サイド --- 270px
記事内で使える見出しレベル h2からh6まで
jQuery導入 あり(v3.3.1)
Font Awesome導入 あり(v5.6.3 CSS)
Lazyloading導入 なし
構造化マークアップ 個別記事のみ
「BreadcrumbList(パン屑リスト)」
「BlogPostiong」
Page Speed Insigtsスコア
固有機能 ・ 画像にドロップシャドウ
・ 動画縦横比固定
使い方詳細ページ
テンプレート固有機能説明
推奨カスタマイズ 左右カラム入れ替え, 色調変更
ライセンス Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
備考
パソコン タブレット スマートフォン
2カラム
その他ページ --- 1 or 2カラム
(デバイス幅依存)
1 or 2カラム
(デバイス幅依存)
1カラム
サイドメニュー --- 右 サイドメニュー --- 右 or 下
(デバイス幅依存)
サイドメニュー --- 右
更新履歴 2018.1.12

メンテナンスを行いました。
詳細は以下のページでご確認ください。

Vanilla-skyメンテナンスのお知らせ - テンプレ不具合・修正など

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

更新履歴 2017.4.17

・ iPhoneでfixedされたinputが固定されないバグのApple修正に伴いhackを削除
参考記事
【重要】iPhoneでfixed指定されたinputが固定されないバグが解消されました

更新履歴 2017.3.1

コンテンツのピン留めJSとTwitterウィジェットJSが衝突する件を修正
ご迷惑をおかけしました (*_ _)

参考記事
Vanilla-Sky修正のお知らせ「Twitterウィジェット干渉」

更新履歴 2017.2.15

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

関連記事
Vanilla-Sky修正のお知らせ

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

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

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

サンプル

Samples

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

カスタマイズのコツ

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等導入の手引き
  • テンプレートの仕様やデザインを著しく変えてしまうようなカスタマイズの手引き

左右カラム入れ替えの仕方

How to reverse the direction of rows

#main-container { で検索されますとCSSソース内に4箇所ヒット、最初のものが対象です。この括りの padding: 0 60px 60px の直下に flex-direction: row-reverse; を追加。

続きまして #primary { を検索、CSS内で1箇所ヒット、この括りの margin-right: 50px; に対し緑部分 rightleft に変更。
以上2手順です。

ナビゲーション内 ABOUT について

Usage of ABOUT link

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

該当部位検索

注)予備リンク

カスタマイズ

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

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

ドミナントカラー

Dominant colors

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

rgb(150,150,150) 基本リンク色
rgb(225,224,239) ページ送り・コメントSEND/ DELETEボタン背景色
rgb(165,164,179) ページ送り・コメントSEND/ DELETEボタンホバー時背景色

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

Cautions before asking for something.

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

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

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

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

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

vanillaice (Akira)

Posted by vanillaice (Akira)

関連する記事

コメント 6

There are no comments yet.

相槌  

2017/02/09 (Thu) 11:11

No title

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

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

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のように各記事ごとに写真が表示されるのかご教示頂ければ幸いです。
お忙しい中恐縮ではございますが、何卒よろしくお願いいたします。

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さんの的確な御指示により、私でもすんなりとテンプレートを編集することができました。
お蔭様で、更に自分のブログに愛着が湧き、これからも更新をがんばろうと思えました。何から何まで本当にありがとうございます。

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

Akira  

2017/02/18 (Sat) 16:51

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

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

コメント投稿

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

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)

トラックバック 1

Click to send a trackback(FC2 User)
この記事へのトラックバック
  • こんにちは、かなえです(^-^)/二十四節気上では、本日より雨水ですね。雨水とは、空から降ってくるものが雪から雨に変わり、氷も溶けて水になる、という意味だそうです。春一番という強い風が吹くのもこの頃だそうですが、私が住む土地ではどうやら昨日一足早い春一番が吹いたようです。どうしても乾いて欲しい洗濯物がありましたので、軒先に干していたのですが余りにも強い風が吹いておりまして……風に飛ばされ...

    2017.02.18 (Sat) 11:01 | 瑞穂の国で生きる人の日記