ありのごとくあつまりてFC2ブログカスタマイズ,共有テンプレート,素材リンク集,フリーソフトの紹介など。 迷子にならないブログ作りを目指し... 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

このページの記事目次 (カテゴリー: ブログカスタマイズ上級 30 件)

  total 8 pages  次のページ →  

文字サイズ変更ボタン をスマートフォン用テンプレートに設置

2013/05/26 (日)  カテゴリー: ブログカスタマイズ上級
文字サイズ調整ボタン を付けて任意に大きいフォントにも変更できるようにしたもの,iPad(スマートフォン用テンプレート)

スマートフォン用テンプレートに 文字サイズを デフォルト・大きめ・特大 などに調整できる jQuery のスクリプトを設置してみました。 クッキーを利用しているので、ページを送っても有効です。

iPad からFC2ブログを閲覧した場合、以前は パソコンからのアクセスと同じ扱いになっていましたが、2013年3月頃からは スマートフォン用テンプレート にも切り換えられるような仕様に変わっています。(※現在のデフォルトは PC用テンプレート のようで、共通URLでアクセスした場合は 毎回1度は PC用テンプレートが表示されます。)

PC用テンプレートで閲覧すると、上部に【 スマートフォン版で表示 】というリンクが 大きく表示されてしまうようになったので、仕様変更は賛否両論なようですが、どちらでも閲覧できるようになったのは便利になったと言えるのかもしれませんし、iPad などからも閲覧し易いようにしていく必要が出てきたと言えるのかもしれません。

iPad から実際に見てみると、不便に思う点がいくつかあります。 例えば

  1. スマホ向けテンプレで閲覧すると、ズーム(ピンチアウト)が出来ないサイトが多い。
  2. スマホ向けテンプレで閲覧すると、ズーム(ピンチアウト)が出来る場合でも、ズームをすると (画面幅での折り返し表示がされない為) 横スクロールが必要になるケースが多い。

キーワード検索 : jQuery  javascript  フォント  iPad  スマートフォン  ブラウザ  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-240.html

2013/05/26 ~ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |

検索結果が何件かを表示する方法 (FC2 新変数)

2012/04/14 (土)  カテゴリー: ブログカスタマイズ上級

別に 検索結果以外でも使えるのですが、FC2ブログで使える変数(公式マニュアル)に <%total_num> が追加されているはご存じですか? これ、どうやら元々使えていたらしいのですが、マニュアルに載ったのは 2012年1月 あたり?比較的最近かなと思います。

この変数は トップページなどでは 全記事件数、 カテゴリー別ページでは そのカテゴリーに該当する記事件数、 検索結果ページでは その該当記事件数... というようにエリアによって表示される値が異なります。 PC版,スマートフォン版,携帯版 それぞれのテンプレートで機能しますので、上手く利用すれば閲覧性が良くなるかも。。

便利ナビのところに <%total_num> を設置
クリックで画像を拡大します
 [ 実際の検索結果ページ ]

と、いう訳で ページ上部の 便利ナビ のところに追加してみました。 ここには元々 エリア変数 を入れてあるので、<%total_num> 件 などを追加するだけでOKです。

キーワード検索 : FC2ブログ  テンプレート  変数  ブログ内検索  便利ナビ  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-219.html

2012/04/14 ~ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |

iPad,iPhone,Android,DS,Wii など 閲覧時の操作性対策を2つ

2012/04/03 (火)  カテゴリー: ブログカスタマイズ上級

最近は PC・スマートフォン・タブレット時代 などとも言われるように、ブログの閲覧環境も多種多用になっていますね。 現在、FC2ブログでは PC用・スマートフォン用・携帯(ガラケー)用 のテンプレートがあります。 振り分けは 以下のような感じ。

  • PC用テンプレート が適応
    PC,iPad,3DS,DSi,Wii,PSP,PS3,PSVita...等
    追記 : 2013年3月頃~ iPad はスマホ用にも切り替え可能になっています。
  • スマホ用テンプレート が適応
    ※殆どのFC2ブログで、PC用テンプレートとの切り替えが可能
    iPhone,iPod touch,Android,Windows Mobile,BlackBerry,...等
  • 携帯用テンプレート が適応
    スマートフォンに分類されない 各社携帯電話

