nostalgia「配布終了致しました」

nostalgia「配布終了致しました」

配布終了・旧作
2015/02/17
vanillaice (Akira)
vanillaice (Akira)
HTML5 CSS3 RWD
注) こちらのテンプレートは配布終了致しました
ご利用ありがとうございました
改訂版をリリース致しました

Nostalgia - テンプレート

名称 Nostalgia カラム数 2 プラグイン対応 ○(サイドバー集約型) レスポンシブ対応 ○ サイドバー PC --- 右/ ブラウザ縮小時 下SP --- 右からスライド 記事幅 可変 最大1270px (内寸 1190px) サイドバー幅 固定 300px (内寸 260px) 新着サムネイル表示 なし 任意個人設定 ...



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



iMac Template 1

iMac Template 2




名称 nostalgia
カラム数 1 と 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー 右/ ブラウザ縮小時・スマホ 下
記事幅 可変 最大780px
サイドバー幅 280px
任意個人設定 レスポンシブ利用 = スマホ版非表示設定
新着サムネイル利用 = RSS設定
SNSシェアボタン利用 = メタタグ設定
その他 FC2検索バー非表示推奨
Windows/ Mac
Chrome Firefox Safari Opera IE9以上 IE8以下
細かい部分がアレでソレ 4ねレベル ←
推奨カスタム 背景変更(枚数設定含む) ページ遷移エフェクト削除



更新履歴 2016.1.10


フッター構造を変更しました
タイトルタグを微調整しました(SEO対策)


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



更新履歴 2015.11.22


背景がスライドしなくなった問題を修正


更新履歴 2015.9.22


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


更新履歴 2015.9.10


・ 公式化に伴うOGP削除

テンプレ付随のSNSボタンをご利用の方は ブログ個人環境のメタタグ設定をお願いします


更新履歴 2015.8.27


・ FC2検索バーがタブレットでレイアウトを壊す件を対処
・ ページTOP/ BOTTOMボタン変更 使い易くしました
・ Javascript 若干の軽量化

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

ご迷惑おかけします よろしくお願いします


更新履歴 2015.6.4


修正版リリースしておりますのでご参照ください

Nostalgia修正版配信のお知らせ


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


本文内容を大幅に修正しています(2016.1.13)
古いバージョンをご利用の方はアップデートをお願い致します (*_ _)



Sample インデックス
Sample トップ
Sample 個別

DOWNLOAD
FAQ



th_76589.jpg


テンプレート新作を申請しました (●'0'●)/
今回のものは使い勝手にクセがありますので ご説明しますね
上記サンプルで動作確認しながらどうぞ


仕様
・ 背景はブラウザ全画面スライド
・ 擬似エンターページ
・ メイソンリーレイアウト
・ ブラウザ幅によって記事幅が変わるレスポンシブタイプ
・ スマホ表示ではワンカラムになります


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



最初にカスタマイズする際の重要な点

当該テンプレートは「プレビュー」ができません
「更新」して初めて状態確認ができます
必ず事前に複製をとっておいてください


というかですね 基本的にテンプレートの編集結果は「更新」及び「設定」した状態で行ってください
別テンプレを設定しておいて 編集したものをテンプレ名称クリックで確認 というのはキャッシュの都合やJSの都合で正しく表示されないことの方が多いです
ちゃんと修正されているのに「できない!できない!emoji」という方も中にはおられます(笑)




エントランス風ページについて


ブログの入り口風に作ってあります
エンターボタンを押してからブログに入る という形ではありませんので擬似的なものです
いわゆる「トップページ」の「1ページ目」のみがこの表示
FC2で言うところの index_area にあたります
ページ送りの1ページ目以外から1ページ目をクリックしてもこのページにはたどり着きません
これはFC2の仕様です



右上のメニューバーについて


sample

固定されてますので スクロールしても常に右上に駐在します

真ん中の人型アイコンと右から二つ目の新聞アイコンは Index ページ内でのスクロールです

About Me ↓

sample

写真の初期設定はプロフィール画像ですが 差し替え可能です (htmlソース内該当部分に説明あり)
テキスト部分についても htmlソース内へ書き込んで頂く形です
特に難しくはありません 日本語入れてもらえれば良いです
行末に
<br>
というタグを入れてもらうぐらいです (詳細はソース内に)
不要ならば取り除くこともできますが 右上のアイコンが残りますので

<li><a href="#section-2" title="About Me"><i class="fa fa-user"></i></a>


この一行を削除します
About Me の部分を削除したら 上のソース内容も削除
という意味ですよemo


Post ↓ (修正前のスクショなのでブロック同士の隙間がまちまちです(笑))

sample

