Article page

by
  • Comment:27
  • Trackback:0

sample
ん 無理 \(^o^)/

背景のスクリプトとiOS8ハックとの相性が著しく悪いため
実用に耐えないので配信停止とあいなりました((((笑)
DLして頂きましたみなさんありがとうございます
旧ソース内容の方はサポートして参りますが
「iOSで表示が…」
の件につきましては
「バグ修正されるまで待ってね
というお返事でお願いします(笑)

だってもうどうにもなんないemo

iOS8はサポート対象外ということで それでも良いよという方だけここからお持ちください
iOS8バグ 再度記しておきます

・ サイドバーを開いた時にバー内コンテンツが上に引っ張られて見切れる
・ ランドスケープでは発生しない
・ Android端末や iOS8 以下のバージョンでは発生しない
・ ページのトップ位置を表示した状態からは発生しない(ある程度スクロールしてから開いた場合のみ起こります)


色々やってはみましたが ちょっとムリクリすぎる ( ̄∀ ̄;)
これはもうアカンやつや… ( ̄∀ ̄;)

背景のエフェクトについてはまた別バージョンで考えますね
エンターページ導入の方も改めて作成します
カテゴリ分類のページ移動ができるようになったとのことですので
また今度それっぽいの作ってみます

もう一度改めまして

既にDLされている方は iOS8バグ以外の要件につきまして
サポートはしていきますので お気軽にお申し付けくださいませ

ってことでごめんねーーーー!
ヘタレたわ(笑)


ファイルは3つ入っています
htmlファイル × 2
CSSファイル × 1
htmlファイルの一方はページ内画像拡大スクリプト Colorbox適用版です
いずれかを選んでお使いください


file



--------------- 追記 2015.7.16

iOS8のiPhoneでも ブラウザがChromeだと発生しないんですって (´・ω・`)
えぇ?!(笑)
あの… まさかのクロスブラウザ((((笑)
いやこれはChromeが賢いってことだろう きっとそうだ! ←
だって同じ ChromiumベースのSleipnirもダメだもんなぁ… 各個のUIに依存してるんだろうか…
いずれにしろご謹製のSafariでダメならダメだよねぇ (´・ω・`)
うぅーん

sawaさん貴重な情報ありがとうございます!

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

Comments 27

-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/07/15 (Wed) 22:26 | EDIT | REPLY |   
Akira  
To 内緒さん

いえもうホント申し訳ないです。
ありがとうございます (*_ _)

ちょっとですね、jquery使わずにCSSだけのスマホサイドバーに変更しようと思ってます。
でも以前の作品で一度やったんだけれど、こちらはこちらでAndroidのバグがあるのです(笑)
AndroidのXperia限定(たぶん)で機能しない (/_;)
どうもXperiaはz-indexのマイナス階層が苦手なようです(笑)
ただJavascript使うことに比べたら干渉は少ないはずですので、ちょっと試してみます (´・ω・`)

温かいお言葉をありがとうございます (*_ _)

2015/07/15 (Wed) 22:31 | EDIT | REPLY |   
sawa  
いまBetweenで(笑)

先日来からBetweenでブログ表示させていただいております。
そこで

「サイドバーを開いた時にバー内コンテンツが上に引っ張られて見切れる」

とのことですが、私のiPhone6+iOS8.4では、そのような不具合は起きてないんです。
どうして? って思ったら iPhone6+iOS8.4+Chrome なら問題なくサイドバーが機能してることに気がつきました(笑)

とりあえずお知らせまで~。

Akiraさん、頑張ってえぇぇ。

2015/07/16 (Thu) 13:31 | EDIT | REPLY |   
Akira  
To sawaさん

マジですか?!?! ((((´=д=`))))
どうなってんだリンゴ!!!(笑)

そうなんだよね。
私、sawaさんのことも気になってたんです(笑)
だってドロワーが使いやすいって言ってくれてたけど、sawaさんはiOS8なんじゃないだろうか???
と思って!(笑)
iOS8でもGoogle Chromeブラウザだと発生しないってこと? (´・ω・`;)
Safariはもう全然ダメでした。
あと、Sleipnirもダメ。

最初からというか、PCでもサイドバーはスライドタイプ、という実装をするのならなんの問題も無いんです。
CSSでスライドさせても良いし、スクリプト使っても良いし。
「スマホサイズの時だけ」
これが難しい ( ̄∀ ̄;)
FC2のサイドバーの仕様『コメントとか色々全部プラグインでーす』も絡んでる。
あとhtml構造のこと(これが大きい)
あぁーん 頭いて (´・ω・`)

