メディアクエリでPCとそれ以外のデザイン変えていたんだけど、 最近タッチデバイス大きいのも増えてhover要素がいろいろ挙動を邪魔するんで、 初めからPCなどは「:hover」で制御、タッチデバイスはクラスを付与して制御 で使い分けました。 //タッチデバイス判定 function isTouchDevice() { var result = false; if (window.ontouchst…

HTML5の追加されたarticleタグやsectionタグなども含めてタグの説明とテンプレートを作りました。 タグの解釈や使い方などがサイトの構成や人によってそれぞれ異なったり少し複雑な印象もありますが、より文書構造を明確にできるようになった分意識してマークアップしていくとユーザーにとっても読みやすいサイトが作れると思います。ただ単にSEO対策というだけではなく、コンテンツの構成を考えるためにも…

Diviを使ったサイトのメニューで不具合が生じてました。 ヘッダーの階層を持ったメニューがタッチデバイスだと、子階層を表示しないでそのままリンク先へ遷移してしまうようです。 Gitでなにやら解決策について話し合いがしてあるようだけどソースが確認できない！ 原因不明でかなり困った状況になりました。（他のDiviを使用したサイトでは起きないのでどこが原因でそのような状況になってしまったのか根本解決がで…

Header.phpかFooter.phpに以下のコードをコピペしてください。共通のインクルードファイルに記述することで全てのページに反映されます。 <?php global $template; $template_name = basename($template, ‘.php’); echo $template_name; ?>

2カラムのレスポンシブデザイン responsive3.htmlとresponsive3.cssを開いてください。 パソコン表示は900px以上とします。 パソコン表示は2カラムで左にメイン（500px）、右にサイド（300px）です。それより小さいサイズの場合は2カラム表示せず、横幅いっぱいに広げます。 では、実際に2カラム表示のレイアウトをCSSでしてみましょう。 floatを使う場合 メイン…

今ではパソコンだけでなくスマートフォンやタブレットと様々なデバイスがあり、最近ではデバイスに合わせて表示を最適化（モバイルフレンドリー）することが求められています。 その方法の1つとしてGoogleの推奨するレスポンシブデザインがあります。 スマートフォンが出始めた頃はそれぞれ別のファイルを用意して対応する「サーバーで振り分ける」方法が主流でしたが、CSS3の普及や通信速度や技術の向上により「CS…

今回はWorPressでまず始めに入れておきたいプラグインをざっとご紹介。   Custom Post Type UI カスタム投稿カスタムタクソノミーを使うなら、有無を言わさずこれです！もちろんfunction.phpで登録でも大丈夫ですが、WordPress管理画面でサクッと編集できるので面倒くさがりやな方にはオススメのプラグインです。   Advanced Custom …

WordPressでオリジナルのテーマを作成する場合色々なファイル一から用意したり、使いたい機能をfunction.phpに記述したりしなければいけません。一般的に必要なテーマで使う基本的なテンプレートファイルと役割やテーマの作成方法について説明します。