今日もTwitter Bootstrapの話。やっと 出たって印象でしょうか・・デザイン を変更できるWebサービスです。こうした 人気のフレームワークでこのように デザインを変更できるのはありがたい ですねー。 人気のTwitter Bootstrapのデザインを直感で作成出来ます。自分で変更を加えるのは若干面倒なのでこれで大まかに作ってしまえば工数削減に繋がるかもですね。 StyleBootstrap.info 直感でサクサク作れます。Bootstrapみたいなフレームワークをご存知の方ならこういうの触った経験ある方のほうが多そうですので使い方は割愛します。 背景とかフォントとかボタンの色を変えられる、みたいなやつ。リアルタイムで反映されるので確認も楽でした。 以下のようなものを数分で作成出来ます。 やっつけ仕事でごめんなさいｗボタン周りはグラデーションで作れるようになってますね。 要

iPhoneやiPadなどのホーム画面に表示 させるアイコンを作るためのPhotoshop 用テンプレート・App Icon Template をご紹介。そんなに多用するものじゃ 無いと思うんですけど、便利っちゃ 便利でした。 iOSのホーム画面向けのアイコン用テンプレ。スマートオブジェクトでフレームの変更・追加も容易に出来ます。 iPadやiPhoneなどのアイコン生成用のテンプレートです。フレームみたいなもんですかね。デザインの変更はスマートオブジェクトを利用します。 使ってみた ↑ 上記赤枠がスマートオブジェクトなので開きます。 ↑ 何種類かある中からフレームを決めてスマートオブジェクトを保存すればメインファイルに反映されます。 ↑ インセットも出来るよ。 ↑ テクスチャ追加してみた。スマートオブジェクト側にテクスチャを増やせばテンプレ量産出来ますね。 枠を作ってくれてるので効率的に

jQueryのフィルターが便利なんですが、 なかなか全部把握出来ないので自分用 にまとめることにしました。マイチート みたいな記事です。フィルターはかゆい ところに手が届く便利なもので、場合 によってはコードも短く済ませること も出来るかもしれません。 というわけでフィルター一覧です。あんまり把握出来てなかったのでこの機会に全部目を通して触ってみました。機能というか、どんな感じで要素を取得出来るか、みたいな内容になります。 しっかり使いこなしてきた人間の書いてる記事じゃないので、もしかしたら解説が間違ってるかもしれません。一応公式のリファレンス見ながらやってますけどそれでも勘違いしていたらご指摘頂けると嬉しいです。 カテゴリごとにjsfiddleで全サンプルを用意してありますのでフォークしてご自身向けに変更して頂ければと思います。 Basic Filter(基本フィルタ) Sample 基

初めてWordPressオリジナルテーマの作成にトライしたい、という方向けの基本のマニュアルです。マニュアルというほど大袈裟なものではありませんけど、ある程度敷居が低くなると嬉しいなぁという思いを込めて記事にします。 この記事の内容はあくまで基本中の基本で、初心者・ノンプログラマー向けとなっていますので応用的な情報は殆どありません。また、説明の仕方も分かりやすさ重視で、厳密的にはちょっと違う点もあります。 初心者さん向けに、もう少し情報があってもいいかなと思って、書いてみることにしました。僕もまだまだ初級レベルなので一緒に学んでいきましょう。初級者レベルでこんな記事書くなって話ですけども。 目次 目次です。各セクションで必要と思う場所から見るようにしてください。 はじめに 作成するWebサイトの目的と構造 テーマ作成前に用意するものと環境 テーマの構造を（触り程度だけでも）理解する HTM

あんまり使わないような使うようなセレクタ の:nth-childですが、自分の頭が宜しくない ようで、適応させたい箇所の計算で混乱しま す・・面倒くさいと思っていたのでいいツール ないかなと思ってたんですがシンプルでいい のがあったので同じく計算嫌いな方向けに シェアします。 E:nth-child(n)は、親要素のn番目の子要素であるE要素にスタイルを適応させます。とは理解しつつも、(2n+5)とかになってくるとなんか混乱するんですよね。なんで混乱するんだろｗ Nth-Child Visual Calculator n+2とか3n+8とか入れるだけで適応される箇所を明示してくれる、ってだけのシンプルなものです。何度か使って計算の仕方をおさらいしました。使ってないとまた忘れそうですけどね・・ こうやって見てみると8n+5なら5個目スタートで8を足していけばいいだけ、って分かるんですけど。ア

