PLUS1WORLD | ゲームとネットが好きな今井阿見の個人ブログあなたはゲームをどの程度プレイしますか？ コロナ禍による巣ごもり需要でゲーム機が必要になり、その影響でPS5を購入した人も多いでしょう。久しぶりにゲームを遊び、グラフィックの向上に驚いた方もいるかも知れません。 近年、ゲー ...
これはお役立ち！リンク先のfaviconをリンクアイコンとして表示させる方法！ | バンクーバーのうぇぶ屋
よくリンクにアイコンを付けることってありますよね？アレをリンク先のfaviconを自動で表示させることってできればって思ったことってないっすか？ そんなWEB屋なら一度は（？）考えたことのあるfaviconのアイコン化がこんな感じで実装できることをつい先日知ることになり、びっくり感動してしまったので是非ご紹介させて頂ければこれ幸いです！ 元記事はこちら！ Favicons Next To External Links | CSS-Tricks これ実装すると、つまり下のような感じになるわけっすね！ これ、何をしてるのか気になって見てみたら、そもそもgetFaviconっていうサービスがあるらしいことをしりました。これはリンク先のURLをパラメーターとして渡すと、リンク先の<link>情報みて、faviconのURL引っ張ってくるって仕組みらしいですね。 http://g.etfv.co/h
スマホサイトでも使えそうなかっこいいドロップダウンメニュー実装jQueryプラグイン「ddSlick」:phpspot開発日誌
スマホサイトでも使えそうなかっこいいドロップダウンメニュー実装jQueryプラグイン「ddSlick」 2012年05月17日- ddSlick - a jQuery plugin for custom drop down with images スマホサイトでも使えそうなかっこいいドロップダウンメニュー実装jQueryプラグイン「ddSlick」。 タップすればリストが開いてアイテムをクリックすると選択できるというウィジェットを簡単に実装できるプラグインです。 デモではソーシャルサイトの選択という感じになっていますが、色々応用ができそうです。 スマホのメニューとして使ってもよさそう。アイテムの内容には画像、タイトル、デスクリプションが含まれますが、これら値はJSONで渡せます もちろんPCサイトでも使えますね 関連エントリ スマホのホーム画面っぽいものを作れるjQueryプラグイン「Pr
ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
実際のウェブサイトを例に、ずっと廃れないであろうページレイアウトの10のパターンとその特徴を紹介します。 10 Evergreen Website Layouts (that will never go out of style) [ad#ad-2] 下記は各ポイントを意訳したものです。 2カラム、広いヘッダ 3カラム、広いヘッダ フォーボックス 不確定なグリッド 大きいスクリーンショット シングルカラム 打ち出し画像 固定サイドバー グリッドベースのギャラリー マガジンスタイル [ad#ad-2] 2カラム、広いヘッダ これは最も普通のレイアウトと言ってもよいでしょう。広いヘッダが上部にあり、960pxを2カラムにし、一つは広く、もう一つは狭くしたものです。狭い方はサイドバーでナビゲーションなどが設置してあります。 慣習的に、ブログでは広い方の右にナビゲーションを置き、スタティックなサイ
配色の基本。メイン・サブ・アクセントカラーを極める！
前回の[カラーデザインの基本。トーンを理解する！]と[カラーデザインの基本。色の三属性とは？]に引き続き、今回はメインカラー・サブカラー・アクセントカラーの基本ルールについて解説させていただきます。このメイン・サブ・アクセントカラーの基本ルール正しく理解すると、配色を考えるのが簡単になります。 頻繁に配色を悩む方や、デザインの途中で配色を変えてしまう方は、このメインカラー・サブカラー・アクセントカラーのルールを正しく理解できていない可能性があります。なので今回解説するこの記事を読んで、配色についての理解を深めましょう！(偉そうに書いちゃいました。すみません) ちなみに配色という言葉を辞書で引くと、『2つ以上の色を組合わせること。また、組合わせた色合いのこと』と書いてあります。 メイン・サブ・アクセントカラーの役割 まずは、メインカラー・サブカラー・アクセントカラーと呼ばれる、各要素の役割に
jQueryで好きな要素を浮遊させることができるプラグイン「jqFloat」を使ってみた – bl6.jp
指定した要素をフワフワと浮遊させることができる面白いプラグインを使ってみました。なんか楽しくなってきますね。使い方もとても簡単なのでちょっとしたアクセントにいいかもしれないですね。実際の公式サイトでは雲や蝶蝶を浮遊させたりしています。見ていてちょっと和んじゃいます。ということで以下簡単な使い方です。 [ads_center] 使い方 jQuery本体とダウンロードしたJSファイルを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jqfloat.min.js"></script> 浮遊させたい要素を指定します。 <script> $(document).ready(function() { $('#sample').jqFl
地球にいながらにして他惑星気分を味わえる劇的光景が広がる世界 | カラパイア
この画像を大きなサイズで見る NASAが衛星から撮影した惑星の画像のごとく、はたまたSF映画にでてくる惑星シーンのごとく、地球上にも「ここどこ？何惑星？」と感じることができる場所があるという。一度は肉眼で見てみたい地球上にあるSF的光景の画像がいくつか紹介されていたので見てみることにしよう。 ソース：Mars, Jupiter or an asteroid hurtling through space? These alien landscapes are in fact found on EARTH | Mail Online ギョレメ渓谷の岩、カッパドキア、トルコ この画像を大きなサイズで見る ウユニ塩湖、南西ボリビア この画像を大きなサイズで見る 米ネバダ州ブラックロック砂漠の間欠泉温泉 この画像を大きなサイズで見る エジプトのホワイトデザート 白砂漠 この画像を大きなサイズで見る
Google AdSenseのパフォーマンスが劇的に向上した！！！絶っっっ対に設定した方が良い「カスタムチャネル」の「ターゲット設定」について
Google AdSenseのパフォーマンスが劇的に向上した！！！絶っっっ対に設定した方が良い「カスタムチャネル」の「ターゲット設定」について あいもかわらずプロ・ブロガー本を読み漁っております@OZPA です。 今回は、Google AdSenseを導入しているブロガーの方でしたらなにはともあれぜっっっっったいにやっておいた方が良い「カスタムチャネル」と「ターゲット設定」についてのお話。 参考：Google公式のAdSense無料ガイドブックがものすげぇ参考になった | ごりゅご.com 「ターゲット設定」とは？ 「プレースメントターゲット」を設定しておこう （中略）広告ユニットには忘れずにカスタムチャネルを設定し、ターゲット設定で[広告の掲載先（ブログの内容の簡単な説明）][広告掲載位置][説明]のそれぞれをにゅうりょくしておきましょう。 via:「必ず結果が出るブログ運営テクニック1
これは必見のWEBデザインの近未来。HTML5で構築されたサイト45:phpspot開発日誌
45 Examples Of Websites Designed With HTML5 | Free and Useful Online Resources for Designers and Developers これは必見のWEBデザインの近未来。HTML5で構築されたサイト45 CSS3なんかも取り入れてデザインは去ることながら、動きもいい感じに実装されています。 WEB業界に身を置く方ならばデザイナーならずとも、出来ることを知っておくという意味で必見のサイトが多数。 多くのプロフェッショナルなサイトにおいてこうした物が近い未来当たり前になっていきそうな予感。 今後、より多くの知識と動かし方に関する引き出しを身に付けた上でクリエイティブな仕事が求められそうで大変な反面、面白いことにもチャレンジできそうな可能性を感じます。 ソニーのタブレットのサイト。超カッコいいです 他にも多数の動き
「Alt+Tab」でウィンドウを見やすく素早く切り替えられる「VistaSwitcher」
ウィンドウを何十個と開いて作業をする必要がある場合に、ウィンドウを何度もあっちへ切り替えたり、こっちに切り替えたりと収拾が付かない状態になってしまいますが、そんな苦労を少しでも軽減してくれる便利なフリーソフトが「VistaSwitcher」です。インストールと操作・設定方法については以下から。 ◆「VistaSwitcher」の機能 仕事や家で作業をしているときに、このように大量のウィンドウを開いていると、タスクバーから開きたいウィンドウを開くにも大変になり、何を開いているかも分からなくなります。 こんな場合に備えてWindowsにはウィンドウ切り替え機能があり、「Alt+Tab」を押すと以下の画面が表示され、「Alt」を押したまま「Tab」を押したり離したりすると、表示させるウィンドウが選択されて、「Alt」から手を離すと、選択したウィンドウが表示されます。ただ、このウィンドウを切り替え
その手があったか！発想が参考になる「X（Twitter）」プロモーション事例10選[海外編]と、企画で押さえるべき3つのポイント « 株式会社ガイアックス
その手があったか！発想が参考になる「X（Twitter）」プロモーション事例10選[海外編]と、企画で押さえるべき3つのポイント 2012/05/16 海外のX（Twitter）プロモーション事例 X（Twitter）もプロモーションに活用できていますか？ プロモーションや顧客との関係構築にFacebookを利用するメリットが色々あるため、ついFacebookだけに目が行ってしまう方も多いのではないでしょうか。 そういった方々向けに、今回は「ブログタイムズBlog」さんとのコラボレーション特集で、発想がとても参考になる海外のX（Twitter）プロモーション事例を10個ご紹介します。 前回Facebook編で大好評だった記事「その手があったか！発想が参考になるFacebookプロモーション事例10選[海外編]と企画で押さえるべき３つのポイント」の第二弾です！X（Twitter）をプロモーシ
![その手があったか！発想が参考になる「X（Twitter）」プロモーション事例10選[海外編]と、企画で押さえるべき3つのポイント « 株式会社ガイアックス](https://cdn-ak-scissors.b.st-hatena.com/image/square/6da9067c3f5b16f083536359a6cab328a93034e2/height=288;version=1;width=512/https%3A%2F%2Fgaiax-socialmedialab.jp%2Fwp-content%2Fuploads%2F2012%2F05%2Fthum5.png)
OGPタグ確認に便利！ブックマークレットで手早くチェック | ブログ | SINAP - 株式会社シナップ
'+'%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%82%BF%E3%82%B0'+'%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%82%BF%E3%82%B0 ';if(og_image%20==%20undefined){addtext%20+='%C3%97%20og:image%E3%81%8C%E8%A8%AD%E5%AE%9A%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82 '}else{addtext%20+='url'+%20og_image%20+' ';if(og_image.match(/http:\/\/[^\/]*/)%20!=%20null){var%20og_image_domain%20=%20o
リストで画像と文字を縦中心に表示するjQueryプラグイン「jQuery List Vertical Align」 – poyosi.com
しょうもないことがとっても気になる@poyosiです、こんにちは。 以下の画像のように、リストで画像と文字を縦中心に並べるのは1行だけなら簡単なのですが、複数行入るかもしれないとなると急にやっかいになるレイアウトです。 というわけで、どうしてもこのレイアウトを実装したいという超レアなケース向けに、簡単に設置することのできるプラグインを作りました。 こういうのを実装したい もじ文字 もじ文字 もじ文字 「jQuery List Vertical Align」プラグインのダウンロード プラグインはこちらからダウンロードできます。 jQueryとプラグインを設置しよう <head>タグの中にjQueryとプラグインを設置しましょう。 画像をCSSの背景で表示させたい場合 画像付きリストを作る場合、背景を<li>タグにbackground設定して表示させる方法があります。 それと同じようにHTML
４．要注意？！全く売れないキャッチコピーに共通する５つの特徴と解決法
キャッチコピーは、コピーライティングの中でも群を抜いて重要だ。 キャッチコピーで、一瞬でターゲットの注意を惹き付けることができなければ、ボディコピーにどれだけ素晴らしいことを書いていても、完全にムダに終わる。 そこで、今回は、全く売れないキャッチコピーの共通点とその解決策をご紹介する。あなたがキャッチコピーで失敗してしまうことを防ぐために役立てて欲しい。 それでは、早速解説していく。 また、私たちバズ部は12年で400社以上のメディア支援を行い、 立ち上げから10ヶ月で14.6億円の売上を産んだ不動産メディア8ヶ月で月間140万PVを実現したアプリメディアなど大きな成果を挙げ続けている。 各サイトの成功要因をインタビューしているので、 あなたのサイトに役立てて欲しい⇒25サイトの成功事例インタビューはこちら １．ターゲットを極限まで絞っていない昨今、人びとのニーズは非常に細かく多様化してい
絶対に覚えておきたいwebデザインの配色・カラー3つの基本と基礎
webデザインを考える時にカラーは切っても切りはなせません。しかし、配色は苦手だけど、まぁカラーの勉強は後でいいや…センス無いしその前にやることあるし…となんとなく後回しにされがちなんじゃないかなーと思います。基本を知っておくと、デザインに役立つのはもちろん、クライアントさんに提案出来たり、私生活や料理etc…様々な場面でとっても強い味方になってくれるます。ちょっとしたスキルアップをしたいと考えてるなら、まずは配色から初めてみるのが良いかもしれませんXD 色って？ カラーモードRGBとCMYKとは？ 色の三属性について 「色相」 「明度」 「彩度」 具体的な例と配色方法 面積比率 可読性 最後に 1.色って？ まず一口に色といっても色々(シャレじゃないですw)あるのですが大きく分けて果物や印刷物など物についてる色とテレビやパソコンのモニターなど光を放っている色の2種類があります。 物体色
[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js
[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js
シームレスに使える、布地ベースのざらっとした癒し系のパターン素材
素材の利用にあたっては個人でも商用でも無料、とのことです。 詳しくは、ライセンスページをご覧ください。 Terms of Use
ダイナミックなアニメーションがかっこいい、フルスクリーン対応のスライダーを実装するチュートリアル
パネルに切り込みをいれ、垂直・水平方向にダイナミックにスライドするフルスクリーンで楽しめるスライダーをjQueryとCSS3で実装するチュートリアルを紹介します。 実装 実装方法はポイントを説明します。 HTML 各パネルは「sl-slide」のclassを持ったdiv要素で実装されており、カラーは「sl-slide-dark」で管理されています。 <section id="sl-slider" class="sl-slider"> <div class="sl-slide"> <div class="sl-deco" data-icon="6"></div> <h2>A bene placito</h2> <blockquote> <p>You have just dined, and however scrupulously the slaughterhouse is conceale
WordPressの管理画面のデザインをFacebookっぽく変更するプラグイン・Blue Adminで思いのほか見やすくなった - かちびと.net
思いのほか見やすくなったので 備忘録も兼ねてシェアします。 WordPressの管理画面のデザイン をFacebookライクにしてくれる プラグインです。これは結構 いいかもしれない。 失礼な話ですけどテストするまでさほど期待していませんでした。実際に試したら結構見やすかったので管理画面のデザインの参考にもなりましたよ。プラグイン自体はFacebookを意識したとは書いていないんですけどかなり似ています。 プラグインを使用した際のWordPressの管理画面です。実際に見たほうがピンと来るかもですけど、かなり見やすい気がしました。このまま納品物に使う事はありませんけど、テキストや余白具合がいい感じなので上手く利用すれば結構工数減らせそうです。 ↑ 比較です。ウィンドウサイズとキャプチャしたページは統一してあります。 ↑ デフォルトの管理画面はサイドメニューとメインエリア、アイコンのカラース
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Photoshop VIP ☞ デザイントレンド、レスポンシブWebデザイン対応のWordPressテーマ素材23個まとめ
一度は訪れたい。世界、魅惑の30の駅 : カラパイア
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
ブラウザサイズに合わせて背景画像などをフィットさせるjQueryフルスクリーンプラグインいろいろ
http://pointcard.me/japanese-free-web-fonts/
Photoshop Vip » 味わいのあるPhotoshop用グランジストライプパターン6枚セット「Grungy Stripes Pattern」
Loading...
http://select-aster.com/web/create-recommend-post/
