別冊webメモ

自分用リファレンス&アウトプット

remでフォントサイズ指定

css

CSS3から新しく追加された「rem (root em)」という単位で、フォントサイズを指定するのが便利です。 rem使用のメリット 従来の%やemは、親要素を基準にサイズが計算されます。なので、入れ子にすると親要素の影響をうけて、サイズが分かりづらくなってしまい…

モダンブラウザ用のclearfix 

css

floatで横並びのレイアウトをつくるときに、floatをかけた要素の高さを親要素が認識せずに、表示が崩れる場合がある。それを回避するためにかけるのがclearfix。 .clearfix:after { content: ""; display: block; clear: both; } コレを書いて、.clearfixをf…

サイトをつくるときは最初にreset.cssかnormalize.cssを読み込む

css

ChromeやSafariなど、ブラウザはそれぞれユーザーエージェントスタイルシートと呼ばれるデフォルトのCSSを持っていて、CSSを当てていないHTMLでもある程度読みやすく表示されるようになっています。 ただし、それぞれの値は異なるので、ブラウザごとに余白な…

AtomにいれたPackage2016

新しいPCにAtomいれたのでPackageもいろいろ追加してみた minimap minimap-autohide ソースコードの全体とどの辺にいるのかを表示してくれるパッケージと、 minimapを自動で表示/非表示してくれる。autoclose-html 自動で閉じタグ挿入。autocomplete-plus au…

AtomにいれたPackage

Atomデビューしました。 まださわり方もよくわかってないので、 ドットインストールの「Atom入門」見ながらポチポチしてます。Atom入門 (全13回)dotinstall.com Atomにいれると便利になるパッケージ を、教えてもらったのでメモ。linter linter-jshint linte…

テキストをドラッグ(反転)したときの背景色を変える

css

