Yes!腐漢ライブラリー

濃いめのBL漫画やBL小説などの感想を色々と。ガチッとムチっとが大好物な大人向けです。(+BLアラブもの小説読破中)

スポンサーサイト

[ --/--/-- --:-- ] TB(-) | CM(-)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[タグ : ]
■カテゴリ : スポンサー広告

前略、FC2ブログユーザの皆さま。折り入ってお願いがありまして…

[ 2013/06/09 07:15 ] TB(0) | CM(5)

いつも楽しくブログを拝見しております。
誠に勝手で申し訳ないお願い事があります。
○○様のお使いになっているFC2ブログのテンプレートで、スマートフォン用の一部(スタイルシート)を変更して頂けないでしょうか。
実は○○様のブログをタブレット端末(私の場合はNexus 7)で拝見しますと、ページの表示サイズが小さくなってしまうのです。
詳しく説明しますと、斯く斯く然々でして……



なんてメールを方々に出したら「何だコイツ、キモっ!!」と引かれること間違いなしなので、影響力がまったくないニッチなブログですが囁いてみることにします。

なに訳の分からないことを言っているのかと言いますと、実際にスマートフォン用のテンプレートで画面を開いた場合の画像を見て頂ければ理解が早いかと。
(サンプルは当ブログのトップページ http://fwotoko.blog104.fc2.com/ 、デバイスは「Nexus 7」)

■縦に持った場合(トップ-ページ)
スマフォ画面・縦1

以下、もっと分かりやすい画像

■横に持った場合(トップページ)
スマフォ画面・横1


お分かり頂けたでしょうか。
そうなのです、画面の表示サイズが固定されてしまっているのですよ。これはスマートフォンからアクセスしようがタブレット端末・パソコンからアクセスしようが関係なし。必ずこのサイズに固定されてしまうのです。(一部例外あり)

▼▼▼ …興味がある方は続きをご覧下さい
 
■縦に持った場合(記事)
スマフォ画面・縦・記事

■横に持った場合(記事)
スマフォ画面・横・記事


この原因はスマートフォン用のテンプレートが悪い訳ではなく(※)、FC2側で自動挿入される広告用のスクリプトが表示サイズを320pxに変更してしまうためです。(iPhoneが320pxだからなのかしら)

※<meta name="viewport" content="width=device-width …これがテンプレートに記述してあれば、『横幅はデバイスのサイズに合わせますよ』という設定になる(おそらくどのテンプレートでもこうなっているはず)

これを以下の画像のようなデバイスサイズに合わせるには、スマートフォン用のスタイルシートに一文を追加することで可能になります。

0.大前提として、スマートフォン用のテンプレートをダウンロードし(どれでも可)、変更したいテンプレートにチェックを入れて適用ボタンをクリックする

1.スマートフォン用のスタイルシートを変更する

body {
width: auto !important;  ←追加する
(以下省略)
}



■縦に持った場合(トップページ・変更後)
スマフォ画面・縦2

■横に持った場合(トップページ・変更後)
スマフォ画面・横2

■縦に持った場合(記事・変更後)
スマフォ画面・縦・記事(修正)

■横に持った場合(記事・変更後)
スマフォ画面・横・記事(修正)


ご自分のブログがどうなっているのかを簡単に調べる方法としては、PCからブログにアクセスし、URLの最後を『/?sp』に変更すれば、スマートフォン用のテンプレートを確認できます。

 変更前:http://XXXXXX.fc2.com/
 変更後:http://XXXXXX.fc2.com/?sp  ←追加する


面倒くさいと思われた方はこのままそっとページを閉じてください。
面倒じゃないにしろ「何が何でも320pxじゃないと困ります」という方もひっそりとページを(略
面倒ではなく、「仕方ないなぁ」と思われた心優しいユーザの方はゼヒ御考慮頂けませんでしょうか……。
だって私が皆さまのブログをチェックしづらいですもんよー!(笑

詳しいことはブログ『ありのごとくあつまりて』さんの記事を参考にしてみてください。(今回の記事作成も参考にいたしました)
全ての記事が参考になりますが、特に「文字サイズ変更ボタン をスマートフォン用テンプレートに設置」の中でFC2のスマートフォン用広告変数で自動で挿入されるスクリプトについて詳しく説明されています。

私もスマートフォン用のテンプレートを使わせて頂いていますし(テンプレート名:sp_custom)、PC用のテンプレート変更についても参考にしております。

最も簡単な方法は、「ありのごとくあつまりて」さんが作成したテンプレートに変更することだったり……。
(公開されているテンプレートの中には、リンクが上手くいっていない物もちらほら。せっかくスマートフォン用のテンプレートでアクセスしても、記事をクリックするとPC用のテンプレートに変更されるなんてことも)

■追記■
テンプレートの作りで、画像をバックグランドとして使用している場合、この方法を取り入れるとデザインが間延びしてしまう可能性があります。
(テンプレート: sweet_cat_cafe で確認)


■縦に持った場合(トップページ)
スマフォ画面柄付き・縦・トップ

■縦に持った場合(記事)
スマフォ画面柄付き・縦・記事

■横に持った場合(トップ-ページ)
スマフォ画面柄付き・横・トップ

■横に持った場合(記事)
スマフォ画面柄付き・横・記事


この方法を採ってしまうと、デザイン崩壊の危機が。これをどうすれば修正できるのかは私では分かりかねますのでご了承ください。申し訳ございません!!

特にページ最上部、サイト名表示部分のバックグランドを画像に指定している場合は伸び伸びしてしまいますね。ゴメンよ仔猫ちゃん…。
記事タイトルのバックの飾り(白地でうねうねのもの)は画面サイズに合わせて伸びたりしないので320pxのままになっています。
記事内についても同様の表示となってしまいますが、文章の方は読みやすくなっていて良いのではないかと。

---

とまあ、なぜ今頃こんなことをと思われる方もいらっしゃると思いますので、少々説明をさせていただきますと。
FC2では以前、iPadやタブレット端末でブログにアクセスすると、パソコン用のテンプレートで画面が表示されていました。
しかし、2013年3月頃からはスマートフォン用テンプレートに表示を変更できるようになりました。

■Nexus 7からブログにアクセス
スマフォ画面・横・選択

 「スマートフォン版で表示」というボタンが頭の部分に表示されるようになりました。
 このボタンを押すとスマートフォン用のテンプレートに切り替わります。


そもそも7インチのNexus 7で閲覧しているんだから、このままPC用でチェックすればいいだろうと思われるかもしれませんが、これが意外と大変な作業なんです。
 ・ブログ上部にスクロール型のヘッドライン等を設置しているとフリックが効かない(スクロースしない)
 ・フリックしているのになぜかタップになっている
 ・ピンチすると明後日の部分が拡大/縮小されてしまう

この他にも、フリックしているのにいつの間にかピンチアウトになっているとか、広告が多くて目的の文章にたどり着けないなどの問題点が頻発するんですよねぇ。
ボタンひとつでスマートフォン用のテンプレートで閲覧できるなんてステキ!でも対応されていないなんて!!

手っ取り早い解決策としましては「私の指が細くなる」「私がiPhoneを購入する」といった2つが考えられるのですが(笑)、あいにくどちらも無理そうですので、ささやかながらもこんな記事を書いてみました。
(最近のAndroidスマートフォンは大画面化しているので、やはり固定320pxで表示されると見づらいのでは……どうなんでしょう?)

ライブドアブログやJUGEMブログではタブレット端末でアクセスすると、強制的にスマートフォン用のテンプレートに切り替わるようです。画面サイズも可変になっていて、自動で挿入される広告も(大体の)大きさは320px、画面の中央でセンタリングされるみたいです。
そろそろFC2でも横幅可変前提のデザインにして欲しいよなぁと思ってみたり。(有料版にすれば広告が挿入されないとのことですが…)

ちなみにどうでもいいことですが、私が設定しているスマートフォン用のテンプレートが表示も色もシンプル設定なのは、出先や職場でチェックしてもHENTAIな記事だということが(極力)バレないようにとの心遣いからです。むしろ真面目に仕事している体で(笑
 
[タグ : ]
■カテゴリ : 情報
変えてみました
私はまだガラケーで、スマホもっていないので、全く知りませんでした。

一応、一文加えてみました。上手く反映されてますでしょうか?

[ 2013/06/09 10:35 ]
ありがとうございます!!
> みずほさま

わー!!早速手を加えて下さってありがとうございます~
ブログをチェックさせて貰ったのですが、一点だけ注意事項が。
記事本文に追記したのですが、テンプレートのデザインが崩れてしまう可能性があります。
特にみずほさんがお使いの「sweet_cat_cafe」だと、仔猫が仔猫じゃなくなるという怪奇現象が…(笑

あとは本文でちょこっと書いたページの遷移が上手くいってないようですが、このままでも特に問題ないと思います。(「スマートフォン版で表示」のボタンを押せばスマートフォン用のテンプレート表示に戻るので)

ひっそりとつぶやいてみたのに対応してくださいって嬉しいです。これからモリモリブログをチェックしますね!
ありがとうございました!!

私もまだまだガラケーで頑張りますよ~電池パックの蓋部分にヒビが入ってしまい閉まりづらいのですが。
[ 2013/06/09 13:10 ] [ 編集 ]
勉強中!!
> 06/10 02:27拍手の方

拍手ありがとうございます。スタイルシートはやればやるほど混乱するのでコツコツ勉強中です。
今回の件は大元で対応してくれるのが一番なんですが……。
[ 2013/06/10 20:50 ] [ 編集 ]
調べてまいります
始めまして。「すずろごと」を管理していますmomo缶と申します。ガラケーしか持っておらず、スマホ状態はさっぱりです。
一文加えさせていただきます。自分のブログに来てくださる方にもどんな感じで表示されておるか聞いてみます。びっくりですね。ありがとうございました。
私も筋肉は好物です。こんなところから失礼いたしました。
[ 2013/06/11 08:13 ]
ありがとうございます!
> momo缶さま

こんにちは、手早く修正を加えてくださってありがとうございました。
早速ブログを確認し、画面に合わせた表示になっているのを確認できました。私が非常に助かります!!(笑

ブラウザによっても画面の表示は微妙に異なるので、スマホやタブレットでは、本当の所はどんな表示になっているんでしょうね?気になります。

momo缶さんも筋肉好きなんですね~でも最近は筋肉成分が足りていなくて寂しい限りです……。
[ 2013/06/11 20:14 ] [ 編集 ]
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

プロフィール
プロフィール画像
Author:4da
漢気溢るる管理人。
ガチっとムチっとがモットーです。

【コメントへの返信について】
拍手コメントは記事のコメントにて、メルフォについてはその月の[気になる]記事のコメントにて返信しています。

にほんブログ村 BLブログ BL小説読書感想へ にほんブログ村 BLブログ BL漫画感想へ

サイト内検索



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。