(旧)TheCity

------------- 追記 2015.8.31


修正版配信

・ 一部フォント変更
・ スマホからのテキスト入力時画面が自動でズームしないよう調整
・ ページtop/ bottomボタン変更
・ FC2検索バーがタブレットでレイアウトを壊す問題に対処

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

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


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


2015.6.6 申請致しました

2015.6.? 公開されてた((((笑)

FAQ

DOWNLOAD

・ サイドバーは固定です
・ サイドバー内スクロールバーはデザインの邪魔をしないクリアタイプ(Macは元々クリアですのでWindows向け)
・ サイドバーアコーディオンタイプ
・ ページ遷移後にサイドバー開閉状態を保持
・ 一度押したリンクがわかるようにしました(サイドバー内)
・ 記事をその場で読める「折りたたみ」タイプ
・ 個別記事にパンくずリストを設けました
・ 個別記事下に「最新記事サムネイルリスト」を設けました
・ スマホ閲覧時のサイドバーは左側からスライド(パソコンでもブラウザ幅が縮小されると切り替わります)
・ 記事内アップロード画像に自動でドロップシャドウ 注意点あり
・ W3C バリデーション クリア


*************************************
サイドバーのアコーディオンについて
*************************************

最初から開いた状態にしておきたい方は　ソース内に注訳がありますので
該当箇所を削除してください
今回もたくさん注訳つけてあります

注)

で Ctrl ＋ F キー検索すると対象文字列が出てきますのでご確認ください


****************************
記事の折りたたみについて
****************************

「続きを読む」ボタンクリックで　ページ遷移させずにその場で追記を読めるようにしてあります
クリックすると「続きを読む」ボタンが消え　記事下に「折りたたむ」ボタンが出てきます
「折りたたむ」ボタンクリックで「続きを読む」ボタンの位置(ボタンがページトップの状態) の位置までスクロールで戻ります

この「続きを読む」ボタンですが
閲覧される方がページ遷移を「した」と思ってしまうかもしれません
FC2ブロガーさんはすぐわかると思いますが　みんながみんなわかるとも限りません
個別記事へは「記事タイトル」を押すことでジャンプできますが
それを書いておいた方が親切かもしれません(笑)
そこはみなさんにお任せします　( ﾟДﾟ)ﾉ
一応「コメントマーク」にマウスオンで「この記事にコメントする」の表示
クリックで個別記事のコメント投稿欄の位置へジャンプします


**************************
新着サムネイルについて
**************************

RSSを利用していますので
鍵つきブログの方　ほとんどの記事にパスワードをかけている方
にとっては意味がありませんので　該当箇所を削除してください

こちらの注意点ですが
RSSを外部から読み込みますので　テンプレ内容よりも少し遅れて表示されます
サイドバーの「新着コメント」を押すと　該当コメントの位置までスクロールしますが
このサムネイルがコメント表示よりも「上」にありますので
ページ遷移後にコメントが表示された後　カクっと若干下へ位置がズレます
それが気になる方は　新着サムネイルをゴソっとコメント下へ移動させるなどの処置をお願いします
あまりおすすめはしませんが　^^;


**************************
サイドバーについて
**************************

スマホからの閲覧で困ることの一つとして「サイドバーが遠い」というのが個人的にありまして
今回こういった形を導入してみました
今までmiddleボタンを設けたりと　色々作を凝らしてはおりましたけれど
結局のところこれが一番使いやすい(笑)
邪魔な時は隠して　使いたい時にすぐ出せる　ってやつですね　(´・ω・｀)

注意点あります
ちょっと特殊なスクリプトなもので　ツリー系のプラグインと干渉します ( ﾉД`)ｼｸｼｸ…
というか　プラグイン干渉は結構起こります
何故なら私は html5 で書いているからですー　(´・ω・｀)
その辺割りきってお使いいただける方でお願いします　(*_ _)
IE8以下も完全に切り捨てる形でソース組みしていますので　その辺もあれでそれで（汗）

あとちょっとした心配事
iPhoneにはスクロールをスムーズにするためのプロパティというのが用意されています
ですからiPhoneでのサイドバー内スクロールはドゥルル～～～ンって感じで快適です
Android どないや　（￣∀￣；）　わからん　（￣∀￣；）
もしかしたらグイグイって感じの使用感かも…　しれない　（￣∀￣；）
そしてXperiaにも若干の不安(笑)
機種の固有バグがあるようなので…　またおかしかったら教えてくださいね　(´・ω・｀)

パソコン縮小でスマホ用サイドバーをお使い頂いた際には
ブラウザ幅を大きく戻す時にサイドバーを閉じるボタンを押してからどうぞ
そのまま拡大すると記事幅が元に戻りません
あくまでも左側の収納サイドバーはスマホ用ということで


********************************
画像にドロップシャドウについて
********************************

こちらは大きな注意点ありますので　別で記事にしようと思います
まだ書いてないけど((((笑)

追記----　書きました　↓

自動で画像に枠やドロップシャドウ

*****************************************
管理人コメントと訪問者コメントを分けるには
*****************************************

CSSソース内に追加します

訪問者コメントは左側にネイビーのボーダーがつきます
管理人のボーダーだけを「右」に変更するには以下の通り(CSSソース末尾に追加)

.ご自分のハンドル名 {
  padding: 0 30px 5px;
  border-right: 4px solid rgb(53,61,75);
  border-left: none;
  border-bottom: 1px solid rgb(53,61,75);
  margin-bottom: 30px;
}

ボーダーは訪問者と同じ「左」のままで　ボーダーの色を変える場合はこちら

.ご自分のハンドル名 {
  padding: 0 30px 5px;
  border-left: 4px solid ここにカラーコード;
  border-bottom: 1px solid ここにカラーコード;
  margin-bottom: 30px;
}

私はカラーコードを10進数で記載していますが　#ffffff などの16進数でもオッケーです
16進数コードを参照できるサイトはたくさんあります

HTMLリファレンス 様

------------- 追記 2015.11.28

コメントマーク背景を分けるにあたり
裏ワザ的なCSSで実装しています
ご利用頂けない場合もあります
使えないハンドルネームのパターンは以下の通り

・文字列最初の文字が「記号」
・最初の文字が「数字」
・文字列中に「-」(ハイフン)「_」(アンダースコア) 以外の記号(全角・半角スペース含む)

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


----------------


早めに申請お願いします　というお言葉を頂きましたもので
予定を先送りして　こちらを先に　^^;
よろしくお願い致します　みなさんいつもありがとうです

また忘れるところだったわい　ι(｀ﾛ´)ノ
Colorbox 適用済みhtmlファイル(笑)
(公式からDL後 htmlソース差し替え)

-- 配布終了 --

--------------- 2015.6.17 追記

ツリー系プラグインとの干渉について記事にしております
ご一読をお願い致します

スマホ用サイドバーとツリー系プラグインの干渉について

HTML5 CSS3 RWD