サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
www.lifeisg.com
今回は某ビールのCMのような一部分だけカラーの画像を作成する方法をご紹介します。 まずは元になる画像をグレースケールに変換します。 ↓ 画像が白黒になったら、その状態のままもう一度RGBモードに戻します。 画像が背景のままでしたら、「背景からレイヤーへ」を選択してレイヤーに変換しておきます。 その上に更に新規レイヤーを追加して、ここで「ヒストリーブラシツール」を使います。 すると・・・あら不思議！ヒストリーブラシツールでなぞったところがカラーに戻ってゆきます。 なぞった部分だけヒストリーを戻してくれるので、好きな箇所だけカラーに戻すことができます！ どの時点に戻すからはここで決められます。 カラーに戻したいところを塗っていけば・・・ 完成！！ ヒストリーブラシツールを使うところだけレイヤーで分けておけば、カラー部分と白黒部分を自由に切り替えられますよ！ ちなみに・・
ハンドメイドの商品を販売できるショッピングサイト。誰でも売り手としてショップを開設でき、マーケットプレイスを提供するという意味で、ebayやヤフオクにも近いですが、オークションではなく、全ての商品が定額販売。 Etsyのアイディアはシンプルだし、なるほどあり得るだろうな。と見てすぐに思った。でも、あり得るけどそんなに大きなサービスにはならない んだろうなとも思った。ものづくりを愛好する人たちはたくさんいる。日曜アーティストのような人もたくさんいるだろう。でも、その人たちの作品を買う人た ちがそんなにいるとはとても思えなかったからだ。 僕は間違っていた。知人がEtsyで販売していた 自作スピーカーは1,289ドルもしたが見事に売れてしまった（1ドル＝85円で計算しても10万円を超える）。ラジコンで動くオールドスクールな自作ロ ボットも698ドルだが売れてしまった。えー。。。全然売れてないと
今回は漫画の集中線のような？中心から光を放つ光線を表現してみたいと思います。※CS5使用 まず下地となる背景を準備します。 先程の下地の上に新規ファイルを作ります。そして黒（透明度100%）→黒（透明度０％）のグラデーションを上から下に引きます。 次に「フィルタ」→「変形」→「波形」フィルタを選択します。 「短形波」にチェック こんな感じになります。 次に「フィルタ」→「変形」→「極座標」を選択します。 「直交座業を極座標に」にチェック 最後に「イメージ」→「色調補正」→「階調の反転」で白い光になります。 完成～。 いい感じで後光がさしました。 「極座標」なかなか便利ですね～。 Related posts:photoshopで紙っぽい質感を表現しよう！ photoshopとadobe acrobatを使ってpdfを作った時の手順 Photoshopで某番組の机に書い
スマホ対応にて、傾きを検知するjsのメモ。 ブログを、PC版と共通の記事を使ってスマホ対応とする場合、viewpointに値を書いてリキッド対応でコーディングしておけばうまいこと表示されるはずなのですが、画像や動画まわりで、jsで動的に値を指定していたり、iframeで貼っていたりなんかのときに、機種により少々解釈が微妙だったり、なんてことがありました。 そこで、縦横を取得して動的に値を書きなおす処理をねじ込むときの自分的メモです。以下ぶっきらぼう気味に。 記述はこちらを参考にさせてもらいました。 現在の傾き具合の取得 傾きは、window.orientationと記述することで取得 返り値は0,90,-90など var orientation = window.orientation; if(orientation == 0){ //縦向きの時の処理を記述 }else{ //横
facebookページを制作する際に読み込むiframeの高さの設定方法を調べたので、自分の復習がてらご紹介します。 1.FB.Canvas.setSizeでサイズを指定する方法 header内に以下の記述を設定。 <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script> <script language="JavaScript"> FB.init({ appId: '【アプリID】', status: true, cookie: true, xfbml: true }); window.fbAsyncInit = function() { FB.Canvas.setSize(); } function sizeChangeCallback() { FB.Canvas.
nivosliderというエフェクトがいい感じのスライドショーjavascriptを紹介します。CSSで割とカスタマイズできます。 必要なもの jQuery jquery.nivo.slider.js nivo-slider.css ファイルは以下よりダウンロードしてください。 http://nivo.dev7studios.com/ 手順 １．jsとcssを任意の場所に設置して呼び出します。 <link href="css/nivo-slider.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script> <script type="text/javascript" src="js/j
サイト内の記事をツイート数でソートし、ランキング形式で出力してくれるjsを、弊社エンジニアチームが作ってくれたので紹介します！ 概要 サイト内の記事をツイート数でソートして、ツイート数の多い順番に一覧として出力します。 形式はリスト（dl dt dd）形式で、dlにツイート数、ddに記事urlにリンクされている記事タイトルが表示されます。 JSコード 以下jsコードになります。 <script language="JavaScript" type="text/javascript"> //perpage 取得件数を設定 //q にURLをsite:hogehoge.com形式で入れる //window 期間を指定 var req = "http://otter.topsy.com/search.js?perpage=20&callback=?"+ "&window=a&q=site
WordPressで記事の一番最初の画像を取得し、サムネイルとして使う方法をご紹介します。 当サイトもトップページの記事一覧はサムネイル画像と、文章出だしの一覧になっていると思いますが、構造としては記事の一番最初に画像を挿入し、文章出だしを書いてmoreタグをつけるという手順を踏んでいます。 ただ、この方法だと画像が一番上にきて、つづきの文章があり、という形を変えることは難しいです。 もちろん、抜粋などを利用して頑張れば色々出来ることはあると思いますが、今回紹介する方法であればサムネイル画像を自由に設置することができます。 以下手順。 functions.phpの設定 コードはこちらの記事を参考にさせて頂いてます。 まずは、functions.phpに以下のコードを追加します。 function catch_that_image() { global $post, $post
Windows7を使い始めてから特に慣れなかったのが新しくなったタスクバーでした。 その中でもSkypeが最小化を押してもタスクバーに居座り続けていたのがずっと気になっていたので、その解消方法についてメモ。 1:スタートメニューからSkypeのショートカットを探し、右クリックで出てくるメニューの「プロパティ」を開く。 一覧になくとも、「すべてのプログラム」を端から見ていけばSkypeフォルダが見つかるはずです。 2:プロパティから「互換性」のタブを開き、「互換モードでこのプログラムを実行する」にチェック。 そのすぐ下にあるプルダウンメニューから「Windows Vista(Service Pack 2)」を選んで適用、OKをクリック。 3:一度Skypeを終了し、再起動をしてから閉じるボタンで最小化させてみる。 すんなりタスクトレイに収納されるはずです。 また、今回のバージ
１．独自の変数設定とフォーマットへの記述 今回%RANKING_NO%という変数を独自に設け、順位ごとのクラスを設定しました。例えば出力フォーマットで以下のようにして使うことを想定してます。各順位のliにclassとしてnoXという値を設定しています。 <li class="no%RANKING_NO%"> <a href="%POST_URL%" title="%POST_TITLE%">%POST_TITLE%</a> - %VIEW_COUNT% views</li> %RANKING_NO%という変数は元々存在しませんので、処理して出力させる為にはプラグインのプログラム自体の改修が必要です。以下に続きます。 ２．設定した変数の処理の追加 プラグインフォルダのwp-postview.phpを開いて、以下の記述がある箇所を探します。 foreach ($most_viewed a
先日、WordPressで構築したサイトに、後付けで別途作成した階層構造を持つHTMLコンテンツを追加する機会がありまして、ページで登録して親子関係を持たせることでうまく組み込むことができましたので、簡単にメモ。 意図通りにするにはあらかじめ必要な条件と設定がありますので、以下に簡単にまとめます。 パーマリンクの設定 WordPressはそもそもフォルダという概念がありませんので、元々階層を持つHTMLのリンク構造とうまく整合を取るには、パーマリンク設定をあたかもフォルダがあるかのようなURLが生成されるように調整する必要があります。今回はカスタム構造を選択して以下のように記述しました。
カテゴリごとに画像を設定したいと思ったのですが、デフォルトではカテゴリ名前、スラッグ、ディスクリプションぐらいしか設定できません。そこで、今回使ったのがカテゴリに画像を持たせることができる「Category Icons」です。 以下使用方法 １．インストール まずは以下からプラグインをダウンロードして、プラグインフォルダにアップしてください。 http://wordpress.org/extend/plugins/category-icons/ こちらに日本語化されたものもあります http://tenderfeel.xsrv.jp/wordpress/179/ アップが完了したら、プラグインの中にカテゴリーアイコンが表示されるので、有効化してください。 ２．設定 プラグインが有効になったら左カラムにある「投稿」タブの中にカテゴリーアイコンのメニューが入ってきます。 そ
弊社ではアクセス解析にGoogle Analyticsを使用しているのですが、デフォルトだと自分たちのアクセスもカウントされるため、アクセスが多くないサイトだと制作スタッフの閲覧がログに与える影響も少なくありません。でもさすがGoogle Analytics。自分自身のアクセスをデータから除外する設定方法がきちんと用意されています。本日はそちらをご紹介。 ※なお今回紹介しているのは現時点（2011/03/24）での仕様に基づくもので、恐らく随時変更されますのでご注意ください。 フィルタの作成 特定のアクセスを除外するフィルタを作成します。管理画面を開くと、右下にフィルタマネージャーというリンクがありますので、そちらをクリックします。 するとフィルタの一覧が表示されますので、右上のフィルタの追加をクリックします。 ここから先は、IPアドレスが固定の場合と、動的な場合でやり方が分かれま
ある案件で、ヘッダーにwp_head();を入れたら、ページのトップに28pxの隙間が空いてしまいました。今までにない現象で驚きましたが、どうやらバージョン3.1から導入された新機能の影響によるものらしいです。 現象 WordPressのテンプレートを作成する場合、プラグイン等を使うためにwp_headというタグを入れると思いますが、今回、このタグを入れたことによって、ログインした状態でページを見るとトップに28pxの隙間が空いてしまいました。（ちなみに、ここでいうトップとはホームページのトップのことで、管理画面のトップではありません。今回のバグを調査する中で管理画面のトップに空白が出るバグもあるということがわかったのですが、そのバグについては触れていません。） で、今回の現象ですが、cssでhtmlタグにマージンが指定されていて、ついでに!importantまでついていました。 h
facebook、映画の影響か徐々に周りでも浸透が進んでいる感じがします。ファンページの制作の問合せも増えつつある中で色々と調査中です。 セカンドライフのように尻つぼみにならないことを祈りつつ、facebookファンページデザインなどを纏めてみました。 Customfacebookpage.com 詳細画面に色々とキャプチャーが付いていて便利。 一覧もwelcomeボードがメインなので、パッと見で分かりやすいです。 http://www.customfacebookpage.com/#mce_temp_url# fbfolio 細かいカテゴリに分かれています。 http://www.fbfolio.com/page/2/ facebook folio サムネイル表示。一覧では見やすいかも。 http://facebookshowcase.net/ こんなのも・・・その他参
まだまだ海の物とも山の物ともという雰囲気は残しつつ、それでも業界内では来るんじゃないかと盛り上がってる風のFacebookですが、弊社でもお客様のサイトのソーシャル対応として「いいね！」をつけたり、「◯人がいいねと言っています」のボックスをつけたりしています。 そのボックスタイプのやつ、likeboxというらしいのですが、その設置の仕方と比較的簡単な方のカスタマイズ方法はざっくり割愛。ググったらわりと出てきますものね。 設置はこんな感じで、カスタマイズはこんな感じで調べたら結構でてきますね。 さて、これらのコード、設置後実行されるとiframeでソースが提供されるため、もともとパラメータが設定されている項目以外のカスタマイズができません。でも、サイトの雰囲気に合わせてもう少しなんとかしたいと思うことは多いはず。そこでCSSを使用可能にする設置方法をご紹介します。 英語だったので半分
知ってる人は知っている、でも案外知らない人もいるのでは？ というPhotoshopの小技を自分のメモがてら紹介してみたいと思います。 今回はお手軽に縫い目を描く方法です。 タイトル画像のここです。 この縫い目はphotoshopのブラシで描いています。 まずは普通の円形ブラシを選択して ブラシ先端のシェイプを以下のように形を平たく、間隔を広く調整します。 あとはまっすぐ線を引くだけで縫い目のようなラインがひけます！！ ブラシのサイズや、間隔などを調整すれば、手縫いっぽい縫い目から ミシン目のような縫い目までいろいろ描けます。 ボタンの装飾や、バナーの囲みなんかに使うとかわいいですよ！ Related posts:Photoshopでお手軽に手書き風にする小技 Photoshopで某番組の机に書いてある文字を再現しようと試みた。 photoshopで紙っぽい質感を表現しよ
Photoshopでスライスを切っている最中、毎度毎度自動的に作られる「images」フォルダが気になっていました。 何とかフォルダを作らせない方法をGoogle先生にお願いしてみたところ、あっさり対処法を教えて頂いたのでご紹介します。 1.メニューのファイルから「Webおよびデバイス用に保存」をクリック。 2.プリセットの横に付いている「>>」部分をクリックしてからメニューの一番下にある「出力設定の編集…」を選択。 3.2番目のメニューから「ファイルの保存」を選択。 もしくは「次へ」ボタンを3回クリックでも到着出来ます。 4.「最適化ファイル」項目から「画像をフォルダに保存」の表示名を自分が使用するフォルダ名に変更する。 もしくはフォルダ自体が必要無い場合は左側のチェックを外してしまえばOKです。 こんな簡単に変更できるならもっと早く先生に頼れば良かったと思いました……日
facebookの「いいね」ボタンを設置する際にWordPressのプラグインなどを使う場合は細かい設定を管理画面でできますが、コードを直接貼る場合はどこを弄ればいいのかよくわからなかったのでメモしておきます。※コードの生成方法やどこに貼るかといった内容は記述していません。以下方法。 １．「いいね！」と言っています の部分を変更する 公式サイトで生成したコードをそのまま貼ると このような感じになると思います。これを変更するにはコードの中の「layout=standard」となっている部分を変更します。 standardがデフォルトの状態。 button_countにすると box_countにすると こんな感じになります。 ２．「いいね！」を「おすすめ」に変更する action=likeのところをaction=recommendにすると こんな感じです。 ３．色を変える
ソーシャルブックマークアイコンを記事の上とか下とかに表示するwordpressプラグインを紹介します。こっち系のプラグインは数多く存在しますが、日本人向けのサイトならsocial bookmarking jp がオススメです。理由としては2点 ①jpとついている通り日本サイト向けなのでソーシャルブックマークも日本人に馴染みのあるものがほとんど。 ②被ブックマークのようなユーザー数表示機能が標準でついている ②は例えばはてなアイコンのとなりにブックマーク数を表示させるというような機能です。被ブックマークなどのキーワードで検索するとプラグインを改造するページが多く出てきます。でも最近は標準搭載しているものもあります。social bookmarking jp もそのうちのひとつです。ただ、ユーザー数がうまく表示されない場合があります。そのような場合はブックマークアイコンの数を減らしてやれ
基本的にIEはCSS3に対応していませんが、スクリプトを追加することで角丸やボックスシャドウなどのCSS3のプロパティをいくつか使用することができるようになります。案件で、画像ではなくフォームのボタン等で角丸を実装したい場面がありまして、今回そういったスクリプトの一つであるCSS3 PIEを使用してみました。 設置方法はごくごく簡単で、PIE.htcをダウンロードしてサーバに置き、実装したいCSSの末尾にbehavior: url(PIE.htc);と書き加えるだけです。さらに詳しい説明は、下記リンク先などでご覧になれますので割愛します。 簡単に実装できるCSS3プロパティ…しかもIEにも対応できる さてさて、上記サイトにあるやり方で実装し、いざ見てみたら全然効いていない、なんてことでこのエントリにたどり着いたりしたのではないですか？ 実際僕も動かなくて困った口です。まず設置してみ
今回はつるっとしたオブジェクトを簡単に紙っぽくする方法をご紹介します。 01:境界をざらざらにする まずは長方形ツールで白い四角形を描きます。 次に長方形の選択範囲を選択して、クイックマスクモード（ショートカット：Q）に切り替えます。 クイックマスクモードの状態で、フィルタ→ピクセレート→水晶を選択します。 クイックマスクを解除すると（もういちどQを押す）と選択範囲がギザギザになっているので、その状態でレイヤーマスクを追加します。 紙がギザギザになりました！ついでにドロップシャドウもやんわりかけちゃいましょう。 02:紙をしわくちゃにする 次は紙のしわくちゃした質感を表現します。 ギザギザ部分を選択して（Ctrl+レイヤーマスクサムネイルクリック）、新規レイヤーを追加したあと、黒→白のグラデーションをランダムにかけます。 ランダムにグラデーションがかかったレイヤーに、フィル
少し前にIDEA*IDEAさんで紹介されていた、「jQueryを使ってサイトツアーを作る方法」を試してみました。 まずはデモをご覧ください。下記リンクをクリックすると始まります。(本サイトのデモのほうが奇麗なので、そちらもご覧くださいね。 DEMO 導入は以下の通り。 １.ダウンロード 以下のURLからファイルをダウンロードします。 http://tympanus.net/codrops/2010/12/21/website-tour/ 左カラムイメージ下にあるDOWNLOADを押すと、WebsiteTour.zipがダウンロードできます。解凍するといくつかのフォルダにいくつかのファイルが入っていますが、必須ファイルは以下の通りです。（その他のファイルは、サンプルのindex.html用のCSSファイルと、jsでフォントを指定する為のファイルなので、動作には関係ありません。こち
以前、functions.phpを使ってWordPress管理画面にカスタムフィールドを追加するやり方を書いたのですが、前回は流れとソースをざっくり書いただけでしたので今回はそのやり方をもう少し詳しく整理してみたいと思います。 今回は単純なHTMLを普通に追加する手順をきちんと記します。 ぶっちゃけ、今日同じような作業をやろうとした際「以前書いたから自分のエントリーを見よう」と思って以前のエントリーを見てみたら、自分でも微妙にわからず結局CODEXを参照するはめになったので、ちゃんと書こう！と思った次第です。ええ、大変申し訳ありません。手を抜いていたようです。そのときの自分。 さて、管理画面にボックスを追加して、そこにHTMLをはめ込むという目的の場合、必要な記述は以下の３つです。 はめ込むHTML部分の記述 HTMLをはめ込むBOXの定義 それらを実行するアクションの記述 それら
Lig本サイトのオフィス紹介ページで使用するJqueryプラグインを探している際、初心者のtmkでも分かりやすそうなJSを3つ程見つけたので忘れない内にご紹介します。 slideViewerPro 1.0 横にスライドしていくシンプルなギャラリー。 コントローラーの有り無し、画像の自動再生などお好みの形に変更できます。 Galleria こちらもシンプルながら美しいギャラリーが作れます。サムネイルにカーソルを当てるとぼんやり明るくなるところが個人的に綺麗ポイントです。Allaboutさんで一から丁寧に設置方法を説明されているので、Jquery初心者入門編として良いかも知れません。 bxGallery こちらもシンプルながら画像の切り変わりが綺麗なギャラリー。 設置も簡単でHTMLを殆ど弄ることなく表示を変更する事が出来ました。 今回オフィス紹介ページで実際に使用させて頂い
カスタムフィールドに入力した文字列の改行を有効にする方法、に関して個人的に辿った道筋をメモ。 ちなみにCustom Field GUI Utilityを使用させて頂いています。 第一段階 制作者様のＱ＆Ａより「カンマを任意の文字列に置換」を使って有効にする。 <?php echo str_replace(‘,’, ‘<改行タグ>’, post_custom(‘hogehoge’)); ?> 入力した文字列の改行を行いたい箇所へカンマを入れ、上のコードを使用して呼び出す。 勿論成功しましたが、これではいちいちカンマを挿入する手間が掛かるので他の方法を探す事に。 第二段階 タロタローグ様の「WordPressのpの多さを何とかしてみたい。」を見てみる。 上の記事の中で「\n」という記述が幾つか使用されており、もしかしたらこれが改行コードか？と思い至る。 早速天下のグーグル様にて「
先日Lig本サイトのトップページ改修を行いました。 その際、社長の呟きを表示させる為に「Tweet!」というjQueryを使用しました。 主な機能は下記のような感じです。 ・TLのつぶやき、Twitterアイコンを表示 ・複数アカウントのTL表示 ・RTやハッシュタグの自動リンク ダウンロード元「Tweet!」 参考サイト「jQueryでTwitterブログパーツ（アバター付）ができる「Tweet!」」 上記のサイト様にあやかりながら制作しましたが、二点つまづいた点をメモしておきます。 ・導入の際、余計なタグが入っている部分、及び空白(IE対策)を削除 <script language=”javascript” src=”http://あなたのドメイン/js/jquery.tweet.js” type=”text/javascript”></script> ・時間表示を
案件でオリジナルなスクロールバーを設置する必要があり、色々と調べてみるとjScrollPaneが便利そうです。実装のやり方をググってみたところ、サンプルはあるもののなかなか設置の仕方まで解説しているところはありませんでした。しょうがないので自分でまとめてみることにしました。パンが無いならケーキを食べればいいじゃない的なノリで。違うか。 以下が公式サイトです。 http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html 最低限+一般的に必要なファイルは以下の通りです。 * jQuery * the mouse wheel plugin * the jQEm plugin * jScrollPane.js * jScrollPane.css これらをダウンロードし、任意のフォルダに配置します。 ※
クライアントワークでグリッドレイアウトのサイトを作りそうなので、まとめておきます。ワードプレス用のテーマもあります。ウィンドウのサイズを変えるとレイアウトが動くのを見ると、ウェブのレイアウトって何だろうなーと考えたりします。ここら辺、グラフィックデザインとウェブデザインの決定的に違うところですね。 Mrunouchi.com きれいに細部までデザインされています。 http://www.marunouchi.com/ D&DEPARTMENT PROJECT ポータルとショッピングサイトの2つの構成で出来てます。 http://www.d-department.com/jp/ バーグハンバーグバーグ 下田さんは変人でしたがいい兄貴でした。 http://bhb.co.jp/ Daily vitammins ネタ系の記事。タイトルが素敵。 http://dailyvitamin.jp/ S
次のページ
このページを最初にブックマークしてみませんか？
『株式会社Lig / Lig Inc.』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
