ロリポップのアップグレードにより、MovableTypeでエラー
ロリポップサーバーのスタンダードプランのアップグレードにより、MovableTypeで次のようなエラーメッセージが表示された場合の対処 install_driver(mysql) failed: Can't locate DBD/mysql.pm in @INC 新環境移設メ...
Zenbackサービス終了にともないシェアボタンを変更
Zenbackがサービス終了ということです。代わりになりそうなものがないので、以下の通りにFacebookとTwitterのみシェアボタンを設置しました。 まずにhead要素にOGP用の各種記述をお忘れなく。 <!-- ここからOGP（Open Graph Protoc...
Windowsと游ゴシックとChromeとfont-family（画像追加）
各ブラウザのレンダリングにほとんど差がなくなり、ベンダプレフィックスも必要なくなり、游ゴシックがWindowsでも採用され、Macとのフォントの違いに悩まされることもないと思いきや、Windows版Chromeの游ゴシックの問題がWebデザイナーを苦しめています。Webフォン...
font-sizeの指定はremで
文字の大きさ（font-size）の指定には悩ませられますが、 html { font-size: 62.5%; } body { font-size: 1.6em; } と、全体を指定しておいて、個々にサイズを変える箇所は、それぞれの要素やクラスにcss3から採用さ...
リセットCSSをやめてみる
ブラウザにはデフォルトのスタイルがあります。そのため、ブラウザごとに微妙に異なる表示となり意図したデザインが得られないことからリセットCSSやノーマライズCSSを適用してきました。 しかし、緻密なデザインであれば、これからしばらく必要になるのかもしれませんが、個人のブログが中心...
inputやtextareaにスタイルが適応されないとき
フォームのinputやtextareaにfontのスタイルを適応させようとしても適応されないことがあります。 どうやら、一部のブラウザは親要素から font-family や font-size を継承せずにシステムのデフォルトのスタイルが使用されるようです。 そんな場合...
CSS3の否定擬似クラス :not() を使ってみる
CSS3で採用された否定擬似クラス :not() を使ってみました。 jQueryを使用しないCSS3フルスクリーンスライドショーCSS3 Fullscreen Slideshowを書きましたが、その後暫くするとスライドショーが表示されなくなりました。 調べてみると、番号付き...
Font Awesomeを使ってみる
Webフォントにはまだ挑戦していないのですが、Webアイコンフォントのひとつである『Font Awesome』を試してみました。 1.読み込み方法 ダウンロードする方法もありますが、今回はCDNを使います。head要素内に次のコードで読み込ませます。 <link ...
番号付きリストをCSSとcounter()関数でデザインする
番号付きリストをCSSとcounter()関数でデザインしてみます。 HTMLは次の通りです。 <ol> <li>ピリオドつき <ol> <li>括弧つき <ol>...
jQueryを使用しないCSS3フルスクリーンスライドショーCSS3 Fullscreen Slideshow
Image 01re·lax·a·tion Image 02qui·e·tude Image 03bal·ance Image 04e·qua·nim·i·ty Image 05com·po·sure Image 06se·ren·i·ty CSS...