The other way round

新テンプレ製作中です ご迷惑おかけします

Vanilla-Sky

Vanilla-Sky


名称 Vanilla-Sky
カラム数 2
プラグイン対応 ○ (右サイドメニュー)
レスポンシブ対応
サイドバー PC --- 右/ ブラウザ縮小時・スマホ --- 下
記事幅 可変 最大 850px
サイドバー幅 固定 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


更新履歴 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修正のお知らせ

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



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



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


TOP PAGE DEMO
LIST PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ



仕様
・メイン・サイド共にスクロールアンカー
・トップページ以外は記事を探しやすいリスト表示形式
・スマートフォン閲覧時に関連記事を簡易カルーセルにしました


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


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



スクロールアンカーについて

前作まではサイドメニューのみ、メインコンテンツよりも縦が短い場合には下部でホールド、という仕組みにしていましたが、
本作からはメイン・サイド共に短い方が止まる仕様に変更しました。



関連記事の簡易カルーセルについて

スマートフォンサイズのみ、アイキャッチを「表示する」に設定している方のみが対象です。
これまでのように、画面幅に合わせてコンテンツを縦並びにするのではなく、横並びのカルーセル状に変更しました。
JSを使うような大げさなものでなく、単純に横スクロールでご利用頂くタイプです。




→ → → スクロール


スマホだとどうしてもコンテンツ量が下へ下へと向かいがちなもので、正直スクロールがしんどい (´・ω・`)
パソコンでは横スクロールバーが疎ましく、スマホでは逆に縦スクロールバーが疎ましい(笑)
海外ではこれが主流になっていて、日本でも最近はAmebaのスマホ版が導入していますね。

右側が見切れたようになっているのはわざとです。
ここをきっちり収めてしまうと、横にまだコンテンツがあることに気づいてもらえません。
チラっと見えてるとそれを見ようとするのが人間の習性です。
最近この方式が増えてよく見かけますし、見切れでよほど分かると思いますので、可視スクロールバーは付けていません。



ブログタイトル下説明文について

トップページでは、
環境設定 > ユーザー情報の設定 > ブログの説明 に記載した文章が表示されます。
トップ以外の各種ページでは、
CATEGORY PAGE, EDIT PAGE など、滞在中のページ種名称を表示するようにしています。
現在地がどこなのか、簡易的なパンくずリストの役割を担っています。
SEO的な影響は特にありませんが、ブログ説明文で全て統一したい方は

<p id="site-description">
から
</p>
までを一旦消去し、
<%introduction>


に置き換えてください。
以下のように変更できていればOKです。

<p id="site-description">
  <%introduction>
</p>



ナビゲーション内「About」について

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

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

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


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



ドミナントカラー

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

例) 51,51,51


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



管理人コメントと訪問者コメントを分ける方

デフォルトはグレー背景アイコン。
サンプル




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

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

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

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

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


サンプル



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



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

今回はかなり詳細にカスタマイズのガイドをつけてあります。
事前にご確認頂いてから作業を始めてくださいね ^^;


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

Comments 6

相槌

No title

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

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

2017-02-09 (Thu) 11:11 | EDIT | REPLY |   

Akira

To 相槌さん

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

2017-02-09 (Thu) 17:32 | EDIT | REPLY |   

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

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

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

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

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

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

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

2017-02-17 (Fri) 12:52 | EDIT | REPLY |   

Akira

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) 16:44 | EDIT | REPLY |   

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

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

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

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

2017-02-17 (Fri) 19:01 | EDIT | REPLY |   

Akira

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

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

2017-02-18 (Sat) 16:51 | EDIT | REPLY |   

Leave a reply

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

1 Trackbacks

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