Webサイトの背景をリピート再生するYoutube の動画にしてしまおう、というjQueryプラグイン ・jquery-tubularのご紹介です。なかなか斬新 では無いかなと思います。ユニークなサイトを 作る際に参考にしたいですね。導入も極めて 簡単なのでぜひチャレンジしてみてください。 jQuery使うといろいろ出来るんですねぇ。スキルの低い僕にとっては、こうしてソースを提供してくれるのがとてもありがたいです。ライセンスはMITとのことですので、商用でもOKですね。 [note]かなり適当ですけどWordPressのテーマにしたのでご興味有りましたら遊んでみてください。[/note] このように背景全体にYoutubeの動画を使うことが出来るプラグインです。ユニークでインパクトもありますね。導入も非常に簡単です。 サンプル作った 面白かったので暇を見て適当にデモサイトを作ってみました。
今日は、調べ物をしていて気が付いた点が ありましたので、メモも兼ねて記事にします。 WordPressのコメント欄はhttp://で始まる テキストを自動でリンクに変更してくれる親 切機能付きですが、ユーザーの意思でもな く、サイトの管理者の意思でも無いので、不要 に感じていたらこれを防ぎましょう、というもの。 スパムコメントの選別法の一つに、コメントに含まれるリンクの数があった場合に、スパム判定してくれなくなるのかな?という疑問があるのですが、Askimetに関して詳しい方がいらしたらご教授願います。「自動リンクそのもの」は関係ないと思っているんですが・・ちょっと情報が見当たりませんでした。 ハイパーリンクに自動置換する このようにコメント欄のurlのテキストは自動でリンク化されます。 コード 以下のコードを、お使いのテーマファイル内にあるfunctions.php内に書きます。 rem
ちょっとご質問頂いたのでついでに記事 にします。WPで、ログインユーザーにだけ 見せたいコンテンツ、よく見るのはログイン フォームとか管理画面へのリンクとかです かね。そういったユーザーのみにしか見せ たくないコンテンツを作りたい、という時に 使うコードです。 例えばマルチユーザーのサイトなんかにも良さそうですが、基本的に好きなコンテンツを入れる事が可能ですのでアイデア次第で利便性をあげられるかと思います。 コードです。 <?php if(current_user_can('read_private_pages')) : ?> ログインしないと見れない場所 <?php endif; ?> こんな感じで囲ってあげればOK。「ログインしないと見れない場所」の部分が隠したい場所になりますのでログインフォームなりチャットシステムなりお好きなコンテンツを入れてあげてください。納品物ならカレンダーなん
Webフォントを使う機会があった のでついでに備忘録的メモです。 @font-face関連の情報いろいろ。 と言っても、まだそんなに情報が 無いので触りを理解するための まとめ的な記事です。 Webフォントの良い所は、編集作業が不要、コピペも可能でテキストだからSEO的にも有利になりますけど、アンチエイリアスはフォントに依存しますし、日本語フォントはどうしても少なくなってしまうデメリットもあります。 クロスブラウザでWebフォントを利用するには /* IE */ @font-face { font-family: abc; src: url(abc.eot); } /* Firefox, Opera, Safari */ @font-face { font-family: abc; src: url(abc.ttf) format("truetype"); } としてあげるといいみたい。I
Web制作を行う前の配色チェック に手軽で良さそうでしたので備忘録 がてら記事にします。コントラストが 十分かどうか、などその配色がアク セシビリティガイドラインに沿ってい るかを示してくれるツールです。 Webツールとソフトウェアがあります。 目的はシンプルなツールですが機能はなかなかです。 Webサービスをご紹介しますが、無料でダウンロードして使えるAir製のソフトウェアもあります。 手軽に使える 基本的にマウスで操作できます。配色を左で決めて、明暗を右で調整、リアルタイムでプレビュー。 アクセシビリティチェックもリアルタイムで表示されます。 何かと使い勝手も良いのですが環境によっては横スクロール出るかもしれません。 パレット機能 パレット機能もあります。丸の数はチェックをクリアしているかを表しています。 ソフトウェアも Air製のフリーソフトもありました。まだ試していませんけど・・
広告表示などにうまく使えそうな jQueryプラグインのまとめです。 諸事情で調べたのでついでに メモしておきます。応用すれば 画像を使ったものは全て広告に 使えますが、その中でも特に 良さそうだったものを中心に。 広告に使えるというか、クリック率を高めそうとか目立たせるとかそういう類のプラグインになります。曖昧なまとめですが個人的なメモになりますのでご了承下さい。順不同です。 Cycle Plugin 省スペース内で画像を切り替えるプラグインです。エフェクトもいつくか選べます。 Cycle Plugin jQuery.popeye こちらも省スペースに置けるギャラリー。マウスを乗せるとキャプションが出てそこにリンクも貼れます。 jQuery.popeye Step Carousel Viewer シンプルなカルーセルです。複数の広告をまとめて表示するのに使いやすそう。 Step Caro
なかなか素敵な試みだったので メモ&シェア。WordPressのテーマ 制作時のチェックリストです。この チェックリストはブラウザで見る形 になりますが、jQuery等を使用し、 使いやすいように工夫されています。 日本語版を作りたいんですが、ライセンスの表記が無いので機会があったら聞いてみます。 THE WORDPRESS THEME DEVELOPMENT CHECKLIST TOOL 注意すべきチェック項目があり、右上の数値に連動していますので埋めていくと、数値も上がっていきますので、取りこぼしが無いかなども把握できる、という感じですね。 このようにチェックボックスに連動して数値が変更します。 テーマの名やバージョンも変更可能です。 このチェックリストを構築しているファイルを丸ごとDLすることも可能です。自分好みに変更すると良さそうですね。 作成し、最終チェック用として欲しいですね。
メインブラウザをFirefoxからChrome に変更して暫く経ちます。Chromeも かなりエクステンションが豊富になって きました。いろいろとエクステンションを 試して、微妙に感じて消して、の繰り返 しですが、そんな中、マストに使ってい る拡張をご紹介します。 色々試して、最終的に残ったChromeエクステンションのまとめです。 CSS Tester どのページでもcssの追加テストが出来ます。すぐに反映されるので結構便利。 CSS Tester CSSViewer 先日記事にしましたが、インストールしてから毎日使っています。マウスを乗せるだけでその要素のcssを表示。便利ですねー。 CSSViewer View Selection Source ドラッグした部分のみのソースを表示します。Web制作時によく使っています。使い慣れるとほんと重宝します。 View Selection So
備忘録です。普通のWordPressテーマを マガジンサイトっぽくする必要があって、 カスタマイズしたのですが、方法を忘れ そうなのでメモ。大したカスタマイズじゃ ないです。基本的な内容になりますので あまり参考にならないと思います。 マガジンサイトと言っても色々形はあるんですが、複数の指定したカテゴリの最新記事~過去記事を何件かまとめてTOPに出したいのと、デザインもカテゴリごとにそれぞれ変えたい、というご要望でした。 もっとスマートな方法があるかもしれないんですけどね・・ WP3.0のデフォルトテーマでやってみる WP3.0でデフォルトテーマになったtwentytenを使用して書いておきます。通常は上記のように表示されますが、これを以下のように cssを変えないとアレですけど、 表示させたいカテゴリ名を表示 表示させたカテゴリの最新記事とリンク 表示させたカテゴリの過去記事へのリンク
Web制作時などでカラー選定など、 色に関することで困ってもColor Explorerというツールが色々と助け てくれそうです。無料で使えるみ たいですし、登録したくなければ登録 不要でツール使用も可能です。 色に関するツールは山ほどありますが、こちらも負けていません。Color Explorerは色に関する様々なツールを用意してくれているWebサービスです。 色の総合サイトのような感じです。一部の機能をご紹介。 マイパレット機能 この機能は登録が必要(当然ですけど)です。気に入った、使用したカラーをパレットに保存する事が出来ます。 ピッカー機能 基本のピッカー機能。RBGでの指定も可能で、自動で明暗のバリエーションも表示してくれます。 カラーマッチング機能 相性の良い色を自動で教えてくれます。 画像からカラー抽出 画像をアップロードし、その画像に使われているカラーを抽出します。 他にも
Webデザインのギャラリーは沢山 ありますが、結局感性の近い国産 のギャラリーが一番参考になるの でまとめました。探してみると結構 いろいろあるんですね。助かります。 やはりギャラリーは国産がいいですね。沢山あるので、ある程度厳選しています。 io3000 最近知りました。すごくいいですね、ここ。見やすいし、使いやすいです。おすすめ。 io3000 straightline bookmark とにかくクールでクオリティの高いサイトをブックマークしているギャラリー。 straightline bookmark Web Design Clip こちらも個人的にオススメのギャラリーサイトです。目的のデザインも直ぐに見つかりますよ。 Web Design Clip Good Design Web こちらは他ではあまり見かけない良デザインのサイトを紹介してる貴重なギャラリーです。 Good Desi
9月1日の「簡単海外記事」です。 この記事は不定期に「英語が 分からなくても理解できる 海外有益コンテンツ」 を紹介していくコーナーです。 40のエレガントなフリーのcssテンプレート 素敵なデザインのテンプレートが沢山。 40+ Elegant Free CSS/(X)HTML Templates from 2010 PSによるiPhoneアプリサイトのレイアウト作成法 Photoshopのチュートリアル、iPhoneアプリサイト編です。 How to Create an Iphone App Layout in Photoshop シングルページデザインのインスピレーション、32サイト シングルページサイトのデザイン例。 32 Fresh And Impressive Single Page Website Designs Inspiration Academica 珍しい、教育機関向
中小企業、店舗系のWeb制作が 個人的に最も多いので、そういった クライアントさんに頼まれやすい機能 を加えるWPプラグインのメモです。 大規模なWebサイトではまた別の需 要が出てくると思います。 羅列した全てのプラグインを入れる訳ではなく、「よく頼まれる機能」を補うプラグインをあげています。順不同。 WP-Add-quicktag 今更便利さに気がついた、という感じですが、最近よく使っています。基本的にはマークアップを補うプラグインなんですが、定型文の挿入に凄く便利なのでお勧め。こちらで設定してあげればクライアントさんはワンクリックで挿入できます。複数登録も可能なので重宝しますね。 addquicktag Ktai Style 携帯サイト作って欲しい!予算無いけど!みたいな要望があったとき、というか中小規模サイトの案件では多いのでKtai Styleは必須プラグインです。予算無いなら断
いつの間にか黄金比抽出ツールの Web計。が使いやすくなってました。 お友達のタケさん作のツールですよ。 画像の縦の長さ、或いは横の長さを 入力するだけでリアルタイムで黄金比 を出してくれるのでとても便利。 そのWeb計がいつの間にかリニューアルしていて、ツールごとにタブで分けられていたのでよりノンストレスになっていましたよ。 デザインもすっきりリニューアルして見やすいです。タブはjQueryを使用。 Web計には黄金比以外にも白銀比ツールや4:3、3:2、16:9を図るツールもありますが、タブのおかげで再入力する必要もなくなりました。 凄く軽量でサクサク移動できるし、他ツールに移動しても前の入力数値は残りますので効率よく図る事が出来ますね。 数値を入れるだけ。クリックも不要でサクッと数値を出してくれますよ。 国産なのも嬉しいですね。わざわざ計算せずとも、ここを覚えておけば作業効率も上がり
存在は知っているけどあまり 使われていない印象、という WordPressのデフォルト機能 のご紹介。個人的な印象なの でもしかしたら凄くポピュラー な機能かもしれませんが・・ 殆どは知られていると思いますので期待しないで下さい。1つでも「これ知らなかった!便利!」と思ってくれる方がお一人でもいれば幸甚です。 やや地味な機能なのですが、知っておいて損しない便利な機能です。順不同。 Press This Press Thisというブックマークレットがお使いのWPの管理画面→ツール→ツールからインストール出来ます。これが結構便利で、引用したいと思った他サイト等でブックマークレットを使えばその場で上図のようなWYSIWYGがポップアップします。 リンクは既に作成済みなので下書き保存してあとで編集すれば記事執筆のハードルも低くなるかも知れません。 記事を複数ページに分割 テーマファイルを触る必要が
ここまで出来る、という想像はしていました が、実際に作ってくれた方がいましたよ。 css3とjs、html5というFlash不使用で、 Flashサイトのようなコンテンツを実装して いるPure CSS3 Spiderman Cartoonの ご紹介です。 css3やhtml5、jsによる素晴らしい動作のコンテンツはかなり出てきて、個人的に感動も薄れ始めていましたが、まだまだ凄い人がいるんですね。 アクセス時からFlashで見かけるローディングを作るなど、細かい点も意識してありますね。html5も使っていますが、音の部分で使っているだけで、動きそのものはcss3とjsのみで実現しています。 デモ 動作見た後で、チュートリアル見ると凄さが実感できますね。 ChromeかSafariなら見れると思います。該当ブラウザのユーザーの方、ぜひ御覧ください。 Pure CSS3 Spiderman C
管理画面でWebサイトの要素を ドラッグ&ドロップで追加出来る オープンソースのCMS。直感で 作成出来そうですね。このタイプ のCMSはいくつか見かけた気が しますが、ImpressPagesの精度 もなかなかです。 ImpressPagesはPHP製のオープンソースCMSです。エンドユーザー向けなのか、直感で手軽に要素を作成、追加出来ます。 ユーザーフレンドリーなCMS、というのがコンセプトっぽいです。確かにインターフェースもシンプルで操作しやすい印象です。選択中のテーマにドラッグ&ドロップでテキストや画像などのコンテンツを追加、WYSIWYGで編集、という感じです。 PHP5.3、MySQL5以上で稼動、ライセンスはGPL。mod_rewriteがインストールされている必要があります。以下に特徴を挙げておきます。 要素の追加はドラッグ&ドロップで ページへの要素の追加はドラッグ&ドロ
8月になりました。暑い日が続きま すね。体調を崩す方も周りで見か けますので、皆さんをお気をつけ 下さい。では、先月7月の当ブログ のアクセス解析を公開します。参 考になれば幸いです。 去年の5月末にブログを開設して、7,8月辺りからアクセス解析を晒し続けていますのでこれで1年分になりますね。 5月でようやく30万PVを越えて、6月はたまたま多数のアクセスを頂けて一気に37万PVと、7万PV増加した月でしたが、7月も同様のアクセスを頂けました。ご覧頂き光栄です。5 / 6月のアクセスはこちらをご参照下さい。 7月の検索クエリ Twitterと名刺が相変わらず強いです。名刺はたいして記事書いて無いんですが、関連キーワードも出るようになっています。商業用サイトなら名刺に関するサイトの広告を募集するなどマネタイズに持っていきそうなレベルですね。 また、「かちびと」のクエリも増えてきました。聞いた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く