Web2.0デザイン・Web2.0アイコン無料ボタン クリーンアイコングロス

やり方は想像はついていたのですが、

急に迫られて（お客さんのサイトの件で）ちょっと改造したものを配布しておきます。

あまりスマートな方法では無いので、ご了承を。

やっている方にはわかる話なんですが、

ページを複数作ったものを、自動的にメニューバーにする機能事がこのプラグインについています。

ただ、このメニューバーは全色統一で、”mod_gNavi.css” あたりのCSSで色や幅を制御しています。

大体はここまでたどり着いて、幅を調整し、色も変えちゃったりしていますよね。

リンク先のメニューバーの色を変える方法をちょっと書いておこうかなーと思います。 

 そして、これはカテゴリー別やシングルページなど、特定のページでちょっとデザインを変えたい！バナーなどを出したい！という場合にも再利用できますので、興味のある方はご利用くださいね。

長くなるので以下からどうぞ。

Continue reading

(3 投票, 平均値/最大値: 4.67 / 5)

 読み込み中 ...

作りかけですが、超ベータ番ということで。

ぼちぼちぼち。

もっと集中して、ちゃんと綺麗にして回らないとなぁ。

しかしこれ、お師匠さんの教えだったりします。

デザインよりも、上げるのが先。 

解る人にはわかるかなぁー。 

(4 投票, 平均値/最大値: 5 / 5)

 読み込み中 ...

以前は専用のサーバを利用していたこともあったのですがねぇ。　２０Gくらいの。

IPの関係とかで、1G~３Gクラスの物をちょちょこ借りてるんですが。

画像とか動画アップローダーとかやっている方って、自宅サーバなのかなぁ。

５Mまでの1投稿で3個UPされたとすると、MAX１５Mな訳で。　

容量が1024Mなら、限界が60投稿分そこそこしかさせてあげられません。

そんなデカイ写真つかってくれるなってことなんだけど。。　５Mクラスなら横4000pxとかになるだろうし。

FC2さんが、以前は1枚当たり２５０Kを５００Kにしたとかなんとか。

youtubeは１００M10分までだったっけ。

秋の夜長に、いっちょヤッタル！的なサイトを何個か考えています。

利益にはならないだろうあーというものもやろうかと思ってます。

 そーいうとこで、サーバ費って大変だなぁ。　あー無料鯖ぁ？　なんかないなー。

http://www.morenaku.com　　

ちょっとだけ気合いいれました。　詰め甘すぎですけど　時間がないと言う事で。

(8 投票, 平均値/最大値: 4 / 5)

 読み込み中 ...

持ちネタでというか、久々すぎてハナヂが出そうですね。

最初のアイコンのように、半透過のPNGアイコンを、CSSで浮かして移動させるだけで、

なんとなーくそれっぽいデザインをすることが可能です。

応用もできることでしょう。

psdは以下のような構成になっています。

透過が解りやすいように、画像も入っています。　ちなみにこれは富良野です。

<!— 透過アイコン http://monosashi.com/gloss/ ここから —->
<IMG SRC=http://URL/blogicon.png width=149 height=151 ALT=RSS border=0 style=”position: absolute; margin:-50px 0 0 -115px”>
<!— 透過アイコン ここまで —>

中に、タグ用TXTも入っていますが、上記のようなHTMLを突っ込んで、marginの数値を替えて動かしてください。

iepngfix.htc　（参照）　が使えるのであれば使った方がいいです。

PNGを透過GIFにした方がいいんじゃないでしょうか？という声も聞こえてきます。

やってみるとわかると思いますが、、あれ、周りに色を残さないといけないんですよねぇ。

アルファチャンネルとかいうんですけどねぇ。　PNGの方がキリリときれいですよ！

RSS-001 (896)

Downloaded a total of 896 times

(5 投票, 平均値/最大値: 3.6 / 5)

 読み込み中 ...

xoopsのテーマ公開しました。

今回もデフォルトに近い形で。

ちょっとあの近代ゲーム機風な色使いにしてみましたよ。

xoopsをお使いの方。は試してみてくださいね。

http://monosashi.com/tenpure/

(7 投票, 平均値/最大値: 4.43 / 5)

 読み込み中 ...

あー、これいいなーとっておこう。　というネタはあるんですがねー。

ちゃんと決めてやっていきたいところ。

あぁ、xoopsもいいネタあるんだぬん。

以下は最近のお仕事。 

あ、これはコピーライトあります。あしからず。

(15 投票, 平均値/最大値: 4.53 / 5)

 読み込み中 ...

キリンを書いて欲しいというご要望がありましたので書きました。がボツりました。

日の目を浴びないのはかわいそうなのでここで。

体をかくなら足は短くしたい所。

口コミサイトがちょっと面白くなったので更新出来ていませんネ。

これを機に。　ボチボチさせていただきます！

(18 投票, 平均値/最大値: 4.44 / 5)

 読み込み中 ...

　　構想数日、ちょっと時間かかりました。　ちょっと眠い。。

　　マンションや家、土地や収益物件などなど。

　　賃貸物件や駐車場の仲介。

