Article page

by
  • Comment:5
  • Trackback:0

こちらは旧バージョンの情報です。
リニューアル版リリース済みです。


TheCity

以下本文



先日からお伝えしております iOS8 (iPhone OS名) のバグ回避のため
TheCityテンプレートの修正を終えまして公式から再配信しております
みなさまにはご迷惑をおかけしましたことを改めてお詫び申し上げます (*_ _)

再三再四の説明になり恐縮ですが バグ概要と修正点は以下の通りです


バグ概要

・ 画面を一定量スクロールした後にサイドバーを開くと サイドバー内コンテンツが上に引き上げられ
上部が見切れ 下部に白い空白ができてしまう

・ Android等の端末 及び iPhone でも iOS8 以外のバージョンでは発生せず

・ ページ最上部の状態から開いた場合には発生せず

・ ランドスケープモード(横向き) のときには発生せず

・ 本グリッチ(バグ) の根本的原因は position の fixed 及び absolute さらに スクロールの量・範囲の誤差

修正点

・ サイドバー内のボタンを廃止し サイドバー外のボタンに統一しました --- ハックの性質上 クリックポイントが限られるため

・ サイドバーの横幅を 300px から 275px に縮小しました --- サイドバー外のボタンが端末画面内に収まるようにするため(iPhone5 までをサポート)

・ サイドバーを開いているときのページ本体コンテンツのスクロールを禁止しました --- バグによる位置のズレを防ぐため
(本体がスクロールしてしまうと サイドバー内コンテンツも同時に上へと引っ張られます)

---------

上記に記しました問題点については解消しました
そこで新たに発生したデメリットについて

・ サイドバー内の「最新コメント」をクリックしたとき 滞在ページと別ページのコメントの場合には
サイドバーが自動で閉じられ 該当ページの該当コメント位置まで移動した状態で表示されます
滞在中ページと同ページのコメントの場合
本コンテンツの位置はページ内移動しますが サイドバーを閉じた時点でページトップまで戻ってしまいます

これだけはどうしても解消できませんでした
今回の不具合はスクロールの数値にも絡んでおりまして
ページ表示範囲の状態を保持することが困難と判断しました
「ページ遷移ができない」ということではなく「サイドバーからのページ内移動ができない」
というのを意味しています

これらはあくまでもスマホ用サイドバーに係る問題で パソコン閲覧時・画面幅830px以上の際には発生しません

上記内容を踏まえまして ご納得頂ける方はDLお願い致します
iOS側のバグの修正が入りました際には 改めて修正を入れるつもりでおります
今回バタバタしましたが 温かいコメントを頂きました方へは感謝です

取り急ぎお詫びとお礼方々 (*_ _)

関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 5

tak  
最新記事アイコン

ご無沙汰しております。
テンプレートParadisoを使わせていただいております。
トップページアイコン表示の最新記事の画像アイコンサイズをもう少し大きくしたいのですが、可能でしょうか?
よろしくお願いいたします。m(_ _)m

記事アイコンはそれぞれ
<img src="http://blog-imgs-74.fc2.com/s/g/o/sgourmet/P1170327ff.jpg" alt="七本鑓22" style="width: 0; height: auto;" />(一例)
を使っております。

2015/07/21 (Tue) 11:06 | EDIT | REPLY |   
Akira  
To takさん

お久しぶりでございますe-257

>トップページのサムネイル(最新)を大きくしたい件

アイコンというのはサムネイル画像のことでしょうかね。
そして「最新記事の」サムネイルを大きくしたい、という解釈で間違いないでしょうか。
最新記事というのは、ページの一番「上」に表示される記事 という意味です(時系列を変更されている方もおみえになりますので)。
takさんのブログですと「ちか定」の記事です。
それとも、サムネイル全てを現在の設定よりも大きく、という意味あいでしょうか。
まず一点そこを確認させてくださいね。

とりあえず前者だと解釈してご説明します。
手順数3

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

まずCtrl+Fキー検索

.firstImage {
width: 50%;
max-width: 300px;
}

赤字部分を最大400に変更します。
許容数値はマックスで420pxまでです。
これはサイドバーとメインコンテンツの幅を考えるとギリギリのラインですが、
420で指定してしまうと、右の記事内容と画像とが密接してしまいますので、400が妥当かと思います。
以下の通り修正 ↓

.firstImage {
width: 50%;
max-width: 400px;
}


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

続きまして以下の内容をCSSソース末尾に追加(元ソースには存在していませんので修正ではなく「追加」)

.firstImage img {
width: 100%;
height: auto;
}


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

続いて以下を検索。

.firstChild .stuff {
margin-bottom: 0;
height: 200px;
}

赤字部分を修正して以下の通り。

.firstChild .stuff {
margin-bottom: 0;
height: auto;
}



これで「一番上の記事」のサムネイルは大きくなります。
で、レスポンシブですので当然画面サイズの影響を受けて、ブラウザが縮小されればサムネイルサイズはそれに応じて小さくなっていきます。
固定サイズにしてしまうとブラウザ縮小時に横のスクロールバーが出てしまったり(これは閲覧者にとって非常に煩わしいので避けるべき)、文字部分の横幅が足りずに細い縦長になってしまったり(これも偽レスポンシブでよく起こります(笑))。
ですから、
ブラウザ幅によって縮尺が起こる
というのはご了承くださいませね。

最新記事以外のその他の記事サムネイルも大きく、ということになると、現在のように最大3記事並列表示というのが叶わなくなります。
その点も踏まえて頂いて、どうされるかをお知らせくださいe-257

2015/07/21 (Tue) 15:26 | EDIT | REPLY |   
Akira  
To takさん

ここまでの設定でこんな感じになります(スクショ)

http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/sc0000_zps209arkv0.gif~original

やっつけページなので色々不備ありますが、外観としてはこんなです。
他の記事サムネを大きくされるのであれば、並列での並びは最大2つまでに減らす必要があります。

2015/07/21 (Tue) 15:32 | EDIT | REPLY |   
tak  

Akiraさま

早速のご指導を賜りありがとうございます。
思うような感じにできました。(360pxに設定しました。)
アイコンでなくサムネイルですね。。。すいません^^;

またよろしくお願いいたします!

2015/07/21 (Tue) 16:56 | EDIT | REPLY |   
Akira  
To takさん

できましたか。良かったですe-257
サムネでもアイコンでもそんな変わらん。一緒一緒(笑)

お疲れ様でしたe-454

2015/07/21 (Tue) 18:27 | EDIT | REPLY |   

Leave a reply

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