タグ

ブックマーク / bashalog.c-brains.jp (30)

  • .htaccess だけで簡単キャリア判定してみる | バシャログ。

    まだ 6 月だってのに早くも今年初あせもができちゃったよ!かいーの nakamura です。 サイトのモバイル、スマホ対応もすっかり一般的になってきた今日この頃、みなさんいつもどんな方法でキャリア判定を実装しているでしょうか。がっつりフレームワークなどを使っていればさほど難しくはありませんが、ほとんどプログラムが動いていないような静的なサイトの場合はちょっと面倒ですね。今日はそんな時に有用な .htaccess を使ったキャリア判定の方法をご紹介します。 仕様 今回、ルートディレクトリ / は PC 用サイト、/m/ 以下がモバイルサイト、/sp/ 以下がスマホサイトとして以下の仕様を元に記述方法を考えていきます。 PC で /m/, /sp/ 以下にアクセスしたら / にリダイレクト。 モバイル、スマホで PC サイトにアクセスしたらそれぞれ /m/, /sp/ にリダイレクト。 モバイ

    .htaccess だけで簡単キャリア判定してみる | バシャログ。
    visca__Barca
    visca__Barca 2011/06/30
    htaccess だけで簡単キャリア判定
  • iFrameを使ったFacebookページを作る際に気をつけたいこと | バシャログ。

    AUのスマートフォンラインナップが発表されましたね。 今まで指が動かなかったけどやっぱりINFOBARにキュンときたminamiです。 さて、今回も前回に引き続きfacebookの話です。 iframeで自由にページを作ることができるようになったとはいえ、 実際に制作する際には気をつけなければいけないポイントがいくつかあります。 今回はそのあたりを挙げてみました。 スクロールバーを出さないようにする facebookページの表示領域は通常で横幅520px、縦幅800pxとなっていますが、コンテンツのサイズがそれより大きくなると問答無用で横方向のスクロールバーが表示されてしまいます。アプリの設定で「iFrameサイズ」を設定しても変わりません。スクロールバーをページ内に出したくない場合は下記のようなCSSを記述して、万が一コンテンツが大きくなったとしても表示領域が変わらないようにしましょう

    iFrameを使ったFacebookページを作る際に気をつけたいこと | バシャログ。
  • Dreamweaverで古いソースコードをクリーンアップする | バシャログ。

    G.W. の開始とともにギックリ腰をやってしまい、連休中はずっと寝たきりで激痛と格闘していた sakai です。 温泉にでも行ってのんびりするかー、というささやかな夢すら叶わず無念… 今回は Dreamweaver で古いソースコードをクリーンアップする手順をご紹介します。 元のソースコードはこちら。 タグは大文字だし属性値を引用符で囲ってないし非推奨要素が使われているしインデントはグダグダだし、とちょっと極端な例ですが、こんな感じのソースコード、何気によく見るような気もします。 今回は、HTML を XHTML にします。 まずは「ファイル」メニューの「変換」で XHTML に変換しちゃいます。 変換後のコードがこちら。 タグが全部小文字になって、属性値が引用符で囲われました。 続いて、不要なタグや属性を削除してしまいます。 「編集」メニューの「検索および置換」を開いて、「検索」を「特定

    Dreamweaverで古いソースコードをクリーンアップする | バシャログ。
  • 【Fireworks】ちぎった紙っぽいパーツをサクッと作る | バシャログ。

    Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいですが、影に隠れて Fireworks も実は 5.1 にマイナーバージョンアップしています。 参考:Fireworks CS5.1 in Creative Suite CS5.5 バグ FIX がメイン(それだけでも有難い!)ですが、書き出し時の色の最適化が改善されていたり、ファイル保存時に最後に保存した場所がデフォルトで開くようになっていたりするようです! 嬉しい…! 今回は、Fireworks でちぎった紙っぽいパーツを簡単に作る方法をご紹介します。 Step1 とりあえず、カンバスに背景を敷きます。(サンプルは Fireworks の塗りの「パターン」にある「青い布」をそのまんま) Step2 白い矩形を置きます。 Step3 ストローク(破線ダブル、外側、1

    【Fireworks】ちぎった紙っぽいパーツをサクッと作る | バシャログ。
  • Firefox4と以前のバージョンを共存させる方法 | バシャログ。

    こんにちは、minamiです。今いちばん欲しいものはランタンです。 3/22にFirefox4が正式公開となりました。ちょっとさわった感じだとchromeやsafariに負けず劣らず軽快ですね。 しかし、制作環境ではFirefox4と以前のバージョンを両方確認することも必要になるかと思います。 そこでFirefox4と以前のバージョンを共存してインストールする方法をおさらいしてみました。 試した環境はWindows XPです。 プロファイルを複数作る 方法としては、以前tanakaが紹介していたものとほぼ同じになります。Firefoxのプロファイルを複数つくって、各バージョンに対応させていきます。 windows XPの場合、firefoxのプロファイルは、 C:\Documents and Settings\ユーザー名\Application Data\Mozilla\Firefox\P

    Firefox4と以前のバージョンを共存させる方法 | バシャログ。
  • サイト運営における「直帰率」と「離脱率」についてのメモ | バシャログ。

    ヘッドホンのコードが断線したので新たに安物のイヤホンかったら耳に合わなくてポロポロ落としてる kimoto です。左耳ばっかりすぐ外れて落ちる。穴の形がおかしいのか。 さて、サイト運営をしていると避けて通れないアクセス解析について、以前に勘違いしてしまっていた部分に焦点を当ててエントリーしてみます。主に「直帰率」についてのお話しです。 「直帰率」とは? サイト運営の世界では、「直帰率」という言葉は重要なワードとして位置づけられています。 「直帰率が高いからもっと下げる努力をしなければ」「横の導線を充実させて直帰率を下げる施策をうってみよう」などなど、基的に「直帰率は低い方が良い物」として捉えられる場面が多いです。 「直帰率」とは、検索エンジンや他サイトのリンクなどから訪れたが、そのままサイト内を巡らずに違うサイトへ行ってしまったビジターの割合を示します。 つまり、せっかく来たビジターをす

    サイト運営における「直帰率」と「離脱率」についてのメモ | バシャログ。
  • 重いFirefoxをなんとかして速くしたい | バシャログ。

    その強力なアドオンで、とっても便利なFirefoxですが、毎日使っているとドンドン動きが重くなっていってしまいます。 うーん、どうにか軽くならないものかと色々やってみました。 起動を速くしたい まずはとにかく時間のかかる起動をなんとかしたいと思います。 Firefoxはブックマークやら履歴やらクッキーやらをSQLite DBで管理しています。 毎日使っていくうちにDBは大きくなり、起動や動作が重くなっていくとのこと。 そこでSQLite Optimizerというアドオンを使って、DBの最適化をしてしまいます。 手順は以下の通り。 1. SQLite Optimizerをインストール。 2. アドオンの管理画面でSQLite Optimizerの環境設定画面を開きます。 3. 『Firefox終了時にsqliteデータベースのREINDEXを実行する』にチェックを入れます。 以後、Firef

    重いFirefoxをなんとかして速くしたい | バシャログ。
  • 長い画像を分割して印刷したいときはエクセルが便利 | バシャログ。

    夜中に家に帰ったら卓の上に宅配ピザが置いてあって、気がついたら丸々 1 枚べきっていた sakai です。ブヒ。 今回はちょっと便利な小ネタをご紹介します。 WEB サイトのキャプチャやデザインカンプなど、縦に長ーい画像を印刷する場合は分割して印刷することになるかと思います。 ただ、ブラウザやアプリによっては分割印刷に対応していなかったりして、意外と面倒だったりします。 分割印刷する場合は画像をエクセルに貼り付けて印刷すると簡単に上手いこといきます。 例えば、以下のような長い画像。 これをエクセルに貼り付けます。(画像はエクセル 2003 です。他のバージョンでも手順はだいたい同様だと思います) 「挿入」→「図」→「ファイルから」を選択し、画像を指定して貼り付け。 続いて、「ページ設定」できちんと分割されるように改ページを調整します。 今回は縦長の画像なので「ページ設定」で「横:1 ペ

    長い画像を分割して印刷したいときはエクセルが便利 | バシャログ。
  • 【Photoshop】簡単に写真の一部をカラーにする方法 | バシャログ。

    今回は簡単に一部だけカラーで表示するPhotoshopのTipsをご紹介します。 STEP1 画像を用意します。 STEP2 メニューから[イメージ]→[色調補正]→[彩度を下げる]を選択。 STEP3 ツールから[ヒストリーブラシツール]を選択。 STEP4 カラーにしたい部分をなぞる。 たったコレだけで実現可能です。是非お試しを。

    【Photoshop】簡単に写真の一部をカラーにする方法 | バシャログ。
  • 【Photoshop】写真を簡単に絵画のようにするチュートリアル | バシャログ。

    今回紹介するのは、4 ステップで簡単に写真を絵画のようにできる Photoshop チュートリアルです。 STEP 1 まず写真を一枚用意します。 STEP 2 メニューの [イメージ] → [色調補正] → [シャドウ・ハイライト] シャドウを 100% にします。 STEP 3 次に [フィルタ] → [表現手法] → [輪郭検出]を選択します。 STEP 4 [編集] → [フェード]を選択。描画モードを「輝度」にし「不透明度」を微調整します。 コレで完成です。たった 4 ステップで簡単にできるので興味のある方は是非お試しあれ。 参照サイト http://www.photoshopcafe.com/tutorials/sketch/sketch.htm

    【Photoshop】写真を簡単に絵画のようにするチュートリアル | バシャログ。