iPhoneでデベロッパーツール(Webインスペクタ)を使う方法
ホームページのコーディングをする時、表示が崩れている箇所をすぐにチェック出来るデベロッパーツール。どこがおかしいのか簡単にチェック出来る上、CSSをブラウザ上で修正、コンソールなども確認出来る便利なツールですが、iPho…
Web制作
CSS
CSSで下線じゃなくマーカー風にテキストをハイライトする方法
テキストを目立たせたい時、よく文字サイズや文字色を変えたり、下線を付けたりします。 リアルの紙の場合、よく蛍光マーカーで色を付けたりしますが、あれをborderでは再現できません。 以前はbackground-image…
WordPress
WordPressの投稿に更新日を表示する方法
togetterでこんなまとめを見つけました。 ネットの記事は今後「誤った情報」が爆発的に増えるかもしれない、というお話が話題に「確かに思い当たる」 当時では「正しい情報」が、時間が経つにつれて「誤った情報」になるのは当…
CSS
CSSで3カラムや7カラムなどの横幅をぴったりにできる「calc関数」
レスポンシブデザインはもはや当たり前になっている今日このごろ。 皆がスマホを使っている今の時代。どんなサイトでもスマホから見られる可能性はあります。 どんなにあなたのサイトのターゲットとしているトラフィックがデスクトップ…
Web Design
WordPressのログイン画面のロゴと背景を変える方法
WordPressのログイン画面は通常、上のようなロゴ画像が表示されます。コーポレートサイトやお客様に渡すとき、上記のロゴだとデザイン的にもイマイチですし、コーポレートサイトであれば自社のロゴがあるので、デザインも合わせ…
jQuery
jQueryのスライダーをホームページに取り入れる時に注意したいこと
トップページなどでよく使われるスライド式に自動で画像が切り替わるスライダー。ローテーションバナーやカルーセルと呼ぶこともあります。 スライダーを複数のコンテンツや写真を見せるのに便利で、かっこよくも見えます。jQuery…
CSS
CSSで高さを固定せずli（div）を正方形にして並べる方法
写真をきれいに並べたい時は、僕はスクエア型(正方形)の枠を作って並べる時があります。 理由は縦長の画像と横長の画像が混在している時、段違いになってずれたりするからです。 普通、CSSで正方形にしようと思ったら横幅と高さを…
HTML
PhotoshopデータをiPhoneでリアルタイムで確認出来る「Adobe Preview」
Photoshopでスマホサイトのデザインを行う際、今までだったら Photosho → 書き出し → スマホに画像を転送 という手順を踏む必要がありました。一度だけ確認するほどのものならそれもいいですが、画像を差し替え…
Web制作
wp-adminの海外からのアクセスを制限する
先日、知り合いからこんな相談がありました。 「海外から何者かが、自分のサイト（Wordpress）にログインしようとしている形跡があって、なんとかしてほしい」 見ると確かに海外のIPでログインしようとした形跡がありました…