下の図は、このサイトで良くアクセスされるページ(1週間分の上位集計)です。

アクセス解析 : 
PC用テンプレートでの閲覧を辿ると iPad, DS, Wii 等の他、「iPhone や Android 等のPC版表示」 でもアクセスされていることが判ります。
クリックで画像を拡大します

主なスマートフォン,任天堂ゲーム機 及び 表示幅 800px以下 の環境では lightBox は機能しないようにしてあります。 画像をクリックすると単純に 別タブ(_blank)で大きい画像を開きます。

という訳で、このサイトの問題を少しでも減らすため、2つの対策をしてみました。

  1. ある条件の時は lightBox を機能させない 
    jQuery lightBox (拡大した画像や背景の何処をクリックしても閉じられるようにしてある) を タッチ操作のもの(iPad,iPod,iPhone,Android の場合) と、3DS などモニターの小さいものの場合と、動作が若干不安定になる Wii では実行しないで、普通にリンクで開くようにしたい!
  2. ナビゲーションメニューの誤タップ対策 
    タッチ操作のもの(iPad,iPod,iPhone,Android,3DS 等) では、:hover(マウスオーバー)でプルダウンメニューが開くことはない為、以前のものでは、プルダウンさせたくても誤タップ(誤クリック)していまうケースも多いかも。。 ※アクセスできないことはないのですが、操作にコツが必要でした。

キーワード検索 : スマートフォン  iPad  iPhone  DS  Wii  jQuery  Lightbox  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-218.html

2012/04/03 ~ | Comment (7) tweet? | ↑ ページ先頭へ ↑ |

スマートフォン用テンプレートのプレビュー方法

2011/09/10 (土)  カテゴリー: ブログカスタマイズ上級

FC2ブログを スマートフォン(iPhone, Android, Windows Mobile 等) 及び iPod touch から閲覧する時に適応される テンプレート、これをカスタマイズ出来るようになりました! 2011年8月30日頃~ 一部サーバーで導入, 2011年9月7日 公式アナウンス 有り

iPhone 3G/4G tester でスマートフォン用テンプレートをプレビューしたもの

でも、「iPhone とか持ってないし...」 という方も多いですよね。 私も持っていないので 殆どが手探りの状態ですが、スマートフォンを持っていなくてもプレビューすることは可能ですので、その方法をいくつか紹介します。

まず、知りたいのは 今どんな見え方になっているかですよね。 現在FC2ブログで用意されている スマホ用公式テンプレートは 2種類あるのですが...

追記 (2012/04/24) :
今は 公式・共有で100種類以上の スマートフォン用テンプレート が使えるようになっています。

FC2ブログ Webクリップアイコン 
(apple-touch-icon.png)

IE や Sleipnir 等 (Trident エンジン) のブラウザでは 確認できない CSS設定 がいくつか入っています。

また、それ以外のブラウザでも (カスタマイズしない状態では) 各所のリンクをクリックすると パソコンでの表示に戻ってしまうので、色々と不都合があります。 (※カスタマイズすれば、辿りやすいリンクに変更も可能)

と、いう訳で...



Safari のユーザーエージェントを変更して iPhone の実際の表示に近いもので 動作確認(プレビュー)をする方法

iPhone表示は、ブラウザ『Safari』で比較的近い確認できると思います。ブラウザメニューの設定→詳細→開発表示チェック。メニューの開発→ユーザエージェント(iPhone)。ウインドウ狭める。 http://www.apple.com/jp/safari/
http://twitter.com/paroday/status/108564599934173184

と、Paroday(@paroday)さん から教えて頂いたので、早速 Safari(Windows版)をダウンロード。 以下の手順で設定しました。 簡単です^^

キーワード検索 : スマートフォン  iPhone  ブラウザ  プレビュー  テンプレート  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-204.html

2011/09/10 ~ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |