-
SNSボタンをオリジナル画像で設置する方法|WEB Drawer webdrawer.net
TwitterやFacebookへのボタンは公式サイトでボタンを作れますが、そのボタンはそれぞれオリジナルのボタンで設置することもできます。 ボタンの仕組みが変わると動かなくなるかもしれませんが、以下の方法で設置できます。今回紹介しているのはTwitter・Facebookシェア・mixiチェ... 続きを読む
-
Pinterest風のデザインを実装する「jQuery Masonry」を試してみた|W... webdrawer.net
Pinterestのデザインは、要素が敷き詰められた感じになっています。 これはなんていうデザインの通称かわからないので、ひとまず「Pinterest風」と言ってます。 これを実装してくれるJavaScriptプラグインのひとつが「jQuery Masonry」なのですが、どういうものか使って... 続きを読む
-
パララックスサイトの作り方の初歩|WEB Drawer webdrawer.net
最近パララックス(視差効果)を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが... 続きを読む
-
動画をサイトに埋め込む際に便利な、オープンソースのFlashVideoPlay... webdrawer.net
動画と言えば最近はYoutubeにアップしたり、ニコ動やその他動画サイトにアップして見ることが多いと思いますが、 サイトに直接設置することも可能です。その際に便利なのが「NonverBlaster」です。 デモページ 以下からデモページに行けます。いろいろ並んでますが、ようはいろいろ設定できる... 続きを読む
-
shadowboxをクリッカブルマップで使う方法|WEB Drawer webdrawer.net
lightbox風のプラグインでshadowboxというのがあるのですが、これをクリッカブルマップで使った時に動かなかったのでそれのメモです。 shadowboxとは lightbox風に表示してくれるJavaScriptのプラグインです。jQueryの他にPrototypeなどのJSライブラ... 続きを読む
-
jQueryで実装するスクロールに伴う演出|WEB Drawer webdrawer.net
スクロールに関する演出を調べたので、調べたものに使用しているプラグインと実装方法のメモです。 なお、デモについてはFirefoxで確認してますので他のブラウザではずれてる場合があるかもしれません。 慣性スクロール 横スクロール(ナビゲーション付き) iOS見たいなスクロールバーと慣性スクロール... 続きを読む
-
Photoshopの便利なスクリプトや拡張機能のまとめ|WEB Drawer webdrawer.net
Photoshopにも便利な機能を追加できるスクリプトと拡張機能があります。こちらでも自分が使っているものや便利そうだなと思ったものをまとめました。 スクリプトの場合はファイルをダウンロードしてきて以下に入れます。環境によって違う場所にあるかもしれません。 Windows → C:\Progr... 続きを読む
-
Photoshopの便利なスクリプトや拡張機能のまとめ|WEB Drawer webdrawer.net
- コンピュータ・IT
- photoshop Memo_forWork Web_Tool
- 5 users
- 2012/03/21
Photoshopにも便利な機能を追加できるスクリプトと拡張機能があります。こちらでも自分が使っているものや便利そうだなと思ったものをまとめました。 スクリプトの場合はファイルをダウンロードしてきて以下に入れます。環境によって違う場所にあるかもしれません。 Windows → C:\Progr... 続きを読む
-
Photoshopの便利なスクリプトや拡張機能のまとめ|WEB Drawer webdrawer.net
Photoshopにも便利な機能を追加できるスクリプトと拡張機能があります。こちらでも自分が使っているものや便利そうだなと思ったものをまとめました。 スクリプトの場合はファイルをダウンロードしてきて以下に入れます。環境によって違う場所にあるかもしれません。 Windows → C:\Progr... 続きを読む
-
Dreamweaverの便利なコマンドや拡張機能のまとめ|WEB Drawer webdrawer.net
コーディングをするときに自分が主に使ってるのがDreamweaverです。そのままでもいろいろ機能があって便利ですが、コマンドや拡張機能を入れることによってさらに便利に使うことができます。 そこでDreamweaverのコマンドや拡張機能で見つけたものをまとめてみました。他にもこんな便利なもの... 続きを読む
-
ページを読み込んだらすぐにfancyBoxを実行する方法|WEB Drawer webdrawer.net
- コンピュータ・IT
- jquery javascript
- 5 users
- 2012/03/05
画像などをクリックすると拡大画像をふわっと表示してくれる、いわゆるLightBox風のjQueryのプラグイン、「fancyBox」ですが、 これをページを開いた時にすぐ実行する方法を調べたので書いておきます。 JSファイルは普通に読み込む javascriptファイルは普通に読み込みます。 ... 続きを読む
-
IE6で簡単にfixedを使えるようにするjQuery.exFixed.js|WEB Drawer webdrawer.net
サイトを作る際に要素を画面のとある位置に固定して配置したい時に使うposition: fixed;ですが、 ご存知の通り、IE6では使用できません。だからといってIE6のシェアも下がってきているなか複雑になる対策をしたくもないので、 jsでサックリ実装したくて探していたのですが、動作がよいもの... 続きを読む
-
デフォルトスタイルを残しつつ、ブラウザのデフォルト挙動を合わせて... webdrawer.net
- コンピュータ・IT
- css Web_Coding *web制作 Memo_forWork *あとで
- 23 users
- 2012/01/24
トップ CSS デフォルトスタイルを残しつつ、ブラウザのデフォルト挙動を合わせてくれるCSS「normalize.css」 サイトを制作する際、最初にブラウザ初期値のCSSをリセットする方も多いと思います。様々なリセットCSSがありますが、ほぼすべての要素をリセットさせるものや、最近のHTML... 続きを読む
-
情報収集をもっと快適にする「Gunosy」を使ってみた|WEB Drawer webdrawer.net
日々、効率的に情報を集められないかなと思っているのですが、面白いサービスを見つけたのでご紹介します。 Gunosyとは Web上にあふれる情報の中から,毎日,あなたの興味にあった記事を集めてきます。 さらにGunosyは使えば使うほど,あなたの興味を学習し,より良い記事を推薦するようになります... 続きを読む
-
アイコンにも使える!?「Wingdings」と「webdings」 #LOVEFONT|WEB... webdrawer.net
webcre8さんで「皆さんの好きなフォントに対するアツい想いをブログでぶちまけ合う#LOVEFONT」というのがあります。 そこで自分も紹介してみようと思います。といっても業務でデザインすることが今はないのであまりフォントのことを知らないのですが・・・ みなさんの記事を見てると、フォントって... 続きを読む
-
私がはじめてWordPressを使ったときのメモ|WEB Drawer -WEB制作に関... webdrawer.net
少し前に、自分のWEB関連以外のことを書いているブログの方をリニューアルしたのですが、この時にWordPressを使って作成しました。 TwitterでよくWordPressの情報を見るので使おう使おうと思いながら、やっと使いました。今回はその時に調べたことを書いておこうと思います。 まずはイ... 続きを読む
-
HTML5を始める際に見ておきたいサイトやスライド|WEB Drawer -WEB制... webdrawer.net
HTML5を調べていろいろなサイトを見たので、こちらにまとめておこうと思います。こちらのサイトを見ておけば HTML5が何かよくわかると思います。 HTML5, きちんと。 HTML5の基本的な説明がのっています。 View more presentations from Masataka Y... 続きを読む
-
スマートフォンサイトを作る時に便利なフリックが実装できるjQueryプ... webdrawer.net
スマートフォンを使うときによく使う操作方法としてフリックがあります。このフリックの操作でギャラリーができるjQueryプラグインを集めました。 Androidを持ってないので、全てがAndroidで動くかは未検証ですがだいたい動くと思います。 flickGal 自分が一番つかってるのがこのfl... 続きを読む
-
IE6でiframeを使うときに注意すること|WEB Drawer -WEB制作に関する... webdrawer.net
IE6とiframeというもうあまり使わなそうなこの2つですが、あることをしてしまうとiframe内のコンテンツがまったく表示されない現象があったので、その解決方法を調べました。 DD_belatedPNG.jsを使用すると表示されなくなる いろいろ調べた結果、原因はiframe内のコンテンツ... 続きを読む
-
YouTubeの埋め込み動画プレーヤーをJavaScriptで制御するYouTube Jav... webdrawer.net
- コンピュータ・IT
- YouTube JavaScript API youtube埋め込み 動画設置
- 29 users
- 2011/08/22
サイトに動画を設置する際や、Youtubeにアップされている動画を紹介したい場合など、 Youtubeの埋め込みを使って表示する事があるかと思います。 この際にJavaScriptを使って制御ができるYouTube JavaScript Player APIというものがあり、設置をしたので そ... 続きを読む