date
最近はレスポンシブコーディングも多くなり、コーディングする度にデザインに合わせて
毎度ちまちまコードを書いていくのも面倒なので、コピペして使えるパーツを載せていこうと思います。
bootstrapなど便利なフレームワークも沢山ありますが、100％使用するとカスタマイズが面倒なので、
その辺は、使えそうな部分のみ抜粋して組み込んであります。
まずは、よく使うボタン。
レスポンシブのブレイクポイントは、Bootstrap のグリッドシステムに倣っています。
0 ～ [xs] ～ 768 ～ [sm] ～ 992 ～ [md] ～ 1200 ～ [lg]
inlineボタン（.button）
画面幅768px 以下でブロックボタン（.xs-block）
画面幅992px 以下でブロックボタン（.sm-block）
画面幅1200px 以下でブロックボタン（.md-block）
画面幅1200px 以上でブロックボタン（.lg-block）
sugi
Googleアナリティクスを導入するお客様も増え、最近よくお問い合わせをいただく、
Gmailアカウントを作成しない、Googleアカウント作成方法を紹介します。
まずは、Googleアカウントの作成画面にアクセスして、赤枠で囲われた項目に必要な情報を入力します。
今回は、Gmailは使わないので、「ユーザ名を選択」の個所で「現在のメールアドレスを使用する」と書かれた、テキストリンクをクリックします。
このとき、入力するメールアドレス宛に本人確認のためのリンクが記載されたメールが届くので、必ず使用可能、または使用中のメールアドレスを入力してください。
全ての情報を入力し終わり「次のステップ」ボタンをクリックすると、プライバシーと利用規約が開きます。
開いた時点では「同意する」ボタンがグレーになっていて押せませんが、規約をスクロールすると青いボタンに変わります。
アカウント登録の確認画面
登録の確認方法は2通りあります。可能な確認方法を選択してください。●メールを受信できる携帯電話で確認する場合 / ●音声通話で確認する場合
・メールを受信できる携帯電話で確認する場合
携帯電話のメールアドレスを入力し 「コードの受け取り方法」の赤枠（テキストメッセージ（携帯電話のメール）を選択して、「次へ」ボタンをクリックしてください。
入力したメールアドレス宛に確認コードが届きますので、送られてきたコードを入力して「次へ」ボタンをクリックしてください。
・音声で確認する場合
受けることが可能な電話番号を入力し、「コードの受け取り方法」の赤枠（音声通話）を選択して、「次へ」ボタンをクリックしてください。
フリーダイアルから着信があります。音声でコードを読み上げられるので、必ずメモを取るか、確認コード入力欄に直接入力してください。
正しくコードが入力されると、メールアドレス確認画面に移動します。
登録したメールアドレス宛に確認メールが届いているかを確認し、記載されている赤枠のURLにアクセスして、登録を完了してください。
これでアカウントの作成が完了し、ようこそ画面が表示されます。
赤丸で囲ったところから、それぞれのサービスを利用できるようになっています。
さぁ！すてきなGoogleライフを！！
kaji
こんにちは、デザイナーのカジです。
烏丸御池に引っ越して１ヶ月が経ちました。
「パスタが食べたい！」たまたまビルの向かいのイタリアンの
お店があったので同僚のＹさんと行きました。写真はＹさんが食べた女子らしいサラダランチ。
こういう緑の彩りって素適ですよね（でもたべたのはパスタです）
さて、
今年からブログの内容を盛り上げていきましょう！
ということなのでデザイナーらしくwebデザイン関連の話題を書いていきます。
通勤や寝る前のスキマ時間に「photoshopテクニックやらSassやら勉強・・・」な～んて思ってはいるのですが、参考書はなかなか重くて進まないです。
ですから通勤時間とかにスマホでwebデザインの豆知識といいますかお役立ちブログを読むだけでも少し賢くなった気がするのです。
あ、歩きスマホはだめですよ。歩くときは目をつむる。（あぶないですね笑）
っと話は逸れましたが、それでは
「webデザインの制作に役立つブログ」を私選ですがご紹介します。
Web Design Magazine
http://webdesignmagazine.net/
フリーランスのWEBデザイナーさんが、デザインやWeb制作に関する情報やインテリアやファッションなどの身の回りのデザインその時に興味のある事を発信しているブログ。
web以外のデザインも紹介されていています。
KoToRi Blog【コトリブログ】
http://kotori-blog.com/
WordpressやMovableType等のCMSのカスタマイズに関する事や、HTML,FLASH,プログラミング,サーバー関係まで。
パンダがうじょうじょ。
コリス
http://coliss.com/
CSS3やJavascript、フォントなど、Web制作に関する様々な最新記事を発信しているブログ。
CSS3やJavaScriptのことを調べるとたいていひっかってきますよね。
デザイン素材の話題も豊富です。
株式会社LIG [リグ]
http://liginc.co.jp/
社長を砂浜で埋める事で有名な株式会社LIGさんですね。
どーでもいい記事も多いですが、すごく役に立つ記事も豊富なので見ちゃいます。
驚異のPV数です。
![株式会社LIG [リグ]](https://www.sunatmark.co.jp/blog/staff/wp-content/uploads/2016/03/4.png)
その他webデザイン関連
（めんどうだから・・・というわけではないです。ブログ以外も）
http://weboook.blog22.fc2.com/
http://memo.goodpatch.co/
http://www.nxworld.net/
http://www.webcreatorbox.com/
http://ohako-inc.jp/uiux-japan/
http://muuuuu.org/
↑ムーオルグっていうんですね。知ってました？
以上です。次にお会いできるのは夏頃でしょうか。
次回をお楽しみに！
サマソニにいきたいけどお友だちがいないカジでした。
nishioka
どうも、ニシオカです。
約半年ぶりのブログ投稿ですが、つい最近、会社では大きなことがありました。
なんと、2月1日に事務所を移転しました！
事務所の移転といっても、最寄駅は1駅、歩いて15分程度しか離れていません。
ただ、前事務所は観光地街よりで修学旅行の学生さんや、海外からの観光客をたくさん見かけていましたが
新事務所は完全にビジネス街ですので、周りの雰囲気も大きく変わりました。
また、僕自身のやる仕事に変わりはありませんが、
仕事場が変わると、結構、いい気分転換になっています。
さらに、事務所移転のタイミングでメンバー構成も大きく様変わりし、
1月の終盤から2月の頭に一気に4人増えて、バイト・パートさんも含めると、総勢、15名となりました。
僕が入社してからの最高人数を更新しました。
事務所も変わり、メンバーも変わりましたので、心機一転、頑張っていければと思っています。
それでは。
kusa
こんにちは、日下部です。
3年ぶりの大晦日ブログです。
毎度ながら特に大晦日にも関係ない内容です。
2011年にGoogleの検索結果ページがSSL化されて久しいですが、
今年の夏、Yahoo!もSSL化されました。
GoogleAnalyticsを使用されている方は、
「これでさらに検索キーワードが取りにくくなる」
と嘆かれたと思います。
はじめ、
「検索エンジンがSSL化されることで計測対象のサイトへリファラが送られなくなり、
検索キーワードが取得できない」と考えていたのですが、
これは正確ではありませんでした。
単純にHTTPS→HTTPの遷移でリファラが送られないためであれば
・計測対象サイトがHTTPであれば、参照元のサイトの判別すらできない
・計測対象サイトがHTTPSであれば、キーワードは取得できる
はずです。
ですが、実際には、
計測対象サイトがHTTPであっても、参照元は判別できてますし
計測対象サイトがHTTPSであっても、検索キーワードは取得できません。
では、なぜ参照元は判別できるが検索キーワードは取得できないかというと、
検索結果をクリックすると、いちどHTTP環境の「リダイレクタ」と呼ばれる仕組みを経由して、
目的のサイトへ遷移する仕組みになっているためです。
リダイレクタがHTTP環境にあることで、目的のサイトがHTTPでもHTTPSでも
リファラは取得でき、参照元が判別できます。
また、意図的にリダイレクタのURLに検索キーワードが含まれないように
されているため、検索キーワードは取得できません。
対して、Facebookなどは、少し異なる方法で同様の機能をサポートしています。
Chromeなどのブラウザは、METAタグでHTTPS→HTTPのリファラの引き渡しを
許可することが出来るようになっており、この機能をサポートしている
ブラウザの場合は、直接リファラが渡されます。
具体的には、下記のようなMETAタグです。
<meta name=”referrer” content=”origin-when-crossorigin”>
IEの場合は、この機能をサポートしていないため、
Googleなどと同じく、HTTP環境のリダイレクタを経由するように
ブラウザによって動作を切り替えているようです。
何気なく使っている検索エンジンやAnalyticsの動作にも
いろいろな仕掛けがあって面白いですね。
今年も残り12時間余り、みなさまありがとうございました。
2016年もどうぞごひいきに。
おまけ：散歩中にみつけたもぐら。
yoshi
ご無沙汰しています。Yoshiです！
11月です！前回の投稿から8か月ぶり。やっとまわってきました。
皆様いかがお過ごしですか？
このブログを書くたびに、次回の投稿に向けて四季折々の
あんなこといいな 書けたらいいな。
が、あるのですが。何分にも順番が回ってこないので
ナマモノであるネタが次から次へとお蔵入りしていくのです。
とは言ったものの、社員みんな納期ラッシュの中すこぶる頑張ってます。
ご勘弁をば。
さて、冒頭の通り11月です。
ちょっとした報告なのですが、季節は遡って5月
会社近くの公園にて仔猫を保護しました。 近くに親猫の姿もなく、
隅っこでかなり怯えながら丸まっていました。
とりあえず会社へ連れて帰り、即席段ボールハウスで様子見。
のところが社内の猫好き集まる集まる。 もちろん会長も例にもれず興味津々。
仔猫からは激しい塩対応を浴びせられた社員達なのでしたが…。
さすがのnasshyさんは扱いに長けていたのか触っても怒られずにいはりました。
すごい。
そんな仔猫は自宅に連れ帰ってからもしばらくは警戒して飲まず食わずでした。
もちろん人が近いづいても後ずさり。
が、どうもこれまでの経験上、警戒心の強い子ほどかなーりの甘えたに成長する
傾向があるようで、そこまで心配もせず見守ります。
◆徐々に人にも慣れてきて…
かくかくしかじかで7月の終わり頃、申し出てくださった里親さんのところでの
トライアルを無事終えてはれて家族として迎えられました。
里親さんには本当に感謝です。
獣医さんからも手足も尻尾も長いね～と言われてましたが見事に
長～く成長したみたいです。
◆11月現在の様子
夜は家族と一緒のお布団で寝ているらしいですよ。幸せそうで何より。
元気いっぱいのやんちゃ盛りなので、クールで年配の先住猫とは
まだまだ相容れない仲らしいのですが、 体も長～く成長しているようですので、
どうぞ長～いお付き合いを。
yoshiでした。次にお会いできるのは何ヶ月後でしょう(笑)！！！
その時までさようなら！
◆余談◆ 滑り止め付靴下着用の会長（寝起き）
ありがとうございました。
nasshy
最近は昼と夜の温度差が激しいですね。
寒さに弱いなしろです。
すっかりご無沙汰してしまいました。
寒くなってきましたが風邪などひいていませんか？
みなさん、ソーシャルボタンってご存知ですか？
記事をシェアするあれです。
SNSボタンとかシェアボタンとかとも呼ばれるあれです。
当ブログにも各記事の一番下についてますね。
これを押してツイートしたりシェアしたりするとシェアされます。
(シェアするとシェアされる・・・ってｗ)
ボタンのとこにはシェアされた回数が出ます。
便利な世の中ですねｗ
さあ押して見ましょうｗ
さて、このソーシャルボタンに革命が起ころうとしています。
すみません、盛りすぎましたｗ
最初のお知らせが9月、正式発表が10月初めだったのでご存知の方もいると思いますが、Twitterさんのボタンから回数表示がなくなります。
そう、何百回、何千回シェアされても回数が出ません。
さあお試しを！ｗ
って、今はまだ出ますが11月20日からなくなるようです。
「たいしたことないやん」と思われるでしょうが、この回数表示が一つの指標になってたりします。
記事がどれぐらいシェアされてるのかがわからなくなるのです。
読んでくれた人の反応がわからなくなるのは寂しいですね。
なくなるのはTwitterさんだけなのでFacebookさんなどにはまだ出ますが。
あとはデザイン性の問題で、ボタンの上にフキダシみたいに出てるサイトさんとかよく見かけます。
あのフキダシがTwitterさんだけなくなるとかバランス悪すぎて軽く引きますね。
そうなると他のボタンからもフキダシなくさないといけなくなります。
結構影響あるんです。
実はこの回数表示、各SNSに対して取得しに行ってるんですが、それが意外と時間かかったりするため出さないところが増えてきています。
最近のWeb界隈では特に表示速度に重点が置かれています。
そのため時間がかかるところは、本当に必要なところ以外は無くすことが多いです。
何百回、何千回、何万回・・・もシェアされるようなサイトさんではあった方がインパクトありますが、そうでないと「まあなくても・・・」となったりします。
回数は出なくても実際シェアされてればいいですからね。
さあシェアを！ｗ
ではまた。
date
朝晩が少し涼しくなり、桃の旬もそろそろ終わりに近づいてきました。
どうも、桃好きのDateです。
去年くらいにネットで話題になって「やってみたい！」と思いつつも
なかなか機会が無かった「桃モッツァレラ」。
|
桃モッツァレラとは… 名の通り桃とモッツァレラチーズを合わせて食べるというもの。 |
「ウマい！」と絶賛する声が多かったので興味はあったのですが、
ちょっと桃がもったいないなぁ…と思うこともあり、なかなか実現には至らず…。
今年は桃を頂く機会が多かったので、先日思い切って試してみることにしました。
検索してみると色々出てきますが… まずはレシピ。
|
・桃 ・モッツァレラチーズ ・レモンの皮 ・岩塩 ・黒コショウ ・エキストラバージンオリーブオイル ・白ワインビネガー |
|
1：桃の皮を剥いて一口大に切る 2：切った桃の上にモッツァレラをちぎって乗せる。 3：軽く塩コショウを振る。 4：レモンの皮を削って散らす。 5：オリーブオイル、白ワインビネガーをまわしかけて完成。 |
果たしてお味は… (￣～￣ )
おぉ…これか！ という反面、こんなもんか… とも。
確かに桃とチーズの相性も良く、塩コショウが桃の甘みを引き立て、
レモンの香りもアクセントとなって良い。
が、しかし… 絶賛するほどでは。。 数口食べると飽きてしまいました。(-.-;)
失敗談も多く、ポイントは「オリジナルレシピ通りに作る」ことだそうですが、
今回はレモンの皮だけが無かったので、ポッカレモンで代用。
（でもこれだけではそんなに違いはないはず…）
※ちなみにオリジナルレシピはこちら
個人的には『桃はそのまま食べるのが一番』という結論でした(笑)
桃剥きはかなり上達しました！
ではまた。：D
50
はじめまして。初投稿の50です。
一度きにいると同じものばかり買ってしまいます。
フォション 宇治抹茶アイスティー。
フランスパリ フォションが極めた抹茶のおいしさ。
フランスパリ フォション？と思いながら飲んでみるとおいしい～。
銀座ラスク
チョコのしみ具合がいいかんじです。
最近、しょっちゅう購入してます。
sugi
もうすぐ祇園祭ですね～！そして夏がやってきます。
会長もぼちぼちシニアなので、通勤時の熱中症対策を検討中している、スギタニです。
久しぶりの投稿になったわけですが、
今回は「チャッピー」アイコンを作成できるアプリ「chappie」で、
事務所の人々の顔をチャッピー化してみました～！！
毎日顔を合わせているはずなのに、どうしてか。。。
なかなか難しいわけです。
よ～くよ～く思い出しながら作ってみたものの、
「ちょっと違うなぁ」「これは似てる！」
と、他のスタッフから修正が入った人もいました。
自分の持っている情報を、最大限に引き出したつもりではありますが、
どの顔がどの人かは、見てくださっている方のご想像にお任せします♪
全員分かった人はぜひご一報ください！
そして、ぜひぜひ皆さんもアプリで遊んでみて下さい。
http://groovisions.com/chappie/
会長～室内では帽子、取って下さいね！
