Article page

by
  • Comment:8
  • Trackback:0

重要

こちらは旧バージョンです
リニューアル済みのものを公式から配信しております ご迷惑おかけします

TheCityリニューアルリリースのお知らせ


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


thecity.jpg



名称 TheCity
カラム数 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー 右/ スマホ・ブラウザ縮小左スライド
記事幅 可変 最大850px(内寸 810px)
サイドバー幅 300px
Windows/ Mac
Chrome Firefox Safari Opera IE9以上 IE8以下 Edge
完全アウト
推奨カスタム 記事幅変更
フォント変更
円形写真変更 等

w3cbanner

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


修正版配信

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

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

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


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


2015.6.6 申請致しました

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

changeStyle

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ソース差し替え)

file


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

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

スマホ用サイドバーとツリー系プラグインの干渉について
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 8

sawa  
あっ(爆)

私の身勝手なわがままリクエストを聞いてくださってありがとうございます。
これですこれ! 私が永いこと待ち望んでたスタイル。
この横からスルスルって出てくるサイドバーに興奮しちゃいます(笑)
もう何度も遊ばせていただいてます(笑)
はやくDL出来るようになったら嬉しいです ^^

2015/06/07 (Sun) 06:32 | EDIT | REPLY |   
Akira  
To sawaさん

お待たせしました (o'ω')ノ
リクエストを頂けることは嬉しいですe-454
しばらくこのスタイルで様子を見ようかな と
スマホはこれが便利ですよね ( ̄∀ ̄)

2015/06/07 (Sun) 09:49 | EDIT | REPLY |   
きろろ  
Colorboxの件ですみません<(_ _)>

Paradisoと同じように
Akiraさんのcolorboxvanilla.cssを使用して、
jquery_colorbox.jsは自分のを使い
Paradisoと同じように
スクリプトを書き替えてみたのですが……(=_=)
また、とちゅうまで開くのですが……
ポップアップになりません。

<script>
$(function(){
$("a.cpModal").colorbox();
});
</script>
<script>
$(function(){
$(".youtube").colorbox({
iframe:true,
innerWidth:640,
innerHeight:390
});
});
$('.youtube').addClass("nonmover");
</script>

これではいけないのでしょうか。
よろしくお願いいたします<(_ _)>

2015/06/17 (Wed) 14:28 | EDIT | REPLY |   
Akira  
To きろろさん

元ソースの中に

<script>
$(function(){
$('.side_bar a').addClass("nonmover");
$('a[target=_blank]').addClass("nonmover");
$("a.expand").addClass("nonmover");
});
</script>

という部分がありますので、赤字部分をきろろさんのトリガーに変更するのと、youtube用記述を追加して以下の通り修正します。

<script>
$(function(){
$('.side_bar a').addClass("nonmover");
$('a[target=_blank]').addClass("nonmover");
$("a.cpModal").addClass("nonmover");
$(".youtube").addClass("nonmover");
});
</script>


-------

上記がトリガー処理で、あとの実行処理はきろろさんの記述内容でいけると思いますよ。
youtube側実行の末尾

$('.youtube').addClass("nonmover");

こちらが不要になりますので削除。
説明しますと、addClassやremoveClassの処理はプラグイン実行処理よりも「前」に書く必要があります。
javascriptの処理順と記述順は同じなので

クラス操作 → 実行

この記述順序です。
そして今回もColorbox実行の際に対象要素にページ遷移スクリプトを許可しない、という意味の記述も必要です(addClassのnonmover)
ですから、元ソース内にある部分にadd/removeのclass処理を修正し、きろろさんの実行スクリプトは</body>の直前に書く、というのが理想の形です。

一度お試しくださいませーe-257

2015/06/17 (Wed) 15:28 | EDIT | REPLY |   
きろろ  
To Akiraさん

申し訳ありません<(_ _)>
いつもいつも、ご丁寧に教えていただいてほんとすみません<(_ _)>

ソースを書き替えてみました。

<script>
$(function(){
$('.side_bar a').addClass("nonmover");
$('a[target=_blank]').addClass("nonmover");
$("a.cpModal").addClass("nonmover");
$(".youtube").addClass("nonmover");
});
</script>

にして、

bodyの真上に

<script>
$(function(){
$("a.cpModal").colorbox();
});
</script>
<script>
$(function(){
$(".youtube").colorbox({
iframe:true,
innerWidth:640,
innerHeight:390
});
});
$('.youtube').addClass("nonmover");
</script>

書いたのですが……

中央にポップアップされるのですが……
ファイルアップされているフレームやら背景が表示されませんw

で、$('.youtube').addClass("nonmover"); が不要と言うことなので削除いたしました。

それでもアニメーションのポップアップはされるのですが
imag.pngの画像が(フレーム、背景など)が表示されません。

お暇な時でかまいませんので、
また、レクチャーをお願いいたします<(_ _)>


2015/06/18 (Thu) 00:29 | EDIT | REPLY |   
Akira  
To kimiutaさん②

You mean you don't want to display any text? If so, delete the following parts from html source code.
(Use Ctrl+F(Windows)/ Command+F(Mac) to search for words.)

<p><%topentry_description></p>

There're 4 corresponding items in total. Delete them all.

よろしくお願いします。

2015/06/18 (Thu) 01:59 | EDIT | REPLY |   
きろろ  
To Akiraさん

何度もお手数をおかけして申し訳ございませんでした<(_ _)>
できましたw

</body>の直前にスクリプトを書き替えたのですが、
どうにも反応がしませんでした。

akiraさんのスクリプトをそのまま、コピペしたらポップアップされました。

なにやら、私がへまをしたようです。申し訳ございません(滝汗
今回はばっちりでございます<(_ _)>

2015/06/19 (Fri) 00:26 | EDIT | REPLY |   
Akira  
To きろろさん

とりあえずできたってことで良かったのかな?
お疲れ様でしたe-257
きろろさんいつも頑張ってるよね。
そのパワーと熱意は素晴らしいですe-440
できると嬉しいし楽しいですよねe-461

2015/06/19 (Fri) 01:24 | EDIT | REPLY |   

Leave a reply

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