レスポンシブwebデザイン

覚書も兼ねてレスポンシブwebデザインについて

レスポンシブwebデザインの説明の一つです。

そもそも、レスポンシブWebデザインとは何か?

昨今PC、スマートフォン、タブレットPC、はたまたその他サイネージなど数多くのデバイスが登場している事を背景に、端末毎に合わせたページを作成する のではなく、単一のHtmlファイルで、CSSで各画面サイズ毎に対応したレイアウトを調整することによってマルチデバイスに最適化したWebサイトを作 ることができる技術になります。

例えば、スマートフォンユーザー向けのサイトというと、それまでは①各端末毎に合わせたページを作り、ユーザーエージェントという技術を用いてアクセスし てくる端末を判別し該当するページへ振り分け表示をさせるというものか、②PCサイトをスマートフォン向けページに自動変換するやり方が主流でした。

これに対し、レスポンシブWebデザインではブラウザのスクリーンサイズを基準にレイアウトを自動で切り替える仕組みになりますので端末毎にわざわざペー ジを作成する必要がなく、にも関わらず画面サイズが異なる端末でアクセスした際でもどのように表示させるのか最適化を踏まえた作りにする事が可能となりま す。

WordPress に付属しているテーマは、Twenty Eleven からレスポンシブWebデザインに対応しており、私は、Twenty Twelve でいろいろ確認をしてみたのですが、デバイスに合わせてよきに計らってくれるのはありがたい反面、モバイル端末で見切れや画像のアスペクト比が変わるという症状が出てしまいました。([nob] モバイル端末の表示
以下注意点です。

    • 画面の幅が狭くなっても表の幅が変わらないので表の右が見切れる。
    • レスポンシブ対応の表に変換するプラグインがあるので、それで対応ができるかもしれない。
  1. YouTube
    • YouTube の画像は画面の幅が狭くなると横幅は狭くなるが、縦の長さが変わらないので、アスペクト比が変わって縦長になる。
    • YouTubeの画像のサイズを小さくしておけばアスペクト比が変わることはないはずですが、画像が小さくなるので、PC で見た時には物足りないかも。
  2. マウスオーバーを使った画像
    • マウスオーバーを使った処理は画像のサイズを選べば、アスペクト比がおかしくなる確率は低くなりますが、YouTube の画像と同様、あまり大きくしない方が良いかもしれません。テーマに依存するので、きちんと対応する場合には一手間かかりそう。
    • サムネイルの幅が大きな画像の幅より狭くなるようにサムネイルの数を調整する。そうしないと、サムネイルが途中で改行され2段で表示されます。

レスポンシブWebデザインでホームページを作成する場合、端末によって画面のレイアウトが変化するので、まずはスマートフォンのような小さな画面で読みやすく表示できることを確認して徐々にサイズの大きな画面でも問題ないことを確認するという流れになるかと思います。

簡易的に確認するなら、ブラウザの画面の幅を狭くしてみるとレイアウトの変化がわかりますし、投稿前に画面サイズを変えてプレビューできるプラグインもあったと思います。(私はまだ動作確認していませんが)

BLOCKQUOTE: 引用・転載を表すタグ

一部の方には「釈迦に説法」ですが、WordPress の記事の編集画面で Blockquote (引用) の使い方の話です。

Blockquote-1

笑ころ試作のページに投稿の引用タグの記事が載っていたので補足のつもりで書いています。

「HTML/XHTML & スタイルブック」に載っていないので、いつもの Web検索で探してみました。
HTMLタグリファレンスを見ると次のように載っていました。

<BLOCKQUOTE>~</BLOCKQUOTE>で囲まれた部分が引用・転載であることを表します。
<BLOCKQUOTE>タグは、比較的長めの文章を引用・転載する際に使用します。 改行を必要としない程度の短い文章を引用・抜粋する際には、<Q>タグを使用してください。

Internet Explorer等の一般的なブラウザでは、<BLOCKQUOTE>~</BLOCKQUOTE>で囲まれた部分は 上下に1行分のスペースが挿入され、左右もインデント(字下げ)され、上下左右にスペースが空きます。

 

ただし、インデントさせることを目的に<BLOCKQUOTE>タグを使用するのは誤りです。 インデントが目的の場合にはできるだけスタイルシートを使用してください。 スタイルシートでは、<div style=”margin: 10px”>~</div>などと記述します。

ブログの場合には、Webサイトの記事の引用をすることがよくあるので、編集ボタンとして用意されているのかもしれませんね。
他には、こんな記事もありました。

<blockquote>タグを使って枠線を表示する方法が、いろいろなブログで紹介されています。

しかし、<blockquote>タグは本来「引用」のためのタグです。

引用以外の目的で<blockquote>タグを使用すると、
HTMLタグを見てブログを読んでいるGoogleのクローラーや視覚障害者用の読み上げソフトなどをダマすことになってしまいます。

 

via:  研Q5.文章を枠で囲む方法(HTML<div>タグのstyle属性で色、太さ、線種など自由自在に)

最後にもう一つ

鳩丸ご意見番 – なぜ BLOCKQUOTE でインデントしてはいけないのか

いろいろ勉強になりました。(勉強中?)

【追記】 Blockquote のスタイルが変更されているようなので、比較のために2つのテーマで同じ記事を書いてみました。

ファビコンを表示してみませんか

Webサイトのアイコンとして使われているファビコン(Favicon: Favorite icon(フェイバリット・アイコン:お気に入りアイコン)) を表示するプラグインを見つけて「のぶさんの実験室」のファビコンにフラスコのファビコンを設定してみました。(「のぶさんの実験」のタブの左にフラスコのアイコンが表示されるようになりました)
因みにファビコンが設定されていない場合には、点線枠の矩形が表示されます。(「ほめけん」、「のんびり行こう」のタブの左のアイコンです)

favicon-example

プラグイン: Favicon Rotator

http://wordpress.org/plugins/favicon-rotator/

ファビコンの素材は 16×16 pix の PNGファイルです。

子テーマ php ファイルの作成

先程投稿した テーマ編集用のエディタ  Advanced Code Editor で header.php に パンクズリストのプラグインの呼び出しの行を追加してみました。

「のぶさんの実験室」 のナビゲーションの左下にパンくずリストを表示しています。

php ファイルの作成、編集共にOK のようですので、兎組は子テーマの実習ができそうですね。

テーマ編集用のエディタ

テーマやプラグインを編集するためのエディタにもプラグインがあります。

子テーマの php ファイルを作成するためにエディタを探したところ、ファイルの作成やファイルのダウンロード、バージョン管理などができるエディタを見つけました。水爺さんが心配されていた ftp は不要かもしれませんね。

 Advanced Code Editor

画面はこんな感じ

editorjpg

使い方は、各自調べて下さいね。高機能なので遊び甲斐がありますよ。

インストール前に実物が見たいという方は、「のぶさんの実験室」 の管理者に登録します。

テーマファイルのカスタマイズ ~子テーマ~

「テーマ・ファイル(親テーマと子テーマ)のカスタマイズ(兎組の授業)」 で子テーマのstyle.css を見ておいてください とありますが、「見たよ」 だけでは足りないので、、子テーマのスタイルシートのコメントです。

●スタイルシートの構成

スタイルシートの先頭は次のようになっています。

/*
Theme Name: Child of TwentyEleven for Homekendayohn
Author: E.M.
Template: twentyeleven
*/

@import url(‘../twentyeleven/style.css’);

最初の5行はコメントですが、WordPress はこれらの情報を使うので必須です。

  • Theme Name: に子テーマ名
  • Template: に親テーマのディレクトリー名

@import url の行に、親テーマのスタイルシートの相対パスを書きます。
この後に親テーマのスタイルシートに加える変更を追加します。

●子テーマの振る舞い

WordPress は子テーマのスタイルシートを上の行から順に読んで行きます。
@import url 行は、そこに親テーマのスタイルシートが埋め込まれたと考えて下さい。

@import url 行が読み込まれると親テーマのスタイルシートの設定が反映され、続いて子テーマに書かれた設定が反映されます。もし同じ項目が2か所で定義されている場合には、後に書いた方が有効になります(上書き)。

●孫テーマはできるのか

親テーマから複数の子テーマは作れますが、孫テーマは?

多分できるはずと確認してOKでした。

●子テーマを作ってみる

サーバーのWordPress のディレクトリを直接編集するのは面倒なので、どこかにプラグインがあってもおかしくないということで探してみました。

One-Click Child Theme プラグイン

WordPress.org にも載っているのでリスクは少なそうですが、自己責任でお願いします。

子テーマを作ると、子テーマのディレクトリとその中に style.css が作られます。ファイルの内容はこんな感じ

/*
Theme Name:     childOf2011
Description:    
Author:         nob
Template:       twentyeleven

(optional values you can add: Theme URI, Author URI, Version)
*/

@import url(“../twentyeleven/style.css”);

Theme Name (childOf2011) は子テーマ作成時に入力。
Author(nob)は自動的に設定されます。

子テーマの php ファイルを WordPress の画面から作成する方法については調査中です。

Twenty eleven のナビゲーションを変えてみる

兎さん情報です。

スタイルシートの書き方が少しわかったので、Twenty eleven のテーマのナビゲーションの文字とバックグランドの色を変更してみました。ゆめさんのページは既に変更されていますね。

2011_NavBar_modification

IE と Mozilla Firefox は確認済みですが、他のブラウザやモバイル端末に対する修正はしていません。 リクエストにお応えして、Chrome も追加しました。

本来なら、子テーマで対応すべきところを Twenty eleven の style.css に変更を加えます。色は適当に変えて下さいね。変更される方は、変更箇所を元に戻せるように、元の行をコメントアウトして残しておくことをお勧めします。

変更箇所はこちら、(長いので Moreタグを使ってみました) 続きを読む

[nob] メニューバー(グローバルナビゲーション)の変更がうまくいかないので・・・

兎組の課題で WordPressのテーマの課題をやっていた時の事。

Twenty twelve のスタイルシート style.css を編集してメニューバーの背景と文字を変更してみたのですが、文字と文字の背景だけが変わっただけ(コードを読めば当たり前なのですが、、、)で、ボタンとボタンの間に隙間ができて思ったように行かず。スタイルシートって何? の状態だったので、その時は諦めて10日ほど放置しましたが、このまま引き下がるのは悔しいので、「HTML/XHTML & スタイルシート レッスンブック」を買ってきてリベンジすることにしました。

HTML+CSS

WordPress を使うには、スタイルシートの知識は必須のようですね。JavaScript より重要そう。

アクセスカウンター

兎さん向け情報です。

アクセスカウンターのプラグインがいろいろありますね。一般的にプラグインは入れすぎない方が良いのですが、興味のある方は、”WordPress”, “アクセスカウンタ” などのキーワードで検索して試してみてはいかがでしょうか。
なお、インストールは自己責任でお願いします。Cool

予約投稿

あまり使う機会はないと思いますが、予約投稿の方法が書かれた記事を見つけました。

投稿日時の指定(予約投稿)

http://www.adminweb.jp/wordpress/post/index17.html

方法は単純で、公開状態の 編集 を選択し公開日時を未来にすると、「すぐ公開」の表示が 「公開予定日時。。。」 に変わります。
会社のブログなら新製品の紹介やイベントの案内に使えそうですね。

このブログは、2013/7/22 22:20 頃書いて [公開] ボタンを押したのですが、公開日時を 2013/7/23 3:00 に設定しています。
うまくいくかな。