「WEB」カテゴリーアーカイブ

webに関する記事をまとめています。phpやwordpressが主。htmlやcssもやってます。

画像 – 写真素材 足成 – 毎日更新、高クオリティ、高汎用性のアマチュア写真素材

写真素材 足成【フリーフォト、無料写真素材サイト】
「写真素材 足成」は、全国のアマチュアカメラマンが撮影した写真を、写真素材として無料で提供しています。個人、商用を問わず全て無料でお使い頂け、その上、煩わしいクレジットやリンクの表記、ユーザー登録は一 …

さすが、写真家が撮ってるだけあって構図などがビシっと決まっている写真が沢山あります。

カテゴリ分けされており見通しがいいので目的の写真もすぐに見つかります。

定期的に特集などもやっていて眺めるだけでも楽しいサイトです。

創作 – 常緑の大樹 – ファンタジー系の名前決定や遭遇NPCのプロフィール決定など

常緑の大樹
ここはTRPGに関する支援ツールを提供する目的で作られています。 まだほんの少ししか機能はありませんが、困ったときにお使いください。 初めての方はここの諸注意をお読み下さい 主にガープス,ソードワール …

各言語を元に名前を決定、二つ名を決定。それだけでも十分面白いですが、遭遇したNPCのプロフィルなども決定できたりします。かなり汎用的でとても使い勝手がいいですね。

画像 – Moon cat(ツキネコ) – かわいらしい童話モチーフのキャラクタードット絵素材

Moon cat(ツキネコ)

大変かわいらしい素材を多数配布している。

モチーフは不思議の国のアリスなどのポピュラーな童話か。著作権は放棄していないとしつつも、加工なども許可されていてとても使い勝手がいい。ワンポイントのアクセントに丁度いいと思う。

画像 – タダピク – 商用利用OK・クレジット表示不要の画像素材サイトの横断検索

タダピク(tadapic) – 商用利用OK・クレジット表示も不要の画像素材検索エンジン
このサイトは、商用利用OK・クレジット表示不要の画像素材サイトの横断検索サイトです。 検索結果に表示されたリンク先の規約をご確認の上、ご利用をお願いいたします。 …

登録されているサイトの数もさることながら、精度もかなり良い感じです。

抽象的なワードでも結構引っかかってくれます。

今後も検索できるサイトが増えていくともっと便利になりますね。

画像 – 亡き王女のための研究室 – 加工前提のゴシック系画像素材配布サイト

亡き王女のための研究室 :: Top
当研究室は、比較的高解像度のアンティーク風レースや王冠などの画像を制作しています。 展示されている作品がお気に召しましたら、自由にお使いいただけます。 …
  • 一般的な素材屋さんと異なり、規約らしい規約はありません。
  • 著作権フリーに限りなく近いです。むしろ「作りっぱなし」です。
  • 利用者が当サイトの作品を有効に役立てることを制限する規約を一切もうけません。
  • それは「著作者として尊重される」ことよりも、「作品がめったやたらに役立てられている」ということのほうがわたしにはウレシイしキモチイイからです。
  • しかも楽です。

via: 亡き王女のための研究室 :: Readme

とreadmeにあるように、かなり自由に使えます。

落ち着き、少しかすれた様な素材が多い様子。汎用性が高く、ゴシック系の創作物には相性がとても良さそうです。

画像 – UNSPLASH – 著作権フリーのハイクオリティ写真を定期的に提供

著作権フリーでクオリティの高い写真素材を10日に1回、10枚配布する・「UNSPLASH」 – かちびと.netより。

.

Unsplash

最低画像サイズが1500ピクセルで、どの写真もセンスが光るものばかり。さらにはライセンスもかなり自由。データベースのような運営ではありませんが、たまに覗きに行って選ぶのはとても楽しいサイトですね。

素材サイトによくあるような、汎用性の高いものも、メッセージ性の高いものもあるので見ていてとても楽しいサイトですね。

要素をランダムにcss3グラデーションしてくれるjQueryプラグイン「SHARDS」が素敵オシャレ

CSS3による多層グラデーションを使った背景を作れるjQueryプラグイン・SHARDS – かちびと.net
ちょっと面白かったので備忘録。CSS3で多層グラデーションの背景を手軽に作れる、というスクリプト。jQueryに依存します。レイヤーはランダムに組まれるみたいですね。 …

katibito.netさんで取り上げられていて面白そうだったんで早速飛びつきました。

スクリプトが走ると自動で色づけしてくれるようです。

SHARDS – A jQuery plugin

公式のdemoはこちら。むっちゃオシャレんてぃです。

$('element').shards(col1,col2,highlight,levels,complexity,lightness,alpha,fullscreen);

これだけで要素をグラデーションかける事ができます。色つきクリスタルを割ったような鮮やかでシャープなグラデ。かっこいい!

要素はそれぞれ

colour 1/カラー1           : rgba array-> [255,255,55,.5]
colour 2/カラー2            : rgba array-> [255,255,55,.5]
shade colour/グラデカラー       : rgba array-> [255,255,55,.5]
number of shards/重なる色の数     : integer-> 12 max:100
comlexity/複雑さ(色の変化の多さ的な) : decimal-> .8 max:1
lightness/明るさ            : integer-> 2 max:3
alpha/透明度              : decimal-> .8 max:1
fullscreen/フルスクリーン       : boolean-> true

こんな感じですか。

色々いじってみたついでにdemoも用意してみました!

DEMO / test

グラデーション!ボタンで色々遊べます。動作チェックにでもどうぞ。うん、楽しかった。

html – testhtml – demo用などの単発htmlファイルテンプレート

スニペット

<!DOCTYPE html>
<html>
 <head>
 <title>test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta name="viewport" content="width=620px" />
 <style type="text/css">
 <!--
 #wrap{
 background-color: gray;
 -->
 </style>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
 /* jQuery v1.3.2が読み込まれているか確認 */
 $(function(){
 /* 例1 */
 if(jQuery){
 $("#res1").html("<p>jQueryは読込まれています。"+jQuery+"</p>");
 }

/* 例2 */
 if (typeof jQuery!="undefined"){
 $("#res2").html("<p>jQueryは読込まれています。typeof jQuery="+typeof jQuery+"</p>");
 }
 });
 </script>
 </head>
 <body>
 <div id="wrap">
 <div id="res1"></div>
 <div id="res2"></div>
 </div>
 </body>
 </html>

jqueryが動作してるかのチェックも同時に行う。cssもheadに直接ぶちこむ。

SEO – goodkeyword – SEO対策、無料で使える関連キーワード検出webツール

【goodkeyword】Yahoo/Google関連キーワードツール

キーワードによく併用される関連キーワードを探す事が出来るツールです。

無料で使えて、手軽。余計な情報は一切ついてこなくてとても便利です。

試しに「SEO」で検索してみました。対策、無料、相場、チェックなど、よく併用されるであろう単語が並んでおります。

この結果をみて考えたタイトルが「SEO対策! 無料で使える関連キーワード検出webツール「goodkeyword」がスゴイ」です。SEOに適したタイトルを考えるのはブログ運営では必要になる技術です。是非ともマスターしておきたい・・・ですが、正直SEOなんてよくわかんないよーとか思ってました。

今度からはこれを上手に使っていこうかなと思います。