サイトに外部ブログのRSSを表示する方法と、記事タイトルが長すぎる場合に省略表示する方法メモ。
今更ですが、Google Feed APIを利用してRSSを取得・表示する方法と、そのタイトルをCSSで省略表示させる方法を学びましたのでメモメモ。 みんなだいすきGoogle Feed API サイト制作の際、トップページなどに外部ブログのRSSを表示させたいときってありますよね。 私は過去にバンドの公式サイトを制作していた時、メンバーのブログRSSを表示させてくれとよく頼まれたものです。 （その時は無料RSSサービスを使っていました・・・） そんなときに役立つのがGoogle先生による『Google Feed API』。 表示件数や表示させたい内容、それを囲むタグなどわりと自由にカスタマイズできるので多くのWEB屋さんに愛されているようです。 何かいい方法はないか呟いたところ、多くの方からこちらを薦めていただきましたヾ(*´∀｀*)ﾉ ちなみに、以前はAPIキーを取得する必要があったよ
白黒ベースのサイトを作りたい時に役立ちそうなWeb素材やWebデザイン例などのまとめ
最近、白黒カラーベースのサイトを 作成したのですが、その際に色々と 参考にしたアイコンやバナーなど のWeb素材やインスピレーション 向上の為のWebデザイン例に なりそうなサイトをまとめておきます。 結局アイコン等は使わなかったんですが、また作る時の備忘録としてメモ＆シェアしたいと思います。ライセンスはそれぞれご確認を。多少重いかもしれません。アイコン、ボタンやバナー、その他の素材、ギャラリーと続きます。 アイコン白黒やグレーのアイコンいろいろ。 40 greyscale icons グレースケールアイコンパック。 40 greyscale icons twotiny 白黒のミニアイコンが沢山。 twotiny 165 vector icons 165のうち、66が白黒のアイコン。 165 vector icons bwpx.icns かなりの数の白抜きミニアイコンが揃っています。 bw
次にWebを作るときに使える、センスの良い背景画像配布サイト『Subtle Patterns』 | 100SHIKI
いわゆる背景画像の配布サイトがSubtle Pattersだ。 シックでシンプルな作品がざざっと並んでいて見ているだけでも楽しいサイトである。 これらを使えば「お、シンプルで良いデザインだね！」と言ってもらえるのではなかろうか。 なお、背景画像のプレビューも可能で、このサイト自体の背景をダイナミックに変えてくれる。 次にWebをつくるときに参考にしたいですな。
初めてWordPressを使ってみようという人の為の予備知識
私も大好きな WordPress。これから WordPress を始めてみようかなと思ってる人や、インストールまではしたけど ... という人向けの記事です。カスタマイズなどについての記事ではないので、いつもの読者さん向きの記事ではないかもしれません。 このブログ – Webデザインレシピ、WordPress というキーワードで訪問してくれる人がとても多いんです。でも「WordPress」だけで、複合キーワードなしで訪れてくれているので、WordPress についての何を調べているのかなー …。 なので、今回は WordPress そのものについて、知ってる範囲でまとめてみました。WordPress って何？という漠然とした疑問を持ってる人、または、初めて WordPress を使う！という人向けの記事です。 初めての WordPress 目次 WordPress って何？ WordPre
スマートフォン向けサイトに使えるjQuery UI Theme「Aristo」 | Web活メモ帳
jQueryでスマートフォン向けのアプリケーションを作成する際に使えそうなライブラリ「Aristo」を見つけたのでご紹介。 設置もクロスブラウザ対応非常に簡単にできるようになっています。 ボタン、アイコン、モーダルウインドウ、スライダー、アコーディオンメニュー、タブ、プログレスバーなどおよそ使いそうなデザインはひと通り用意されています。 HTML5向けのサイトに良さそうですね。 ダウンロードは下のリンクからどうぞ。
Faviconをつくるときに参考にしたいデザイン＆ツールいろいろ | P O P * P O P
アドレスバーやブックマークの左側に表示されるFavicon（こんなの↓ですね）に関する記事がありました。 参考になりそうなきれいなデザインやツール類があったのでご紹介。これからFaviconつくるぞー、という人はよろしければどうぞ（それよりもこのブログのFaviconをなんとかしなくては・・・）。 » Inspire Yourself: 50 Remarkable Favicons | Smashing Magazine 下記に一部をご紹介。 ■ 花びら系デザイン ↑ カラフルですね。 ■ 丸系デザイン ↑ 丸を上手に使ったデザインはWeb2.0ぽい気がします。 ■ 文字系デザイン ↑ Googleの「G」やmixiの「m」もそうですね。はてなはブックマークは「B」、ダイアリーは「D」などと分けているようです。 ■ 模様系デザイン ↑ 凝ってますね。 ■ 四角系デザイン ↑ Appleは四
スマホサイト：このブログで使ったサンプルソースのキャプチャ並べてみた。ソースDL可。 - Kaleidoscope
即座にDLできるようにアーカイブ化。 ※naruさんのご指摘により、2.19以前のサンプルソースのCSSが微妙だったことがわかりました。矢印部分のリンクが有効になってなかったです。 （あまりいらっしゃらないとは思いますが…）もしそれ以前にDLされた方は、現在修正版をお使いください。 ご報告いただいたnaruさん、ありがとうございました。 （ちなみに、ここでDLできるサンプルなどなど、動作保証をするものではないのでご了承ください） smart_sample02.zip 02.zip 02v.zip 03.zip 03v.zip 04.zip 04v.zip スマホサイトのリスト型メニューを何パターンか作ってみた 仕事がいったん落ち着きはしたものの、やっぱり僕の周りでも今まで以上にスマホスマホと騒いでます。 スマホサイトといえば、リスト型メニュー？がスマホならではですよね。 今後のスマホサイト
今日から現場で使えるjQueryのフォーム関連プラグイン15選
Webサイト制作で欠かせないのがフォーム。 これらは購入時や、お問い合わせ、ログインと言ったパーツで良く使われます。 今回はそんなフォームにスポットを当てて、なるべく使いやすく、導入しやすいものをご紹介いたします。 ただし、あくまでもjQueryプラグインのご紹介なので、よくわからないと言う方は華麗にスルーしてください。細かい導入方法までは説明しません。 機能性重視プラグイン In-Field Labels jQuery Plugin フォームの中に入っている文字がオンクリックでうっすらと消えていくプラグイン。 なかなかいい感じ。 Create a Progress Bar With Javascript | Nettuts+ demo シームレスにフォームの内容を変え、さらにどれくらい進んでいるかが％で確認できる。 overset - jVal - jQuery Form Field V
プレゼンやサイト作りにぴったりの綺麗なフリーアイコン４０集 | オクトバ
プレゼンやウェブサイトを作るときに、ちょっとした絵を入れたいけど自分で描くのはめんどくさい（or絵が下手で描けない）なんてことないでしょうか？ 今回は、そういうときに使えそうなフリーのアイコン集があったのでご紹介。 40個のフリーアイコン集がまとまっています。 詳細は以下から。 Yoritsuki icons Hand Drawn Doodle Icon Set rounder_png eico 1 year Wifun Icons 3D Cartoon Icons Pack 3D Cartoon Icons Pack III De Freu Practika Dellipack 2 Finance and Applications Heart The Leaves Fall Icon Set DeskMundo Live Icons FRESH Add-on Milky Bright!
WebデザイナやデベロッパーのためのGoogle Docs テンプレート
会社ではOfficeですが、家ではもっぱらGoogle Docsを使っている自分としては嬉しいテンプレートです。
HTML4/XHTML1 から HTML5 への変更点
HTML5 が話題になってずいぶん経ったけれど、いったい何がどう変わったのだろう? 現状ではほとんど何の恩恵も受けていない気がする。 そういえば HTML5 が何者なのか、そもそもよく知らないではないか。 そんなわけで W3C のサイトを覗いてみたところ、こんなものが置いてあった。 『HTML5 differences from HTML4』 ありがたや、まさにこんな解説がほしかった。 以下、この文書をもとに HTML5 の特徴をごく荒っぽくまとめてみた。 ※参照したテキストは "W3C Working Draft 24 June 2010" 時点のもの HTML4、XHTML1 と互換性はあるが、SGML との互換性は無い。 1行目の書き方は、 HTML (HTML5) の場合: <!DOCTYPE html> ※SGML 準拠をやめたので DTD の指定は不要になった。 XML (XH
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ホームページを作る人のネタ帳
http://e0166nt.com/blog-entry-852.html
ソシオメディア | UIデザインパターン
Nike Better World
無料アイコン100パック2009年版*ホームページを作る人のネタ帳
IDEA * IDEA
使いやすくて素敵なjQueryプラグイン１７種紹介
IDEA * IDEA
IDEA * IDEA
