プロフィールに記しておりますとおり、私は現在デザイン会社にて働いております。 昨年の3月、5年ほどやっていた「DTP・グラフィックのデザイン・レイアウト業務」から「Web担当」に相なり、日々勉強しながら仕事に臨んでおると言う状況です。 そのちょっと前までHTMLは妖精が書いていると思っていた私にとって、あまりに勝手の違う作業内容。最初は途方に暮れておりましたが、Twitter等で知り合うことのできた先輩Webデザイナーさん達のおかげもあり、現在では自分でWordPressのテーマを作成できるまでに成長することができました。頭を叩くと「ｾﾏﾝﾃｨｯｸ!」と音が鳴るまでになりました。 そんなわけでここいらで一度、自分がDTP→WEB担当になるにあたって勉強したこととか使っているツールとかをデロッとまとめておきたいと思います。 まずは業務をする上で必要不可欠になった言語や、作業効率を上げるために

CSSを記述するために開発されたメタ言語、Sass（Scss）+ Compassを覚えてからかなりコーディングが楽になってきた今日この頃。 「Sublime Text」にCompassとSassを導入して以来それはそれはその恩恵をありがたく享受しているわけなんですが、ここいらでそろそろ新しいサイト作成用のテンプレートを作っておこう！と思い立ち、Sass + Compass（とそれに付属するファイル）のテンプレファイルを作成いたしました。 テンプレートファイルの構成 テンプレートファイルは↑こんな感じです。（以下「Sass（Scss）」と毎回書くのも面倒なのでScssで統一します。） ファイルは _vars.scss _common.scss _util.scss _layout.scss _main.scss style.scss で構成されています。 この構成は主にhail2u.netさ

人の心を盗むことはあっても、記事を盗むことはありません。おつぱ（ @OZPA ）です。ｸﾗﾘｽｩｰ!!ｸﾗﾘｽｩｰ!! さて先日、Twitterで@25kei12 さんより「とあるサイトで記事が全文パクられてますよ」と教えて頂きました。 参考：全文パクリブログ発見! – ま鉄系 よくよく考えたら全文まるまる無断転載されたのは初めてのこと（把握する範囲で）。しかもサイトを見てみたら画像まで直リンクしてくださっているご様子。 うーん殴りたい。 そんなわけでどんな制裁をくわえてやろうかと高鳴る鼓動を抑えつつ、当該パクリサイトにいろいろと対策を講じることにしました。（パクリサイトへのリンクはしておりませんので悪しからず） Googleに著作権侵害で報告 まずはじめにやるべきはGoogleへの著作権侵害を申告することでしょう。以下のサイトを参考にさせて頂きました:) 無断コピーされたコンテンツをGo

サイトじゃないですけど、今使ってる本。凄く分かりやすい。 チートシート 日本語版 WordPress チートシート | Webクリエイターボックス WordPressの覚え書きというか、カンニングペーパーです。コードなんぞをまとめました。他にもWordPressのチートシートはいたるところで記事にされていますが、CSSハックやCSS小技集に続き、 … コードを書く際に便利なカンペ。 CSS入門 わたくし、CSSもHTMLもまともに修めておりませんのでそのへんの知識を得るために。 CSSレイアウト実践講座 とほほのスタイルシート入門 テーマ、カスタマイズ参考 2011年に入って気になった最新Wordpressテーマの情報一挙公開 | バンクーバーのWEB屋 僕は出身が熊本でして、良い物のことを、”こりゃヨカバイ！”と言うことがあります（若い人は使わないよね、そうだよね。） さて、今日は僕が思

商用・非商用を問わず無料で利用できるWebフォント、「Google web fonts」の実装方法をさっくりメモっておきたいと思います。 Google Web Fonts Google web fontsとは Webページ閲覧時、通常ではパソコンにインストールされているフォントしかブラウザで表示することが出来ませんが、「Webフォント」を使用すると任意のフォントを表示することが出来ます。 Googleの提供するGoogle Web Fontsはアカウント登録の必要も無く、実装が非常に簡単なそれの一つです。商用・非商用ともに無償で利用が可能と言うのもポイント:) ちなみに当サイトでも日付の表示とサイドバー・フッターの見出しにGoogle web fontsの「Coda」を使用しています。 Google web fontsの実装方法 実装の手順は3ステップ。 1.使いたいフォントを選択する 2

どうも、@OZPA です。 先月、当ブログのテーマをWordPressにて自作した私。 しかしながら、実はそれまでWordPressの知識どころかhtmlすらろくすっぽきちんと理解していない人間だったのです。 今回はそんな私がWordpressのテーマを一から自作するまでにやったことを備忘録がわりに纏め上げておこうかと思います。 ひとりじゃ出来なかった 今回、テーマを作り始めたのが2011年の12月29日、そしてテーマが完成したのが年が開けて1月の12日。 だいたい2週間弱で自作テーマ発表まで漕ぎ着けたわけなんですが、そこにはそうそうたる方々によります手助けがありました。 そんな方々に敬意を払いつつ、テーマ自作までにやったことと手順を備忘録として残しておこうかと。 WordPressのテーマ作成の手順 さて、WordPressのテーマを作成するためには、 0.WordPressをローカルに