　　不動産会社さんのトラックバックによるニュース。

なとなど、良いお話だけ集められないかなーと。

このご時世、見渡す限り悪いコメントばかりなんですが、　これから家を探す人って結構

悪いコメントから比較してどの会社にしようか考えている人が多いんじゃないかなーと。

PCとか本とかなら、まーいいかもしれないんですが、身近で動かない会社なので

風評被害は多少なりとも在るだろうし、淘汰が進みすぎると地域経済の影響の割合って進んでいくんじゃないかなとも感じています。

 何といっても実社会と違うのは、悪口書いている人の人間性とか判断基準がつかみにくい。

この人が言うなら信用ならんなーとか、信用できるという肌感覚は文脈くらいからしか読み取れない。

これで何が出来る？何が変わる？って話でも無いですがやって見るのはサーバ代程度なので

とにかく。　Make it happen ! な訳です。

デザインは基本的なところまでしかやっていません。　あとはボチボチと言う感じですが、

機会がありましたら是非、　後続の方の為にもコメントしてみてくださいませ。 

不動産会社の口コミサイト　30,000社以上の関連企業のランキング＆コメント！

(10 投票, 平均値/最大値: 3.9 / 5)

 読み込み中 ...

wordpressの評価系のシステムって、ブログツールみたいな物しかないと思ってました。

別件で使いたい要望があって、テストのために　wp-postratings　入れてみました。

結構いい感じだけど、小さいかなー。　画像を変更して使った方が良い感じがします。

yahooの評価システムのバー　と似たようにした方がいいかしらー。

評価は↓こんんかんじです。

(49 投票, 平均値/最大値: 3.71 / 5)

 読み込み中 ...

まー、よく見たタイプ。　web2.0的か?とも思うんですが、この放射状に広がるタイプのストライプ。たまに見ます。

呼び名がわかりません。　正式な名前があるんだろうか。。集中線とか？

つーか、この線いちいち書くのがかなり面倒！

なので、今回は、幅の違うストライプが5レイヤー入っている、8×4タイプを持ってきました。

ちなみに上のおねーさんは裸です。

直感的にこれくらいの太さかなーと考えながら使えます。

ストライプとストライプの幅がもっと広がったタイプもあるんですが、マタ今度。　整理されてないし。。。

 切り取ったり、選択範囲を指定して円グラデーションを掛けたりして自由に使ってください。

ご使用後、LINKやブログで紹介していただくととってもうれしいです！

ではまたっ

 放射状ストライプ郡001　底辺が10px-20pxまで download : (1493)

Downloaded a total of 1493 times

(9 投票, 平均値/最大値: 4.78 / 5)

 読み込み中 ...

流用した前回の無料xoopsテーマですが、

ちょこちょこ使っていただき始めているのですが、もっとどんなサイトにでも合う様な物の方がいいのかと思っています。

だがしかし。。　時間がねーっす。

(まだ評価されていません)

 読み込み中 ...

箱形のアイコンの基本のき　です。　今回はシンプルなのでチュートリアル的です。

下地にグロスを乗せて半透過させて切るのが基本です。

本気で作るときは、あと5層くらいグロスをかけます。　そいつははまた今度！

 今回はそれほど綺麗じゃありません。　Iconglossの理想からちょっと外れています。

IconGlossは、もうちょっと手の込んだ一枚のレイヤーを上に乗せて切ればOK！時間短縮！が理想なんですよねー。

ZIPファイルの中には

・参考用pingファイル　これ意味あるかなぁ。
・photoshop .psdファイル（ver5.5以降推奨）

を梱包しました。
使用後にリンクしてくれたらとてもうれしいです！　プログて取り上げたってちょー！

 BOX002 四角クリーン画像　基本の"き" download : (1745)

Downloaded a total of 1745 times

(7 投票, 平均値/最大値: 4.43 / 5)

 読み込み中 ...

二号です。　前回とはちょっと違います。

濃い色か薄い色の背景に良く映えます。

zipファイルの中には、

・　IconGlossレイヤーの入った、psdファイル（photoshop ver 5.5以降推奨）

・　参考用PNGファイル

が入っています。

 開くとこんな感じになります。

あなたの画像の上に、glossを持っていって、余計なものを削除してください。

チュートリアルは、丸型に被せる１号を参照してください。

 ○上クリーンアイコングロス002 download : (1616)

Downloaded a total of 1616 times

(8 投票, 平均値/最大値: 5 / 5)

 読み込み中 ...

前回は、線と同等のスペースを設ける1px～20pxまでのストライプグロスでした。

今回は、線は同じですが、空白が広がります。　このタイプも結構メジャー

ストライプの感じを比較しながら背景やバナーが作れるので作業時間が飛躍的に短くなります。

・　950px×300px　のpsdファイルに空白を変えたストライプレイヤーが入っています。

好みのサイズのレイヤーを、ストライプ化させたい画像の上に載せます。

背景（back1）で、選択範囲を読み込む か、 command{ctrl} + レイヤーをクリック　で画像の範囲を選択。

選択範囲を反転させる。

deleteか切り取りで余計な線を消して、不透明度を調整して馴染ませれば完成です。

