SNSボタンをオリジナルデザインに！設置方法＆シェア数の取得方法まとめ - Design Color
もくじ PHPでSNSシェア数を取得する オリジナルSNSボタンを設置する シェア数取得〜SNSボタン設置までの流れ おまけ：cssでフキダシの作り方 仕上がりイメージ 仕上がりイメージはこんな感じです。ボタンの種類は今回は自分がサイト制作時によく設置する以下の5つ（Twitter/Facebook/Google+/はてなブックマーク/LINE）とします。 ※LINEボタンについては残念ながらシェア数の取得方法がわかりませんでしたので、LINEボタンのみ吹き出しはナシです。 ※LINEボタンはオリジナルデザインにできない決まりなので、LINEボタンのみ公式デザインです。 今回もサンプルを作ってみましたよ〜。 サンプル お世話になった記事 今回の記事は以下のサイト様にお世話になりました！ありがとうございます！特にPHPでのシェア数の取得方法は本当に助かりました。もはや今回の記事はこちらのサイ
日々の業務やWeb制作に役立つ！おすすめChromeプラグイン12 - Design Color
また、以前に書いた「Any.do」の記事はこちらです。併せてどうぞ！ おすすめタスク管理ツール「Any.do」を紹介！リマインド機能やスマホとの連携が便利 | Design Color 以前に書いた「Any.do」の記事 ブラウザの開きすぎにご用心！「The Marvellous Suspender」 追記 以前は「The Great Suspender」を紹介していましたが、マルウェアが含まれているとして、Chrome ウェブストアから拡張機能が削除されてしまったため、代替の拡張機能である「The Marvellous Suspender」を紹介しています。 作業中、調べ物などをしていてついついブラウザを開きすぎてしまい、PCが重くなってしまった経験ありませんか？このプラグインを入れておけばアクティブでないタブを停止状態にすることができます。 停止までになる時間を「5分」「15分」「30
Ajaxで遷移するページのPVをGoogleアナリティクスでカウントしてみよう - Design Color
「Ajaxでページ遷移する」ってどういうこと？ そもそも「Ajax」とは？ Ajaxとは以下のように定義づけられています。 Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行って処理を進めていく対話型Webアプリケーションの実装形態。 引用：Ajaxとは – 意味/解説/説明/定義 ： IT用語辞典 つまりはブラウザをリロードせずに、サーバとのデータのやりとりを可能にすることなのですね！「オートページャー」にはこのAjaxの技術が使われています。 Ajaxでページ遷移する「オートページャー」の仕組み オートページャーとは、分割されている「次のページ」を今みているページ内にAjaxで継ぎ足して読み込んでくれるものです。以下の図のような形となります。 普通のページ遷移であれば、1ページ目、2ペー
CSS Nite ＠Co-Edo, Vol.17参加レポート！レスポンシブWebデザイン実装時に必要な手法や注意点など - Design Color
CSS Nite ＠Co-Edo, Vol.17参加レポート！レスポンシブWebデザイン実装時に必要な手法や注意点など 2018 1/03 レスポンシブWebデザインとは PC、スマートフォン、タブレット…最近は本当に色々な種類のデバイスがあります。それらの数多くのデバイスにワンソースで対応する技術が「レスポンシブWebデザイン」です。具体的には、閲覧しているデバイスの画面サイズに応じてサイトのレイアウトを切り替えてくれるというもの。 例えば以下のサイトでは画面幅が変わるごとにレイアウトとおじさんの顔が変化するという面白い作りになっています。 Hello Fisher 他にPCサイトを各デバイスに対応する方法としてはPHPなどで表示を切り替える方法がありますが、そうなると各デバイス用のデザインやソース、画像を新たに用意する必要が生じてきます。 もちろん、何も対応しなくても各デバイスからPC
ゲーム関連のデザイン制作時に参考になるサイト20 - Design Color
もくじ ゲームサイトのデザインいろいろ ゲームサイトに特化したギャラリーサイト 「ゲーム」タグがあるギャラリーサイト ゲームのデザインをまとめた記事 ゲーム関連のアイコン ゲーム関連デザインのためのチュートリアル ゲームサイトのデザインいろいろ まずゲームサイトのデザインとはどんなものがあるのでしょうか？本当に様々ですが、中でも雰囲気や見せ方がそれぞれ異なるサイトを4つピックアップしてご紹介します！ ジョジョの奇妙な冒険 オールスターバトル バァーンッ！！まずはFlashバリバリ！のジョジョのゲームサイト。かっこいいしキャラを大きく打ち出しているのでインパクト抜群です！なんかもう、色んなとこホバーすると色んなものが動きます。これぞゲームのサイト！ってくらい仕掛けがたくさんです。文字で効果音が出たりするところが漫画っぽくもありますね。 トゥームレイダー 黒を背景にしていてシリアスな雰囲気や「
ラーメン評論家「本谷亜紀」さんのブログ作成をお手伝いしました。デザインから構築までの流れを紹介！ - Design Color
ラーメン評論家「本谷亜紀」さんのブログ作成をお手伝いしました。デザインから構築までの流れを紹介！ 2015 9/25 もくじ ブログの目的など デザイン ラーメンぽい配色 角丸を使って女性らしく 「ゆるっと」感を出すために手書き風に 画像はなるべく使用せず、テキストベースに WordPress サイドバーやフッターは全部ウィジェット 管理画面のカスタマイズ 広告を管理するためのプラグイン「AdSense Manager」 はじめに ラーメン評論家「本谷亜紀」さんとは 本谷亜紀さんは「ラーメン女子大生」として、テレビ朝日「お願い！ランキング」など数多くのメディアに出演し、近年は「女性ラーメン評論家」として活躍されている方です。とても可愛らしくて素敵な女性です。 「本谷亜紀のゆるっとラーメンブログ」とは 私がブログ作成をお手伝いすることになったのは、「男子ハック」の純平（@JUNP_N）さんか
お正月休みに私がしたブログ見直しの試みあれこれ - Design Color
今回の試みたブログの見直し 今回行った大きなブログ見直しは以下の通りとなっています。 他の記事への「おすすめ」の仕方を強化 関連記事にサムネイルを追加 facebookの「Recommendation Bar」を追加 サイドバーの充実化 「人気記事」の表示 「はてなブックマークの人気記事」の表示 Facebookページ作成 他の記事への「おすすめ」の仕方を強化 とにもかくにも、願いはただひとつ。時間があれば、他の記事もぜひ読んでもらいたい！…ということで、他の記事への「おすすめ」の仕方を自分なりに強化してみました！ 関連記事にサムネイルを追加 今までは記事下に関連記事をテキストのみのリスト表示で出していました。ですが、サムネイルがないとどんな記事かパッと見てイメージがつきづらいし、「クリックしたくはならない」のかなあ…ということで、こちらにサムネイルを追加することに。 さらに、今までのコー
流れるような曲線が魅力的！レトロなフォント「懐流体」 #LOVEFONT - Design Color
懐流体とは 「懐流体」とは「井上デザイン」さんで配布されているフォントのひとつです。 私のブログでもたくさん使わせていただいています！ 懐流体の特徴 懐流体の特徴はなんといっても流れるようなS字曲線です！やわらかなラインが独特な雰囲気をかもしだしています。 ためしに宮沢賢治の代表作「銀河鉄道の夜」という言葉でスタンダードな形の小塚ゴシックと比べてみました。 どうでしょう。小塚ゴシックも読みやすくてとても好きなフォントですが、ここでは懐流体が宮沢賢治の幻想的な「世界観」をよく表現できている気がしませんか？ また、「懐流体」はフォント自体が少し縦に長く、ところどころキュッとしまっているので、ほっそりと華奢な印象を受けますね。 このように、優雅な曲線が特徴的な懐流体は「大正ロマン」や「昭和レトロ」を彷彿とさせる雰囲気によく合うそうです。たとえばこんな感じ。 ※クリックすると大きくなります レトロ
私が初めてブログのデザインをした時の流れ - Design Color
もくじ 「ブログらしいデザイン」を知る デザイン前に手描きでワイヤーフレームを作る 配色はツールにお任せ【Kuler】 デザインにぴったりなフォントを選ぶ【Nexus Font】 おまけ：どこかひとつに「おっ」と思わせるしかけを 「ブログらしいデザイン」を知る 以前に「ポータルサイトのデザインをする時に意識したこと5つ」という記事を書きましたが、「ポータルサイトらしいデザイン」や「ブログらしいデザイン」というように、サイトによって「向いているデザイン」も変わってきます。 ブログの第一の目的は「記事を読んでもらう」こと。なので、デザインにとりかかる前にまず「記事を読んでもらえるようなデザイン」とはどういうものかを調べました。また、たくさんのブログのレイアウトを観察しました。 こちらの記事が参考になりました！ [非Webデザイナー向け] カッコイイブログを最速でデザインするための簡単 5 ステ
ポータルサイトのデザインをする時に意識したこと5つ - Design Color
もくじ グローバルメニューを埋れさせない 色を使いすぎない 余白を空けすぎない 囲み線を多用・強調しすぎない サムネイルに黄金比や白銀比を使ってみる 1.グローバルメニューを埋れさせない ポータルサイトは情報量がとても多いです。ユーザーを迷わせないためには、画面が遷移しても変わらずそこにいてくれる「グローバルナビゲーション」は頼りになる存在です。それが他の情報に埋れてしまってはもったいないですよね。なので、デザイン時にはまずこの子に注目してみました。 白抜きのメリット 色々なサイトを観察していると、ナビゲーションバーに白抜きを使っているサイトが多く見られました。 調べてみたところ、白抜きは小さな文字でもやや大きく見えるというメリットがあるとか。なぜなら、白は「膨張色」だからです。 膨張色とは明度が高いことから、他の色に比べて膨らんだり広がったり錯覚する色のことです。白や明度の高い暖色系が膨
手軽に漫画風デザイン制作に挑戦できるサービス・アプリ・グッズを紹介 - Design Color
「漫画風デザイン制作に役立つサイト14」の続編的なものです。 前回はありがたい素材サイト様のご紹介が中心でした。でも、イチから数ある素材を組み合わせて画像加工も全部自分で…って、実はなかなか難しかったりします。 というわけで、今回は手軽に漫画風デザインに挑戦できるサービスやアプリをご紹介！ああ、こういう風にすれば「漫画っぽく」なるのか！という参考になると思います。 漫画風デザインを投稿できるサービス マンガジェット！ 前回もご紹介した「漫画素材辞典β」さんが最近リリースした新たなサービスです。 素材を組み合わせて1コマ漫画を作り、それをTwitterに投稿できるというもの。 私もやってみました。 キャラクターはもちろん素子ちゃん。表情も豊富に用意されています。 キャラ・背景・吹き出しを選んで、文字を入力して…と、とても簡単です。 完成がこちら。 ただ、この時私は電車乗り間違えていたわけもな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Design Color