Category : Webデザイン

Androidでhr要素の表示がおかしい

No Image

ずっと気になっているのですがAndroidで当サイトの記事を閲覧するとhr要素(区切り線)がおかしいです。
なぜか線じゃなくて、高さを持った背景のような感じになってしまいます。
機種依存の問題なのでしょうか・・・

LightboxからPhotoSwipeに乗り換え

LightboxからPhotoSwipeに乗り換え

当サイトはHTML5やCSS3、レスポンシブデザインに対応するなど時代の流れに沿ってきた中、画像の拡大表示には依然としてLightboxを使ってきました。
ここだけはずっとデザインを初期から変えてなかったいなかったのですが、「時代遅れなのでは?」と最近考えるようになり、色々と同じようなスクリプトを漁っていました。
そこで見つけたのがPhotoSwipeというスクリプトです。

夏のWebデザイン変更祭2016

No Image

時々やってくるWebサイトのデザインを変えたい衝動に駆られて、デザインを少し多めに変更しました。
というより現在進行形でお見苦しいものを見せているかもしれません。
もともとそういうスタンスでやっていますので、本人はそんなに気にしてなかったりします(オイ
個人的にいっぱい変更したので「祭」です。

Google Adsenseの現在の状況

No Image

Google Adsenseに参加して、4,5ヶ月経っていますがどれくらいになっているのか一応解析したいと思います。
Google AdSense 収益最適化スペシャリストの方とも連絡を取って、助言を頂いたりしたんでちょっと前より良くなってると思ってるのですが。
仕事中に電話かかってきたんですけどね(´・ω・`)

PC用とスマホ用のレイアウト切り替えボタンをつくる

PC-スマホの切り替え

WPtouchを使っていた頃にはPC用とスマホ用のレイアウトを切り替えるボタンがありました。
レスポンシブデザインにしてからはいらないかなと思ったんですが、スマホ用のレイアウトではどうしても情報量が少なくなってしまいがちです。
そこでレイアウト切り替えボタンをjQueryで実装してみました

SyntaxHighlighterでCSS3とベンダープレフィックスに対応する

SyntaxHighlighter EvolvedでCSS3やベンダープレフィックスに対応する

私はWordPressでソースコードを表示するのにSyntaxHighlighter Evolvedを使っています。

ふとCSSのコードを書いた時、inline-blockやtransitionがハイライトされなかったんです。
色々試してみたら-moz-や-webkit-も対応していないようです。
どうやらSyntaxHighlighter自体、CSS3やベンダープレフィックスには対応してないみたいですね。
そこでソースコードをいじって無理やり対応してみました。
ゴリ押しではないので今後CSSのプロパティが増えたとしても大丈夫なようになっています。