RSSフィードからFacebookページへ自動投稿してくれるWebサービス「dlvr.it」 | バシャログ。
一蘭は好きなんですが、もはや気軽に行けるレベルの値段ではなくなってきたので味噌ラーメン屋を探す事にしました。こんにちは Latinです。 さて今回は、Facebookページの運営に日頃から四苦八苦されていらっしゃるWeb担当者の方も多いかと思いますが、ブログやニュースリリースなどのRSSフィードを使って、Facebookページへ自動投稿してくれるWebサービス、dlvr.it（デリバー・イット）をご紹介したいと思います。 実際に使ってみると本当にこれは便利です。 Facebookページを作成 今回はあらかじめ、テスト用のFacebookページ（非公開）を作成しておきました。 dlvr.it へアクセス 今回はFacebookでログイン。 dlvr.it 配信ルールの追加 「+Add Route」を選択（ルールを追加する場合もこちら） 管理用の配信ルールの名前を入力 「Sources」にフィ
どれ使おう？モーダルウィンドウ（Lightbox 風スクリプト）を集めてみました | バシャログ。
この間の春の嵐はすごかったですね。いろいろ飛ばされないように必死だった kimoto です。帰りの電車は久々に足が浮くほどの超満員を経験しました。 さて、ちょっとモーダルウインドウを調べる機会があったのでまとめてみます。 基本的に、全て jQuery で動くものになっています。 最新の情報ってわけではないですが、場面ごとに選べるものを集めてみたのでお試しくださいませ。 超シンプルな軽量スクリプト leanModal leanModal leanModal はとにかく軽量です。デモを触ってみると、その軽さがわかると思います。 ただし、軽さを徹底的に追求した結果なのか、IE6 には対応していないとのこと。 また、イメージギャラリーなどとしては使えないとのことです。 ちょっとした文章を表示するだけの場合などはこれで十分ですね。 そこそこ軽量、そこそこ機能的 Simple Modal Simple
Fireworksの「レイヤーからファイルに書き出し」が目からウロコ | バシャログ。
『哀しき獣』という韓国映画が面白すぎたので、もう一度観たいminamiです。 Fireworksの画像書き出しではもっぱらスライスの使用をプッシュしてきた当ブログですが、「レイヤーからファイルに書き出し」って便利じゃない・・・という衝撃を改めてお届けします。 「レイヤーからファイルに書き出し」使ってる？ Fireworksの書き出しメニューには幾つか項目がありますが、「レイヤーからファイルに書き出し」は今まで使ってきませんでした。 要因としては、 Photoshopと違いオブジェクトを直接編集できるので、パーツ毎のレイヤー分けを意識していなかった 画像書き出しはスライスが強力なので他の方法を気にしたことがなかった というのがあると思います。しかし、場合によってはスライスで管理するよりもこちらのほうが便利！ということで見なおしてみました。 同じレイアウトで大量に画像を作りたい 例えば以下のよ
[使える CSS テクニック] 実案件でも使える！フッターをブラウザ下部に固定する方法 | バシャログ。
暑い夏がやってきそうなので、久しぶりにツーブロック的な刈り上げにしてみましたishidaです。 今回は最近作業した案件で、これまであまり実践的に使わなかったCSSレイアウトを2サイト連続で使ってみたので、ご紹介。自分も忘れないようにメモ的エントリーです。 ページ下部に固定されるフッターを実現するためのCSSレイアウトです。 positionで実現する方法もありますが、コンテンツ量によっては表示が崩れるので今回は直球勝負です。 XHTML ソースはこんな感じになります。 <div id="container"> <div id="header"> ヘッダー <!-- /#header --></div> <div id="content"> <h1>フッターをブラウザ下部に固定するサンプル</h1> <p>本文が入ります。本文が入ります。本文が入ります。</p> <!-- /#content
![[使える CSS テクニック] 実案件でも使える！フッターをブラウザ下部に固定する方法 | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/c76f538a877e78afb07d09e5ff0f87885ac194e9/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_coding.png)
【Dreamweaver】コードビューでよく使うショートカット | バシャログ。
BMW が開発している MINI ブランドの電動スクーターが気になって仕方がない sakai です。 なんと、キーが iPhone ですよ！ 今回は、Dreamweaver の“コードビュー”でコーディングをする時に便利なショートカットをご紹介します。 タグ挿入系 Ctrl+1(～6) = 見出しタグ（h1～h6）の挿入 Ctrl+Shift+P = 段落タグ（p）の挿入 Ctrl+Alt+T = テーブル（table）の挿入 Ctrl+Alt+I = 画像（img）の挿入 Ctrl+B = 強調（strong）の挿入 Ctrl+I = やや強調（em）の挿入 Shift+Enter = 改行（br）の挿入 このあたりは基本なので、Dreamweaver でコーディングをされている方ならご存知かと思います。 Shift+Space = 半角スペースを挿入（全角モードでも半角スペースが入る）
Apple 関連のフォントを手に入れよう | バシャログ。
シーブレインのマニュアル作成サービスチームから「スマートフォンで読めるマニュアル作成」を PR するページを作ってほしいとのご依頼があり、ページをデザインました。 せっかく iPhone を素材に使うのだから、フォントも Apple 風にしたいわあ、といろいろ探した際に知ったいくつかのフォント情報をメモします。 ひと目でフォント判別できる一流デザイナーにあこがれる！ 1. Apple 日本語サイトのフォントは「AXIS」 Apple 公式サイトの日本語や Apple store で手に入るパンフレットには「AXIS」というフォントが使われていることが多いそうです。 その「AXIS」試用版が、無料でダウンロードできます。登録さえすれば商用も OK という太っ腹ぶりです。 なだらかなラインがスマートな、きれいなフォントです。 Type Project｜試用版ダウンロード http://www.
長い画像を分割して印刷したいときはエクセルが便利 | バシャログ。
夜中に家に帰ったら食卓の上に宅配ピザが置いてあって、気がついたら丸々 1 枚食べきっていた sakai です。ブヒ。 今回はちょっと便利な小ネタをご紹介します。 WEB サイトのキャプチャやデザインカンプなど、縦に長ーい画像を印刷する場合は分割して印刷することになるかと思います。 ただ、ブラウザやアプリによっては分割印刷に対応していなかったりして、意外と面倒だったりします。 分割印刷する場合は画像をエクセルに貼り付けて印刷すると簡単に上手いこといきます。 例えば、以下のような長い画像。 これをエクセルに貼り付けます。（画像はエクセル 2003 です。他のバージョンでも手順はだいたい同様だと思います） 「挿入」→「図」→「ファイルから」を選択し、画像を指定して貼り付け。 続いて、「ページ設定」できちんと分割されるように改ページを調整します。 今回は縦長の画像なので「ページ設定」で「横：1 ペ
【Fireworks】グラフィックウィザードで大量の画像を自動で作る | バシャログ。
軽い腱鞘炎になってしまいました、toyama です。左手を使うキーボードショートカットが原因です。別名で保存とか、属性をペーストとかマスクとしてペーストとかグループ解除とかしようとすると痛いので、湿布に包帯を巻いてカバーしているのですが、広範囲に巻きすぎているのか左手だけ「リングにかけろ」みたいになっています。 この資料をもとにこの見出し画像を大量に複製して書き出してください！入れる文字はエクセルにまとめてありますので！見出しごとに写真変えてね！うんざりするほど大量にあります！納期は今日！というお仕事があると思います。 テキストをコピー＆ペーストすればいいだけなのに、どうしてこんなに辛いんでしょう。そんなときは Fireworks さんにおまかせ！ 自動的に画像をつくってくれます。 グラフィックウィザードを活用する こんな画像をテキストだけ変更して、大量に作るミッションです。 用意するのは
通常よく使う便利アプリケーションをご紹介 | バシャログ。
なんだか急に暖かくなった！と思ったら、どうやら花粉の飛散する量も増えたようですね。 シーブレイン web グループのボス、goto も花粉症で、毎年つらそうにしています。 ちなみに私 kimoto は、花粉症ではありません。毎年春になると鼻炎になりますが、花粉症じゃないです。花粉症じゃないんです。鼻炎です。 さて今日は、そんな goto に以前教えてもらった便利アプリケーションを 2 つ程ご紹介します。 派手さはないが効果は抜群、そんなアプリケーションたちです。 お忍びリネーム こちらはファイル名操作を楽にしてくれる、お忍びリネームです。 何年か前に紹介してもらい、凄く便利でいまでは手放せません。 ファイル名を変更する際、「F2」キーを押すと思いますが、その際、拡張子まで選択されちゃってますよね。 このお忍びリネームを入れると、一度押すと拡張子を除いたファイル名、もう一度押すと拡張子のみ、
重いFirefoxをなんとかして速くしたい | バシャログ。
その強力なアドオンで、とっても便利なFirefoxですが、毎日使っているとドンドン動きが重くなっていってしまいます。 うーん、どうにか軽くならないものかと色々やってみました。 起動を速くしたい まずはとにかく時間のかかる起動をなんとかしたいと思います。 Firefoxはブックマークやら履歴やらクッキーやらをSQLite DBで管理しています。 毎日使っていくうちにDBは大きくなり、起動や動作が重くなっていくとのこと。 そこでSQLite Optimizerというアドオンを使って、DBの最適化をしてしまいます。 手順は以下の通り。 1. SQLite Optimizerをインストール。 2. アドオンの管理画面でSQLite Optimizerの環境設定画面を開きます。 3. 『Firefox終了時にsqliteデータベースのREINDEXを実行する』にチェックを入れます。 以後、Firef
【Fireworks】地味に便利なシンボル化 その2 | バシャログ。
すっかり夏めいてきましたね。シーブレインの toyama です。最高気温 31 度とかもう、字面をみるのもカンベンです。 何度か Fireworks のシンボル機能について書いていますが、今回もシンボルネタです。 サイトのデザインに写真を配置して、よしこれでいいや！と終了しても、サイズの修正が入ることがあると思います。 拡大・縮小ツールでサイズを変更することになるのですが、縮小はともかく、拡大ともなると、そりゃもうひどい画質になってしまいます。修正のたびに元画像を探してきては配置しなおしたり補正しなおしたりマスクかけなおしたりするのダリー！ そこで。 大きめな画像をシンボルとして登録しておく なんかこの画像、修正が入る気がする！とニュータイプばりの嫌な予感がする際には、あらかじめ写真画像をシンボル化しておきます。 シンボル化されたパーツは、インスタンスにどんな加工をしようと、親シンボルをい
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
【Fireworks】画像のシルエットをパスに変換 | バシャログ。
こんにちは、花粉症がすっかり治ったシーブレインの toyama です。 大学生の頃はとても酷かったのに、アレか、歳のせいか。 画像のシルエットを生かして影を作りたいなー、なんて思うことがありますよね。 一つ前のエントリでもシルエットを生かした影を作ったりしていますが、面倒で投げています。だめだこんなことしちゃ！ちゃんとパス抜け！ というわけで、画像のシルエットをちゃんとパスで抜こうじゃないかというお話です。 1. 透過画像を用意 透過画像を用意します。透過画像がそもそもなかなかないので、透過画像がなければ背景を切り抜きます。なんだか本末転倒な気もしますが。 むかーしの「素材辞典」は写真によってはパスデータつきだったのにどうしてやめちゃったのかしら。 2. 範囲選択 画像をレイヤーを選択した状態で [Alt] （Mac なら[Option]）を押すと、カーソルが破線の□マークになります。範囲
マジで簡単！！画像を使わず角丸を実現するjQuery Corner | バシャログ。
以前の記事でjQueryを使って簡単に角丸を作れるjQuery curvyCornersとして角丸を簡単に実現するプラグインをご紹介しましたが、もっと簡単に角丸を作るプラグイン jquery.corner.jsのご紹介。 こちらのプラグインでは、角丸の大きさの他に形状が多数設定できます。 設置方法 配布ページよりデータをダウンロードし、利用したいhtmlのhead要素などでファイルを読み込みます。 <script src="jquery.js" type="text/javascript"></script> <script src="jquery.corner.js" type="text/javascript"></script> そんでもって、角丸を設定します。 デフォルトの場合 <script type="text/javascript"> $('#sample').corner(
ページを簡単にjQueryでポップアップ！ jQuery PopUpWinodow | バシャログ。
こんばんは、先日右のみパーマをかけたishidaです。 最近はページや画像をlightbox系で表示する機会が多くなってきましたが、ポップアップで表示することも少なくありません。 今回ご紹介するのは、jQueryを使ったポップアッププラグイン jquery.popupwindow.js です。 設置方法 配布ページよりデータをダウンロードし、ポップアップを利用したいhtmlのhead要素などでファイルを読み込みます。 <script src="jquery.js" type="text/javascript"></script> <script src="jquery.popupwindow.js" type="text/javascript"></script> 表示する部分は以下です。 <a href="DUMMY.html" class="popupwindow">ポップアップ</a
.htaccessでベーシック認証 | バシャログ。
公開前のWebサイトなどに簡単なアクセス制御として、「.htaccess」でベーシック認証を利用している方も多いのではないでしょうか？ 簡単に「.htaccess」を作成できる「.htaccess Editor」なんて便利なツールもあるので、ひとつひとつの詳しい意味が分からなくても簡単に認証をかけることができますよね。 …が、何かの時に役立つかもしれないので、この「.htaccess Editor」で作成されたファイルの意味を解説したいと思います。 まず、「.htaccess Editor」で、作成した「.htaccess」に記述する内容が以下です。 ユーザー名、パスワードともにichikawaで作成いたしました。 <Files ~ "^.(htaccess|htpasswd)$"> deny from all </Files> AuthUserFile /home/foo/bar/.ht
【Fireworks】不可視レイヤーを削除してくれるコマンド | バシャログ。
サイトデザインを、あーでもないこーでもないと迷いながら行っていると、気がついたときには相当数のレイヤーができあがっています。 迷いながら試しながら作るので、「このオブジェクトは他に流用できるかも」とか「あとで色変えて比べてみていい方を採用」とか「苦労して作ったけどよくないから削除しなきゃだけど苦労したから今すぐ消すのは忍びないいい」とか、いろいろ理由をつけて、とりあえず不可視にしておくことが多いです。 そういうデータに限って他社さんに提供しなきゃいけなかったり、あわてていらなくなった不可視レイヤーを削除したつもりが必要なパーツ削除したりしてムダな時間をすごしていませんか？ そんなときに便利なのが、不可視レイヤーを削除するコマンド。Photoshop には実装されているのですが Fireworks には一向に実装されておらず、大変助かります。 1.コマンドをインストール Aaron Beal
【Fireworks 】地味に便利なリッチシンボルと共有ライブラリ | バシャログ。
サイトのプロトタイプをデザインするときに、ちょくちょく登場するのがフォームまわりのパーツたちです。ラジオボタン、チェックボックス、セレクトボックス、テキストボックスなどを配置して、初期値にはこんなテキストが入ってて、だけどこっちの初期値はこうで、幅は広めに、だけどこっちは狭めに、とパターンが複数登場したりするとどんどん面倒に。 そこでリッチシンボル化ですよ。 リッチシンボルとは、簡単に言うと、プロパティを編集できるシンボル機能です。 ここではセレクトボックスを例に説明してみます。 1.まずはシンボル化 シンボル化については以前記事を書かせていただいているのでそちらも参考にしていただきつつ、セレクトボックスをシンボル化します。 Fireworks CS3 のシンボル新機能に「9 スライス」というのがあります。9 スライスガイドをこんな感じに設定します。シンボル化できたら、崩れず拡大縮小ができ
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。
第 3 回目は「見栄えの良いページャー」です。 シンプルなコーディングで見栄えの良いページャーを実現します。 XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li class="prev"><a href="hoge">« PREV</a></li> <li><a href="hoge">1</a></li> <li><em>2</em></li> <li><a href="hoge">3</a></li> <li><a href="hoge">4</a></li> <li><a href="hoge">5</a></li> <li class="next"><a href="hoge">NEXT »</a></li> </ul> サンプル1： とてもシンプルなページャー とてもシンプルなページャーのサンプルです。 «
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