応用： 　このような感じになります。

今回は、

・　950px×300px　のpsdファイル

・　応用で使用したpsdファイル

がZIP形式に格納されています。

使用後にリンクしてくれたら最高にうれしいです！

 斜めストライプレイヤー郡002　1px実線　空白4px-15pxまで download : (1618)
 

Downloaded a total of 1618 times

(6 投票, 平均値/最大値: 5 / 5)

 読み込み中 ...

vicunaという動物のイラストを募集している所があったので、やってみる。

たぶん主催者さんが思っても見ないものでしょうｗ。
こういうのも良いもんです。　

いや、どんなもんかって、ちょっと書き始めたときに、「あ、これでいいじゃん？」って思ったのでこんな形に。

まじめに作ろうかと思ったんですが、時間もなく、コレマデ！

(10 投票, 平均値/最大値: 4.9 / 5)

 読み込み中 ...

また、かなり前に使っていた物をリサイクルします。　かれこれ4年前の骨董品です。

ちょっとアレな感じにできます。

今回はこのような、花っぽい柄の連続体です。

高級感が若干感じられませんでしょーか。

しかるべき所で区切れば、全体の背景もにも行けます。

コツは、色を極力抑える事です。

・　基本データのphotoshop ver.5.5 .psd データと

・　応用データのphotoshop ver.5.5 .psd データ

をzipファイルに入れています。

チョットサイズが大きいかも2.7M 

 応用背景用グロス003 download : (1209)
 

Downloaded a total of 1209 times

(6 投票, 平均値/最大値: 4.67 / 5)

 読み込み中 ...

仕事で使って捨てられる運命だった横長バーをリサイクルしますよ。

ちょっと応用タイプです。

このページのRSSなどにも使ってみました。

・　色違いのpsdファイルが２こ

・　参考用のpng

が中に入っています。　Verは5.5以降。

こんな感じになりました。

下地3枚のほか、Glossが5枚くらい被っています。

使用後にリンクしてくれたら最高にうれしいです！

クリーン横長バナークロス入り download : (1433)

Downloaded a total of 1433 times

(7 投票, 平均値/最大値: 4.86 / 5)

 読み込み中 ...

web2.0的斜めストライプレイヤー 空間の調整 002

上部のタイトルバーでも使用している物です。

応用すると以下のような横バーもできたりします。 

 こいつは、2px空白1px実線1px空白1px実線のループで、アンチエイリアスを切ってます。

拡大すると：

100%表示で背景にグラデーションをかけたりすると、いい感じになります。

今回は、

・　950px×300pxのレイヤーPSDと
・　応用に使ったバーのpsd
・　それぞれのGIF

をzipにしています。

web2.0的斜めストライプレイヤー 空間の調整 002 download : (1043)

Downloaded a total of 1043 times

(7 投票, 平均値/最大値: 5 / 5)

 読み込み中 ...

WP Download Monitor　を装備しました。　カウントは０から始めまーす。

(1 投票, 平均値/最大値: 3 / 5)

 読み込み中 ...

斜め線。　結構最近使用が増えてきているものの、何度もちまちまコピペするのは面倒ですが、

Icon Gloss があれば一瞬で何度でも作れます！ 

幅　：　今回は、1px×空白1px　～　20px×空白20px　

形式　：　photoshopの.psd形式にて、レイヤー別に分けています。

サイズ　：　サイズは、yahooも始めた　幅：950px×縦：300px

もっと高さが欲しい人は複製して下に繋げて下さい。

Screenshot：

使い方：

背景は角丸長方形ICONGLOSSを使いました。　実際はあなたの画像でOKです。 

ストライプIconGloss　を開き、好みの幅のレイヤーをアクティブにします。　今回は10pxです。

 レイヤーをドラック＆ドロップなどして、画像の上のレイヤーに配置してください。

下地レイヤー上で、　command（ctrl）+クリック  もしくは、選択範囲の読み込みで画像全体の範囲を指定します。

選択範囲を反転　します。　画像以外が指定されている状態になります。

deleteボタンなどでレイヤーを消し去ります。　あ、、レイヤー間違ってる。。 

不透明度を調整して馴染ませて完成！

応用：

 応用すればいろいろな事が出来ます。

上画像はわかりやすい色にて作りました。

１．　ストライプの線の選択範囲を読み込む

２．　新規レイヤーを作り、作成した選択範囲内に、グラデーションツールで上に行くほど薄くなる様に塗りつぶし。

３．　背景画像の選択範囲を読み込む。

４．　選択範囲の拡大　2px　を行って、下地画像の下に新規レイヤーを作成。

５．　ちょっと濃い色で塗りつぶして、アウトラインを作成。

で、完成です。　右にあるのは分解図。　慣れれば作るのに1分かかりません。

zipファイルの中には、psdデータが入っています。　応用データもあわせて入れておきます。

使用後にリンクしてくれたら最高にうれしいです！

　 斜めストライプレイヤー郡001　1px-20pxまで download : (1559)

Downloaded a total of 1559 times

(7 投票, 平均値/最大値: 4.71 / 5)

 読み込み中 ...