文章をドラッグ(反転?ハイライト?)したときの色はcssで変更できます。 背景色と文字色を設定すれば、ガラッと雰囲気がかわりますね。 ::selection { background:#eeff44; color: #009940; } ::-moz-selection { background:#eeff44; color: #009940; } …

「ええやん!」Facebookの言語が関西弁に対応。いいね!ボタンもええやん!に。

Facebookの言語に「日本語(関西)」が登場! 変えてみてやって言われてるので、 「よっしゃ」をポチットすると「ええやん!」モードになります。 ええやん!すると… 「今どんな気持ち?」→「なにしてるん?」 「いいね!」→「ええやん!」 「コメントする」…

Googleでblog検索したい

映画や本の感想をググるのにやっぱりblog検索は便利だと思うのです。 https://www.google.co.jp/blogsearch こちらはもう普通の検索になってしまっていました。 blog検索するには Google、ブログ検索を終了か? “tbm=blg”パラメータで引き続き利用可能 => ニ…

あのHTMLタグは何の略か知っておくと、タグの選択に迷いがなくなる。かも。

元の意味を知ると理解が深まるシリーズ。 省略されているHTMLタグの元の意味を調べました。 テキスト系タグはいくつかはしょってます。 HTMLタグ DOCTYPE = Document Type (Definition)(文書型の定義) html = HyperText Markup Language(HTML文書)div = …

iPhone6っていくらなの?

個人的に必要で買うつもりなのは、MacBook Airの11インチなんだけど、 iphone6をSIMフリーで買って、海外で使うのもいいな〜と夢が膨らんだので 財布的観点(重要)からApple商品を考えてみる。 iPhone6 SIMフリー Apple公式サイトからは、SIMフリーのiPhone…

ECサイトで一番大事なのは「うさんくさくない」ことだと思っている。

個人的に売上うんぬん以前の話で、ECサイトで一番大事なのは「うさんくさくない」ことじゃないかなーと思っている。それは 「このサイトは今も管理されているのか?」 「このサイトにお金をはらって大丈夫か?クレジットカードの情報を入力しても安全か?」 …

ECの売り上げは、「客数」×「単価」×「購入回数」で決まる。

EC

売上=「客数」×「単価」×「購入回数」という公式 お店の売り上げをアップするには!的な本を何冊か読むと、だいたいこの公式が出てくる。 実店舗だけではなく、もちろんECサイトにもあてはまります。ECで施策を施す時は、根拠なしにキャンペーンを打ったりす…

埋め込みyoutubeのカスタマイズ方法

ブログなどで動画を紹介するときに利用する、 youtubeの動画プレイヤーの見た目を、カスタマイズすることができます。 動画の埋め込みコードを取得 youtubeで埋め込みたい動画のページをひらいたら、 動画の下の部分、共有>埋め込みコードから動画のコード…

ライブシェイプを使うと、タブが簡単につくれる。

小ネタ。 Photoshopのライブシェイプを使って 簡単にタブの形をつくる方法。角丸の四角を描きます。角丸のリンクをはずして、 下2つの数値を0pxにします。 できあがり。作成後、角丸や縦横の大きさも変更できます。

Photoshopのライブシェイプで角丸などが設定できる属性パネルがでない時は

Photoshopのライブシェイプを使うと、 角丸や大きさ、色などを後から編集することができます。 この時に使うのが属性パネル。ただし、この編集モード、一旦選択をはずすと再度選んでも マスク表示になってしまいます。ライブシェイプの属性を編集したい時は…

webデザイン、横幅いくつでつくってる?

PCのwebデザインっていつも横幅何pxでつくってますか? 最近は画面にfit、レスポンスするサイトも多いけど、 あれはデザインデータどのぐらいのサイズでつくってるんだろう…気になります! Webサイトの横幅まとめ メジャーどころのサイトの横幅まとめがあり…

Googleのポケモンマスター認定書と名刺をもらう方法(たぶん)

今年のGoogleエイプリル企画を覚えていますか? Googleマップ上に出現したポケモンを150匹つかまえるアレです。その節は楽しませていただきました。 Googleマップ ポケモンで、150匹全部集めたらどうなるか - 別冊webメモ 実はあの企画、どうやらまだ続きが…

ワールドカップ仕様のGoogleさんアレコレ

W杯盛り上がってますかーー! 私は今朝も眠気に勝てませんでした。こんにちは。開催にあわせてGoogleさんも色々とW杯仕様になっているので 観察してみましょう。 青いペグマン 地味なネタからですが、おっ!となったので。 Googleマップのストリートビューを…

Facebookメッセンジャーの「いいね!」はサイズが選べる。

愛用しているFacebook Messengerがver.6.0のアップデート。 いいね!の大きさに変化が付けられるようになりました。大きさは3種類。大中小。 右下のいいね!ボタンを押す時間の長さで大きさが変わるようです。 押す時間が長いほど、大きないいね!になります…

URLだけで簡単ダミー画像づくり「Dynamic Dummy Image Generator」

サイトをコーディングしていく際に、 サイズだけ決まってるけど、仮画像って場合がままあります。サンプル画像を書き出してもいいけど、めんどくさいなー…そんな時に便利なのがこのサービス。 Dynamic Dummy Image Generator - DummyImage.com 好きなサイズ…

Movable Typeが復元できない

とあるMTで構築されたサイトから、バックアップをとって復元しようとした時の試行錯誤。 バックアップをとって復元するよ 公式にわかりやすくまとめられています。 バックアップと復元 : Movable Type 5 ドキュメント ポイント バックアップをとったMTと同じ…

紙幣の写った写真は、Photoshopで開けない

Photoshopの紙幣偽造防止機能、発動。 レジ周りを撮った写真の中に、大きめに紙幣が写り込んだ写真がありまして、 Photoshopで色調補正しようと開いたところ こんな警告が。 その後「銀行券とその偽造防止対策について」というサイトに飛ばされました。 Phot…

[iPhone]safariでボタンの角丸とグラデのスタイルを指定したい

ブラウザなどで見ると大丈夫なのに、iPhone実機で確認すると ボタンの角丸と色のスタイルがあたってない事案が発生。 iPhone Safariの仕様だった iPhone Safariのinputのsubmitボタン要素には 角丸とグラデーションが自動的に適用される、のだそうです。 解…

CSS3のグラデーションを無効化するには

css

cssでグラデがかかっている要素を、cssで打ち消すには 元が CSS の linear-gradient() 関数は、色の線形グラデーションを表す <画像> を作ります。この関数の結果は CSS の <グラデーション> データ型のオブジェクトになります。 ということなので背景画像を…

WordPressでカテゴリーごとにアイコンをつける方法

WordPressでカテゴリーごとに、アイコンやイメージを表示する設定。 <div><img src="<?php bloginfo('template_directory');?>/images/A.jpg" alt="a" /></div> <div><img src="<?php bloginfo('template_directory');?>/images/B.jpg" alt="b" /></div>

AppleGothicの和文フォント

きれいな形じゃないけど、 ポイントで使うとかわいいかもしれない。↓例(macかiPhoneで見てください) あっぷるごしっく。日本語で表示するとこうなる。

Googleマップ ポケモンで、150匹全部集めたらどうなるか

追記) Googleのポケモンマスター認定書と名刺をもらう方法(たぶん) - 別冊webメモ ======================== 今年のエイプリルもGoogleさんは本気でした。 Google Japan Blog: 来たれ!真のポケモンマスター (プロモーションムービーも本気) 「Googleは…

