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

このページの記事目次 (タグ: jQuery の検索結果 10 件)

  total 3 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? | ↑ ページ先頭へ ↑ |

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? | ↑ ページ先頭へ ↑ |

自分のつぶやきをオートスクロールで表示 (jCarousel Lite を活用)

2012/03/09 (金)  カテゴリー: Twitter・ブラウザ関連

自分のつぶやきを jQuery の 『jCarousel Lite』 を利用して 1件ずつ自動でスクロール表示 するようにしてみました。 ツイートを何件ずつ表示するか、自動でスクロールさせるか・手動で送るようにするか などは自由に変更できるし、単純にリストで出力したものを利用しているだけなので、色々応用の効く方法だと思います。

Twitter,ツイートを取得して1件ずつ表示
※実際の表示は 個別記事ページの記事下 とトップページ にあります。

つい先日、jQuery 『jTwitteen』 というのを試したばかりなのですが... どうしても IE8以下 で見た時のフォントの汚さが気になってしまって、方法を変更することにしました。
[ デモページ / 関連記事 : ツイートを1件ずつ表示する jTwitteen の設置方法 ]


今回利用した 『jCarousel Lite』 は元々テンプレに設置していたものです。
[ 記事 : jCarousel Lite をカスタマイズして記事毎に! ] でも紹介したものですが、基本は ↓こんな感じ。 これは オートスクロールはOFF の状態ですが、自動も可能。


  • 立ち読みページ
  • 花粉症の長男用マスク
  • 次男用(これでも大きい..)
  • 20Lを2コ購入。コック付。

要は、リスト<li> で自分のツイートを表示するようにしたら これが使えたのですが、設置する上でかなり苦労した部分もあるので 方法を紹介しておきます。 各ツイートへの 「@返信,リツイート,お気に入り」 ボタンも付けてみました。


つぶやきを jCarousel Lite で、1件ずつ表示させる方法

キーワード検索 : ツイッター  jQuery  javascript  カスタマイズ  

スポンサーリンク

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

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

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

ツイートを1件ずつ表示する jTwitteen の設置方法

2012/02/07 (火)  カテゴリー: Twitter・ブラウザ関連

自分のツイート(つぶやき)をスライドショーのように1件ずつ自動で表示させることのできる jQueryjTwitteen』 を試してみました。

jTwitteen: ツイート(つぶやき)を順に表示
クリックで デモページ に移動します。
 

個別記事ページの記事下 と トップページ に表示するようにしてみましたが、どうでしょうか。。 取得する件数を何件にするか、ツイートメニュー(返信・リツイート・お気に入り)を表示するか...等 は jQuery の設定で変更可能です。 また、スタイルシートを弄ることで ある程度 自分好みにカスタマイズできるのも特徴かなと思います。

2012/03/01~ 表示方法を 『jCarousel Lite』 を使うものに変更しました。
[ 関連記事 : 自分のつぶやきをオートスクロールで表示 (jCarousel Lite を活用) ]


Twitteen プラグイン

元々は、私のテンプレユーザーさんでもある だっきゃさんのサイト で、『Twitteen』 というプラグイン が設置されているのを見て、「何か面白い♪」 と思ったのがきっかけです。

こちらはプラグイン版なので、作者さんのサイトで発行されるソースを貼り付けるだけという手軽さが魅力かも。。 タイプライターバージョン と 横スクロールバージョン があるようです。



jQuery版 の 『jTwitteen』 は自分で設定しないといけないので、及び下の図のようなちょっとした問題もあったので... FC2ブログでの設置方法を残しておこうと思います。

IE7・IE8 で生じるバグ,フィルターが使われている部分のフォントが ギザギザの汚い表示に...



jTwitteen 設置方法 (FC2ブログ編)

キーワード検索 : ツイッター  jQuery  プラグイン  javascript  ソース  

スポンサーリンク

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

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

2012/02/07 ~ | Comment (0) tweet? | ↑ ページ先頭へ ↑ |
申し訳ありません。 お探しの記事は現在、この ユーザータグ (Keyword) を設定していない可能性があります。 右上の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。