メイソンリー と呼ばれるレイアウトです
記事内「本文の編集」内に画像がある場合は 一番最初のものが表示されます
FC2へのアップロードのみ有効
他の画像ホスティングサービスからの直リンクでは表示されません

ブラウザの幅が変わると ザザっという感じでブロック同士が自動で並べ替えを行います
このあたりの動作は実際にブラウザ幅を大きくしたり 小さくしたりで試してください


エントランスページにはサイドバーが存在しないため ブログ内での直感的な移動ができませんので


sample


このリンクが「タイトルリスト」への誘導になってます
タイトルリストのページにはサイドバーがありますので そこから行ったり来たりできます



sample


● サイドバーが無いページ
・ エントランス(エンターページ, index_areaページ)
・ 月別アーカイブ
・ タグ一覧
・ カテゴリ一覧

上記は全てメイソンリーです このページに飛んだ場合
エントランス以外のページではメニューバーの項目が変更してありますので

sample

ここからタイトルリストへ戻る と
そういう使い方をしてください
ともかくサイドバーが必要な時には 右上の「タイトルリスト」へ行く
ということでお願いします ( ̄∀ ̄;)

書いてるとややこしく感じますが そんなに難しいわけでもない(笑)

ここまでが基本的な仕様の説明です
ここからはカスタムの件



背景変更


対象箇所はhtmlソース内です
Ctrl+Fキー検索

<!-- 全画面背景開始 -->
内容省略
<!-- 注)全画面背景終了-->

画像の増減についてはソース内カスタマイズナビに従ってどうぞ
以下が画像一枚分です

<img src="ここに画像パス" alt="代替テキスト">

画像パス というのはURLのことです

sample

この赤い部分のことですね
これを差し替える あるいは 追加する ということです

画像サイズは大きいほうが良いですね
ブラウザ画面の拡大・縮小時 自動で全画面にフィットするようになっていますので
小さな画像が拡大されると解像度が落ちてしまいます
大画面のパソコンのことも考慮して できるだけ大きい物をどうぞ
もちろん初期状態のままお使い頂いても構いません (フリー画像です
)


ページ遷移時エフェクトについて


人によってはこのエフェクトによって表示が「遅い」「重たい」と感じられるかと思います
その場合にはエフェクトの削除をおすすめします(2手順)
Ctrl+Fキー検索(htmlソース内にあります)

<link rel="stylesheet" href="http://blog-imgs-71.fc2.com/v/a/n/vanillaice000/animsitionmin.css">

上記を削除 さらに同じくhtmlソース内

<!-- 注)ページ遷移エフェクト不要の方ここから削除 -->
内容 省略
<!-- 注)ここまで削除 -->


以上2箇所を削除してください



記事画面背景の透明度変更


ブログ自体の背景が露出するように記事背景に不透明度設定をしています
透け具合が強すぎて記事が見づらい時は 記事背景の透過度合いを緩くしてください

Ctrl+Fキー検索(CSSソース内にあります)

.stuff, .stuff2 {
  height: auto;
  background: rgba(255, 255, 255, .6);
  padding: 15px 30px;
  text-overflow: ellipsis;
}


続いて

.main_body {
  background: rgba(255, 255, 255, .6);
  margin-bottom: 50px;
  padding: 15px 25px;
}


.6
の数字が不透明度設定です
「不」透明度ですよemoji 透明度と不透明度は意味が違いますので注意
完全不透明(= 透けない)は 1
数字が大きくなるほど透けの具合が小さくなります
もっと透過を強くするのならば .4 などに変更 ってことですね
大きい数字 (最大 1.0) → あまり透けない 1 で完全不透明
小さく数字 (最小 .0) → かなり透ける 0 で完全透明
小数点 0 は省きますので カンマ数字 という記述です



Colorbox適用版(おまけ)


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

--- 配布終了 ---

Colorbox = ページ内画像拡大スクリプト
クリック ↓

sample

起動条件
<img>
<a>
で囲われており 同じアドレスが与えられている

ご利用頂けないパターン
・画像を「アルバムへリンク」している方
・画像ハイパーリンク(外部ページへの遷移)をご利用の方(ランキング, SNS, 拍手等含む)

仕様
・過去掲載画像の全てに適用されます

条件と照らしあわせてご利用の有無をお決めください
(上級者の方はデフォルトのhtmlへご自分でColorboxファイル適用されることをおすすめしています)
公式からデフォルトテンプレをDL後 htmlソースを差し替えてください

参考: Colorbox上級編



お問い合わせ・不具合のご報告はお気軽にどうぞ (●'ω')ノ みなさんいつもありがとうございますemoji
配布終了・旧作