このblogのフッターに使ってます。 タグで画像の絞り込みが出来るのでイラストとか写真とかUPしてるので、ギャラリー代わりに使えそうだなーと思い作ってみました。 jQueryとプラグインのjsを読み込む <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="tumblr_photowidget.min.js"></script>jQueryは1.3.2以上を対象にしてますので、それ以上のバージョンで。 オプションの設定 <script type="text/javascript"> $(function() { $.fn.tumblr_photowidget.defaults.name = 'Tumblr名'; // Tumblr名 $.fn.tumb

img要素ではなく背景画像（background-image）を切り替えるjQueryプラグインです。 2013年7月29日にバージョン0.4.0をリリースしました。一から書きなおして、切り替え方法など色々改善しているので、良ければ使ってみてください。 ダウンロード jquery.bgswitcher.js 開発リポジトリはrewish/jquery-bgswitcher · GitHub 依存ライブラリ jQuery 1.7.x以上が必要です。 ライセンス MIT License 主な機能 エフェクト付きの背景切り替え 切り替えの制御（開始/停止/リセット） ファイル名の連番自動読み込み 画像のプリロード デモ Demo - jQuery.BgSwitcher 使用方法 <div class="box"> <p>Lorem ipsum dolor sit amet.</p> </div>

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

書籍「tumblrデザインカスタマイズガイド」では、既存のテーマを変更してブログをカスタマイズする方法と、基本的な機能のみを使ったオリジナルのテーマを作成する方法について、解説しています。 ここでは、オリジナルテーマの作成に必要な演算子について、少しずつ追加しながら解説していきます。 固有の演算子は大きく分けて2種類ヘルプページの「カスタムHTMLテーマの作成」（https://www.tumblr.com/docs/ja/custom_themes+）を開くと、テーマの作成方法について調べることができます。なお、このページを表示するには、tumblrにログインしておく必要があります。 tumblrには、固有の演算子が大きく分けて2種類あります。ブログのタイトルや説明文などを挿入する「Variable」と、投稿などを表示するためにHTMLブロックをレンダリングする「Block」です。それぞ

Click here if your browser does not automatically redirect you...

初歩的な内容とはなりますが、毎回調べるのも労力を要すため、 今回はいろいろなSNSボタンの設置方法をまとめてみました。 （2013年9月18日時点での情報です。） Facebook いいね！ボタン https://developers.facebook.com/docs/reference/plugins/like/ HTML5の設置コードを使用した際、IE等の古いブラウザでは動かない場合があるので注意が必要です。 その場合はiframeを使いましょう。 またHTML5版のコードを使用していて、いいね！ボタンがエラー表示になっている際は、 data-href内がURLエンコードになっていないかどうかを確認してください。 仕様変更でURLエンコードしたものを使用するとエラー表示となってしまいます。 Twitter Twitterボタン https://twitter.com/about/re

値 ease：開始と完了を滑らかにする（初期値） linear：一定 ease-in：ゆっくり始まる ease-out：ゆっくり終わる ease-in-out：ゆっくり始まってゆっくり終わる cubic-bezier(数値, 数値, 数値, 数値)：3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定 Sample.1 横にBoxを移動させて変化の違いを確認。 HTML <div id="sample1"> <p class="ease">ease(default)</p> <p class="linear">linear</p> <p class="ease-in">ease-in</p> <p class="ease-out">ease-out</p> <p class="ease-in-out">ease-in-out</p> <p class="cubic">cu

ドットインストール代表のライフハックブログ

こんにちは。sekoです。 昨今、ウェブサイトを多くの人に見てもらう為に、SNSを利用して広めていく事はもはや常識となっています。 その際、とても重要となるのがウェブサイトにOGPの設定することです。 今回はOGPについて紹介していきます。 OGPとは OGPの正式名称は”Open Graph Protocol”と言います。 facebookやmixi、google＋などのSNSとウェブページを連携させる為に設定する記事情報で、各種ウォール、ニュースフィードに「こういうサイトです」と明言するために必要な仕様です。 例えばfacebookにおいて、OGPを設定していないサイトで「いいね！」を押すと「〇〇さんがリンクについていいね！と言ってます」と自分のウォールには投稿されますがニュースフィードには反映されないため他の人の目に記事がさらされる事はなかなかありません。 しかしOGP設定をしたサイ