タグ

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

  • [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]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する
  • WordPress記事内の文章がコピーされるとメールで通知してくれるプラグイン「Check Copy Contents(CCC)」を試してみた!

    WordPress記事内の文章がコピーされるとメールで通知してくれるプラグイン「Check Copy Contents(CCC)」を試してみた! 着ぐるみ追い剥ぎペンギンさんにて公開されていた、WordPress記事内の文章がコピーされるとメールで通知してくれるプラグイン、「Check Copy Contents(CCC)」を試してみました。 なにこれめっちゃおもしろいやん! WordPress:誰かが記事をコピーしたら教えてくれるプラグインCCC(Check Copy Contents)を作ってみた。 | 着ぐるみ追い剥ぎペンギン 最近では、読んだ記事をツイッターやFacebookなどに投稿することが多くなりました。 また、記事を引用をして、ブログの記事を書くということも増えました。 しかし、そのブログ記事の書き手からすれば、興味を持ってもらったという事なので嬉しいのですが記事のどこの箇

    WordPress記事内の文章がコピーされるとメールで通知してくれるプラグイン「Check Copy Contents(CCC)」を試してみた!
  • Macで画像のリサイズをしてくれるフリーウェア「Th-MakerX」が機能豊富でたまらない

    これまで画像ファイルを一括で圧縮する際にはPhotoshopのアクションを使用していたのですが、業務で画像ファイルを100枚ほどリサイズしなければならない状況に。 そんなことのためにPhotoshop起動するのもあれだなと思い調べたところ、Macで画像をリサイズするならこれが最強!無料で機能豊富なTh-MakerXがありがたすぎる! | iPhone持って珍スポいてくると言う記事を発見。 サンキュー斉藤! Th-MakerX こちらが起動画面。と言っても難しい操作は一切ございません。 圧縮するサイズを指定して、フォルダをウィンドウ内にドラッグアンドドロップするだけ。 試しにこんなフォルダを… ご覧の設定でリサイズしてみました。 なにこれチョー簡単!あっさりとリサイズ完了。 有り難いな、と思ったのは横長の写真は横幅を設定した長さに、縦長の写真は縦幅を設定した数値に変換してくれるところ。他にも

    Macで画像のリサイズをしてくれるフリーウェア「Th-MakerX」が機能豊富でたまらない
    typista
    typista 2013/09/10
    Macで画像のリサイズをしてくれるフリーウェア「Th-MakerX」が機能豊富でたまらない
  • 角丸にドロップシャドウ、グラデーションにアニメーションなど、超簡単にCSS3スタイルの作成&コード生成をしてくれる「CSS3 ジェネレーター」まとめ!!

    角丸にドロップシャドウ、グラデーションにアニメーションなど、超簡単にCSS3スタイルの作成&コード生成をしてくれる「CSS3 ジェネレーター」まとめ!! html5-css3-orange-logos / Nelson Felix Giga どうも!おつぱ( @OZPA )です! 今回は、角丸やドロップシャドウ、グラデーションに2D/3Dアニメーションなど、CSS3に対応したスタイルを簡単に作成、さらにコードを生成してくれる「CSS3 ジェネレーター」を厳選して8つご紹介! ウオアアアアアアアア さて、CSS3対応ブラウザも増え、角丸、ドロップシャドウ、グラデーションにWebフォント、はたまた2D/3Dのトランスフォーム(回転/拡大縮小/移動)やアニメーションなどなど…リッチなUIがコードのみで表現できるようになりました。 関連:[CSS]GoodDesign賞にノミネートされて落選するこ

    角丸にドロップシャドウ、グラデーションにアニメーションなど、超簡単にCSS3スタイルの作成&コード生成をしてくれる「CSS3 ジェネレーター」まとめ!!
    typista
    typista 2013/06/13
    ぽけったー 角丸にドロップシャドウ、グラデーションにアニメーションなど、超簡単にCSS3スタイルの作成&コード生成をしてくれる「CSS3 ジェネレーター」まとめ!!
  • [図解]情報活用術!私がRSS閲覧の際に使用しているアプリ、連携しているツールのまとめ

    日ごろの情報収集にRSSリーダーを利用している方も多いことかと思われます。 私も、ブログのネタ探しやら仕事上での情報収集などに「Google Reader」を活用しております。それはそれは使っております。 そんなわけで今回は、私が普段RSS購読の際に使っているアプリとサービスをまとめてみたいと思います。 私のRSS閲覧環境 閲覧はiPad miniオンリー さて、まずはハード面のお話から。 以前はiPhoneのReederと言うアプリを使用してRSSを閲覧していたのですが、iPad miniを購入してからと言うもの、大きな画面でRSSを読む事に慣れてしまい、iPhoneでの購読は一切やめてしまいました。 そんなわけで、現在はiPadアプリのRSSリーダー「Mr. Reader」を利用しております。 画面外からのスワイプで前後の記事へ移動する機能が大変に便利で、各種ツールへの連携もばっちり。

    [図解]情報活用術!私がRSS閲覧の際に使用しているアプリ、連携しているツールのまとめ
    typista
    typista 2013/05/07
    ぽけったー [図解]情報活用術!私がRSS閲覧の際に使用しているアプリ、連携しているツールのまとめ
  • 「間抜けで気持ちの悪い文章」を書くために知っておかなければいけない6つのテクニック

    ブログや日記、メールなどを作成している際についつい「正しい文章」を書いてしまい、読んでいる人を辟易させたことはありませんか? 日語が乱れがちな現代社会。 没個性を重んじる風潮が強いこの国において、”この人は正しい日語が扱えるきっちりした人だ”と言う印象を与えることは、あなたのイメージを損ねる原因となりかねません。 そこで日は、読んでいて気持ちの悪い「間抜けな文章」を書くために知っておくべき6つのテクニックをご紹介しましょう。 間抜けな文章を書くために では実際に気持ちの悪い文章テクニックと文例を見ていきましょう。 最初に出ている青枠は気持ちの悪い(今回の講座においては正しい)文章、赤枠はきっちりと構成された大変に読み応えのない悪い例です。 1.敬体と常体を入り混ぜましょう。統一性が無くなるからだ。 私は篠崎愛ちゃんが大好きだ。 彼女の豊満な体にばかり目がいきがちですが、注目すべきはそ

    「間抜けで気持ちの悪い文章」を書くために知っておかなければいけない6つのテクニック
    typista
    typista 2013/05/07
    ぽけったー 「間抜けで気持ちの悪い文章」を書くために知っておかなければいけない6つのテクニック
  • 「BossKitter(ぼすきた)」仕事中にTwitterしていてもバレない!?某大手検索エンジンそっくりなTwitterクライアント

    BossKitter(ぼすきた)は、偶然にも某大手検索エンジンにそっくりのUIを持つTwitterクライアントです。会社内で上司の目を盗んでTwitterをやりたい不良社員支援サービスです。 via: BossKitter なるほど、これなら後ろから急にPCを覗かれても調べモノをしているようにしか見えない…と言うわけですな!では早速そのUIを見てみましょう。 まずはBossKitterにアクセス、ログインするべし。 おお・・・ドッペルゲンガーでしょうか。確かにあの某大手検索エンジンにそっくりじゃまいか! ツイートにカーソルを合わせるとアイコンを表示してくれます。 新規ツイートは検索窓っぽいところから。control + enterでツイートも可能です。 設定した時間が経過すると自動的にタイムラインを読み込んでくれます。「もしかして:」に擬したこのアイデアも秀逸! また、会話付きのツイートを

    「BossKitter(ぼすきた)」仕事中にTwitterしていてもバレない!?某大手検索エンジンそっくりなTwitterクライアント
    typista
    typista 2013/05/07
    ぽけったー 「BossKitter(ぼすきた)」仕事中にTwitterしていてもバレない!?某大手検索エンジンそっくりなTwitterクライアント
  • 配色のお供に、超使いやすいカラースキームツール!「COLOURCODE」がとっても良い感じ

    これは使いやすい配色ツール! そんなわけで、マウス・トラックパッドで感覚的に使用出来るカラーツール「COLOURCODE」がとっても良い感じでしたのでご紹介です。 Colourco.de – find your colour scheme 画面上をマウスで移動して色を選択 このCOLOURCODE最大の特徴はその使い方。 画面上をマウスで移動するとキャンバスの色が変化しますので、好きな色が出来たらクリックで保存します。スクロールすると彩度の変更も可能。rgb値、hsl値など5種類の数値で色の値を表示してくれます。 クリックした色はこんな感じで保存されていきます。わっかりやすぅーい。 一度保存した色はご覧のように左右の場所を入れ替えたり削除することも可能です。 また、右上の欄にカラーコードを直接入力して色を選択することも出来ます。 配色ツールとしても良い感じ そして、画面上部に用意されている

    配色のお供に、超使いやすいカラースキームツール!「COLOURCODE」がとっても良い感じ
    typista
    typista 2013/04/01
    ぽけったー 配色のお供に、超使いやすいカラースキームツール!「COLOURCODE」がとっても良い感じ
  • 脱Flash!素人でも簡単にHTML5アニメが作成できるMacアプリ「Hype」を使ってみた。なにこれ超楽しい!

    Web制作に携わっていると頭を悩ませる項目の一つが「Flash」への対応。 動きのあるコンテンツを作成するにはやはりまだまだFlashが便利なわけですが、iPhoneをはじめとするiOSでは再生できない(一部再生できるブラウザアプリはありますが)ので、困った困ったなのです。 そこで次代を担う(であろう)コンテンツがHTML5を使用したムービー。 先日も、「Form Follows Function」と言うHTML5で作られた、動きのあるコンテンツを紹介したWebページをご紹介したばかりですが、ここまで複雑なものは出来なくとも、私のような初心者でも超簡単にHTML5アニメが作れると噂のMacアプリ、HypeをDLして使ってみました。 タイムラインを使って簡単にHTML5アニメを作れる! 起動。 Welcome to UNDERGROUND… 「Watch Getting Started Vi

    脱Flash!素人でも簡単にHTML5アニメが作成できるMacアプリ「Hype」を使ってみた。なにこれ超楽しい!
    typista
    typista 2013/02/07
    ぽけったー 脱Flash!素人でも簡単にHTML5アニメが作成できるMacアプリ「Hype」を使ってみた。なにこれ超楽しい!
  • 1