jQueryで画像の高さを取得しようとしたら失敗してしまった複数の画像の高さを取得して、レイアウトを調整しようとしたのだがうまくいかない。 その時のHTMLは以下↓のようになっていた。 <div id="photo_list"> <img src="photo1.jpg" width="100" /> <img src="photo2.jpg" width="100" /> <img src="photo3.jpg" width="100" /> </div> javascript(jQuery)はこう↓ $(function(){ var photos = $('#photo_list img'); var max_height = 0; $.each(photos,function(){ if( max_height < $(this).height() ){ max_height =
これの応用編。 例えば、こんな風に、リストの1つ1つの項目が枠線で囲まれてる場合にどうするか? しかも、境界線部分が点線、それ以外は実線になっているなら。 <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> <li>メニュー5</li> </ul> HTMLは↑こんな感じ。 リストの最初と最後にクラスを指定する。「:first-child疑似クラス」と「:last-child疑似クラス」を使う。「:last-child疑似クラス」の代わりに「expression」を使う。jQueryを使う。ULに枠を付ける。思いついたのはこの5つの方法。 HTMLのタグを修正できる場合リストの最初と最後にクラスを指定すればいい。 <ul> <li class="first">メニュー1</li> <li>メニュー2</li> <
jQuery1.3以降では「$.browser」が非推奨になってる。昔使ったスムーズスクロールのスクリプトをコピペで使おうとしたら、動かなかった。orz そのソースが下記のような感じ。 function smoothScroll(href){ var speed = 400;//スクロール速度(ミリ秒) var target = $(href == "#" || href == "" ? 'html' : href);//移動先オブジェクト var position = target.offset().top;//移動先のY座標 /* スムーススクロール */ $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing'); return false; } まず元のソースを少し解説すると
Tumblrには、他のブログサービスにはよくある、最新の記事を一覧表示する機能、ってのがない。 Tumblrをブログとして使ってるなら、サイドバーあたりに、そうゆうのを表示させたい! そこで、以前書いた「Tumblr API で投稿データを取得する方法」という記事の情報を活用して、「Tumblr API で最新記事一覧を表示するjQueryプラグイン」を作ってみることにしました。 このjQueryプラグインの機能指定した、Tumblrサイトの最新記事をを取得し、一覧表示させます。 出力結果は、こんな感じになります。 <ul class="tumblr_post_list"> <li class="tpl_post postno_1"><div class="post_title"><a href="http://stainless-note.tumblr.com/post/38820136
最近、TumblrAPIを使って、コードを組むことがあって、 なかなかいい出来だったので、 「よし!ブログでソースコードを公開しよう!」 と思い立ったものの。 はて?ソースコードを綺麗に表示するには、どうしたものか。。。 「開発系のブログを書いてる皆さんはどうしてるのだろう?」 と検索してみると、どうやら「ソースコード ビュー ライブラリ」を使ってる模様。 参考)行番号や各行背景色で見やすい ソースコード ビュー ライブラリ SyntaxHighlighter SyntaxHighlighter エディタのようにWebサイト上に綺麗にソースコードを表示する方法。 ソースを書くプロ達や未来の開発者のための学びの場である HTML,CSS,JS,Perl,PHPなどのマニュアル・解説サイトなどで、 PREソースコードを行頭番号付きでカッコよく表示するソース ビューア なるほど、これは便利そう!
How to create a custom HTML theme (カスタムテーマの作り方) Want to create a custom look for your blog? If you’re comfortable hand-coding HTML, then you’ve come to the right place! If not, choose from hundreds of beautiful themes in the Theme Garden. あなたのブログのためのカスタムルックを作成したいですか? あなたが快適に手HTMLコーディングをしている場合は、適切な場所に来て! されていない場合は、中の美しいテーマの何百もの中から選択Theme Garden. Introduction(はじめに) Tumblr is built around seven key p
前回、 ソースコードを美しく公開する方法 - 「SyntaxHighlighter」の使い方 の記事を書いたとき、いざそれをTumblrに投稿しようとしたら、いろいろ躓いたので、備忘録。 今回のポイントは3つ! Tumblrで「SyntaxHighlighter」ライブラリを読み込む3つの方法。「Can’t find brush for:xxxx」とアラートが出る。タグがエスケープされる?タグがバグる? Tumblrで「SyntaxHighlighter」ライブラリを読み込む3つの方法。テーマのカスタマイズ機能を使って、ライブラリの読み込みを行います。 カスタムテーマ「HTMLを編集」ボタンで、編集画面に行くことができます。 問題はどこからライブラリを読み込むか?ということ。 ライブラリを読み込む方法は主に3つ。 ※他の方法は思いつきませんでした。 Tumblrの静的コンテンツエリアに「S
Tumblr APIは主に、2種類に分類できます。 既に公開されている情報を取得するAPIと、 通常、ユーザー本人のみが扱える情報を取得、あるいは操作するAPIです。 前者は、APIkeyのみが必要で、 後者は、APIkeyとOAuthが必要になります。 どちらの場合も、APIkeyは必須なので、今回はAPIkeyの取得方法をご紹介します。 アイコン画像を取得するAPI は例外的に、APIkeyなしでOKでした。 また、前のバージョン(v1)のAPIではAPIkeyは必要なかったみたいです。 登録ページAPIkeyを取得は、この (アプリを登録する)ページで行います。 Tumblrでのログインが必要です、つまりTumblrユーザーであることが必須条件ですね。 こんなページです。 私の場合、既に1つアプリを登録してるので、一覧に表示されていますね。 「+アプリを登録する」ボタンをクリックしま
こちら「Tumblr API(公式)」と、 こちら「Tumblr API v2 日本語訳」 を見ながら、 Tumblr APIを使った投稿データの取得にチャレンジしてみます。 まず、マニュアルを確認してみましょう。 書式api.tumblr.com/v2/blog/{base-hostname}/posts[/type]?api_key={key}&[optional-params=] HTTP Method:GET 認証:APIkey リクエストパラメータbase-hostname(文字列) スタンダード/カスタムブログホスト名 必須:YES api_key(文字列) あなたのAPIkey (APIkeyの取得方法はこちらから。) 必須:YES type(文字列) 取得する投稿データ種別。次のうち1つを指定します: text, quote, link, answer, video, au
公式に、「Tumblr API」というのが公開されているんですが、 全編英語ドキュメントということで、少し敬遠してました。 ところが、先日「Tumblr API v2 日本語訳」というのを発見しました。 こちら(kid0725.usamimi.info)の方が作って下さったようで、全く以てありがたい限りです。 感謝です。めっちゃわかりやすい! 今回は、まず「Tumblr API」の中でも簡単そうな、アイコン画像の取得、というのをやってみたいと思います。 APIkeyも、OAuthも要らない、さらに、PHPもJavascriptも要りません。 アイコン画像の取得書式api.tumblr.com/v2/blog/{base-hostname}/avatar[/size] リクエストパラメータbase-hostname(文字列)スタンダード/カスタムブログホスト名 必須:YES size(数値)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く