ブログのコメント欄に画像を入れたい方にオススメなのがGravatar(グラバター)です。 Gravatarを登録することにより、任意の画像を設定することができます。 simple local avatarsというプラグインでも同じ設定をすることができますが、「できるだけプラグインを入れてたくない」と思っている人にはオススメです。
![アバター画像を設定!Gravatar(グラバター)の登録方法と使い方|joism](https://cdn-ak-scissors.b.st-hatena.com/image/square/6db474113c5f1eae0c99b05ab1cbe546869daeaf/height=288;version=1;width=512/https%3A%2F%2Fzaitaku-hukugyo-net.com%2Fwp-content%2Fuploads%2F2014%2F04%2Fhowto_butter_02_mainpic01.jpg)
ブログのコメント欄に画像を入れたい方にオススメなのがGravatar(グラバター)です。 Gravatarを登録することにより、任意の画像を設定することができます。 simple local avatarsというプラグインでも同じ設定をすることができますが、「できるだけプラグインを入れてたくない」と思っている人にはオススメです。
3年ほど前から、私はメインブラウザをFirefoxからGoogleChromeに変更しています。 そのため、Webサイト制作時、iPhoneやAndroidなどスマホ環境の簡易的な表示確認(UserAgenet切替)は、すいぶん容易になりました。 Google Chromeは、以下のようにUserAgenet切替のために、わざわざエクステンションをインストールする必要がないからです。 GoogleChromeでのUA(ユーザーエージェント)切り替え方法 FireFoxでのUA(ユーザーエージェント)切り替え方法 Firefoxアドオン「User Agent Switcher」を追加する。 User Agent Switcher :: Add-ons for Firefox ※ちなみに、以下の同名のアドオン(ハイフンがある方)「User-Agent Switcher」と間違えないように注意が
こんにちは。9/11発売のPS3・PS4ソフト「Destiny」が楽しみすぎてプレイしてる夢を見たSatoです。 今回は「思わず手を合わせたくなる美デザインデータのつくりかた」続編です。 前回のあらすじ 【整理した。】 前回の予告通り、 「さらば…伝わらぬ指示書!」 ということで、デザインデータを渡すコーダーさん、エンジニアさんetc…にちゃんと伝わる指示を書こう!というお話です。 正直、指示に関しては各会社でテンプレや決まり事のようなものがもう既にあると思います。なので、個人でやっている方やまだ慣れていない方向け、ということで…。 こだわりたい部分はデザインに直接書く ここは絶対ズレないように! ここは絶対このグラデーションで! ここは絶対画像で! など、デザイナーさんには色々とこだわりたい部分があるはずです。しかし、文章で送ったところで相手によく理解してもらえなかったり、上手く汲み取れ
こんにちは! 最近肩を回すとボキッと鈍い音が鳴るようになってしまったデザイナーのsatoです。 SubversionやらHTML、JavaScriptなどお堅い文字の目立つSRIA BLOGですが、今日はデザインに関することを書こうと思います。 デザインと言っても「デザインする」側のことではなく、「デザインを貰ってコーディングする」側から見たデザインデータのお話です。 題して、「思わず手を合わせたくなる美デザインデータのつくりかた 整理・整頓編」ッッッ ※あくまでも私個人が思うことであり、誰もが良いデータだと思うかどうかはわかりません。 ※主にWEBサイトの制作を例にしております。 ※参考画像にはPhotoshopを使用しております。 では早速、一番大事なことから行こうと思います。 レイヤーはフォルダで分ける これがまったくなっておらず、全ての素材が羅列されていたときが 最も最も最も最も最
どうも、くーへいです。 今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。 なお、本記事は「CSS Flexible Box Layout Module Level 1」の2014年5月22日付けの編集者草案(Editor’s Draft)を基に作成しています。 また、「CSS Flexible Box Layout Module Level 1」は未だに策定中であり、現在は2014 年3月25日付の最終草案(Last Call Working Draft)が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「
HTMLのレイアウト方法で最も新しいフレキシブルボックスをまめわざでも利用しています。 手軽に並列レイアウトができるスタイルですが、他の並列レイアウトとの使い分けはどうすべきか、flexにしかできない表現はあるのかを、実例を挙げながら解説します。
CSSで要素を横並びにする方法をまとめてみました。 それぞれの違いがわかるように基本となるコードを用意します。 div要素3つとそれを囲むdiv要素1つです。3つのボックスには高さと横幅を80px、マージン、パディングともに10pxを指定します。 <div class="boxContainer"> <div class="box">BOX1</div> <div class="box">BOX2</div> <div class="box">BOX3</div> </div> float – 方法1 .box { float: left; } .boxContainer { overflow: hidden; } /* clearfix */ .boxContainer:before, .boxContainer:after { content: ""; display: table;
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います! ↑私が10年以上利用している会計ソフト! 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編1】を紹介します【2015年4月現在】 こんにちは、WEBマーケティング部の杉尾です。 今回と次回で、『2015年4月現在、Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編】』を紹介します。 今回はFlexboxのIE10、Safari、iOS Safari、Androidブラウザへの対応実践編の第一回です。 各プロパティの書き方 はじめに ※Flexboxは過去に二度大きな仕様変更がありました。 それぞれを古い順に、『box仕様』、『flexbox仕様』、『flex仕様』(現行)と呼称します。 ※IE10はベンダープレフィックス(-ms-)付きで『flexbox仕様』に対応している唯一のブラウザです。 ※iOS 6.1以前
2015.10.07 (水) @DeNA 渋谷ヒカリエ UI Crunch - Girls’ Night / 女子の心をつかむUIデザインのコツ http://ui-crunch.connpass.com/event/20562/ にて登壇した内容。 1年間iOSとAndroidのアプリの設計デザイン・運用・改善フェーズに関わったMERYアプリを元に「女子の心をつかむUIデザインポイント」をお話ししました。 MERYは、トレンドに敏感な女の子のためのサービスです。ファッション、メイク、ヘアスタイルなど女の子のためになる記事が毎日読めて、記事で紹介されたファッションアイテムなど買うことができます。 iOS https://itunes.apple.com/jp/app/mery-meri-nuno-zinotameno/id884484921?l=en&mt=8 Android https:
初めまして。アメリカからやってきたUIデザイナーのCorey(コーリー)です。 LIGの転職サービス「Poole」でUIデザインをしています。 PhotoshopやIllustratorをメインとして使うデザイナーは多くいると思いますが、私はPhotoshopをほとんど使いません。1年前にSketchへ乗り換えたからです。 現在、日本のデザイン界ではSketchはそれほど使われてないかもしれませんが、海外ではSketchが大ブームになっています。 今回は私が最強なPhotoshopからSketchへ乗り換えた理由をお伝えします。 Sketchへ乗り換えた理由(Why I Use Sketch) http://bohemiancoding.com/sketch/ 1. UI Design中心 Sketchは完全にWebとモバイルUIデザインの専用ツールなので、それ以外の余計な機能が入っていま
2022年5月18日 【iCARE Dev Meetup #33】 デザイナー目線のユーザーとの向き合い方 でのスライドです。ユーザーインタビューをするとき、私たちはつねに「認知バイアス」にさられています。認知バイアスの影響を受けると、私たち自分に都合のよい情報ばかりピックアップしてしまいます。ユーザーにしっかり寄り添ったプロダクトをつくるためには、きちんとバランスのよいユーザーインタビューをする必要があります。本セッションでは、陥りがちな認知バイアスをミニワークを交えて体験し、ユーザーインタビューで気をつけるべきポイントを解説します。 なお、今日の登壇を誘ってくださった @murokaco さんが熱心な研究員(BiS というアイドルのファン)なので、 BiS(第3期)のデビュー曲「BiS -どうやらゾンビのおでまし-」をタイトルに入れてプレゼンしています。
デザインの指示書やスタイルガイドを作成するのは、なかなか時間がかかりますよね。 使用している要素のサイズやマージンやカラーやフォントなどの情報を自動で取得したり、コメントを添えたり、指示書やスタイルガイドをプロジェクトのメンバーと共有できる「Zeplin」を紹介します。 1プロジェクトまで完全無料、2つ以上から有料ですが、機能制限などは一切ありません。 Zeplin Zeplinの特徴 Sketchでの下準備 Zeplin ソフトウェア版 for OS X Zeplin ブラウザ版 for OSX, Win, Linux Zeplinのインストール Zeplinの特徴 Zeplinは、Sketchで作成したデザインリソースから指示書やスタイルガイドなどを自動で生成するソフトウェア(無料)とオンラインサービス(無料と有料)です。 無料と有料の違いはプロジェクト数だけで、機能はまったく一緒。
VLOOKUP関数で#N/Aエラーを表示させない方法 (IFERROR関数など) (Excel 2000/2002/2003/2007/2010/2013/2016) ツイート ● 概要● VLOOKUP関数を使用して完全に一致するデータを検索した場合、falseが返ると#N/Aエラーが表示されます。そこで、Excel 2007以降追加されたIFERROR関数を使用して#N/Aエラーを表示させない方法を紹介します。Excel2003以前のバージョンでは関数とISNA関数/ISERROR関数を用います。 ● 詳細 ● 以下の方法で#N/Aエラーを表示させずに、セルを空白にできます。 《Excel2007/2010/2013/2016バージョン》 VLOOKUP関数を入力したセルを選択する 入力済みの数式に、IFERROR関数を追加します =IFERROR(VLOOKUP(検索値,範囲,列番号
Screenpressoは直感的に使えると同時に多機能。なので、最初に初期設定をしておくと理解も深まり、頭がこんがらがることもなくなります。 操作自体は簡単で、慣れるとものすごく重宝するんですが例えば・・・せっかく作った画像がどこに保存されているのか、分からなくなったら困りますよね。 初期設定といっても難しいことはありません。最初にさらっと目を通しておきましょう。 いやいや、具体的にどんなことができるんか、先にもっと教えといてや という方は、先にこちらを覗いてみて下さい。 関連記事
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く