Adobe Edge Inspectの復旧とChrome 30の拡張機能バグ修正

Adobe Edge Inspect CC
Adobe Edge Inspect CC

厳密にはいつからかわからないんですが、先日のAdobeの不正アクセス問題あたりからInspectが使えなくなりました。
今は問題なく使えるようになったんですが、結構つまづいたので備忘録としてメモ。

続きを読む Adobe Edge Inspectの復旧とChrome 30の拡張機能バグ修正

facebookページのウォールを取得してjQueryでサイトに表示させる方法

facebookページのウォールを取得して表示するサンプル - CODEPEN
facebookページのウォールを取得して表示するサンプル – CODEPEN

facebookのウォール(タイムライン)を取得して自分のサイト内に貼り付ける方法をまとめました。
コードとサンプルはCODEPENにまとめてあります。

続きを読む facebookページのウォールを取得してjQueryでサイトに表示させる方法

DreamweaverへのZen Coding導入と日本語の設定方法

Zen Coding Dreamweaver拡張機能パッケージ
Zen Coding Dreamweaver拡張機能パッケージ

先日のWeb制作環境の構築でCoda2にZen Codingをインストールするのを紹介したので、合わせて今回はDreamweaverへのZen Codingの導入方法のご紹介。
といってもやることはほとんどCoda2と同じです。

続きを読む DreamweaverへのZen Coding導入と日本語の設定方法

Web制作環境のセットアップ:Coda2 環境設定・プラグイン編

Coda 2 アイコン
Coda 2 アイコン

先日iMacをSSDに換装してOSから全てセットアップしなおしたので、これを機に自分のWebの制作環境のセットアップをまとめておきます。
サイト制作にあたってオーサリングソフトは8割Coda2、2割Deamweaverといった感じでなので、今回はCoda2とプラグイン周りになります。(Dreamweaverは昔作ったサイトの更新作業などに使うぐらい)

続きを読む Web制作環境のセットアップ:Coda2 環境設定・プラグイン編

CSSの属性指定によるスタイルの変更(リンク拡張子によるアイコン変更)

CSSの属性指定によるスタイルの変更
CSSの属性指定によるスタイルの変更

既に知ってる人も多いかもしれないですが、cssで属性名(hrefなど)や属性値(.docなど)を指定することができる事を知ったためサンプル作成がてらメモ。
サンプルはコチラか上の画像リンクから飛べます。

続きを読む CSSの属性指定によるスタイルの変更(リンク拡張子によるアイコン変更)

twitter公式ウィジェット(API ver1.1)カスタマイズ方法

twitterロゴ
twitterロゴ

twitterやブックマークまとめにも書きましたが廃止と言いながらも何だかんだでそのまま使えていたtwitterウィジェットAPIの前バージョンである1.0が6月12日に完全に廃止になりました

昨年に1.1を公開していたものの、試してみたらカスタマイズ性が低くしかも使いにくいということもあって、自分も1.0を使ってました。
特にjqueryプラグインのカスタマイズしたスクロールバーが使えなかったという点がイヤだったもんで。(1.0だと擬似的にではあるけど使えてた)

しかし表示すらされないんじゃしょうがないというわけでtwitter公式のウィジェットの設定と簡単なカスタマイズ方法のご紹介です。

続きを読む twitter公式ウィジェット(API ver1.1)カスタマイズ方法

上部固定ナビゲーションで各コンテンツにアニメーションするjQueryプラグイン:Smint

smint.js改 キャプチャ
smint.js改 キャプチャ

1ページ完結で縦長のスクロールするサイトでよく使われている、スクロールしてもナビゲーションをページ内に残して各コンテンツにスムーススクロールするjQueryプラグイン「smint」というのがシンプルで使い勝手がよさそうだったんですが、ちょっと気になった箇所があったので修正してみました。

続きを読む 上部固定ナビゲーションで各コンテンツにアニメーションするjQueryプラグイン:Smint

Google画像検索風ギャラリー jQueryプラグイン3種比較 – SUPERBOX、Thumbnail Grid、least.js

SUPERBOX、Thumbnail Grid、least.js
SUPERBOX、Thumbnail Grid、least.js

以前twitterや当ブログのブックマークまとめで紹介したものですがjQueryプラグインでGoogle画像検索風のギャラリーを使いたいところがあったので使用感含めて比較したのをまとめてみました。
どれもiPhone、Androidに対応されていて、jQueryは現在最新の1.10.1で確認しています。

続きを読む Google画像検索風ギャラリー jQueryプラグイン3種比較 – SUPERBOX、Thumbnail Grid、least.js

Chrome Developer Toolsで編集したコードを元ファイルにリアルタイムに反映させる拡張機能「Tincr」

Chrome拡張機能 Tincr
Chrome拡張機能 Tincr

Coda2が好きです。でもGoogle ChromeのDeveloper Toolsはもっと好きです。

HTMLだけ先にガッツリ書いてからChromeでプレビューしながらDeveloper ToolsでCSSを一気に書いて元ファイルにコピペするのが昔の自分のスタイルだったんですが少し前のバージョンから仕様変更でこの方法ができなくなりました。

そんな自分のようにDeveloper Toolsでガリガリ書く人にオススメなのが、編集したソースをDeveloper Tools上から元ファイルに保存することが可能な「Tincr」という拡張機能。
しかも導入も設定も簡単!!

続きを読む Chrome Developer Toolsで編集したコードを元ファイルにリアルタイムに反映させる拡張機能「Tincr」

使い勝手のよさそうなjavascriptやCSSサンプルまとめ – 2013年4月11日

最近(と言ってもこの1ヶ月ぐらい)見かけたjavascriptやcssなどのプラグインやサンプルなどで使い勝手のよさそうなものや面白そうなものをまとめてみました。

後で実際サンプルも作ってみて使い勝手を試すための備忘録です。

続きを読む 使い勝手のよさそうなjavascriptやCSSサンプルまとめ – 2013年4月11日