タグ

ブックマーク / www.webopixel.net (6)

  • jQueryでTwitterの公式ウィジェットをカスタマイズする

    Posted: 2013.02.08 / Category: javascript / Tag: jQuery, Twitter 以前のTwitterウィジェットは色とか色々とカスタマイズできたのですが、新しくなってほぼそのまま使うしかなくなってしまいました。 そこでjQueryを使用してカスタマイズしてみようと思います。今後、Twitterの仕様変更によって使えなくなる可能性もありますがご了承ください。 タイムラインを表示するウィジェットの設置 タイムラインを表示したいときはこんな感じに設置しますね。 html <a class="twitter-timeline" href="https://twitter.com/xxxxxxxxxxxx" data-widget-id="xxxxxxxxxxxxxxxxxx" lang="JA" width="600">@xxxxxxxxxxxxx

    jQueryでTwitterの公式ウィジェットをカスタマイズする
    www-tmcc
    www-tmcc 2014/04/01
  • jQueryを使用して指定したハッシュタグのつぶやきを取得する

    Posted: 2010.12.11 / Category: javascript / Tag: jQuery, json, Twitter, 正規表現 Twitterのつぶやきを表示しているWebサイトがだいぶ多くなってきた昨今。イベントサイトなどでは特定のハッシュタグのつぶやきを表示するといった使い方もされているようです。 ということでこの記事ではjQueryを使用して指定したハッシュタグのつぶやきを取得して表示してみます。 Twitterのハッシュタグを検索し取得するURI Twitterからはさまざまな形式でデータを取得できますが、jQueryを使用するならjson形式が便利です。 ハッシュタグを取得するURIは下記です。 http://search.twitter.com/search.json?q=%23[ハッシュタグ名] [ハッシュタグ名]は取得したいハッシュタグ名に置き換え

    jQueryを使用して指定したハッシュタグのつぶやきを取得する
    www-tmcc
    www-tmcc 2012/04/12
  • jQueryでTwitterの自分のつぶやきを表示する

    jQueryでTwitterの自分のつぶやきを表示する すでに多くのTwitterライブラリがあるので必要があるかは微妙なところですが、jQueryを使用してTwitterの自分のタイムラインを表示してみます。 文字情報だけを取得することができれば、自由にスタイルが設定できるのでデザインとかも統一できるじゃないですか!? 投稿日2010年07月04日 更新日2012年10月12日 ※2012.10.11現在Twitter API変更によりこの方法は使用できなくなりました。 新API(var1)に対応した方法は下記をご覧ください。 2012年10月 Twitter APIの変更によりjQueryでつぶやきが表示できなくなったので解決策 まずは読み込むべきデータの確認をしてみましょう。 下記のURIで自分のタイムラインの情報を見ることができます。[USERNAME]には自分のアカウント名に置き

    jQueryでTwitterの自分のつぶやきを表示する
    www-tmcc
    www-tmcc 2012/04/12
  • jQueryでスクロールすると表示する系いろいろ

    jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration

    jQueryでスクロールすると表示する系いろいろ
    www-tmcc
    www-tmcc 2012/03/09
  • jQueryで奥行きのある背景スクロールを作ってみる

    jQueryで奥行きのある背景スクロールを作ってみる 普通に背景画像を指定するだけだとスクロールに追従して画像も移動しますが、jQueryで背景位置を調節することでスクロールの速度をずらすことができます。 この記事ではこの機能を利用して、スクロールすると奥行きの感じられる動作を作ってみます。 投稿日2011年05月13日 更新日2011年05月13日 画像を手前は早く、奥は遅く移動 デモを見て頂ければわかると思いますが、やってることは手前の背景画像を早く動かし、奥の画像を遅く動かしているだけです。 html + css 画像は当然ですが2枚以上用意しましょう。 ここでは3枚画像の画像を使用します。 なのでdivを3つ用意し、それぞれに背景画像を指定します。 html <div id="bg03"> <div id="bg02"> <div id="bg01"> <!-- /#bg01 --

    jQueryで奥行きのある背景スクロールを作ってみる
    www-tmcc
    www-tmcc 2011/10/11
  • WordPressのユーザーページ(author.php)テンプレートをカスタマイズする

    WordPressのユーザーページ(author.php)テンプレートをカスタマイズする Wordpressを複数人で管理する場合ユーザーページ(authorテンプレート)を利用すれば、ユーザーごとの自己紹介ページを簡単に作成できます。 この記事では管理画面の「ユーザー編集」で入力した情報をユーザーページ(authorテンプレート)に表示させることから始め、「ユーザー編集」での不要な項目の削除や、最終的にはオリジナルのフィールドを追加するということをやったりしてみます。 投稿日2010年08月28日 更新日2011年04月03日 ユーザーページを確認してみる。 まずユーザーページを確認してみましょう。 ブログURLのあとに「/author/[ユーザー名]」でユーザーごとのページが表示されます。 http://www.example.com/author/[ユーザー名] 何も設定していないと

    WordPressのユーザーページ(author.php)テンプレートをカスタマイズする
  • 1