どうも。生まれて初めて当たり付き自動販売機で当たりが出た@OZPA です。 さて、かねてより和洋風◎の@isloop くんより 「ブログのデザイン、テンプレートじゃなくて自分で作ったほうがいいよ」 とのアドバイスをうけていたのですが、phpやcssどころかhtmlすらろくに理解していなかった私。 プロフィールページを作るのに戸惑ったり、はたまたサーバを移転するのにしこたま苦労したりと本当に手のかかるお子様だったわけです。そんな私がWordPressのテーマですって・・・？汚らわしいっ！ [blackbirdpie url=http://twitter.com/#!/OZPA/statuses/64271506724757504] ですが今年の4月の終わりに上のようなつぶやきをしていることをふと思い出し、新しいことを覚える良いチャンスだなということで、WordPressのテーマを作るためにB

トップ画面 トップ画面はこんな感じです。今までよりロゴやサムネイルを大きく、メニューバーを画面の最上部に配置しました。 メニューバーも各項目のpaddingを広めに、押しやすく。 h2、h3、h4タグやblockquoteタグなどもPC版のブログのリニューアルに合わせて装飾をやりなおし。 以前より見やすくなったでしょうかどうでしょうか？ スマホ対応だいじ 最近、和洋風KAIさんでもごりゅご.comさんでもスマホサイトのリニューアルをしました、と言うような記事が上がっていることからも分かりますが、個人的にもモバイルからのアクセス、特にスマートフォンからの閲覧の大事さに改めて色々と思い知らされております。 和洋風KAIのスマホ向けサイトをリニューアルしました。 | 和洋風KAI jQueryを使ってWordpressの追加記事をページ遷移無しで読み込む | ごりゅご.com OZPAの表4でも

Finder? / abooth202 今回は、Macにてちょいと役立つ「FInderとウインドウ」に関する小ワザをご紹介:) Finder作業時に、背面のウインドウを移動したい Finderをいじっている際に、ウインドウが思いっきり重なっちゃって 「あぁ、後ろにあるウィンドウを少しだけ動かせたらなぁ」 なんて事ありませんでしょうか。あと少しずれてくれたら中が見えるのに…という、階段でスカートの短い女子高生の後ろを歩いているような状況。たまらないですね。 こんな時には 前面のウインドウを移動する 背面のウインドウを選択する と言った手段で背面のウインドウの中身を確認するのが普通かと思いますが、もう一つ、「背面のウインドウをコマンド+ドラッグで動かせる」と言うtipsを知っていると割と便利だったりします。 このように、背面のウインドウをcommandキーを押しながらドラッグ。すると、選択して

