スクリーンショットです。シンプルで、飾りはなしです。 今回のこだわり ・ループ部分と、404部分を条件分岐でやってたところをloop.phpと404.phpに分離。 ・カスタムメニューを２箇所追加。 ・テーマカスタマイザー導入。 タイトル画像や、タイトル文字、背景色等基本的な部分の変更が 管理画面で変更できようになりました。 基本的なコンセプトは前回と同様です。あまりチェックしてません、ゆるゆるです。 html5ベースですが表記はxhtmlも混じってます。 Wordpress 3.4.1に対応。 ライセンス：GPLライセンス 商用、個人とも無料でお使いいただけます。 動作チェック済みのWPバージョン：3.4.1 テーマのダウンロードはこちら 2014-06-29 ge.ttサーバーが落ちているようなのでこちらにも用意しました。 ダウンロード

■ Contact Form 7 http://contactform7.com/?lang=ja メールフォームプラグイン。 普通にメールを送信できるだけではなく、 フォーム本体に好きなclassをつけたり、返信メールのカスタマイズも自由自在。 最近capcha機能も見つけてテンション上がりました。 通常送信先メールへの宛先の他に、bccでメールのコピーを送ったり 送信完了ページも作れます。 Akismetでのスパム対策もできます。 ■ Duplicate Post http://wordpress.org/extend/plugins/duplicate-post/ Wordpressのページを複製するときに使います。 ページ送りの表示などで大量にページを投下してテストしたいときに便利です。 投稿リストからも、投稿ページからもコピーできるのもすばらしいです。 ■ カスタムフィールドをカ

ウェブサイトの制作には、いくつかのフェーズがあります。 企画→制作→構築→公開を何度もくりかえすこともあり、スパイラル方式なんて言われることもあります。 今回は、ウェブサイトの制作順序を書いてみたいと思います。 むかしはこういった文章をブログなどで書く方が多く、本もたくさんあったのですが 今は知識や技術に偏ったものがおおく、目に触れることが少なくなったのかもしれません。 もしくは、あたりまえのことだから言わなくなったのかもしれません。 しかしながら、ウェブを気持ちよく制作するために基本というのは重要なことだとおもい 再確認もこめてかきました。 ウェブ制作を行なっている人、 これからウェブの業界に入りたいとおもっている人、 これからウェブを発注する予定のある企業の方に読んでいただければいいなぁと思っています。 ・ヒアリング どんなサイトにしたいのかをお客様へお伺いします。 対象となるブラウザ

タグの閉じ忘れをチェックするブックマークレットを紹介します。 もう数年使わせてもらってます。 コーディングがほぼ終わった状態で、カラム落ちとか なにか表示がおかしいとき、divタグなどの閉じ忘れってよくあるのですが どのタグ周辺の閉じタグがないのかをワンクリックでチェックしてくれるものです。 使い方は簡単で、こちらのページのインストール項目の「タグ対応をチェック」というリンクをドラッグしてブックマークツールバーに入れるだけ。 あとは、チェックしたいページで さきほどブックマークツールバーに入れたブックマークを押すと 自動でチェックしてくれます！ ご参考にどうぞ。 HTML内タグの閉じ忘れをチェックするツール[ブックマークレット] 関連記事 セリフ体をうまく利用しておしゃれな印象の４サイト 2011/12/26 Fireworksの微妙な色の調節に、「ブレンダー」が便利です。 2011/12

フリーで使える、企業サイトでもよく見かける「新窓」アイコンをご紹介します。 Sheps4Freeさんでは、100のアイコンがDLできますよー！ お気に入りの新窓アイコンを、Fireworksの共有ライブラリに登録しておけば 効率化が図れそうですね♪ 100 External Link Icons (PNG, PSD) http://www.shapes4free.com/vector-icons/external-link-icons/ 関連記事 jqueryなどのgoogleライブラリを参照するscriptタグをコピペできるScriptSrc.net 2011/12/08 タグの閉じ忘れをチェックするブックマークレットが便利。 2011/12/04 センスのよいインフォグラフィックが集まるコミュニティ「visual.ly」 2011/11/25 フリーで使える！企業サイトでよく見かける、

photoshopでドットのラインを描く方法をまとめてみます。 さいごに、配布ブラシもあります。 Fireworksなら、線を描いて、プロパティーから「ストロークを編集」とすると きれいなドットラインが描けるのですが photoshopではそういった機能がないんですね。 ドットラインを描くにはどうしたらいいのか探してみたら、みなさん色々な方法で やってましたので、その方法をご紹介。 ブラシを使う（１）- 間隔設定を使う ブラシ設定の「間隔」という設定を100%以上にすると破線になります。 %設定は、割り切れる数字とか、キレイな数字のほうがうまくいく気がします。 参考：http://www.dougamanual.com/blog/247/1430/e6849.html ブラシを使う（２）- 登録されたブラシ 小さい四角形をつくって、その中に一つの「-」を描き、「ブラシを定義」し 上記と同様

