サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
衆院選
blockworks.jp
「範囲選択」ツールは自由に選択範囲を作ることができるツールです。自動選択 / 長方形選択 / 楕円形選択 / なげなわ / 多角形選択といった、さまざまな方法が用意されています。 共通:選択モード 選択範囲を作成する前に選択モードを選んでおくことで、様々な選択範囲の作成補助ができます。 新規追加 今まで選択されていた範囲を解除し、新たに選択範囲を作成します。 範囲追加 既に選択されている範囲に新たな選択範囲を追加します。 範囲を選択している状態でshift ⇧を押しながら新たな範囲を選択することで、選択範囲を追加することもできます。 範囲削除 選択されている範囲から、新たな選択範囲の箇所を削除します。 範囲を選択している状態でoption ⌥を押しながら新たな範囲を選択することで、選択範囲を削除することもできます。 範囲差分 選択されている範囲と新たに選択した範囲の差分(交差した箇所)の選
画像の特定範囲だけを表示したい場合、マスクと呼ばれる範囲を作成して非表示にすることができます。 マスク作成前の状態です。 隠したい画像の下にレイヤーを作成し、選択範囲を黒などで塗りつぶします。(下図ではわかりやすいようにマスク部分のみ表示しています。) 隠したい画像のレイヤーを選択し、を選択します。 塗りつぶした箇所以外は非表示になります。 元に戻したい場合は、隠した画像を選択し、を選択すると、元に戻ります。 クリッピングマスクの作成/解除は、「レイヤーウインドウ」からでも行うことができます。
Pixelmatorには「シェイプ」とよばれる図形が用意されています。長方形・角丸長方形・楕円形・三角形シェイプ・多角形・星・ライン・カスタムシェイプの図形を描くことができます。 Ver2.2からはカスタムシェイプが多数追加され、よりバラエティに富んだシェイプを選択することができます。 新規シェイプを描画 「シェイプ」ツールを長押しして、描きたいシェイプを選択します。 画面上をドラッグすると新たにシェイプレイヤーが追加され、図形が追加されます。 図形には□のポイント(アンカーポイント)がつき、図形を調整することができます。 シェイプの設定 Pixelmatorのシェイプには、大きく「塗り」と「線」の2つの要素があります。 「塗り」は描いた輪郭線の中身を指し、「線」は描いた図形の輪郭線の事を指します。 シェイプの設定では、塗り、線のほかにシャドウ(影)、インナーシャドウ(図形内影)、リフレク
🔠 🔡 🔤 🌀 🌁 🌂 🌃 🌄 🌅 🌆 🌇 🌈 🌉 🌊 🌋 🌌 🌍 🌎 🌏 🌐 🌑 🌒 🌓 🌔 🌕 🌖 🌗 🌘 🌙 🌚 🌛 🌜 🌝 🌞 🌟 🌠 🌰 🌱 🌲 🌳 🌴 🌵 🌷 🌸 🌹 🌺 🌻 🌼 🌽 🌾 🌿 🍀 🍁 🍂 🍃 🍄 🍅 🍆 🍇 🍈 🍉 🍊 🍋 🍌 🍍 🍎 🍏 🍐 🍑 🍒 🍓 🍔 🍕 🍖 🍗 🍘 🍙 🍚 🍛 🍜 🍝 🍞 🍟 🍠 🍡 🍢 🍣 🍤 🍥 🍦 🍧 🍨 🍩 🍪 🍫 🍬 🍭 🍮 🍯 🍰 🍱 🍲 🍳 🍴 🍵 🍶 🍷 🍸 🍹 🍺 🍻 🍼 🎀 🎁 🎂 🎃 🎄 🎅 🎆 🎇 🎈 🎉 🎊 🎋 🎌 🎍 🎎 🎏 🎐 🎑 🎒 🎓 🎠
Unicode6.0の絵文字に特化したWebフォント「EmojiSymbols Font」を公開しました。 Unicode6.0の絵文字って何? 知らない人のために、はじめにUnicodeについて書く必要があると思いましたので簡単に説明します。 Unicode(ユニコード)とは、世界中のコンピュータ上の文字列を統一した方法で符号化・表現された規格です。 そのUnicodeに日本の携帯電話で使われていた絵文字を入れようという事になり、GoogleやAppleなどが提案し、「Unicodeコンソーシアム」と呼ばれる文字コードを決める会議で数年かけて制定された「文字」です。 ここで話す「Unicode6.0の絵文字(以下、絵文字)」は、Unicodeバージョン6から導入されました。 携帯やパソコンで絵文字が利用できるようになってきた 制定から約2年が経過し、iOS・Android・Macでも絵文
インターネット上での利用に特化したwebフォントです。 Webページ・Webサービスの利用であれば、個人・商用問わず無料でご利用いただけます。 フォントをご自身のWebサーバへアップロードしてご利用いただけます。 Unicode6.0で制定された携帯絵文字に対応した826の絵文字を収録しています。(2012年10月現在) Webフォントはwoff形式を用意しました。 パソコン・タブレット・モバイルなど、幅広い範囲でご利用いただけます。 絵文字はテキストとして表現されているため、簡単に内容を修正・装飾することができます。 Web以外の利用(商業印刷物・雑誌収録・電子出版・映像・ソフトウェア/ハードウェア組込)は有料オプションにて対応。 Download Font
This is a Web font specialized for use on the Internet. The font can be used free of charge for Web pages and Web services, be it for private or business use. The font can be uploaded to your Web server for use. The font includes 826 emoji (a special set of images and emoticons) which support mobile phone emoji created in Unicode 6.0. (As of October, 2012) formats of Web font, woff is available. T
WordPressでイベント情報表示に便利なプラグイン「Ajax Event Calendar」の日本語翻訳ファイルを作成しました。 Ajax Event Calendarは、イベントの情報表示や登録がAjaxを使ったプラグインです。 私はシンプルに内容を表示するだけを前提としていたのでこれだけでも必要十分な機能が揃っていますが、他にも以下のような便利な機能が付いています。 あらかじめ用意されている項目の表示/非表示/必須項目を選択可能 説明文にURLがあると自動でリンクに 一般向けに対しても登録が出来るような仕組みのON/OFFを制御可能 確認環境 以下の環境で動作することを確認しました。 WordPress3.1.3 Ajax Event Calendar 1.0.2 インストール方法 翻訳ファイルとプラグインをダウンロードします。 翻訳ファイルにある「ajax-event-calen
Mac用ペイントソフト「Pixelmator」の基本的な操作を、個人的に調べてまとめてみました。内容に不備があった場合は、@aknkまでご連絡ください。 ただいまVer3.0相当の内容を確認中です。内容は確認したものから随時修正するため、旧バージョン(2.2)と内容が混在する状態になっています。修正したものは、「更新履歴」に随時記載していますので、ご確認ください。 Pixelmatorの基本ツール類 ‣Pixelmatorの「移動」ツール ver3確認済 ‣Pixelmatorの「範囲選択」ツール ver3確認済 ‣Pixelmatorのクイックマスクモードで編集 ver3確認済 ‣Pixelmatorの「切り抜き」ツール ver3確認済 ‣Pixelmatorの「スライス」ツール ver3確認済 ‣Pixelmatorの「消しゴム」ツール ver3確認済 ‣Pixelmatorの「ブラシ
Coda.appには、「クリップ」と呼ばれるスニペット置き場があります。WordPressのテーマ制作に使えそうなクリップを作ってみました。 はじめに 利用はフリーです。ご自由にどうぞ。 オレオレ成分が20%ほど入っておりますのでご了承ください。 間違いなどありましたら、@aknkまでつぶやいてください。 クリップ内容 以下のクリップを入れてあります。 文字コード表示 ページタイトル表示 スタイルシートのアドレス(style.css) RSS(RSS0.9/RSS2.0/Atom0.3)一式 バージョン番号 テーマフォルダ内のjavascript読み込み WPコアからjQueryを読み込み wp_headアクション(head内に追加) header部分よくある感じのひな形 ブログの名前 ブログの概要 ブログのメインページのURL WPのインストール先ディレクトリのアドレス テーマディレクト
MOONGIFTさんが今週頭にリニューアルされました。その中でサイトデザインとWordPressのテーマ制作をやらせていただきました。私がどういう風に感じて、どう考えたのかを書いてみたいなと思います。 はじめに リニューアルは、おおざっぱに以下のような作業分担となっています。 HPに入れたい情報・要望を洗い出し(MOONGIFTさん) 入れたい情報を元にレイアウト案を作成(私) レイアウトがある程度決まったらビジュアル化(私) コーディング、WordPressテーマ化(私) WordPressテーマを元に、課金・プレミアム等のプログラム部分を実装(MOONGIFTさん) レイアウト・情報整頓について 私が担当する作業の中では、この部分の作業時間が一番かかったと思います。 MOONGIFTさんの今後の展開を聞いた上で、 後からでも情報や機能、サービスを付け加えやすいレイアウトの模索 情報の整
Fireworksでデザインする派の自分にとって、Photoshopによるホームページデザインデータは結構苦手だったりします。 中でも面倒なのが、photoshop上のテキストをコピーし、htmlへ移す作業です。Phoshopは、テキストが選択しづらい!ちょっといらいらしますw 「PS_BRAMUS.TextConvert」は、 Photoshop上の文字列をテキストファイル書き出しができる 書き出したテキストファイルを修正し、Phosohopに戻すことができる というプラグインです。 確認環境 MacOSX 10.5.8 PhoshopCS4 インストール方法 「Bram.us » PS_BRAMUS.TextConvert: PSD2TXT and TXT2PSD for the masses!」の「Download PS_BRAMUS.TextConvert 1.0」からファイルをダ
ホームページのレイアウトを作成する際に画像のアタリをつけることがよくあります。アタリ画像のサイズ(数値)や説明文を簡単に挿入できる Fireworksの機能拡張 Placeholder を見つけましたのでご紹介します。 Placeholderは、 アタリ画像のサイズ(数値)を自動的に挿入 アタリ画像サイズを変更すると、数値も自動的に変更される アタリ画像内にどういった写真が入るのかを記述することができる アタリ画像の見た目を2種類から切り替えることができる …と言ったアタリ画像に関する作業が簡単にできます。 動作検証はFireworksCS4で行いました。 インストール Placeholder – Adobe Fireworks Extensions – johndunning.comからファイルをダウンロードし、Adobe Extension Manager にインストールします。 イン
iPhone向けモックアップ(UI遷移図)の制作ができる「iPhone Mockup」というサイトを見つけましたのでご紹介します。 どうやらこのページはHTML5+jQueryで作成されているようです。(もしかしたら一部のブラウザでは上手く動作しないかもしれません。FireFox3.6.9では普通に動作しました。) 操作はとても簡単で、「追加したいパーツをドラッグする」「いらないパーツはゴミ箱へドラッグする」だけです。一部のパーツはダブルクリックで文字を変更することができるようです。 この手のアプリ開発は、大きく分けて UI(動き)のみを考える ソフトの外観(見た目のビジュアル)を作る UIと外観の両方を作る の3パターンの人がいるかとおもいますが、この「iPhone Mockup」では、「1.UI(動き)のみを考える」人に向いているのかな、と感じました。 2.や3.の場合は、例えば「fi
以前、「fireworksCS3とCS4で使えるiPhoneUI画像|ホームページ制作,静岡|ブロックワークス」という記事をご紹介しましたが、今度はAndroid向けUI画像を配布しているサイトを見つけましたのでご紹介します。 「UNITiD | Interaction Design & Usability» Blog Archive » Fireworks template for Android」のサイトで配布されています。記事投稿時点で2009年12月のものということもあり、同じUI「http://www.smashingmagazine.com/2009/08/18/android-gui-psd-vector-kit/」と比較すると作り込みの部分で若干きになる部分もあります。 この他に上記で挙げたFireworks以外にもPSD、Omnigraffle stencil、Visio
iPhoneのUIモックアップを作成する「interface」というiPhone用アプリを見つけましたのでご紹介します。 以前、「EDGE Touch」のUIを作成する時は、「fireworksCS3とCS4で使えるiPhoneUI画像|ホームページ制作,静岡|ブロックワークス」で紹介したiPhone部品画像を使って、画像でイメージを作りながら試行錯誤をしていました。 「EDGE Touch」は、お互い勝手を知っているので、画像だけでも意図が分かったり、頭の中でソフトをシミュレートすることができました。 ただ、実際に依頼される?お客様は画像を見ただけで頭の中でシミュレートできる人は稀だと思います。実物を見ないと判断できない場合が非常に多いです。そんな時に、この「interface」というアプリは便利なんじゃないかと感じました。 動画を見ていただくと分かると思いますが、実に様々なiPhone
fireworksのスウォッチをカラーホイール風に変更する方法を見つけましたのでご紹介します。 fireworks標準のスウォッチは、以下のような並びです。 これはこれで使えないことはないのですが、視覚的に周りの色に影響されるため、同系色の濃淡が若干選びづらく感じたことはないでしょうか?一度選択してみないとわかりづらいと思います。 今回、「IDUX » Saving and Loading Custom Color Palettes in Adobe Fireworks」という、ホイール風の丸型スウォッチに変えてくれるパレットを公開していました。 設定方法 「http://www.idux.com/downloads/DHogue_color_wheel.act」から.actファイルをダウンロードします。 fireworksを起動後「ウインドウ」→「スウォッチ」を選択し、ウインドウを開きま
英語26文字+記号の文字数しかない中で、アメコミはどうやって効果音を表現しているのだろうと気になったので、「Comically Vintage」を見て調べてみました。 E-E-E-YIPE! AAAGH! ZOOOM HATE! POW! YIPE! BOP RAH! WHACCCK SLAPPP KZZZZZ VRROOM KLUNK! CRACK OOOFF! OHH! SCREEEEE KRUNCH! VROOOM! SCREEEEEECH! KNOCK KNOCK OW-W AAAGHHHHHH! AGH-HH! EEEEEEEEOW! SMACK! WHUNKK THWAAV BAM BLAM THOOOM! EEEK BAAAAH HAW HAW HAW HOOOOFFF GRRRROOWWFFFF EEEEEOWWWFFF BOOMP BAM! AIIIIEEEEEE DAN
記事のページナビの実装によく使われているプラグインに「WP-PageNavi」がありますが、今回はスライド式ページナビが実装できるWordpressプラグイン「Paginator」を発見しましたので、ご紹介します。 ↑みたいなスライド式ナビゲーションを実装することができます。 1.プラグインのインストール・有効 こちらからプラグインをダウンロード・解凍し、「wp-content」→「plugins」フォルダ内にアップロードし、管理画面でプラグインを有効にします。 2.コードを挿入 テーマファイル内のナビゲーションを挿入したい箇所に以下のコードを貼り付けます。 <?php if(function_exists('wp_paginator')) { wp_paginator(); } ?> それだけでナビゲーションが挿入されます。 設定画面 「Paginator」は、管理画面で以下の2つの設定
自分は忘れっぽいので、以前から技術的な知識を備忘録として残したいと考えていました。 偶然phpspot開発日誌さんで紹介されていた「サポートサイトを作るのに役立ちそうなPHP製ナレッジベース構築用オープンソース「68KB」:phpspot開発日誌」を発見し、気になったのでインストールしつつ、日本語ファイルを作成してみました。良かったら使ってみてください。 2009/07/29:けいぞ さんからのご指摘に対応しました。「includes/language」は全ての文章が翻訳されておりません。 2009/07/29-2:68kbのバージョンが1.0aにアップしたため、旧バージョンのプログラムファイルがダウンロード出来なくなっております。 導入方法 1.「sources/config/config.php」を開きます。 2.「config.php」の 78行目あたりにある [sourcecode
iPhoneのUI部品を提供している方のほとんどはPhotoshop向けが多く、fireworks派の自分としては若干使いづらいなぁと感じていました。今回、fireworksCS3とCS4で使えるiPhoneUI画像を配布しているサイトを見付けましたのでご紹介します。 ご覧のように、iPHoneUIで使われているほとんどの画像を網羅しています。fireworksですから、もちろん1つ1つが分離されて自由に使うことができます。 iPhoneアプリを制作している方、Web制作をしている方には助かるんじゃないでしょうか?自分もデザインの作り込み方などを参考にしたいなと思います。 リンク Blogspark » Blog Archive » Fireworks toolkit for creating iPhone UI mockups
Adobeデベロッパーセンターに「テキストオブジェクトやテキストのバウンディングボックスが正しく整列しない(Fireworks CS4)」という記事が投稿されていました。 ここで紹介されている機能拡張をインストールすることで、ずれてしまったバウンディングボックスを正しい位置に直してくれます。 「Re-Sync Text Bounding Box」のページにジャンプします。(要AdobeID) ファイルをダウンロード fireworksCS4をインストールすると一緒にインストールされる「Adobe Extension Manager CS4」を使用し、「Re-Sync Text Bounding Box」機能拡張をインストールする。 インストールすると、コマンドメニューにRe-Sync Textという項目が増えています。 あとは、テキストがずれてしまったファイルを開き、実行するだけです。現象
google,Yahoo!,Liveで「rel=”canonical”」というサイト内の重複コンテンツを防止する」ための新たな手法が発表されたそうです。 サイト内の重複コンテンツを防ぐ新たな手段、rel=”canonical”が登場 – F.Ko-Jiの「一秒後は未来」 その方法とは、ページの head タグ内に次のような link タグを記述するという簡単なもの。 <link rel="canonical" href="http://blog.fkoji.com/" /> この rel=”canonical” によって、めんどくさい RewriteRule などを定義することなく、検索エンジンに対して望ましいURLを伝えることができます。 で、wordpress向けのプラグインが早速作成・公開されていますので2つほどご紹介したいと思います。 Canonical URL’s for Wor
Webサイトのレイアウトを考える上で参考になりそうなサイトを見つけました。 960pxを短冊のように分割し、そのグリッドに合わせてレイアウトするその名も「960 Grid System」というサイトです。まずは文章で説明するより絵で見てみてください。 みての通り、一見変哲もないサイトですが、実は960gridのルールに沿って作られていることが分かります。 [60px][20px余白][60px][20px余白]の繰り返しに、両脇に10pxを入れた960pxで成り立っています。 多種多様な情報をいかに見やすく、分かりやすく配置していかということを考えると、960gridのような考え方でデザインしてみるのもいいかもしれませんね。 レイアウトのベースとなるテンプレートファイル(psd、FireworksPNG、omnigraffle、visio)も無料でダウンロードすることができるので、これをベ
javascriptライブラリである「jQuery」を業務でもよく利用しています。プログラムのことが分からないデザイナーでも、CSSのクラスを割り振るような感覚で手軽に動きや処理を行うことができます。 今回たまたま、お問い合わせフォームではなく、mailto:を使ったリンクをして欲しいという依頼がありました。実装するだけならあっという間なのですが、メールアドレスが公開され、スパムメールが届いてしまうことを考えた時に、何かしら処理を入れたいなと思い、素人ながらに処理らしいものを入れてみました。 javascriptを使っているので、OFFになっているときにどうするの?というツッコミが入りそうですが、そのあたりはスルーしてw、紹介してみようと思います。 1.jQueryと外部JSファイルの読み込み jQueryと外部JSファイルの読み込ませるために、〜タグ内に以下のようなコードを追加します。
WordPressで投稿した記事内画像にlightboxのような画像拡大表示プラグインをつけたいと思い、いろいろ探しました。結果、デザインの良さから「wp-fancybox 」を使い始めました。以下に設定方法などを記載したいと思います。(検証はWordpress2.7で行っています。) インストール 「wp-fancybox 」からプラグインファイルをダウンロード。 解凍してできたフォルダごと「wp-content/plugins」フォルダにアップロード。 管理画面にログインし、プラグインを有効化。 設定 [設定]項目の中に「FancyBox」の項目が増えているのでクリック。設定内容は以下。 Hide on content click…拡大表示した画像を閉じる際、画像そのものをクリックして閉じることができるようにするか、しないかを選択。 Show overlay…拡大表示の際、黒半透明で覆
以前、「ビデオカメラをもっと手軽に-Flip Mino HD- |ブロックワークス」とう記事を書いた所、ネタフルさんの記事「[N] 「Flip Mino HD」日本から入手するには?」でページが紹介されてるではありませんか!うれしすぎる!! ネタフルさんの記事にもあるように、日本未発売の商品なので購入したくても方法が分からない方が多いと思います。自分もホームページ制作をさせてもらった英会話の先生に、購入方法がないかサイト内容を読んでもらったのですが、結果、海外製品輸入は初心者の自分には大きな壁でした。 自分もいろいろ探してみて、以下のサイトで購入しました。(厳密には現在発送待ち状態なので、モノは届いていませんが) eBay(イーベイ)公認の海外オークションサイト セカイモン(sekaimon) セカイモンで「Flip Mino HD」を検索 先々の発送を考え、「セカイモンがお届け」というマ
WordPressのオンラインショッププラグイン「WP e-Commerce」の日本語ファイルを出来る範囲ですが作成しましたので公開します。 本ファイルは、gesellschaft – WP e-Commerceさんが配布していたJP_jp.phpファイルを元に、Wordpress2.6上にWP e-Commerce3.6.7を導入し、文字化けしてしまった箇所を追加翻訳したファイルになります。 確認バージョン WordPress2.6 WP e-Commerce3.6.7 インストール・解説 誤訳・訳し忘れがある可能性が高いです。予めご了承ください。 本ファイルを利用したことによる一切の責任は問われないものとします。 JP_jp.phpファイルを「wp-shopping-cart/languages」フォルダにアップロードしてご利用ください。 ダウンロード wpe367_lang_ja.z
2022.01.08 functions.phpにコピペで出来る!WordpressでGoogleCodePrettifyを使う方法
次のページ
このページを最初にブックマークしてみませんか?
『ホームページ・印刷物・動画制作 | ブロックワークス』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く