川本
Movable Typeのブログ記事を昇順で特定の数だけ出力する
川本 (2012年4月 4日 18:55)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / Movable Type
こんにちは、デザイナーの川本です。 先日、Movable Typeでテンプレートを書いていたら困ったことがありました。 それは、カスタムフィールドでいずれかの設定をしたブログ記事を古いものから特定の数だけ出す、ということでした。 新しいものから特定の数だけ出したり、古いものから全て出すなら簡単です。 【カスタムフィールドで設定したブログ記事を新しいものから5件出す】 <mt:If tag="...
Twitterの通知をプッシュ通知で教えてくれるアプリ『Boxcar』
川本 (2012年3月 7日 11:50)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / その他
こんにちは、デザイナーの川本です。 皆さんはTwitterを使っていますか？ 日本のTwitterアカウント数は世界でアメリカ、ブラジルに次ぐ第三位の約3千万アカウントだそうです。（2012年1月1日時点） Twitterを使う際に、様々なクライアントを使用している方がいらっしゃると思います。 Twitterのホーム以外のツールでは、有名どころですと『TweetDeck』、『HootSuite』、...
Illustratorの矢印機能でラクラク矢印作成！
川本 (2012年2月 8日 18:11)
Webｺﾝｻﾙﾃｨﾝｸﾞ部
こんにちは、デザイナーの川本です。 ホームページや社内の書類を作っていく上で、矢印はよく使用する記号だと思います。 フローとか図などでよく使われる（→）こういう記号です。 チラシや素材作りはたまにAdobe Illustratorを使用するのですが、線プロパティに矢印機能がございます。 この矢印機能がとても便利なので、本日はそちらを紹介させていただきます。 こういうプレーンな矢印を描きたい時、今ま...
『GreyBox』でWebページや画像をポップアップで出す
川本 (2012年1月11日 18:03)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / HTML全般
こんにちは、デザイナーの川本です。 今回は、画像やWebサイトをポップアップ表示できるJavascript、『GreyBox』を紹介いたします。 ポップアップするスクリプトで代表的なものは『Lightbox2』など色々ありますが、Webページをポップアップ表示できるものは珍しいのではないでしょうか。 実際使用しているページがホームページの中にありますので、紹介いたします。 （ページ下部の『システム...
手軽にはんこが作れるサービス！手作り風はんこ作成ツール
川本 (2011年12月28日 18:54)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / その他
こんにちは、デザイナーの川本です。 皆さま、年賀状は描けましたでしょうか？ 年賀状といえば、昔はプリントゴッコでせっせと作っていましたが、最近は筆まめやイラスト集など、手軽に作成できるツールが増えてきていますね。 忙しく働いている者にとって、そういった便利なツールは力強い限りです。 （私はまだ描けていませんが...） そこで、紹介させていただきたいのは、『手作り風はんこ作成ツール』というWEBサー...
Photoshop顔負けのフリーサービス！Pixlr Editor
川本 (2011年11月16日 19:39)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / その他
こんにちは、デザイナーの川本です。 私はWebサイトやシステムで使用する素材（ボタンやタイトル、写真など）はほぼ100％Photoshopで作成しています。 Photoshopがあれば、もはや作れないものなどないのでは？と錯覚してしまうほど便利なツールです。（その分、値段もお高いのですが...） とても高性能なツールなだけに、「もしPhotoshopが使えなくなったらどうしよう...」と思います。...
全角カナを半角カナに変換する方法
川本 (2011年10月19日 19:24)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / Webサイト構築・Web戦略
こんにちは、デザイナーの川本です。 携帯サイトを制作していると、お客様から度々「ページ内の全角カナを全て半角カナにして欲しい」とご要望をいただくことがあります。 全角よりデータ量が少ないことや、1画面により多くの文字が表示できるなどの利点があるためです。 しかし、半角に修正するという作業はミスも多く、時間も工数もかかってしまいます。 全てのページのソースを1つ1つチェックするのは面倒だしストレスに...
EXCEL（エクセル）で複数のシートを印刷する方法
川本 (2011年9月21日 22:11)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / その他
こんにちは、デザイナーの川本です。 先日、EXCELファイル（エクセルファイル）内に複数のシートがあるものを印刷しようとすると、困ったことが起きました。 それは、デフォルト設定ではない印刷設定を行い、『ブック全体を印刷（全てのシートを印刷）』しようとすると、メイン以外のシートはデフォルト設定に戻って印刷されてしまう、ということでした。 シートの数が数枚ならば1つ1つのシートを印刷すれば良いのですが...
これは便利！複数のGoogleアカウントを切り替えるエクステンション
川本 (2011年8月31日 16:05)
Webｺﾝｻﾙﾃｨﾝｸﾞ部
こんにちは、デザイナーの川本です。 皆さんはメインブラウザは何を使用していますか？ 私はずっとFirefoxユーザーだったのですが、アドオン（拡張機能）を追加することで非常に動作が重くなってしまい、つい最近、Google Chromeに乗り換えました。 提供されている拡張機能はFirefoxと似たものが多いのですが、Google Chromeならではの利点もありました。 それは、Googleのサー...
Movable Typeを使ってiPad閲覧サイトを制作する
川本 (2011年7月14日 19:05)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / Webサイト構築・Web戦略
こんにちは、デザイナーの川本です。 7月7日にシックス・アパート株式会社様が主催された『Movable Typeを使ってiPadでの閲覧に最適な美しいサイトをつくるには』セミナーへ行ってきました！ 概要： 2010年のタブレットPC出荷台数は1600万台余りに達し、そのうちアップルの「iPad」が全体の95%を占めたと推算されています。 iPadまたはタブレット型PC経由でのウェブサイトユーザ数の...
IEに対応したハックまとめ
川本 (2011年6月16日 12:00)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / Webサイト構築・Web戦略
デザイナーの川本です。 コーディングする時にとにかく気になるのがブラウザによってのレイアウト崩れ... 特にInternet Explorerでのレイアウト崩れが一番気になる私です。 今回はIEに使用することが出来るハックをまとめてみました。 IE6以上の環境で確認しています。 【普通に指定したCSS】 .sample { color: red; /* 指定なし */ } 【IE6に対応したハッ...
zenbackBIZ - 無償版と法人向けの違い
川本 (2011年5月26日 20:00)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / Webサイト構築・Web戦略
デザイナーの川本です。 以前、弊社の池田がこのシステム開発ブログでzenbackについて書かせていただきました。 →zenbackでソーシャルワークとブログを連携 システム開発ブログでも無償版のzenbackを利用させていただいておりますが、 （各ブログ記事のページ下部に表示されています） 今回、法人向けのzenback BIZがリリースされたということで、無償版とビジネス版の比較をご紹介いたしま...
決定版!? クロスブラウザ表示確認ツール3選
川本 (2011年4月 4日 19:36)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / Webサイト構築・Web戦略
デザイナーの川本です。 主な業務はWEB制作やデザイン業務全般です。 今回は、マークアップ業務に役立つ、クロスブラウザ表示確認のツールについて紹介します。 ブラウザの表示確認は様々なツールを使ってきましたが、これぞ！という3つを紹介します。 IETester http://www.my-debugbar.com/wiki/IETester/HomePage Internet Explolerの表示...
Twitterが絶対楽しくなる無料サービス10選
川本 (2010年11月25日 19:05)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / その他
デザイナーの川本です。 皆さんは、Twitterを楽しんでいますか？ Twitterとは2006年7月にObvious社（現Twitter社）が開始したサービスです。 私は、サービスが開始して間もなく友人から紹介されて、現在、Twitter歴は4年目に突入しています。 Twitterを介して友人が増えたり、情報を共有したり、今や生活に欠かせない存在になりつつあります。 最近は世間的にもかなりメジャ...
ケータイキットと.htaccessを使い、同一URLでウェブサイトを管理する
川本 (2010年11月15日 16:54)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / Webサイト構築・Web戦略
デザイナーの川本です。 先日、株式会社アイデアマンズ様が提供する、『ケータイキット for Movable Type（以下、ケータイキット）』がスマートフォンに対応されたということで、新しいケータイキットの勉強会に参加して参りました。 ケータイキットとは、Movable Typeのプラグインの一つです。 ケータイキットを用いることで、PCサイトだけではなく、携帯端末毎の表示の最適化はもちろん、スマ...
地図リンクサービスを提供しているサイト一覧
川本 (2010年10月11日 10:00)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / Webサイト構築・Web戦略
デザイナーの川本です。 最近ホームページ（特にコーポレートサイト）の地図に、地図リンクサービスを使用している会社様が増えていますね。 また、地図リンクサービスを提供している企業様も増えてきております。 有名なところで言えばgoogleマップ、Yahoo!地図情報などでしょうか。 手書きの地図では建物や目印など、変わるものもございますので、地図リンクサービスを利用すれば、その都度情報が更新されますの...
WEB制作に使える便利なサイト
川本 (2010年9月20日 12:00)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / Webサイト構築・Web戦略
デザイナーの川本です。 主な業務はWEB制作やデザイン業務全般です。 制作時はお恥ずかしながら、デザイン、コーディング中に行き詰まることもしばしばあります。 そんな時、よく使わせていただいている便利なサイトを紹介します。 WEBデザインの見本帳 http://www.web-mihon.com/ WEBデザイナーのためのWEBサイトのデータベース・リンク集です。 印象・色・ジャンルから、ありとあら...
デスクトップのアイコンを整理する『Fences（フェンス）』
川本 (2010年8月23日 00:00)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / その他
見た目は良くないけど、デスクトップにアイコンを並べるのはやめられない...。 そんな方にオススメの無料アプリケーション、『Fences（フェンス）』を紹介します。 http://www.stardock.com/products/fences/index.asp デスクトップの好きな場所に枠を作り、その中にショートカットやフォルダをドラッグ＆ドロップすると、自動でアイコンを整列してくれます。 枠に...
CSS3で画像を使用せずに角丸を実装する
川本 (2010年7月26日 18:57)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / Webサイト構築・Web戦略
CSS3を使用し、画像を使用せずに角丸を実装するCSSを紹介します。 この方法は（2010年7月26日現在）、Internet ExplorerやOperaでは角丸にはなりません。 しかしその場合、角丸の部分は、普通の四角として表示されるだけですので、使っても特に不具合は起きません。 将来的には、すべてのブラウザで角丸が表示できるようになるでしょう。 まず、通常のHTMLのソースです。 任意のテキ...
透過PNGを使用してテキストにグラデーションを重ねる
川本 (2010年6月28日 21:39)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / Webサイト構築・Web戦略
透過PNGを使用した小技を紹介します。 h1等の見出しにアクセントをつけたい場合、多くの場合画像を使用します。 ですが、SEOに配慮し、テキストのまま見出しを出したい等、要望があった場合、テキストの上に透過PNGを重ね、見出しにアクセントをつけることができます。 考え方としては、テキストの前にspan要素を記述し、そのspan要素の背景に透過PNGを指定し、テキストの上に重なるようにします。 以下...
コンテンツが短い時でもフッターの背景を画面下部まで表示させる
川本 (2010年5月31日 20:52)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / Webサイト構築・Web戦略
メインコンテンツの内容が少ない場合、フッター部分はメインコンテンツの真下に来てしまい、下はbodyに指定した背景色になってしまいます。 解決策としては、 ・フッターを画面下部に固定する ・メインコンテンツの高さをある程度取っておく などが挙げられると思いますが、ここでは、フッター部分がメインコンテンツの真下にある状態で、フッターの背景色を画面下部まで表示させる方法を紹介します。 CSSに下部のソー...
簡単にストライプ素材を作れるツール『Stripe Generator（ストライプジェネレーター）』
川本 (2012年5月 2日 18:05)
Webｺﾝｻﾙﾃｨﾝｸﾞ部
こんにちは、デザイナーの川本です。 皆さんはストライプの素材を作る時、どのようにして作っていますか？ 小さな画像なら簡単に作ることができますが、背景画像として設定するなど、シームレスな素材を自分で作ろうとすると、つなぎ目がずれたり、不自然になってしまいがちです。 そこでご紹介したいのは、『Stripe Generator（ストライプジェネレーター）』というWebツールです。 ページはこちら→Str...
続きを読む→