2015/07/16 (Thu) 13:50 | EDIT | REPLY |   
Akira  

ちょっとcosmosさん!Chromeだとならないんだって!
早く来てsawaさんのコメントご覧になって!お願い(笑)

2015/07/16 (Thu) 13:52 | EDIT | REPLY |   
sawa  
ほんとだぁ(笑)

早速のお返事をありがとうございます。

いまSafariとSleipnirで確認してみましたら、ほんとにサイドバーの下がちょちょ切れてる(爆)
こんなんなってたんですねぇ、今朝まで知りませんでした (;^_^A アセ

BetweenのiPhone閲覧はChromeでしましょうね~(笑)

2015/07/16 (Thu) 16:58 | EDIT | REPLY |   
Akira  
To sawaさん

なんかもう一日中悩んでる感じ (´・ω・`)
とか言いながらAmazonプライムデーでガッツリ散財した昨日((((笑)
BMWとか買う人居るのかなー (´・ω・`)
って、そんなことどうでも良いんだけども、
このテンプレのサイドバーはCSSだけで作ったです。
これが一番安全なのかな。
でもこれはこれでAndroidのXperiaで機能しないことがもうわかってる(笑)
どうせーっちゅーんや (´・ω・`)

さっきからテンプレころころ変更してるのに「このテンプレ」って言ってもわからんよね(笑)
Noirって黒背景のやつですー。

2015/07/16 (Thu) 17:26 | EDIT | REPLY |   
cosmos  
No title

こんにちは。
コメント拝見しました。いやぁ、スマホのクロスブラウザ、大変ですね。Akiraさまの苦労お察しします。というかバグが解消されれば良いだけの話なのに、なんで制作者側がこんなに苦労しなければいけないんでしょうね。

私の自サイトは良く言えば熟考中、悪く言えば放置中で、対策をする気力が削がれている感じです。ハックは私にできる技量を超えていそうですし、そのままにしています。ただiOS、とりわけSafariは影響力が大きいのでいつまでも放ってはおけないですね・・。

(自サイトのことを言えばサイドバーは廃止するかもしれません。かっこいいし便利なんですけど、やはり隠れているだけあってクリック率が悪いんです。あくまで個人的な感想ですが。)

私の方は気力が回復したらちょっと総合的に考えることにしたいと思います〜

2015/07/16 (Thu) 18:53 | EDIT | REPLY |   
Akira  
To cosmosさん

色々考えましたけど、一番てっとり早い方法。

開くボタンのfixedを辞める。

これ(笑)
ページトップの状態からは起こらないわけですよ。
じゃあ、ボタンを上部固定にしてしまえば何も問題はない。
ただ、サイドバー開くのにページトップに戻る必要は出てきますよね (´・ω・`)
だけど元々このスクリプトって、ボタンをfixedするように設計されてないんです。
ただ私が利便性を考えてそうしただけで。

もうそれが一番良いのかもしれないなー (´・ω・`)
バグが修正されたらposition の書き直しすれば良いだけだし。
ハック的なことしちゃうと後々スクリプトからhtmlからみな書き直すハメに(笑)
とりあえずその方向で行こうかと思います。
ページTOPのボタン使ってね(はぁと)的に(笑)

>クリック率が下がる

それはあるかもしれないですよね。
アフィリなんかは邪魔にならず かつ 目につくところ、ってのが理想でしょうし。
なかなか難しいね(笑)

思うんだけど、やっぱり見慣れたレイアウトがみなさん安心感があるようで、サイドバーが最初から収納型ってのはあまり好まれないようです。
昔ながらのレイアウトがやっぱり親しみやすいんでしょうね。
だからといって私の制作については関係ないけど (´・ω・`) ←
FC2ブロガーさんはスマホ版があるせいかレスポンシブにとっても無頓着だと思いますし(笑)

2015/07/16 (Thu) 21:43 | EDIT | REPLY |   
meane  
教えて下さい

こんにちは
最近fc2にブログを引越してきました〜

Akiraさんのテンプレートはどれもオシャレで一目惚れでお借りしています(^ ^)

中でもBetweenは私の求めていたイメージにとてもドンピシャで気に入ってます♪
8年前から書いていたブログを引越させた為
こちらの月別アーカイブみたくスペースをスマートにしたいのですが
Htmlには不慣れでほぼ初心者並みなのですが
カスタマイズのやり方を教えていただけると嬉しいです^ ^


2015/07/17 (Fri) 20:48 | EDIT | REPLY |   
cosmos  
参考になります

こんばんは。
バグで困難な中でもまた新しい配信されるなど精力的ですね。
ホント、頭が下がります。

>開くボタンのfixedを辞める。
なるほど、ページ途中からスライドさせると問題が起こるから、トップにボタンをfixせずにつけるわけですね。参考にさせていただきます。

>サイドバーが最初から収納型ってのはあまり好まれないようです
デザイン的には申し分ないし、なんといってもかっこいい。
いかにも先進的という感じですよね。ただ、なんというか、ボタンに気づいてくれない(笑)
私なんかはこのNostalgia、Betweenテンプレートにしても、サイドバーにしても、やっぱりデザインに惚れ込んで使っているところがありますから、多少クリック率が悪かろうとも使いたいところですが・・、
本当にそういう意味で、iOSしっかりしろ! と言いたいところです。

2015/07/17 (Fri) 23:14 | EDIT | REPLY |   
Akira  
To meaneさん

深夜にこんばんは ('0')/

>月間アーカイブをスクロールボックスにしてコンパクトにまとめたい

という意味でお間違いないでしょうか。
公式のものをお使いで変更されるにはこちらに既に記事がありますのでお読みください。

http://vanillaice000.blog.fc2.com/blog-entry-31.html

わかりにくい点等ありましたらお気軽にどうぞe-257
ただ見た目がねー…。Windowsのスクロールバーは見た目が
Macはバーがクリアタイプで、しかもマウスオンした時だけ出るようになってます。
それがとってもスマートなので、Windows10では変わってると良いな (´・ω・`)

アメブロで8年ですか。
移設するにも勇気が居る年月ですよね(笑)
ログも大切にされまして、新たにFC2で楽しめると良いですねe-454

2015/07/18 (Sat) 01:06 | EDIT | REPLY |   
Akira  
To cosmosさん

あらゆる手は尽くしたつもり(笑)

日本人は
「ハンバーガーボタンを押してください。」
って言ってもわからない方がほとんどじゃないかしら。
あちらで「ハンバーガー」と言えば当たり前に

これなんだけど(笑)
海外ではこのマークが無いサイトを探す方が難しいけれどもねー (´・ω・`)
んでもクリック率は大切だよね。
もう日本人が追いついてくれるのを待つしか(笑)

2015/07/18 (Sat) 01:08 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/07/18 (Sat) 12:12 | EDIT | REPLY |   
Akira  
To 内緒さん

こんにちは。
ありがとうございますe-257

>スマホ版削除したいリクエストの件

私も拝見しましたが、賛成票は入れておりません (´・ω・`)
条件付きで賛成、って感じかなー。
・ レスポンシブで書ける作者さんが増える
・ レスポンシブ(自己申告でなく本当の意味で)な作品が増える
・ FC2運営から的確な説明が行われる
これ大原則だと思います。

現状だとレスポンシブで書ける作者さんは居ないと思います。
既に更新を止められた方でお二人。
このお二方は綺麗なレスポンシブを書かれているな、と思って拝見しました。
ここ最近ではゼロ(笑)
ごめんなさいね。ゼロです。居ません。

Googleが最も推奨するのは単一html及び単一CSSで作成されている = レスポンシブサイト
なんですよね (´・ω・`)
それが叶わない場合には適切なリダイレクト・適切なGoogleへのアノテーションを大前提として「スマホ版」
ってことになってます。
アノテーション云々に関してはFC2がちゃんと(完璧ではないにしろ)やってくれてますので、まあ問題は無いのかな と思います。
あと別のコメントでも書きましたが、ユーザーの意識がまだ追いついてないですよね。
そもそもSEOを重要視される方は無料ブログ選ばないと思いますし(笑)

仮に現状のままスマホ版削除なんてのが行われてしまうと、FC2の多くのブロガーさんが検索結果から外されていくことになってしまいますので、そういった意味では「反対」でしょうかね (´・ω・`)

一番アカンのはアレです。
ソリキッド((((笑)
私が勝手に呼んでるだけですが。
ソリッドとリキッドが混在しているサイト。
スマホから見るともうグチャグチャ。
「うわ…。ソリッキドや (;´-ω-`)yヾ」
と思ってすぐブラウザバック(笑)
私自身はPC版で見たい方なんです。
それが「無理」な場合のみスマホ版って感じですかね。
無理 = 著しく位置がズレている 等
ソリッドデザインでも画面内に綺麗に収まっていると読めちゃうんです。
このブログで以前にコメントを頂いたある女性のブログ、ソリッドで3カラムデザインだったけれども、綺麗に整形されてスマホ画面にもちゃんと収まっているので、
ソリッドのお手本のような感じでしたよ(その方は自作されてます)。

2015/07/18 (Sat) 12:41 | EDIT | REPLY |   
meane  
ありがとうございました^ ^

Akiraさん〜
できました☆

ありがとうございます。
過去記事もゆっくり見させていただきます。
自分の納得のいくblog作り頑張ります^ ^

2015/07/18 (Sat) 15:01 | EDIT | REPLY |   
Akira  
To meaneさん

良かったですーe-257
よく見たらカテゴリを例にしていたのでわかりにくかったかな?と思っておりました。

お互いに楽しいブログライフをe-454

2015/07/19 (Sun) 12:49 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/07/20 (Mon) 00:12 | EDIT | REPLY |   
Akira  
To 内緒さん

こんばんは (●'0'●)/

私、シガーライター何処行ったかわかりません((((笑)
なんかスポーンと飛んでどっか行ったe-452

スマホをお持ちでないとなると動作確認は難しいですよね (´・ω・`)
私はiPhone持ってますけどAndroid持ってないからいつもものすごく不安 ( ̄∀ ̄;)
実際にAndroid端末で下手打ったりしております(すみません)。

FC2のスマホ版はどうも… 不親切なんですよe-351
私はyahooにwebのお友達とリア友とがおりますので、たまに顔出したりするのですが、
yahooのスマホ版が超使いやすい!(笑)
他にどこも褒めるところのないyahoo…。

訪問者
マイページ(FC2で言うところの管理画面)→お友達の更新記事一覧から該当記事へジャンプ→記事を読む→その場でコメント

管理人
マイページでコメントがついた旨のお知らせを受け取る→該当記事へジャンプ→全てのコメントを記事下で読める(鍵コメ含む)→その場でリコメ

これが当たり前にできるんですね (´・ω・`)
現状のFC2はもういちいち専用ページに行かないとできませんよね。
コメントするには「コメントをする」のページ。
他の方のコメントを読むには「コメントを読む」のページ。
これが個人的にストレス(笑)
鍵コメが記事内で読めないのもストレス(笑)(これはPC版もだけど)

もう少し環境が整ったらスマホ版にも制作意欲が湧くのですが。
今無理(笑)

311をご経験されたんですね。
私は地理的に離れておりますので実体験してないんです。
知人がやはり同じことを申しておりました。
あの状況下でスマホのバッテリーが… と。
大変でしたね。体感してはいないものの想像に難くありません (*_ _)

貴重なコメント頂きましてありがとうございますe-454

2015/07/20 (Mon) 01:50 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/07/21 (Tue) 17:23 | EDIT | REPLY |   
Akira  
To 内緒さん

長くなりそうなので改めますね。
申し訳なーい!

2015/07/21 (Tue) 18:29 | EDIT | REPLY |   
Akira  
To 内緒さん

改めましてe-257

そうですね。前者についてはもうおっしゃる通りだと思います。
そして、反論というほどではないですし、起案された方の肩を持つというわけでもないのですが。
とりあえず持論・自論ということでお読み頂ければと思います。

スマホ版を削除したい = 見た目だけの問題を言っている

とは限らない、と思うんです (´・ω・`)
これはご本人に尋ねなければ誰にもわかりません(笑)
もしSEOの観点で言っているのだとすれば、それはとても理にかなった発言だと思いますよ。
現状ではスマホ版が存在することで「コンテンツの重複」というのが起こっていますよね。
アノテーションである程度緩和されているとはいえ、実際にGoogleのwebマスターツールを利用すると一目瞭然ですが、スマホ版のコンテンツは全て重複でありwebサイトの問題点という指摘を受けます。
元々FC2なんかの無料ブログでは「metaタグ重複問題」「タイトルタグ重複問題」があるわけですけれど、加えて「コンテンツの重複」です。
で、「スマホ版」というのは日本の「ガラケー」的位置づけだと思っていたほうが良いと思います。
日本は至るところで独自カルチャーを作ってしまうところがあって、それが吉と出る・凶と出る と結果は様々ですが(笑)
例えば日本ではバイラルサイトが持て囃されて(?)おりますが、欧米諸国から見るとそれはありえない状況だったりします。
他人のコンテンツのコピーなわけですから(shareとはまた概念が異なります)、民事訴訟になってしまいます(笑)

たぶんweb先進諸外国の方々からすれば、
「レスポンシブで書けば良いところを何故『スマホ版』などという重複コンテンツを作るのか。Why Japanese people?! Why?!(by 厚切りジェイソン)」
的な (´・ω・`)
そこを指して起案されているとすれば、それはとても的を得た指摘だと思いませんか。
擁護するわけではないけれど(笑)

ただFC2ブロガーさんでno indexや canonical を適切に操って、PC及びスマホ版双方の最適化ができる人がどのぐらい居るのか、というところですよね。
モバイルフレンドリーであることが現在の最も大事なお題目であるならば、スマホ版削除というのはある意味危険なのではないかな?
というのが私の見解でございますー (´・ω・`)

普段そんなに深く考えているわけではありません。
問われたので書いてるだけで(笑)
とまあ、一応誤解のないように記させて頂いた次第です。
要はアレです。
上級者になるほどスマホ版が「害」ってことで良いのかもしれませんです。
たぶん(笑)

2015/07/21 (Tue) 20:18 | EDIT | REPLY |   
Akira  
To 内緒さん

あと、
(見た目が)シンプルなもの = SEOや構造がしっかりしている
という思い込みは危険だと思います。
先に触れたmeta重複なんかをしっかりサポートしようと思ったら、<head>の行数が数行で済むわけが無いんです。
きちんと設定しようと思えば思うほど、<head>内情報は複雑に、多行になっていきます。
そして見た目についても、
シンプル = 崩れない
シンプル = 使いやすい
シンプル = どの端末でもオッケー
これらは完全な思い込みです(笑)
強いて言えば
カスタマイズしやすい(かもしれない)
ページの読み込みが速い(かもしれない)
ぐらいでしょうかね (´・ω・`)

2015/07/21 (Tue) 20:25 | EDIT | REPLY |   
ひぐらし  

いつもAkiraさんのテンプレートには大変お世話になっております
Betweenを使用させてもらってますが共有から消えていたので気になって来ましたw
私はiphoneの8なのでサイドバーが上に移動しますがそれ以上に便利なのでそのまま使わせてもらってます
iphoneからもパソコン版で見たい方なので共有は全部目を通しますが、デザインが壊れず綺麗な表示になるのはAkiraさんのテンプレートだけというw
私のセンスとドンピシャなので本当にいつも助かってますm__m
さて質問があります
トップページの誘導が日本語なのでフォントを変更したいと思いますがどう指定したら良いでしょう?
できれば今表示されているこのテンプレートと同じにしたいと思います
指定を消すと明朝体(?)のフォントになってしまうのです
ご指導よろしくお願いしますm__m
(このテンプレートも是非是非申請お待ちしていますw)

2015/07/26 (Sun) 22:29 | EDIT | REPLY |   
ひぐらし  

連投すみません
スクロールするとサイドバーが下で止まるんですね?
感動しましたw

2015/07/26 (Sun) 22:33 | EDIT | REPLY |   
Akira  
To ひぐらしさん

ありがとうございますー。
とりあえず、感性が似ていて良かったです(笑)

>トップページの日本語フォントを変更したい件

確認です。
タイトルを含め、日本語のフォントは全て変更したい、という意味で合ってますでしょうか。
英字フォントはジャギりますよね ( ̄∀ ̄;)
iPhoneをお使いとのことですので、ヒラギノフォントが優先表示されているかと思います。
現在設定中のテンプレのフォントは游ゴシックなんだけれども、ひぐらしさんにどのように映っているかがわかりません(笑)
iPhoneに游ゴシックをインストールされていなければ、恐らくMeiryoフォントで見えていると思います。
あるいはPCからの閲覧であれば、Windows8以上・Mac Marvericks以上が游ゴシック。
なので、游ゴシックかmeiryoで見えているのではないかな? と思います。

ちょっとフォントの確認って難しかったりしますので、こちらと同じ設定にされるのであれば

body {
font-family: '游ゴシック', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif;
省略

この形で行けるかと思います。
その上で、英字フォントを外したい箇所からfont-familyの指定を削除するとbody設定に倣います。
一度お試しくださいませe-257

2015/07/27 (Mon) 02:01 | EDIT | REPLY |   
Akira  
To ひぐらしさん

はい。今回はこんな感じで ( ゚Д゚)ノ

次の次の次に申請予定でございます(笑)

2015/07/27 (Mon) 02:03 | EDIT | REPLY |   

Leave a reply

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