HTML5タグの簡単な説明とRYBE流マークアップテンプレート

HTML5の追加されたarticleタグやsectionタグなども含めてタグの説明とテンプレートを作りました。 タグの解釈や使い方などがサイトの構成や人によってそれぞれ異なったり少し複雑な印象もありますが、より文書構造を明確にできるようになった分意識してマークアップしていくとユーザーにとっても読みやすいサイトが作れると思います。ただ単にSEO対策というだけではなく、コンテンツの構成を考えるためにも…
Read MoreHTML5の追加されたarticleタグやsectionタグなども含めてタグの説明とテンプレートを作りました。 タグの解釈や使い方などがサイトの構成や人によってそれぞれ異なったり少し複雑な印象もありますが、より文書構造を明確にできるようになった分意識してマークアップしていくとユーザーにとっても読みやすいサイトが作れると思います。ただ単にSEO対策というだけではなく、コンテンツの構成を考えるためにも…
Read MoreDiviを使ったサイトのメニューで不具合が生じてました。 ヘッダーの階層を持ったメニューがタッチデバイスだと、子階層を表示しないでそのままリンク先へ遷移してしまうようです。 Gitでなにやら解決策について話し合いがしてあるようだけどソースが確認できない! 原因不明でかなり困った状況になりました。(他のDiviを使用したサイトでは起きないのでどこが原因でそのような状況になってしまったのか根本解決がで…
Read MoreHeader.phpかFooter.phpに以下のコードをコピペしてください。共通のインクルードファイルに記述することで全てのページに反映されます。 <?php global $template; $template_name = basename($template, ‘.php’); echo $template_name; ?>
Read More2カラムのレスポンシブデザイン responsive3.htmlとresponsive3.cssを開いてください。 パソコン表示は900px以上とします。 パソコン表示は2カラムで左にメイン(500px)、右にサイド(300px)です。それより小さいサイズの場合は2カラム表示せず、横幅いっぱいに広げます。 では、実際に2カラム表示のレイアウトをCSSでしてみましょう。 floatを使う場合 メイン…
Read More今ではパソコンだけでなくスマートフォンやタブレットと様々なデバイスがあり、最近ではデバイスに合わせて表示を最適化(モバイルフレンドリー)することが求められています。 その方法の1つとしてGoogleの推奨するレスポンシブデザインがあります。 スマートフォンが出始めた頃はそれぞれ別のファイルを用意して対応する「サーバーで振り分ける」方法が主流でしたが、CSS3の普及や通信速度や技術の向上により「CS…
Read More今回はWorPressでまず始めに入れておきたいプラグインをざっとご紹介。 Custom Post Type UI カスタム投稿カスタムタクソノミーを使うなら、有無を言わさずこれです!もちろんfunction.phpで登録でも大丈夫ですが、WordPress管理画面でサクッと編集できるので面倒くさがりやな方にはオススメのプラグインです。 Advanced Custom …
Read MoreWordPressでオリジナルのテーマを作成する場合色々なファイル一から用意したり、使いたい機能をfunction.phpに記述したりしなければいけません。一般的に必要なテーマで使う基本的なテンプレートファイルと役割やテーマの作成方法について説明します。
Read More