jQueryを使ってテーブルのセルに入力 された数字のデータをカラーでグルー ピングできるようにする方法です。 プラグインは不要で簡単なコードで実現 できます。大量のデータがあるときは 使ってみては。 個人的にはあまり使う機会ありませんけど。大量の数字が入力されたテーブルほど見にくいものはありませんのでイザという時のためにメモ。 jQueryを使ってテーブルのセルに入力された数字に応じて背景カラーを変える方法。数字のみが入力されたテーブルの可視性を、色の濃度でグルーピングして可視性を高めます。 Sample こんな感じでグルーピング出来ました。濃い色ほど数字が大きいです。普通にマークアップすれば勝手に色が変るので管理が楽じゃないかなと。 コード$(document).ready(function() { // 配列内の最大値を取得する関数 Array.max = function(arra

ふと思い立ったので記事にしてみます。 最近よく見させて頂いてる国内のブログ をシェアしてみようと思って記事にして みます。僕はWeb屋さんなのでWeb屋さん 向けのブログだけになっていますが、 Web屋さん以外でも楽しめるんじゃないか と思っています。 というわけでお薦めのブログをご紹介。今までも色々なブログをご紹介していますので重複するサイトは割愛しています。 単純に自分の好みなので全然参考にならないと思いますが、お世話になってるのでご紹介したいなと。少なくともタイトルで釣っておきながら中身が無いようなしょうもないブログは1つも含まれて無いと思います。しょうもないブログとはこののブログの事なんですけどね。ドキッとした方は僕と一緒に悔い改めると幸せになれそうです。 僕自身、人様のブログ自体は殆ど見ない人間なので偏ってると思いますけど、新たな発見に繋がれば幸いです。 maka-veli.co

昨日初めて知ったんですが、今まで知らずに損してた、みたいな気持ちになったので、同じ思いをする人が一人でも減るようにと思ってご紹介。ソフトを解凍するだけで、WordPressのローカル環境を構築できる、というソフトウェア。USBで持ち運びも可能。 今まで知らずに損してましたｗこれ、有名なのかな・・・ Instant WordPressをUSBメモリやポータブルHDDなどにダウンロードして、自動セットアップするだけで、WordPressをローカル環境を構築、その環境ごとUSBフラッシュメモリで持ち運びも出来てしまいます。構築まで5分くらいで出来ましたよ。これは便利だなーって思いました。 WordPressを環境ごと持ち運び出来ます。覚えておくとかなり役に立つ気がします。 出先でクライアントさんと打ち合わせ中にWebに繋げなくても直接見せて動作確認することも出来るし、自宅のデスクトップでいつも作

ちょっと久しぶりですけどWordPressの カスタマイズTips記事です。今日はプラ グインを使わず、記事内の特定のキーワ ードに自動で何か加わるようにしようと いう内容。一応簡単なWikiっぽいものも 作れるっちゃ作れます。 ちょっと分かりにくいんですけど、指定したキーワードを好きなものに置換するっていうコードです。なのでアイデア次第でいろいろ出来るっちゃ出来るんですけど、行儀の良いコードではないので痒いところに手を届けたい時にでも使ってください。 コード functions.phpに含めます。 function change_any_texts($text){ $replace = array( //'変更前' => '変更後' 'CSS' => '<a href="#">CSS</a>', 'tool' => '<strong>tool</strong>' ); $text = s

これならjQueryじゃなくてもいいんじゃ 無いか、っていう記事です。短くて使い やすいスニペットなんですが、まぁ用途 は人それぞれだと思うので適当に流して 下さい。自分が使いやすいようにまとめ たいだけです。 そのコードおかしいわーみたいなのあったらすいません。まぁその程度の記事です。というわけでいろいろとツッコミどころ満載かもですが、あんまり気にしないで下さい。じゃあ記事書くなよって話ですけどｗ デモの見方 jsfiddleというサービスを好んでよく使うのですが、あまり見慣れないかもなので一応デモの見方を。上図の○で囲った部分、Resultを押せばデモ画面に、再生ボタンでリロードします。 簡単なコードなので実践で使うにはもう少し工夫が必要です。また、jQueryの勉強にもなるかもしれません。jsfiddleはフォークできるので宜しければ改善や動作の勉強等にご利用下さい。 こういうスニペ

気が向いたのでメモ。背景に配置した 画像をフルスクリーンで表示して、更 にスライドショー化できるjQueryのプ ラグインとか。さほど数は無いですけ ど・・・使う可能性があるかもなので 備忘録的にまとめておきます。 タイトル考えるの結構面倒くさいので適当になってきました。語彙が中学生レベルですが気にしないで下さい。 さて、フルスクリーンにした背景をスライドに出来るjQueryいろいろです。ほぼ択一っちゃ択一なんですけど・・・ちょっと出来上がりすぎていじりにくいので他もチェックしたい、という事で調べたものを羅列しておきます。触ったこと無いのもあるのでその程度の記事という事で。 Supersized 定番の高機能プラグインです。IE6では動作しません。スマートフォンでも大丈夫っぽい。多数のオプションも用意されており、FlickrAPIにも対応してるくさいです。ライセンスはMIT/GPLのデュア

ユニークなiPad用スタイラスがあったのでご紹介。iPadが出始めの頃に想像していた「iPadで絵をかける」ことが現実味を帯びてきました。もともと絵を描くためのスタイラスはありましたが、こちらは水彩画のようなタッチでかけるみたいです。 おなじみのKickstarterよりご紹介。もう目標資金は集まったみたいですね。動画でプロトタイプを使った映像があるんですが、かなり滑らかな印象です。 かなり滑らか･･･見た感じは普通の筆と変わらないタッチですね。動画で使用している絵描きアプリはArtRageだそうです。筆の質感にとにかくこだわった様ですな。。扇子・・の様子は無いですけどｗ 筆先は、日本の友人が開発していた、化粧品会社向けの技術を採用したそうです。 筆の後部は従来のスライラスも装備されているので、1本で絵描きにもペンにも出来ます。 こんな感じ。 既に筆タイプのスタイラスは存在していましたが、

少し増えてきたので自分用にまとめてみます。 WordPressでテーマをカスタマイズしたい時 にサクッと探せると楽なんですが、その コードスニペットを探せる、というサイトが いくつかあるのでご紹介します。WPユーザー の方は一度ご覧になってみては如何でしょう。 というわけでちょっと個人的なメモです。WPスニペットを保管してるサイトのまとめ。お手軽なWordPress Tipsっていうカテゴリで記事をよく書いてるんですけどそのネタ元なので英語OKな方はこちらから探してみては如何でしょうか。 この手のサイトのコードは古い可能性もよくあるのでCODEXで非推奨のコードでは無いかどうか合わせて確認しておくとより良いかもしれません。 WP-Snippets 数は多くないけど需要のあるTips多め。最近リニューアルしてちゃんとカテゴリ分けしてくれました。単純な単語をタイトルにしてくれているので英語が苦

今日は3連休最後ですね。個人的には 全然関係ないので普通に記事を書き ます。日本もかなりFacebookが浸透 したようですが、まだまだ数は少ない 印象です。企業もかなり参戦してきて いるので、Facebookページの需要も 少しあがってきている印象ですね。 そんな中で日本のFacebookページで良デザインなページのみを収集しているギャラリーサイトがありましたのでご紹介。 こんな感じで国産のFacebookページが並べられています。カテゴリは結構細かく分けられていますが、いかんせんまだ数が少ないのでまだ必要ない状態ではありますね。 VOGUEJAPANはコンテンツが充実してるので結構好きです。 520PX facebookmarkにも書いてありますが、まだ数が少ないのが日本の現状です。こちらのギャラリーも厳選しているため、まだ100に満たない状態です。もちろん審査有りですが、自信のあるF

少しリソースが溜まってきたのでリンク集に して開放します。バックリンク不要で、商用 の利用可能、著作権表示も不要のWebデザイン 向け素材サイト。商用で使ってもいいけど リンクしてね、といったようなCCのBY的な ライセンスだとどうしても個人的に使いにく いのでバックリンク不要は割りと必須です。 今までのリソースをまとめただけなのでほぼ全部既出だと思います。自分用リンク集なのでいろいろ適当です。 細かいライセンスもあるので利用規約には必ず目を通してください。 9search この記事の題名の条件の素材を紹介しているサイト。小物系探すなら最初にここ見たほうが早いです。 9search ソザィ-Sozay- こちらもこの記事の題名の条件で収集していますが、素材単位ではなく、Webサイト単位で紹介しています。国内多めですかね。 ソザィ-Sozay- 国内のWeb制作に役立ちそうな無料の写真素材や