最近はレスポンシブコーディングも多くなり、コーディングする度にデザインに合わせて
毎度ちまちまコードを書いていくのも面倒なので、コピペして使えるパーツを載せていこうと思います。
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）
Googleアナリティクスを導入するお客様も増え、最近よくお問い合わせをいただく、
Gmailアカウントを作成しない、Googleアカウント作成方法を紹介します。
まずは、Googleアカウントの作成画面にアクセスして、赤枠で囲われた項目に必要な情報を入力します。
今回は、Gmailは使わないので、「ユーザ名を選択」の個所で「現在のメールアドレスを使用する」と書かれた、テキストリンクをクリックします。
このとき、入力するメールアドレス宛に本人確認のためのリンクが記載されたメールが届くので、必ず使用可能、または使用中のメールアドレスを入力してください。
全ての情報を入力し終わり「次のステップ」ボタンをクリックすると、プライバシーと利用規約が開きます。
開いた時点では「同意する」ボタンがグレーになっていて押せませんが、規約をスクロールすると青いボタンに変わります。
アカウント登録の確認画面
登録の確認方法は2通りあります。可能な確認方法を選択してください。●メールを受信できる携帯電話で確認する場合 / ●音声通話で確認する場合
・メールを受信できる携帯電話で確認する場合
携帯電話のメールアドレスを入力し 「コードの受け取り方法」の赤枠（テキストメッセージ（携帯電話のメール）を選択して、「次へ」ボタンをクリックしてください。
入力したメールアドレス宛に確認コードが届きますので、送られてきたコードを入力して「次へ」ボタンをクリックしてください。
・音声で確認する場合
受けることが可能な電話番号を入力し、「コードの受け取り方法」の赤枠（音声通話）を選択して、「次へ」ボタンをクリックしてください。
フリーダイアルから着信があります。音声でコードを読み上げられるので、必ずメモを取るか、確認コード入力欄に直接入力してください。
正しくコードが入力されると、メールアドレス確認画面に移動します。
登録したメールアドレス宛に確認メールが届いているかを確認し、記載されている赤枠のURLにアクセスして、登録を完了してください。
これでアカウントの作成が完了し、ようこそ画面が表示されます。
赤丸で囲ったところから、それぞれのサービスを利用できるようになっています。
さぁ！すてきなGoogleライフを！！
こんにちは、デザイナーのカジです。
烏丸御池に引っ越して１ヶ月が経ちました。
「パスタが食べたい！」たまたまビルの向かいのイタリアンの
お店があったので同僚のＹさんと行きました。写真はＹさんが食べた女子らしいサラダランチ。
こういう緑の彩りって素適ですよね（でもたべたのはパスタです）
さて、
今年からブログの内容を盛り上げていきましょう！
ということなのでデザイナーらしく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/
↑ムーオルグっていうんですね。知ってました？
以上です。次にお会いできるのは夏頃でしょうか。
次回をお楽しみに！
サマソニにいきたいけどお友だちがいないカジでした。
こんにちは、日下部です。
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年もどうぞごひいきに。
おまけ：散歩中にみつけたもぐら。
最近は昼と夜の温度差が激しいですね。
寒さに弱いなしろです。
すっかりご無沙汰してしまいました。
寒くなってきましたが風邪などひいていませんか？
みなさん、ソーシャルボタンってご存知ですか？
記事をシェアするあれです。
SNSボタンとかシェアボタンとかとも呼ばれるあれです。
当ブログにも各記事の一番下についてますね。
これを押してツイートしたりシェアしたりするとシェアされます。
(シェアするとシェアされる・・・ってｗ)
ボタンのとこにはシェアされた回数が出ます。
便利な世の中ですねｗ
さあ押して見ましょうｗ
さて、このソーシャルボタンに革命が起ころうとしています。
すみません、盛りすぎましたｗ
最初のお知らせが9月、正式発表が10月初めだったのでご存知の方もいると思いますが、Twitterさんのボタンから回数表示がなくなります。
そう、何百回、何千回シェアされても回数が出ません。
さあお試しを！ｗ
って、今はまだ出ますが11月20日からなくなるようです。
「たいしたことないやん」と思われるでしょうが、この回数表示が一つの指標になってたりします。
記事がどれぐらいシェアされてるのかがわからなくなるのです。
読んでくれた人の反応がわからなくなるのは寂しいですね。
なくなるのはTwitterさんだけなのでFacebookさんなどにはまだ出ますが。
あとはデザイン性の問題で、ボタンの上にフキダシみたいに出てるサイトさんとかよく見かけます。
あのフキダシがTwitterさんだけなくなるとかバランス悪すぎて軽く引きますね。
そうなると他のボタンからもフキダシなくさないといけなくなります。
結構影響あるんです。
実はこの回数表示、各SNSに対して取得しに行ってるんですが、それが意外と時間かかったりするため出さないところが増えてきています。
最近のWeb界隈では特に表示速度に重点が置かれています。
そのため時間がかかるところは、本当に必要なところ以外は無くすことが多いです。
何百回、何千回、何万回・・・もシェアされるようなサイトさんではあった方がインパクトありますが、そうでないと「まあなくても・・・」となったりします。
回数は出なくても実際シェアされてればいいですからね。
さあシェアを！ｗ
ではまた。
おはようございます。加地です。
蒸しムシ虫・・・暑い日が多くなってきましたね。
暑いだけではなく最近は夕方になると、ゲリラ豪雨にやられてる私です。
雨は大嫌いで自転車も大嫌いな私ですが、どうも避けて通れない試練がやってきました。
いままで娘２人の保育園の送迎は車で行っていたのですが諸事情により
私が自転車で送らないといけなくなりました。
まずい。20kgと10kgの娘２人を乗せて自転車なんてハードル高すぎる。
高校時代に何度も自転車で田んぼにはまったり坂道で転倒し怪我をしている私。
私自身も4歳のころ母の自転車の後ろにのって足をはさんで大怪我もしています。
かわいい電動自転車ならなんとかなるかも♪
と少し前向きに考えてみることにしました。
さて、話は変わりまして、ちょっとお仕事チックな話題も少しだけ。
今年に入ってレスポンシブなサイト制作が増えてきました。
とはいっても一般の方は「なにそれ？」的な感じでしょう。
レスポンシブwebデザインて何？
レスポンシブWEBデザインとは、PC・タブレット・スマートフォンなどのあらゆる画面サイズへワンソースで対応したWebデザインのことを言います。近年のスマートフォンやタブレットの急速な普及に伴い、大手企業をはじめとして導入が進んでいる注目の開発手法です。モバイルファーストだとgoogleが推奨しはじめてから、さらに加速しています。
私自身としては海外も含め素敵なレスポンシブサイトを見るのが電車内での日課になってきたので、
（なにしろスマホでみやすいので）いまの楽しみのひとつです。
ちゃんとホームページはあるしSEO対策もばっちり！ブログもしているからいいかーというサイトもまだまだ多いですが
今やタブレットやスマホがあたりまえの時代。買い物やネットもスマホが主流になってきているので
多少コストがかかっても「レスポンシブ対応」導入はおすすめです♪
どうも、にしおかです。
最近雨が増えて本格的な梅雨入りだなーと感じ、
通勤に傘が邪魔なんで早く梅雨明けしてほしいと思っている今日この頃です。
さて、日付的には1ヶ月ほど前のことですが
5月9日(土)にEC-CUBE3 勉強会＆コードリーディングに参加してきました。
6月に正式版リリース予定とのことで、β版を使っての勉強会でした。
http://www.ec-cube.net/product/info_3.php
によると、2系から3系への主な変更点は
内部機構の刷新、UIの刷新、全機能API対応とのことですが、
勉強会では内部機構の刷新に対する説明・コードリーディングが中心でした。
実際、コードを確認してみると、フレームワークの使用、
カスタマイズ・プラグインの作り方変更、テンプレートエンジンの変更など
2系から大幅に変わっていました。
自社プラグインのバージョンアップやらで避けては通れませんが
2系から3系へのバージョンアップはなかなか大変そうです。
ただ、3系では2系で発生していた同一処理を
カスタマイズする複数のプラグインがインストールされた場合、
後にインストールしたプラグインの処理が有効になってしまう
プラグインのバッティングの問題が大幅に改善されるようです。
また、個人的に面白そうだなーと思っているのは全機能API対応です。
6月の正式版リリース時にはどこまで対応するかは未定のようですが、
「商品ページまではEC-CUBEを使わずカート以降のみEC-CUBEにする」
というような使い方がこれまでより簡単になるかと思われます。
もうすぐ正式版のリリースとなりますが
β版で未確定の箇所も確定しているはずですので
次回勉強会があればまた参加できればと思います。
ではまた。
少し前まで夏だったような気がするのですが、気づけば、あっちもこっちもクリスマスモード。
久しぶりの投稿になりました、スギタニです。
先日、会長は非行犬飛行犬の撮影会に行ってきました。
まるで、途中で何かを思い出したかのような表情ですが、おそらくお菓子のことでしょう。
一生懸命走っている会長が、お菓子の事をふと思い出すように、
私も、
「あ！あの時の記事が読みたい！」
と、ふと思い出すこといが多いのです。
そこで、改めて最近便利だと思って使っているツール「pocket」(※Read It Laterから改名)をサクっとご紹介。
気になる記事やページに出逢ってしまったが、今は時間が無～い！！！
そんな時に活躍する、『あとから読む』サービスです。
パソコン、スマートフォン、タブレット等の様々なデバイスと連携できるため、
その場の状況に応じて使い分けるととても便利。
移動中はスマートフォンで記事を見つけ、あとからPCで読む。
仕事中にPCで見つけた記事を、移動中や通勤中にスマートフォン、タブレットで読む。
そして、うれしいことに、オフライン状態でも閲覧が出来るんです！（一部の情報を除く※動画など）
電車の中で電波が弱くて「表示されない～！！」ということも無くストレスも感じません。
UIも無駄無くすっきりとしているせいか、溜まった記事が並んでいても、なぜだかスッキリとして見えます。
（私もユーザーにそう思ってもらえるようなUIを作れるようになりたい！）
過去のコレクションを眺めて、どんな記事に興味を持ったのかも思い出せるところもお気に入りです。
もちろん過去の記事が役に立ったりすることもありました！
いろんなところでおすすめされているpocket。
わたしもおすすめです！
https://getpocket.com/
お久しぶりですyoshiです。
5月もほぼ半分が過ぎましたね。
半袖の季節到来！昨日の京都の最高観測気温は29.2度でした。
当初は30度越えと予測されていたので、思わず『惜しい』とも感じたのですが、
今30度越えしてしまったら、真夏をどうやって乗り切ればいいのかわかりませんね。
今年も暑くなりそうです。
紫外線対策や熱中症対策に心がけてくださいね。
さて！GW中は皆様いかがお過ごしでしたでしょうか？
ゆっくり休暇を過ごされた方や、お仕事に励んでおられた方など
まさに十人十色だと思います。
サンアットはカレンダー通りお休みさせて頂いたので、連休は最大4日間です。
身の回りでは最大11日連休というところも・・・！
大型連休を利用して国内・海外旅行に行かれた方もいらっしゃるのでは？
そこで、毎回写真撮影などでお世話になっているカメラマンのTさんより、
とっても素敵なサイトを教えていただいたので紹介します。
暮らすように旅しよう
世界192ヶ国、34,000都市に家がある
Airbnb
サイトに行くや否やすぐにサーチボタンが設置されています。
日程や人数が決まっていなくても、どこに行きたいか入力しクリックすると、
まさに世界192ヶ国、34,000都市にあるB&Bがヒットします。
宿泊地の所在地/価格/設備/オーナーさんの情報/利用者の声など細やかな
情報が記載されています。
興味をそそられるのは、宿泊先ひとつひとつに、利用者に楽しんでもらおうという
オーナーさんの様々な計らいが伺えるところです。
見どころについては、ここで説明するよりも実際に検索してみてください。
実際に旅行に行かなくても、見ているだけで空想旅行をしたような気分になって
十分楽しめるサイトです。
是非お試しください。
今回も最後まで読んでいただいてありがとうございます。
ではまた◎
日向ぼっこ中。寝ぼけています。
どうも。GWでようやくスキーシーズンが終わったDateです。
今回は地図のお話。
私が地図を見るときは、出かける前に確認する他に、ドライブなどに出かけて
帰ってきた後に「今日はここを通ったな…」など、復習として見る場合もしばしば。
ふと時間が空いた時にボ～っと眺めてることもあります。
先日、そんな地図好きな私のために(←?)GoogleMapsに新しい機能が追加されました。
360度撮影可能なカメラを積んだ車で世界を回り、クルマの入れない場所には自転車や
人が担いで練り歩き、いつでも手軽に世界の風景を見ることができる…
そんな１大センセーショナルだった「ストリートビュー機能」に、過去撮影された写真を
遡って見ることができる「タイムマシン機能」がプラス。
※ラストに横切るGoogleカーがデロリアンなのが、ちょっとツボ(笑)
ストリートビューの撮影は、2～3年に1回の頻度で行われ、東日本大震災の数日後、
震災前後の写真を公開したことをきっかけにこのプロジェクトが立ち上がったそうです。
今のところ数年の変化しか見ることができませんが、それでも時間を忘れて見入ってしまいます。
東京スカイツリー周辺の景色
……。
……。
あ、見入ってしまってました(笑)
ひとまず今回はこのへんで。(_ _)/
地図繋がりで、オススメのアプリを紹介。
場所がわかると海外のニュースが楽しくなります。（たぶん）
 |
あそんで学べる 世界地図パズル |