HOME>Design>[Photoshop]OS XやiOSでよく見る布のテクスチャ上にロゴを乗っけて自分用のiPhone5壁紙を作成してみたので手順メモ [blackbirdpie url=https://twitter.com/OZPA/status/252695149111554048] そもそも、事の発端はこんな感じでつぶやいたところ… [blackbirdpie url=https://twitter.com/Mori2nd/status/252729626290450432] Mori2nd Labの@Mori2nd さんに褒めていただき… [blackbirdpie url=https://twitter.com/yayoko314/status/252731252963160064] やよこぶろぐの@yayoko314 さんにも褒められて調子に乗りまして。 [blackb

昨日フォントのおはなしをしましたのでちょいと関連した記事をば。 Macには「フォント」を司るフォルダが3つ存在しております。 その場所と意味をきちんととらえていないと時たまとんでもない事故が起こったりするので記しておきます。 フォントファイルは3つ Macのフォントファイルは合計3つ。 システム/ライブラリ/Fonts ライブラリ/Fonts ユーザ/ライブラリ/Fonts の三ヶ所。 システム/ライブラリ/Fonts Macintosh HD内、「システム」の「ライブラリ」にあるフォントフォルダ。 ここにはMacのシステム自体が使用するフォントが収められています。 システムが使用するフォントですので、このファイルを弄ることは基本厳禁で、ファイル内のフォントを消去したり、追加したりすることはやめましょう。とんでもない事が起こったりします。 ライブラリ/Fonts 次にMacintosh H

とんでもなく参考になりすぎるEvernote使用例 6 〜ノート総数3500 @delaymaniaの全ノートブック晒し＆”肩の力を抜いた”Evernote整理術〜 OZPAの表4をご覧のみなさん、はじめまして。 ブログ「delaymania」を主宰しております、@delaymania と申します。 「アマオト」というバンドのギタリストをやってまして、その傍らでWEBデザインの仕事、そしてiPhone,iPadアプリの開発をやってます。 先日、尊敬するブロガーの@OZPA 君から「You寄稿しちゃいなよ」と言っていただきました。 OZPAの表4は以前から目標とするブログでして、そのブログに寄稿させていただけるとは夢のようです。 というわけで、めんどくさがりな僕の適当なEvernoteの使い方をご紹介します。 ノートブック整理は肩の力を抜いて適当にやる まず僕のノートブックをご紹介します。

Mac for every student ? / luc legay 作業効率を上げるための方法は幾つもありますが、まず押さえておきたいところといえば「キーボードショートカット」でしょう。 当然のことながら、ショートカットを知っているか否かというのは作業スピードに密接に関わってきます。 今回は、Macにて私がよく使用するショートカットや基本的なコマンドを含めて、覚えておくと便利なものを挙げ連ねておこうかと思います。 関連：Mac OS X のキーボードショートカット 超基本のショートカット 以下はMacを扱う上で超基本となるショートカットです。 たいていどのアプリケーションでもこれらのショートカットは共通ですので覚えておいて絶対に損はないです。 command + A：すべてを選択 command + Z：アンドゥ（リドゥ） command + S：保存 command + C：コピー

check list / Artois Bibliothèques 先日リリースされました「iOS 5」の新機能の一つ、それが・・・「リマインダー」 [iOS 5][iPhone][iPad]ついに来たぞ「iOS 5」！ その気になる主な新機能の全てをご紹介！！ 要するに簡単なTodo管理アプリがデフォルトとして搭載されたわけなんですが、あまりタスク管理アプリを使用したことのない方もいらっしゃるかもしれませんので、その機能を紹介していきたいと思います。 基本的な使い方 起動画面がこちら。 手帳のようなテクスチャがキレイ。 右上の「＋」か、リスト欄をタップすることで簡単にタスクを追加できます。 下にスワイプすることによって「０ 完了」のように、リスト内の完了したタスク数が表示されます。 横にスワイプぅー すると「完了」タスク画面が！ そうです、この「リマインダー」アプリは左右のスワイプでリス

今回寄稿の機会をいただきました@Surf_Fish こと「はま」と申します。「はまラボ」というブログを運営しています。ブログの方では、Evernote、TaskChute、ライフハックに関する記事を書いています。 はまラボ ブログ名の通り、リアルでは化学の研究を仕事としていますが、その実態はサラリーマンです。一人のサラリーマンがどのようにEvernoteを使用しているのか、という一例として見ていただくのが良いかと思います。 @Surf_Fishのノートブック 運用の基本思想は「GTD」 原典通りのGTDを再現しているわけではないのですが、私がEvernoteを運用する際の基本にしているのは「GTD」です。ノートブックは「タスクの状態（可動）」、タグは「属性（不動）」を表すために使用します。 タグは後から見返すときに絶対に見失いたくないものにしか付けませんので、タグの使用数は少ないです。その

待ってたよこの日を。待ちわびていたアプリが来たんだよ。 ふぁすてらす？ふぁすとえろす？ 昨年末、@goryugo が火付け役となって巻き起こった「日刊ブーム」。 「だいたい言いたいだけ」と言う天才的な10文字のコンセプトの元、数多くの人達がブログサービス「Posterous」を使っての簡単なライフログを始めました。 参考：Posterousのテキトー日記のススメ | goryugo, addicted to Evernote かくいう私もそのブームに乗り、日刊おつぱをライフログの一環として始め、なぜ日刊がブームとして成立したのか？と言う偉そうな記事まで書く始末。 参考：日刊ブームで思うこと 適当な内容で構わない（だいたい言いたいだけ） ナンバリングをする というあまりにもゆるい決めごとがもたらす自己満足感（良い意味で）が多くの人の心を捉えたのだと思っております。 さて、今年に入っても日刊ブ

iPhoneの　ホーム画面は　持ち主の 全てを表す　ウルトラソウル （詠み人知らず） 2011年もまもなく半分が過ぎようとしております。 昨年の大晦日に更新しましたホーム画面晒し記事より6ヵ月。 ちょいと早いですが、2011年度上半期、私のiPhoneホーム画面まとめということで晒し上げておきたいと思います。 前回のまとめ：iPhone歴1年そこそこ、私のホーム画面2010決定版

先日、ブログの解析をしていたところ「Evernote マージ 戻し方」と言う検索ワードを発見しました。 おそらく当ブログにその解決方法は載っておらず、わざわざ検索で来ていただいた方を絶望の淵に叩き込んでしまったと思われます。 二度とそのような方を出さないよう、今回はマージしたノートを元に戻す方法をば。 ノートをマージする方法 「マージ」とは、Evernote上の複数のノートを一つにまとめる事です。 この様に、まとめたいノートをシフトキーで選択し 右クリックから「ノートをマージ」を選択。 するとこの様にノートが一つになります。 これがノートのマージです。 ちなみに、この様に隣接していないノートを選択する場合は⌘キー + クリック（Windowsの場合はControl キー + クリック）で選択可能です。 まぁこれはEvernoteに限った事ではなく全てのアプリ共通なんですけど、一応記しておき