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

更新履歴 2016.1.10

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




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




・ 公式化に伴うOGP削除

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




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

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

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




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

Nostalgia修正版配信のお知らせ


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


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

Sample インデックス

Sample トップ

Sample 個別

DOWNLOAD

FAQ

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


仕様


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)


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

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

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






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







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

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

About Me　↓



写真の初期設定はプロフィール画像ですが　差し替え可能です (htmlソース内該当部分に説明あり)
テキスト部分についても htmlソース内へ書き込んで頂く形です
特に難しくはありません　日本語入れてもらえれば良いです
行末に

<br>

というタグを入れてもらうぐらいです (詳細はソース内に)
不要ならば取り除くこともできますが　右上のアイコンが残りますので

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

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


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



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

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


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





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






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

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



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

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

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





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

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

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

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

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



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

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




人によってはこのエフェクトによって表示が「遅い」「重たい」と感じられるかと思います
その場合にはエフェクトの削除をおすすめします(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
の数字が不透明度設定です
「不」透明度ですよ 透明度と不透明度は意味が違いますので注意
完全不透明(= 透けない)は 1
数字が大きくなるほど透けの具合が小さくなります
もっと透過を強くするのならば　.4 などに変更　ってことですね
大きい数字 (最大 1.0) → あまり透けない　1 で完全不透明
小さく数字 (最小 .0) → かなり透ける　0 で完全透明
小数点 0 は省きますので　カンマ数字　という記述です





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

--- 配布終了 ---

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



起動条件
・

<img>

が

<a>

で囲われており 同じアドレスが与えられている

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

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

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

参考: Colorbox上級編



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

HTML5 CSS3 RWD