タグ

ブックマーク / ozpa-h4.com (19)

  • 私がよく使っているjQueryプラグインまとめ(スライダー、モーダルウィンドウなど)

    こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。(たまにjQueryが必須でないものもあります。) ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプルで綺麗だし、マークアップも簡単。テキストもOK。お気に入りのプラグインです。 Owl Carousel bxSlider 個人・商用利用可能。シンプルなスライダープラグインです。レスポンシブで動作し、カスタマイズもしやすく重宝します。 jQuery Content Slider | Responsive jQuery Slider | bxSlider Glide.js デモページがカッコイイス

    私がよく使っているjQueryプラグインまとめ(スライダー、モーダルウィンドウなど)
  • 7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座

    HOME>jQuery>7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。(っていうかそんな偉そうなこと言える程修めてない

    7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座
  • jQueryのエフェクトに変化を加える「jQuery Easing Plugin」の使い方と、全33種類のエフェクトサンプルを作成してみた

    様々な効果でWebページのUIをリッチにしてくれるjQuery。 今回は、そのjQueryのエフェクト動作を加速/減速させるためのプラグイン、「jQuery Easing Plugin」の使い方と、全33種類のエフェクトサンプルを(自分用に)作ってみましたのでシェアしておきます。 「jQueryってなんじゃらほい」という方は先日書きました7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座をご一読ください。分かりやすいと僕の中で大評判です。 easingとは、エフェクトの動きを加速/減速させるための関数です。 (中略)特別なことをしなくても使うことの出来るeasingは”linear”と”swing”の2種類だけですが、プラグインなどを入れることで多くのeasingを利用することができます。 このeasingプラグインでは、version 1

    jQueryのエフェクトに変化を加える「jQuery Easing Plugin」の使い方と、全33種類のエフェクトサンプルを作成してみた
  • Web初心者だった私がWEBデザイナーになって1年半で勉強したこと・使用しているツールまとめ

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

    Web初心者だった私がWEBデザイナーになって1年半で勉強したこと・使用しているツールまとめ
  • とんでもなく参考になりすぎるEvernote使用例 7 〜@takaiphone2010 の全ノートブック晒し&Evernote運用術〜

    OZPA表4をご覧のみなさま。はじめまして、今回寄稿させていただくことになりましたtaka( @takaiphone2010 )と申します。 iPhoneEvernoteが大好きな岡山在住のサラリーマンです。 普段はCrossModeLifeというブログにてiPhoneEvernote関連はもちろん、生活の中で役立った情報や気になったことなどをマイペースに書いております。 私はEvernoteを使い始めて約2年ほど経ちますが、今ではEvernoteは生活の一部となり、ノートブックやノート数もそれなりに増えました。また日々利用して行く中でいろいろな気付きもあり、試行錯誤しながら運用もしてきました。 今はそれなりに快適なEvernoteライフを送っておりますので、思い切ってOZPA表4に寄稿をお願いさせていただいたところ、快く承諾いただきましたので、私のノートブックと運用方法を晒して行きた

    とんでもなく参考になりすぎるEvernote使用例 7 〜@takaiphone2010 の全ノートブック晒し&Evernote運用術〜
    lordkf
    lordkf 2013/05/24
    名前の付け方は何でもいいと思うんよ、重要なのはマメに見返すコト >>
  • Mac標準アプリ「Automator」でファイル名を一括リネームする方法

    途方に暮れていた私に、和洋風◎の@isloop くんが教えてくれたのが、Macデフォルトアプリの「Automator」を使用してリネームする、と言う方法でした。 よく考えたらAutomatorをほとんど使っていなかった私。 試してみたらこれが非常に便利で快適でしびれるねぇだったので設定方法をご紹介。 連番付きのファイル名にする場合 まずは、連番付きのファイル名にする場合です。 Automatorを起動、「サービス」を選び、右下の選択ボタンをクリック。 次に、画面上部の 「”サービス”は、次の選択項目を受け取ります:」の部分のタブをひっぱり、イメージファイルを選択します(今回は画像のリネームを行うワークフローを作成するため) つづいて、その右の「検索対象」のタブをFinderに設定。 次に、検索窓にfinderと打ち込み、「Finder項目の名前を変更」と言うフローを見つけましたら、そいつを

    Mac標準アプリ「Automator」でファイル名を一括リネームする方法
  • ショートカットが一目でわかる、Photoshop・Illustrator初心者にうってつけのシール!「Ps/Aiショートカットステッカー」

    Photoshop、Illustratorを効率良く使いこなすには切っても切れないテクニック。そうそれがショートカット。 関連:[備忘録]Mac使うなら当然覚えておくべき、ショートカット時に使用する修飾キー記号の読み方について ただ、アプリを使いはじめのころはショートカットをなかなか覚えきれず、イライラがつのって爪を噛み切り、キーボードに血がにじんだりするものです。そうです、鮮血のキーボードです。 そんなあなたにうってつけの、ショートカットが一目でわかるシール「Ps/Aiショートカットステッカー」のご紹介です。(商品をファーイーストガジェット様よりご提供頂きました。ありがとうございます!) Ps/Ai shortcut sticker(Ps/Aiショートカットステッカー) 重ねて使える こちらがショートカットステッカー(Photoshop ver.)です:) 裏面には様々な説明書きがござい

    ショートカットが一目でわかる、Photoshop・Illustrator初心者にうってつけのシール!「Ps/Aiショートカットステッカー」
  • Google Adsenseの広告配信が停止処分→再審査申し立てのメールをとんでもない文面で送ってしまった件

    Google Food / brionv 先日アップしたとある記事がGoogle Adsenseのプログラムポリシーに抵触してしまい、広告配信停止の処分となってしまいました。 そうです。ラーメンレポートです。察してください。(まぁある程度覚悟していたのですが) いきなりアカウント停止と言う憂き目に遭わなかっただけよしとして、当該記事を削除。再度広告配信の申請をメールにて行おうとしたのですが…とんでもないことをやらかしてしまいました。 日はその一部始終をご覧頂きましょう。 広告配信停止になったらサイトを修正→「申し立て」 と、その前にAdsenseの広告配信が停止になってしまったら、どうするべきなのかを記しておきます。 まずはプログラムポリシーを確認の上サイトを修正し、ヘルプセンターに広告配信停止に対しての申し立てを行います。 そして再度サイト内を審査してもらい、プログラムポリシーに準じて

    Google Adsenseの広告配信が停止処分→再審査申し立てのメールをとんでもない文面で送ってしまった件
    lordkf
    lordkf 2013/03/27
    これからも勇敢な人柱でいてください >>
  • Webフォント「Google web fonts」の使い方・実装手順メモ

    商用・非商用を問わず無料で利用できる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

    Webフォント「Google web fonts」の使い方・実装手順メモ
  • [jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する

    当ブログでも採用しておりますが、ブログなどでもよく見かけるようになった、ある一定量画面をスクロールするとサイドバーなどが固定されるヤーツ。 手順メモを晒しておきます:) 続きましてheadタグ内ないし外部読み込みスクリプトに以下を記述します。 [js] $(function($) { var tab = $(‘.hoge’), offset = tab.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { tab.addClass(‘fixed’); } else { tab.removeClass(‘fixed’); } }); }); [/js] ↑のスクリプトは.hogeがtopの位置に行ったらfixedというclassを追加、それ以外はclass属性を削除する、と言う命令を

    [jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する
  • 圧縮・難読化したCSSファイルを再整形してくれるツール「PROCSSOR」

    先日ご紹介したCSSJavascriptを圧縮するためのWebサービス「YUI Compressor」。 「後々編集することを考えるなら圧縮前のデータもとっておきましょう」と記しておきながらバックアップデータを白ヤギさんにむしゃむしゃいかれてしまった私。んもう…おっちょこちょいさんなんだからぁ…// で、どうにか復元しなければと思っていたところ、色々ある難読化されたCSSファイルの整形ツールの中から使いやすかった「PROCSSOR」をご紹介。 ProCSSor – Advanced CSS Prettifier なかなかしゃれたUIの「PROCSSOR」。プロセッサーと読ませるのでしょうか。しゃれてますね。 使い方は簡単。まずは難読化されたCSSを一番上のテキストボックスにコピペします。(Fileの読み込みやURLからの整形もできる様子) 次に、整形をどのように行うか、各種オプションを選

    圧縮・難読化したCSSファイルを再整形してくれるツール「PROCSSOR」
    lordkf
    lordkf 2012/11/17
    CSS整形ツール
  • Macを使用するうえで覚えておくとめちゃくちゃ便利なショートカットを挙げ連ねてみる

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

    Macを使用するうえで覚えておくとめちゃくちゃ便利なショートカットを挙げ連ねてみる
  • [Mac][OS X Lion]アドビ製品が使えるらしいのでLionをインストールしようと思う& OS X LionのTips個人的まとめ

    Photo by:Flickr: Verdier flickr’s Photostream 先日リリースされました、Macの新OS、「OS X Lion」 マルチタッチジェスチャー、MissonControlやLaunchpadと言った新機能の数々や2600円と言うお求め安さもありまして、リリース直後はTwitterのタイムラインも大盛り上がり。 アップル – OS X Lion – 世界で最も先進的なコンピュータのオペレーティングシステム。 当然私も購入、ダウンロード・・・と洒落こみたかったのですが、IllustratorやPhotoshopといったアドビ製品が使用できなくなるとめちゃくちゃ困っちゃうのでとりあえず見の状態だったわけなんです。 OS X Lion 10.7(¥2,600) カテゴリ: 仕事効率化 販売元: Apple® – iTunes K.K.(サイズ: 3,743 M

    [Mac][OS X Lion]アドビ製品が使えるらしいのでLionをインストールしようと思う& OS X LionのTips個人的まとめ
  • とんでもなく参考になりすぎるEvernote使用例 4 〜@Surf_Fish のノートブック超整理術〜

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

    とんでもなく参考になりすぎるEvernote使用例 4 〜@Surf_Fish のノートブック超整理術〜
  • ブログ記事のRT数やはてブ数が一覧表示できるWordPressプラグイン「Social Metrics」を入れてみた!

    「あの記事はどれくらいの反響があっただろうか?」 などと言うときに一つの指標となるのがはてブ数やTwitterでのRT数などの数値。 自分のブログの読者層などを知るのに、「目に見える数がある」というのは大変ありがたいことでございます。 しかし、自分の過去記事にどれくらいのブクマが付いたのかを調べる手段と言えば、「当該記事に飛ぶ→ブログパーツにて数を確認する」という方法しか知らなかった私。 これだと一記事ごとのソーシャルブックマーク数しか見えず、一覧性に事欠くのです。 なんか良い方法はあるめえか、と思い悩んでた私のもとに颯爽と現れたのがかちびと.netさんの以下の記事。

    ブログ記事のRT数やはてブ数が一覧表示できるWordPressプラグイン「Social Metrics」を入れてみた!
  • 私が現在最も使っているiPhoneアプリ20選。2011年上半期ホーム画面まとめ!!

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

    私が現在最も使っているiPhoneアプリ20選。2011年上半期ホーム画面まとめ!!
    lordkf
    lordkf 2011/06/13
    ふーん
  • iPhoneでPC内の全楽曲が聞ける!!!!「Audiogalaxy」は凄かった

    前々から気になっていたサービス、それがAudiogalaxy 自宅PCiTunesライブラリをネットで飛ばし、iPhoneで聞けるようにすると言うサービスです。 要するに、iPhone音楽データが入っていなくとも自宅PCに入っている曲が全て聞けると言うわけですよ。 Audiogalaxy Mobile 1.7.0 iPhone、iPod touch および iPad 互換 iOS 3.1 以降が必要 カテゴリ: ミュージック 価格: 無料 更新: 2011/04/21 参考:音楽データを持ち歩かずにiTunesの全てが聴ける!”Audiogalaxy Mobile” – Gadget Girl 参考:感動。自分のPCをクラウド化する「audiogalaxy」で、全ての音楽を、あらゆるデバイスで。 | おまえは今までスキャンしたの冊数をおぼえているのか? @spring_mao ちゃん

    iPhoneでPC内の全楽曲が聞ける!!!!「Audiogalaxy」は凄かった
  • とんでもなく参考になりすぎるEvernote使用例 2 〜@ika621の全ノートブック〜

    全国のOZPAファンの皆様はじめまして。 この度、寄稿させていただくことになりました、@ika621 と申します。 Punksteadyというブログを書いています。誰かの役に立てればいいなと思って書いています。よかったらのぞいてやってください。RSS登録してくれたら更に喜びます。 さて、Evernoteといったら、@goryugo さん。 昨年12月に@OZPA と時期を同じくして、@goryugo さんのブログに寄稿させていただきました。 参考:参考になりすぎるEvernote活用例2 – @ika621 – | goryugo, addicted to Evernote そして今回、@OZPA のブログにも寄稿させていただき大変光栄に思っています。 内容は@goryugo さんのブログに載せて頂いたの際と同じ、Evernoteのノートブック晒しです。 あまりにも自由度が高すぎるEver

    とんでもなく参考になりすぎるEvernote使用例 2 〜@ika621の全ノートブック〜
  • [図解]Evernoteユーザに捧ぐ!現在使用中のiPhoneアプリ+Webサービス17選!!

    HOME>Evernote>[図解]Evernoteユーザに捧ぐ!現在使用中のiPhoneアプリ+Webサービス17選!! 新年度ですね。何かを始めたり、見直したりする格好の機会ですね。 と言うことで日は、Evernoteに情報をインプットするために現在私が使用しているiPhoneアプリWebサービスを挙げ連ねておこうと思います。 (アプリの値段は執筆時のものです。購入時はご確認ください。) 今年の一月にエントリーした記事では、iPhoneアプリのみに絞って現在のEvernote周りを晒しあげたのですが、今回は大変便利なWebサービスも一緒にご紹介したいと思います。 以前と変更していないところもありますが、それらについてもサラッと触れつつ進めていこうかと。 (クリックでPDFが別窓表示されます) 上が、2011年4月現在の私のEvernote連携事情。NANAの人物相関図よりは簡単だね

    [図解]Evernoteユーザに捧ぐ!現在使用中のiPhoneアプリ+Webサービス17選!!
    lordkf
    lordkf 2011/04/07
    参考にはなるけど、こんなに複雑にしたいとは思わない。
  • 1