「Webサイトの配色で困った！」→「HUE/360使えば良いじゃない」
Webサイト制作で避けて通れない配色の決定。芸術的素養が絶望的にないのでいつも泣いてるゴロドクさんです、どうも。 所詮素人には理論に基づいた配色など無理ゲーです。先日もちょっとしたデザイン的なゴニョゴニョという場面に出くわしましていつものように悩みつつ、なんか配色決定のためのWebサービスないかなーと思って探してたらこういうのを見つけました。 webでの色指定は基本的にRGB値での指定となりますがこれって光の三原色の混色なんですよね。 実際にCSSなんかで数値いじりつつデザインしてると「なんか違うなー」というときにもっと明るくしようとか、もっと彩度上げようってのが感覚的にどの数値をどんだけいじって良いのかってわからないんですよ。 RGB値直接いじって彩度上げようと思ったらくすんじゃった上に色みかわっちゃってオヤオヤ残念なんて日常茶飯事ですよ（いやそのまえにフォトショなりなんなりでデザインカ
CSSキーフレームアニメーションを使ったバナーの作りかた
広告バナーで多少動きのあるものを作ろうと思ったら現在でもアニメーションgif使うのが主流だと思うんですが、CSSのanimationプロパティとキーフレームを使ってそれっぽいもの出来ないかなぁと簡単なものを試作して見ました。 animationプロパティと@keyframesCSS3には【animation】というプロパティがあってこれを使うと【@keyframes】で指定したキーフレームに沿って時間的に他のプロパティを変化させることができます。これによりアニメーション的なものやコマ送り動画（パラパラアニメ）みたいなものが作れます。 …というのを言葉で説明してもイマイチよくわからないと思うのでまずはサンプル成果品をご覧下さい。 ちなみにこのプロパティ、当記事作成段階ではChrome,FireFox,Safariでのみ対応してますのでOperaやIEの方は対応ブラウザでご覧いただきたいと思い
RSSフィードをJSONとして受け取る方法～Google Feed APIの応用
httpリクエストで直接JSONを取得 まず結論を先に書いときます。Google Feed Ajax APIを通じてRSSをJSONデータに変換したものを取得するには フィードのURL&num=取得したい記事数 このような記述で呼び出すことが出来ます。numオプションで取得したい記事数を指定します。これはデフォルトでは4で現在のところ最大100記事分までとなっている様です。 ちなみにnumオプションに-1を指定すると取得可能な最大記事数となるので今後最大記事数が100記事分から増えたり減ったりしたときのために、最初から-1を指定しておくとラクかもしれません。 当ブログのRSSフィードのURLは「https://blog.56doc.net/RSS/」です。例としてこれをJSONデータとして取得してみましょう。numオプションは-1にとりあえずしときます。 これをブラウザのURL入力欄にコピ
新クラウドサービス「PHP APPS」が最強の無料ブログサービスになりそうな件
無料のブログサービスといえばアメブロやFC2、bloggerなどが有名です。かくいう私も忍者ブログの無料レンタルシステムを利用して当ブログを運営しています。 多くの人がこれらのメジャー系無料ブログサービスを利用していると思いますが、ここへ来て新たな無料ブログサービスが誕生しました。これはもしかしたら最強になるかもしれない。 ネットオウルがphpアプリケーションの無料クラウドサービスを開始 まずはニュース記事で概要を。 WordPressなどPHPアプリを無料で利用できるクラウドサービス、ネットオウルが提供開始 ネットオウルは2012年10月17日、オープンソースのブログプラットフォーム「WordPress」などのPHPアプリケーションを無料（広告表示付き）で利用できるクラウドサービス「PHP APPS」（写真）を提供開始した。サーバー構築や運用の知識を必要とせず、簡単なフォームを埋めるだけ
宇宙一わかりやすく電子レンジでプリンを作る方法を解説しますょ
ひっさびさの宇宙一わかりやすいレシピシリーズ、今日はプリンの作り方を。お鍋は使いません、電子レンジだけで作っちゃいましょうという「ホントにできるの？」みたいな雰囲気がなくもないですけど、やってみたら結構簡単なもんです。 材料・道具 元レシピはクックパッドの 電子レンジで簡単！マグカッププリン+α by パパンダシェフ を参考にしていますが、失敗しないように若干のアレンジが必要そうなのでその辺は変更しています。 さて今回は小さめの容器8個分くらいの材料です。自宅にあるもの使うでしょうから出来上がりの数量は容器にあわせて調整ってことで。 砂糖（カラメル）：おおさじ4 砂糖（プリン）：おおさじ6 卵：3個 牛乳：400cc バニラエッセンス：数滴 道具は特別なものはなんにも要らないです。 プリンを入れるための容器：100c～150ccくらい入るもの 泡だて器 小さめのお玉 ボール 計量カップ 計
商用・無料で利用できる国内フリー写真素材24サイト 2012年10月版 | 56docブログ
定期的にチェックしてないとリンク切れとかあるんでその辺の確認かねて国内の無料画像素材まとめておきます。定番サイトも多いですが未読のものがあれば参考に。 利用条件の概要について併記しますが、実際に利用するにあたっては各サイトにていま一度確認してからお願いいたします。
CSSのみ画像不要のドット柄背景の作り方を若干丁寧に説明してみる
ドット柄を見ると職業柄ついパンチングメタル（等ピッチ穴明きの鉄板）を思い出すゴロドクさんです、どうも。 「CSSのみ画像不要のストライプ柄背景～」という記事に引き続き、CSSのみの背景パターンの作り方の解説です。今回はドット柄に挑戦です。 背景イメージに円形グラデーションを上適用してみる ベースとなるHTMLは前回同様1行のみです。単純なボックスの適用に対して考えてみます。 <div class="dot"></div> クラス名は自分で分かりやすいように適当につけておいてください。今回は単純にドット柄なので dot としておきますね。 基本CSSは以下の通りとします。 .dot{ display:block; width:300px; height:300px; background-color:#ff0040; } 【ブラウズ結果】 サンプルページ 300px×300pxのボックスに単
CSSのみ画像不要のストライプ背景の作り方を若干丁寧に解説してみる
縦ボーダーのシャツを着ても縞のゆがみなんて全く気にならないガリのゴロドクさんです、どうも。 CSSで作る吹き出しの記事がなかなか評判良かった（WEBクリエイターボックスさんにツイとFBで拡散されて見たことのない時間PVになりました。ありがとうマナさん！）ので画像不要・CSSのみの定番演出シリーズ第2弾ということで「ボーダー柄の背景」の作り方を解説します。 ツートンのバックグラウンドイメージを繰り返す ベースとなるHTMLは例によって1行のみです。どのタグでも良いんですがとりあえず中身のないdiv要素を用意してこれに適用することとします。 <div class="stripe"></div> CSSではクラスで管理しようと思いますので適当にクラスを付けておいて下さい。 基本となるCSSは以下の通り。 .stripe{ display:block; width:425px; height:22
RSSフィード指定するだけ！たった10分でアンテナサイトを作る方法
最近流行ってる（のかどうか分からないけど）アンテナサイトみたいなものを自分で作れんかなとここ数日試行錯誤してました。 普段ブログネタの収集にはもっぱらGoogleリーダーで用が足りてるんですが、どうせならウェブクラスタの皆さんのブログをまとめて人に見せれるようなものにならないかなぁ…とあちこち調べつつやってみたら、なんと出来ちゃいました。 JSファイル呼び出して使うようにしたので、同じようにRSSフィード利用してアンテナサイト作ってみたいと思ってる人は参考にしてみてください。 【2012/10/02追記】そぷさんがYahoo！Pipesを使ってアンテナサイトを作る方法を書いてくれました。 アンテナサイトは米Yahoo!のPipesを利用すると便利だよ | そぷログ こちらはGoogleAPIのようにRSSのキャッシュ利用ではないので即時性が高く記事更新のタイミングで順序入れ替わったりする不
漢字も使える日本語フリーフォント98種類まとめ [サンプル書体付き] 56docブログ
フリーフォントまとめエントリはいろんなブロガーさんがまとめてらっしゃって私もちょいちょい参考にさせてもらってますが、サイト移転などでリンク切れがあったりするので2012年2月版としてあらためてまとめました。 今回まとめた分は現時点でのリンクチェックとダウンロード可能であることを確認しております。せっかくですので比較できるようにサンプル書体画像も作成しましたので参考にどうぞ。 【追記】ウェブフォント絡みでGoogle web font APIの記事書きました。興味があればコチラも参考にどうぞ。 Google web fonts APIで自由なテキストデザインを 日本語フリーフォント一覧 フォント使用に当たって 今回紹介する分は基本的に無料でダウンロード可能な、漢字の使える日本語フォントにしぼりました。 個人利用は原則制限のないものですが、一部フォントについては商用不可であったり再配布・改変な
![漢字も使える日本語フリーフォント98種類まとめ [サンプル書体付き] 56docブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/5199b7bf14bad177c606b17811be90ad76390f2e/height=288;version=1;width=512/https%3A%2F%2Fblog.56doc.net%2Fwp-content%2Fuploads%2F2019%2F06%2Ffontex001.jpg)
【捕捉されてた】パンダとペンギンの影響度を確認するウェブサービス【Panguin】の使い方
海外SEO情報ブログさんにGoogleのパンダとペンギンアップデートの影響を可視化するウェブサービスが紹介されていたのでさっそく試してみたら… “Panguin”（パンギン？）とりあえず海外SEO情報ブログの紹介元記事載せておきます。 パンダ&ペンギン・アップデートにやられたかどうかを調査するツール | 海外SEO情報ブログ 紹介されてるのはコチラのサイト。 Panguin Tool – Barracuda Digital l 上の記事に使い方書いてるんですが一応説明。あ、Googleアナリティクス導入してることが前提ですので。念のため。 アクセスしたページの【Log-in to Analytics】というボタンをクリックします。 Googleの外部アプリの認証画面が開きますので【アクセスを許可】をクリックします。 アナリティクスに登録してあるプロファイルの一覧が表示されます。確認したいサ
ブログに華を添える画像を…そんな時は「ブログ用の写真検索さん」で【使えすぎて泣けた】
一つ前、二つ前の記事でワケの分からないことを書きなぐって「アイツ、ついに頭おかしくなったんじゃねーか」と思ってる人もいるかもしれません。ご心配なく、頭なら元々おかしいゴロドクさんです、どうも。 デジイチ!デジイチ!デジイチ!～求めよ、さらば与えられん Mac!Mac!Mac!～求めよ、さらば与えられん 何がしたかったかっていうと、こないだネタフルさんで紹介されてたサービス使ったらブログ用の挿入画像作るのなまら簡単だよってサンプルを見せたかったわけで。 そのサービスと言うのがコチラ。 ブログ用の写真検索さん – Amazonの商品画像を公式加工 どういうサービスかというと、amazon内の商品画像を検索してブログに差し込める画像を吐き出してくれる、と言うものです。 基本的な使い方サービスページの中段ほどに検索用テキストボックスがあるのでそこから商品検索ができます。 サンプルとしてここでは「ジ
さっそくレビュー、ツイッター公式「埋め込みタイムライン」の使い方
ツイッターアプリで自分のタイムラインをウェブサイトやブログに埋め込むウィジェットはサードパーティ製でいくつかありましたが、2012年9月6日、ようやくツイッター公式のツールとして公開されました。 サイト向けに「埋め込みタイムライン」の提供が始まりました。blog.jp.twitter.com/2012/09/blog-p… — twjさん (@twj) 9月 5, 2012 早速このツールの試用をしてみたいと思います。 ※記事末尾にいくつか追記しました。 そういえば今まで公式ではなかったよね 公式の発表は以下の通り。 サイト向けに「埋め込みタイムライン」ができました 2012年9月6日木曜日 サイトの上に簡単にTwitterのタイムラインを表示できるツール「埋め込みタイムライン」の提供を始めました。ブログの隣に表示したり、＃ハッシュタグを使ったイベントのページに表示したり、スポーツの試合ペ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