font-size:13pxのときの、相対フォント%リスト

よく使うけど、確認しないと覚えてないリスト。 基準文字サイズは13pxで指定しています。 body { font-size: 13px; } cssにコメントでメモしておくと便利。 /* Font-size list (base: 13px) 62% = 8px 70% = 9px 77% = 10px 85% = 11px 162% = 21px 239% = 3…

OGP制作に便利!facebook-ogpsd.psdとOGP画像シミュレータ

KAYACメンバーがつくった これで一撃!簡単にOGP画像をつくれる2つの秘密道具! が、便利だったのでメモ。↑リンク先で、正方形だったり長方形だったり調節が面倒な OGPの制作に便利なfacebook-ogpsd.psdがダウンロードできます。 そしてOGPシミュレータ。 画…

Contact Form 7でボタンを画像で設置したときに403になったら

Contact Form 7でフォームをつくった時に ボタンを画像で表示するようにタグを置き換えたところ 保存で403エラー。おろろ。 WAF(ウェブアプリケーションファイアウォール)を無効にする サーバはロリポップをつかってました。 左のメニューからWEBツール>WA…

はてなブログおみくじ2014

はてなブログおみくじ2014 ポジティブ!!

英語の勉強はじめました。

あけましておめでとうございます! WEBとまったく関係ないですが、英語の勉強はじめました。目標…とかはまだ決められてないのですが(TOEIC受けてみようかな) 英語できたほうがいいなと思う場面が何度かあったのでやってみます。ちなみに個人的英語力はセン…

GoogleにホストされているjQueryの使い方

サイト制作のときに入れてないことがないくらい毎回お世話になるjQuery。 Google Hosted Librariesでは、 よく使うjavascriptのライブラリをGoogleのインフラを用いて提供しており、 jQueryもGoogleからひっぱってくることで、自前のサーバに持たなくてよく…

WPのContact Form 7でフォームを設置するときにやること基本2つ

WordPressで簡単にお問い合わせフォームを設置できる 定番プラグイン「Contact Form 7」フォームを設置するときにやること基本2つをメモ。 自動返信メールの設定 お問い合わせしてもらった内容を自動返信で、送信者にも返しましょう。 お問い合わせを送った…

Gmailでスターの種類を増やす

おなじみのGmailのスター機能。 スターをつけると「スター付き」というフォルダに割り振られます。このスター、黄色の☆だけではなく、何個か種類を使い分ける事ができます。 どこいった?…って標準に装備されてた 最近また新しくGmailを使い始めたので、 こ…

Photosopのスタイルの順番を並べ替える方法

スタイルが便利 Photoshopのスタイルパレットを使うと、レイヤースタイルを保存することができます。 よく使うスタイルは保存しておくと効率的です。個人的にはサイトの制作時に使う色を、 先にカラーオーバーレイで登録しておいて使う事が多いです。 新規ス…

[ iOS7〜]apple-touch-icon(Webクリップアイコン)のサイズ

サイト用にfaviconをつくるときに、一緒にapple-touch-iconもつくってしまいましょう。 apple-touch-icon(Webクリップアイコン)とは webサイトへのショートカットを、スマホのホーム画面につくることのできます。*1 その際にアイコンとして表示されるのが…

macで不過視ファイルを表示・非表示する方法

.htaccessのような、頭に「.(ドット)」がついたファイルは 不過視ファイルといい、普段は表示されていません。basic認証をかけるために.htaccessを編集する際、必要になってくる 不過視ファイルの表示・非表示の切り替え方法です。 ターミナルを起動 アプ…

MT6で使えるメールフォームのプラグイン

Movable Type 6.0で動くメールフォームのプラグイン。 メールフォームプラグインV2.30の使い方 - The blog of H.Fujimoto ひとまず動いたっぽいのでメモ。

Movable Typeでカテゴリーアイコンを画像で表示させる

MTのblog記事毎にカテゴリーのアイコンを画像で出したかったので、その方法です。 カテゴリーを設定する 記事>カテゴリから画像を出したいカテゴリーを予め登録しておきます。 カテゴリーを画像で表示させるには、 カテゴリー名の横の()内「出力ファイル名…

Retinaディスプレイに対応したfaviconのつくりかた

faviconは16×16の一種類? どうせつくるなら、Retinaディスプレイにも対応させましょう。 脱・モヤッとアイコン! どのサイズでつくる? で、結局どのサイズでつくればいいのでしょうか。 下記のサイトに詳しくまとまってました。(ありがたい) ファビコン…

『SWITCH presents メディアアートとスタートアップ』 感想 #RAC2013

「六本木アートカレッジ」*1の 『SWITCH presents メディアアートとスタートアップ』 回に参加しました。スピーカーはメディア・アーティストの真鍋大度さん、 モデレーターはエンジニア・起業家の徳井直生さん。 真鍋さんといえば、カンヌのPerfumeパフォー…

投資家とスタートアップをつなぐSNS『AngelList』 #RAC2013

先日参加した「六本木アートカレッジ」の 真鍋大度さんと徳井直生さんのセッションで紹介されていた 『AngelList』がおもしろそうだったのでメモ。 投資家とスタートアップのマッチング 『AngelList』は投資家と投資をうけたいスタートアップのためのSNS。 …

MTタグをウェブページやエントリー内で使う 〜mteval編〜

前回、 MTタグをウェブページやエントリー内で使う 〜php編〜 で、モジュールをphp化して読み込むという手法を紹介しましたが、 こんなことしなくても、もっと簡単に表示する方法がありました。 ↓結論 こんなのあったんか!phpもプラグインもいらない! MTタ…

MTタグをウェブページやエントリー内で使う 〜php編〜

ウェブページってMTタグ使えないんですね。 ちょっとした記事のリストとか出すために、 インデックステンプレートでわざわざページつくるのもどうなのか。 ということで、phpをつかってインクルードで出してみました。 *1 方法 テンプレートモジュールを作成…

はてなblogでGoogle Fontsを表示させる(@importで反映されない場合)

Google Fontsを使う このblogだとサイドカラムのモジュールタイトルで利用しています。 簡単に文字の印象を変えることができるwebフォント、 欧文のみの利用なら、Google Fontsが導入しやすいです。無料。 Google Fonts こちらから。 Google Fontsで好きなフ…

はてなblogでコードを色付き表示したい

「シンタックス・ハイライト」と言うらしいです。 「はてな記法モード」に切り替え 設定>編集モードで、「見たままモード」から「はてな記法モード」に切り替える。*1 はてな記法でソースコードを書く ソースコードを「>||」「|| 行頭の >|| の2本のパイプ…

黄金比や4:3など縦横の比率を簡単に計算できる『web計。』

一般的に良く使われている縦横比を リアルタイムで計算してくれるツール『web計。』横300pxのサムネイルつくりたいけど、縦って黄金比だと何pxだっけ? みたいなときにササッと計算できて便利です。 ブックマークして使ってます。 計算できる比率 4:3 3:2 16…

blogはじめ

はじめました。 ちょっとしたことでも確認のために都度ググってたりしたので、 自分用リファレンス&アウトプットとして書いていけたら、と思います。 人生初の講演をしました - Over&Out その後 良い記事。