完成度の高いフリーのアイコンセット「iconSweets2」を紹介します。 400以上のアイコンが、32px × 32pxと、16 × 16px で、 psd画像でパス付き。 iphoneなどのスマフォ系でも使いやすいとおもいます。 アイコンの一部プレビューはこんな感じです。 ライセンスは、 You may use these icons for both commercial and for personal use and customize them any way you like. となっています。 DLはこちらから。 http://iconsweets2.com/ ご参考にどうぞ。 関連記事 センスのよいインフォグラフィックが集まるコミュニティ「visual.ly」 2011/11/25 フリーで使える！企業サイトでよく見かける、新しいウィンドウを示す「新窓」アイコン 2011

フリーランスで仕事をしている際に使っている メモアプリなどをはじめとしたユーティリティアプリを まとめてみます。 主にmac,iphone,ipad,ウェブアプリになります。 クラウドっぽく使っているもの（すべてのデバイス共有） Evernote / アイデアメモとして。ipadの7notesなどで書かれたデータも最終的にはここへ。 Basecamp / プロジェクトごとのスケジュール管理。指示管理。自分用なので共有機能はつかってない。 Dropbox / データバックアップとして。重たいデータの受け渡しサーバーとして。 Macで主に使っているもの Alarms / 予定の時間になるとgrowlと音でお知らせしてくれる。集中しているときに便利。 iCal / mac純正だけどipad,iphone,googlecalと繋いでいるのでべんり。 Thunderbird / メール管理アプリ。複

現在は、以下のようなプラグインをサポートしているようです。 accordion シンプルなアコーディオンナビゲーション button マウスオーバーやマウスダウンで画像を切り替えたり、選択状態と非選択状態によって画像を切り替える checkAll チェックボックスの一括選択 fixHeight 要素の高さを揃える ie6PngFix Internet Explorer 6でも透過PNGを使えるようにする ie6PositionFixed nternet Explorer 6でもCSSの position:fixed を使えるようにする imgSwap a要素をクリックして、既存のimg要素の画像を切り替える lightBox jQuery lightBoxプラグインを読み込む overlayOthers 指定した要素の子のa要素にマウスオーバーすると他のa要素にcssで背景色や背景画像を指

BluCSSは、４つの環境で表示を自動的に変化させます。 ・デスクトップスクリーン ・ラップトップ（ノートパソコン） ・タブレット ・モバイル に応じて自動で表示を変えるようにセットアップされています。 メインコンテナは1000pxがデフォルトですが 設定で変えられるようです。 10個のカラムで区切られていて、パーセント区切りでレイアウトされています。 イメージのレスポンシブにも対応しています。 （blu_ではじまるclass名のイメージはすべて自動で幅を調整してくれるそうです。） demoを使って、ブラウザを実際に伸縮させてみました。 ・フルサイズ表示 ・ラップトップ表示 ・モバイル表示 ※ラップトップ〜モバイル表示の間は段階に応じて伸縮するので そこがタブレット表示になっているのかなあと予測。 レスポンシブな対応が必要なウェブサイトを作成する際に 参考にしてみてはいかがでしょうか。 関

SimpleGridは、 スクリーンサイズが、720px → 985px → 1235px と変化していく グリッドシステムです。 ソースがシンプルなことを売りにしているようです。 div.grid で全体を囲い、div.row で行を管理、 div.row の中で、.slot-（スロット番号）を指定するという形になるようです。 ぜひ、お試しください。 SimpleGrid http://simplegrid.info/ 関連記事 スクロール制御系のjqueryプラグイン「Jquery Waypoints」 2011/11/05 アコーディオン、ロールオーバーなどjQueryでウェブデザインを便利にする機能を一元管理できる「simplelib」 2011/11/01 無料もしくは稟議を出しやすい価格のストックフォトサービスまとめ 2011/10/24 シンプルでレスポンシブなCSSグリッド

iphone4sを新調しましたので、 iphoneだけでブログが更新できたらいいなぁと vanl.laというひとことブログを立ち上げて見ました。 今回はこのブログをセットアップしたときに使った 環境をご紹介します。 必要なもの： サーバー環境+Wordpress（インストール済みが前提ですすめます） wordpress for ios ■Wordpress内プラグインとして ・ Jetpack by WordPress.com　アクセス数の確認ができるようになります ・ Tweetable　投稿した際に、自動でtwitterへ投稿できます ・ brBrbr　改行プラグイン デザインテーマはミニマムでシンプルなものなり、 好きな無料テーマなどをインストール。 セッティングいろいろ。 Jetpack by WordPress.comは、 Wordpress.comのアカウントが別途必要（無料ア

ウェブデザインのなかで、 jqueryをつかった、さりげない「動き」をウェブサイト上で導入するのが 定番になりつつありますね。 ふわっと、ポップアップみたいに浮き上がってくるウインドウ、 画像やテキストのスライドなど 最近良く見るjqueryでつくる「動き」で、おすすめのライブラリをまとめてみます。 要素をスライドさせるならJquery.cycle.plugin 画像や、テキストなど、 非常にシンプルなhtmlソースを認識して対応してくれるプラグイン。 上から落ちてきたり、横にスライドしたり、フェードイン・フェードアウトしたり スライド番号をつけたり、スライド領域の要素の右左に矢印をつけたりもできます。 シンプルなdemo Even More Demosもオススメです。 オプション一覧はこちら → jquery.cycle.plugin ページ内ポップアップ、lightbox風表現ならfa