投稿者: ＰＣクラブ

CSSセレクタはスタイルを適用する対象を指定するものです、使用例を付けて説明します
　　（１）border
　　　　・border-width　…　線の太さ
　　　　・border-style　…　線の種類
　　　　・border-color　…　線の色
　　　　　　組み合わせて使います
　　　　・border-top　…　上のボーダー
　　　　・border-right　…　右のボーダー
　　　　・border-bottom　…　下のボーダー
　　　　・border-left　…　左のボーダー

　　（２）background
　　　　・background-color　…　背景色
　　　　・background-image　…　背景画像
　　　　・background-repeat　…　背景画像の並べ方
　　　　　　repeatで繰り返し、no-repeatで繰り返しなし、repeat-xで横方向、repeat-yで縦方向
　　　　・background-position　…　背景画像の表示位置（水平方向、垂直方向の順で指定する）
　　　　・background-attachment　…　背景画像のスクロール

　　（３）font
　　　　・font-style　…　イタリック体と斜体の指定（初期値は標準）
　　　　・font-variant　…　スモールキャピタルを指定
　　　　・font-weight　…　フォントの太さ
　　　　・font-size　…　フォントサイズ
　　　　・line-height　…　行の高さ
　　　　・font-family　…　フォントの種類

　　（４）padding（CSSでのレイアウト作成を参照）
　　　　・padding-top　…　上の内側の余白
　　　　・padding-right　…　右の内側の余白
　　　　・padding-bottom　…　下の内側の余白
　　　　・padding-left　…　左の内側の余白

　　（５）margin（CSSでのレイアウト作成を参照）
　　　　・margin-top　…　上の外側の余白
　　　　・margin-right　…　右の外側の余白
　　　　・margin-bottom　…　下の外側の余白
　　　　・margin-left　…　左の外側の余白

　　（６）list-style
　　　　・list-style-type　…　マーカーの種類
　　　　・list-style-position　…　マーカーの表示位置
　　　　・list-style-image　…　マーカーを画像で表示

CSSセレクタはスタイルを適用する対象を指定するものです、使用例を付けて説明します
　　（１）　*（アスタリスク）
　　　　 全ての要素にスタイルを適用する
　　　　　　* {color:red;}
　　　　　　　　全ての要素の色に赤色を適用する
　　　　　　p * {color:red;}
　　　　　　　　p（段落）として指定した要素全てに赤色を適用する

　　（２）　. （ピリオド）
　　　　指定したクラス名の要素にスタイルを適用する
　　　　　　.sample {font-size:18px; color:red;}
　　　　　　　　class=”sample”で指定した要素にサイズと色を適用する
　　　　　　p.sample {font-size:18px; color:red;}
　　　　　　　　<p class="sample"> にサイズと色を適用するが<div class="sample">には適用されない

　　（３）　# （シャープ）
　　　　指定したid名の要素にスタイルを適用する
　　　　　　　　idの場合は1つの要素にしか適用されない
　　　　　　　　idの場合はjavascriptやページ間の移動の際によく使われる
　　　　　　#sample {font-size:16px;}
　　　　　　　　id=”sample”で指定した要素にサイズを適用する

　　（４）   （スペース）
　　　　子や孫の要素にスタイルを適用する
　　　　　　　　セレクタを半角スペースで区切ると、ある要素の下の階層にある要素にスタイルを適用する
　　　　　　p strong {font-size:16px;}
　　　　　　　　pタグの中にあるstrong要素にサイズを適用する
　　　　　　.mago strong {font-size:16px;}
　　　　　　　　クラス名magoの中にあるstrong要素にサイズを適用する
　　　　　　p.mago strong
　　　　　　　　クラス名magoのp要素のなかにあるstrong要素にサイズを適用する

　　（５） > （不等号）
　　　　ある要素の直下の階層にある要素にスタイルを適用する
　　　　　　div.sample > a {font-size:18px;}
　　　　　　　　クラス名sampleの直下にあるa要素（リンク１）にのみサイズを適用する
　　　　　　　　　　<div class="sample">
                        <a href="#">リンク１<a/>
　　　　　　　　　　　 　<ul>
　　　　　　　　　　 　　　　<li><a href="#">リンク２<a/></li>
                           </ul>
　　　　　　　　　　<div>

　　（６） + （プラス）
　　　　隣接している要素にスタイルを適用する
　　　　　　h4 + p {color:red; font-weight:bold;}
　　　　　　　　h4の要素の隣にあるp（段落）のみに適用される
　　　　　　　　　　<h4>H4要素</h4>
　　　　　　　　　　<p>h4要素の隣です</p>　・・・・・　この要素にだけ赤色と太字を適用する
　　　　　　　　　　<p>h4要素の隣の隣です</p>

　　（７） ~　（～記号）
　　　　後ろにある要素にスタイルを適用する
　　　　　　h4 ~ p {color:red; font-weight:bold;}
　　　　　　<p>h4要素の前</p>　　　・・・・・　この要素には適用されない
　　　　　　　　<h4>H4要素</h4>
　　　　　　<p>h4要素の後</p>　　　・・・・・　この要素に赤色と太字を適用する
　　　　　　<p>h4要素の後</p>　　　・・・・・　この要素に赤色と太字を適用する

class属性とid属性を使い分けて要素を修飾します
　　・classの使い方
　　　　ｈｔｍｌには　<p class=“danraku“>見本</p>　と記述する
　　　　ｃｓｓには　.danraku { color: red; }　と記述する

　　・idの使い方
　　　　ｈｔｍｌには　<p id=”danraku”>見本</p>　と記述する
　　　　ｃｓｓには　#danraku { color: red; }　と記述する

　　上記の例では、単にピリオド記号とシャープ記号を使い分けているだけに見える
　　　　そして使用結果も同じ内容でなんら違いが現れてこない

classとidの違いは各々が果たす役割の違いになって現れてくる
　　・class
　　　　同じclass名を、１ページ中に何度でも使える
　　　　　　例えば段落（p）や文字種類(h1、h2）に使用する、何度でもページ中に現れてくる
　　　　　　何度でも現れるということは、サイト全体で文字の大きさなどが統一されることになる

　　・id
　　　　同じid名は、１ページ中に1度しか使えない
　　　　　　例えばheaderやsidebarやfooter等、ブックマーク（page-top）等、ページ中に１度しか現れない
　　　　　　一度しか現れないということは、修正箇所を素早く見つけられることになる

通常、記事を表示すると右側のサイドバーに便利なガイド類が表示される
　　ただ乱雑に意味の無い並びで表示されるので、全て削除する

ウィジェットを利用したり停止したりする
　　管理者画面　→　外観　→　ウィジェット
　　　　ウィジェット（便利な機能の集合体）としてＷＰが既に用意した機能が並んでいる
　　　　右側に並んでいる機能は現在有効化され稼動しているウィジェットです
　　　　不要なウィジェットを真ん中のエリアにドラッグする、これでウィジェットは使えなくなる
　　　　必要になれば、また右側に戻せばよい

注意すべき点
　　・パソコン
　　　　ＯＳや他のソフト
　　　　　　更新（update）情報が発表されたら素早く対応する
　　　　　　　　なるべく自動更新の手続きを行っておく

　　　　セキュリティーソフト、ウィルス対策ソフト
　　　　　　専門業者が扱っているソフトにしておく
　　　　　　　　なるべく自動更新の手続きを行っておく

　　　　ＸＰパソコン
　　　　　　２０１４年４月９日以降は使わない
　　　　　　　　他のＷｉｎdowsマシンにアップグレードさせて乗り換えるか
　　　　　　　　Ｕｎｉｘマシンに乗り換えるか

　　・スマートフォン／タブレット
　　　　アプリ
　　　　　　必要なアプリだけに絞ってダウンロードする
　　　　　　公式のアプリ配布元からダウンロードする
　　　　　　配布者（開発者）の情報を集めて自分で判断する
　　　　　　セキリティーソフトを必ずインストールしておく
　　　　紛失／盗難対策
　　　　　　一定時間経過後に自動的にロックが掛かる様にしておく

注意すべき点
　　・ホームページ（ウェブサイト）
　　　　全般
　　　　　　有名企業や省庁のホームページでも絶対安全とは限らないと考えておく
　　　　　　　　既にウィルス感染しサイトが汚染されている可能性がある

　　　　会員制サービス
　　　　　　無料だからと安易に登録しない
　　　　　　　　自分で安心できるまで、周りの情報を集めてから判断する
　　　　　　パスワードを使い回さない
　　　　　　　　一つ盗まれると、次々に芋づる式に悪用される

　　　　ＳＮＳ、掲示板等への書き込み
　　　　　　アドレス（リンク）のクリックは無闇に行わない
　　　　　　　　投稿者の今までの行為を確認してからクリックでも遅くない
　　　　　　個人情報は無闇に公開しない
　　　　　　　　名前、住所、電話番号等など

注意すべき点
　　・電子メール
　　　　送り主（送信者）
　　　　　　怪しい時には、送信者の名前とアドレスを納得するまで確認する
　　　　　　知らない相手からの間違いメールには返事をしない

　　　　内容（件名、本文）
　　　　　　緊急のメールでも、内容を納得するまで吟味する
　　　　　　本文のアドレス（リンク）のクリックは慎重に考えてからする

　　　　添付ファイル
　　　　　　添付ファイルは安易には開かない
　　　　　　　　決して自動での開封は行わない
　　　　　　知り合いから添付ファイルが送られてきた
　　　　　　　　送信者が偽装されていることも考えて、思い当たることが無ければメールを破棄する
　　　　　　セキュリティー業者が更新ファイルを送ってきたら
　　　　　　　　業者が更新ファイルをメールで配布することはないのでメールを破棄する

以下のサイトを紹介します（２０１３年１１月現在）
　　・情報セキュリティについての理解度チエックサイト
　　　　http://slb.jnsa.org/eslb/
　　　　　　個人の理解度チエックというよりも、企業等の組織全体での理解度がチエックされます
　　　　　　管理者登録と受講者登録が出来て、管理者には組織における正解率が表示されます
　　　　　　受講者の名前等は入力不要です

　　・企業組織の情報セキュリティ啓発・教育をサポートするサイト
　　　　http://www.ipa.go.jp/security/isec-portal/
　　　　　　オンラインの使いやすさとマイページで過去の実績と比較もできます
　　　　　　　　「５分でできる！自社診断」オンライン版が提供されています
　　　　　　　　　　オンラインで瞬時に診断結果が表示されます
　　　　　　　　「５分でできる！！情報セキュリティポイント学習」オンライン版が提供されています
　　　　　　　　　　１日１テーマ５分の学習を続けられます

　　・情報セキュリティポータルサイト
　　　　http://www.ipa.go.jp/security/kokokara/
　　　　　　国内の情報セキュリティ関連ツールや資料が満載です
　　　　　　セキュリティ対策や教育に関する資料が無料で手に入ります

上記のサイトを運営している団体を紹介しておきます
　　・ＩＰＡ（独立行政法人　情報処理推進機構）

　　・ＪＮＳＡ（特定非営利活動法人　日本ネットワークセキュリティ協会）

箇条書き
　　・一度書き込んだことは永久に残る可能性がある
　　・場所の情報と個人の情報がセットになると危険
　　・賞金当選メールには注意を払う
　　・イターネットカフェでは大事な情報（口座番号、パスワード等）は入力しない
　　・犯罪に一番ひっかかるのは中高年が多い
　　・これからは携帯・スマホがセキュリティーの脅威となる

ＨＰの作成時におけるＰＦ１２の便利な使い方について
　　ブラウザーがＩＥの場合は、「Ｆ１２ 開発者ツール」といったキーワードで検索すればよい
　　　　ＩＥ１１になって「根本的に再設計され強化された開発者ツール」になったと述べられています
　　　　数ある機能の中で「ＤＯＭ　Explorer を使って要素を検査し、レイアウトとスタイルを変更する」部分に着目する
　　　　任意のページでＰＦ１２のキーを押下する、直ぐに開発用画面に切り替わります

　　ブラウザーがGoogle Chromeの場合は、「デベロッパーツール」といったキーワードで検索すればよい
　　　　任意のページでＰＦ１２のキーを押下する、直ぐに開発用画面に切り替わります
　　　　もしくは、任意のページで「ctlr + Shift + I」を押下する、直ぐに開発用画面に切り替わります

　　元のページの上に重なって上記のような開発画面が出ればＯＫです
　　　　HTML文書を修正しても、CSS文書を修正しても直ぐに元のページに反映されます
　　　　こうやって目で即座に確認しながらＨＰ作成に専念できます

ＣＳＳセレクタの種類に依って優先順位が付けられる
　　詳細度の高いセレクタが優先される
　　　　・ＩＤセレクタ（＃）
　　　　　　ＩＤ（1つの要素）にスタイルを適用させる指定
　　　　・クラスセレクタ（．）
　　　　　　クラス（分類）に対してスタイルを適用させる指定
　　　　・タイプセレクタ（要素型セレクタ）
　　　　　　特定の要素にスタイルを適用させる指定
　　　　・全称セレクタ（ユニバーサルセレクタ）
　　　　　　全ての要素にスタイルを適用させる指定

　　セレクタの優先度が同じ場合
　　　　より後の方に記述されたスタイルの指定が優先される

　　優先順位をＴＯＰにすることができる
　　　　【!important】を指定する
　　　　(例）p { color: green !important; }

スタイルシートが反映される優先順位に付いて
　　・固定スタイルシート
　　　　 <link href=”base.css” rel=”stylesheet” type=”text/css” />>
　　　　　　rel属性の値を「stylesheet」にし、かつtitle属性を指定しない（通常の指定方法）
　　　　　　スタイルシートは、常に適用される

　　・優先スタイルシート
　　　　<link title=”優先スタイル” href=”basic.css” rel=”stylesheet” type=”text/css” />
　　　　　　rel属性の値を「stylesheet」にし、かつtitle属性でスタイル名を指定する
　　　　　　スタイルシートは、「固定スタイルシート」と共に優先的に適用される

　　・代替スタイルシート
　　　　<link title=”代替スタイル” href=”alt.css” rel=”alternate stylesheet” type=”text/css” />
　　　　　　rel属性の値を「alternate stylesheet」にし、かつtitle属性でスタイル名を指定する
　　　　　　通常は適用されない、ブラウザで切替えた際に、「優先スタイルシート」の代わりとして適用される

以下のいずれかの組み合わせで使われる
　　固定スタイルシート　＋　優先スタイルシート　　　title指定が無い場合
　　固定スタイルシート　＋　代替スタイルシート　　　title指定との組み合わせの場合

複数のＣＳＳファイルを用意して、好みのスタイルシートに切り替える
　　HTMLのheader部で使用するＣＳＳファイルを指定する
　　　　<link rel=”stylesheet” type=”text/css” href=”basic.css” title=”標準”>
　　　　<link rel=”alternate stylesheet” type=”text/css” href=”alt1.css” title=”代替1″>
　　　　<link rel=”alternate stylesheet” type=”text/css” href=”alt2.css” title=”代替2″>
　　　　　　　　【alternate】を記述することで外部からＣＳＳファイルを切り替えることが出来る
　　　　　　　　【title】で名前を記述することで、名前を使って切り替えるＣＳＳファイルを指定できる

ブラウザでの切替方法
　　ブラウザーの　表示　→　スタイル　と進み、表示されたtitle名を選択する

スタイルシートを切替える機能が使えるブラウザー
　　Internet Explorer８以降、Firefox、Operaなどのブラウザのみ
　　Google Chrome、Safariなどのブラウザには機能が見当たらない

参考：スタイルシートの優先順位を確認しておくこと

WordPressデータベースの自動バックアップ、自動最適化を行うプラグインをインストールする
　　データベース情報の閲覧、ファイル操作、復元、テーブル操作、SQLクエリ操作と多機能である
　　ＷＰのデータベース単位ごとに導入することにした
　　以下の操作は全て管理者権限で行うか確認すること

　　（１）プラグインの導入
　　　　管理者画面　→　プラグイン　→　新規追加
　　　　　　検索で【WP-DBManager】と入力し【プラグインの検索】ボタンをクリックする
　　　　　　「いますぐインストール」ボタンをクリック（サーバー更新のためパスワードが必要）
　　　　　　【WP-DBManager】の【プラグインを有効化】をクリック
　　　　　　これでインストールされたが、赤枠に囲まれたメッセージが出力される
　　　　　　　　”Your backup folder MIGHT be visible to the public”
　　　　　　　　”バックアップフォルダに他人からアクセスされる可能性がある、という意味です

　　　　ひとまずアクセス権への対応を後回しにして
　　　　　　ダッシュボードの左サイドに追加された【Database】について日本語化を優先させる

　　（２）日本語化への対応
　　　　【WP-DBManager 日本語版】を個人のサイトからダウンロードする
　　　　　　ＵＲＬ＝http://wp.mmrt-jp.net/plugin-japanizationproject/dbmanager/からダウンロードする
　　　　wp-content/plugins/wp-dbmanager/ の直下に
　　　　　　ダウンロードしたzipファイルに含まれる wp-dbmanager-ja.mo と wp-dbmanager-ja.po ファイルを入れる
　　　　これで日本語化される

　　　　※注意点
　　　　　　バージョンアップ等で【wp-dbmanager】ホルダー以下が変更される場合がある
　　　　　　日本語化がされていないと気付いたら、もう一度同じことを行えばよい

　　（３）【WP-DBManager】への設定
　　　　バックアップフォルダへのアクセス権に関して対応する
　　　　　　事前に【wp-content】の配下に【backup-db】ホルダーを作成してパーミションを【７７７】にセットしておく
　　　　【wp-content/plugins/wp-dbmanager】内にある 【htaccess.txt】を
　　　　　　【wp-content/backup-db】内へ移動させ、ファイル名を 【.htaccess】に変更する
　　　　赤枠が消え、データベース バックアップの設定が表示される

WordPressのローカル環境を構築することができます
　　Instant WordPressというソフトウェアをUSBメモリにインストールすれば簡単に構築できます

構成内容は（提供時期によってバージョンは更新されていきます）
　　WordPress３．２、Apache 2.2.15、ＰＨＰ5.3.2、MySQL 5.1.46
　　OSはWindows XP、VistaまたはWindows7
　　USBメモリ内に約２００MBのディスク容量の空きが必要
　　アンインストールはファイルを削除するだけ

１．ダウンロードする　　https://www.instantwp.com/

２．USBメモリ等に解凍して展開する

３．ＷＰをキックする

４．ＷＰの初期画面を確認する
　　

早速、ＷＰが使えるようになります

さらに、Apache、ＭｙＳＱＬ、ＰＨＰとＷｅｂプログラムの開発環境が無料で揃います

スマートフォンへの対応について整理しておく
　　スマホ対応において使われるサイト構築技術について記述する

　　（１）文字サイズを大きめに設定する
　　　　１４pt～１５ptにする、ＰＣサイトよりも大きめにする
　　　　　　外出先や移動中でも見ることができる大きさにする

　　（２）文字数を少なくする
　　　　表示可能な領域がＰＣと比べると小さいので、極力文字数を少なくする

　　（３）ボタンを大きくする
　　　　デザイン性のある大きなボタンや、画面の横幅いっぱいのボタンを配置する

　　（４）リンクはリスト化する
　　　　リンクが複数並ぶような時は、リスト化する
　　　　　　リスト化とはリンク項目に一覧性を持たせて並べることです
　　　　　　アイコン化して並べるのもリスト化の一方法です

　　（５）画像の使用を減らす
　　　　不必要な画像（ボタンやアイコンも含む）はＣＳＳ３を使うことにより極力減らす
　　　　　　ＣＳＳ３は角丸や影（シャドウ）の表現にも活かせる

　　（６）ブックマークを使用する
　　　　ブックマークを用意して、スクロールの代わりにページ内でジャンプし易くする

　　（７）文章を折りたたむ
　　　　記事は折りたたんで置き、必要に応じて開ける様にする

　　（８）メニューにはタブを使用する
　　　　画面遷移の状況が目に見えるので複数のコンテンツを上手にコントロールできる

　　（９）問合せ先や地図を用意する
　　　　機動性が高いといった特徴を活かして、電話番号や地図を載せて繋がりやすくする

　　（１０）ＳＮＳとの繋がりを意識する
　　　　数多くのコミュニティを図るために、ＳＮＳへ簡単に繋がる仕組みを設置しておく

　　（１１）位置情報を活用する
　　　　位置情報と連携させることによって、提供サービスの幅が広がる

スマートフォンへの対応について整理しておく
　　技術的な作成上の観点ではなく、デザインする際の基本的な考え方を記述する

　　（１）スマホ優先かＰＣ優先かを検討する
　　　　　　スマホ優先・・・移動中にアクセスされるか、戸外で使用されるか
　　　　　　ＰＣ優先・・・・じっくり家からアクセスされるので、内容に興味を持たせたり、画像を沢山用意して多彩な表現をするか
　　　　こういった点を考慮した上で、スマホ優先での対応を決定することにする

　　（２）常にシンプルな構造にする
　　　　通信環境は比較的改善されてはいるが、通信に必要なデータ量を多くしない
　　　　　　メニューやボタンは画像だけでなく、ＣＳＳを使いなるべくデータ量を少なくする
　　　　　　画面の表示要素をシンプルにする
　　　　　　　　フッターやサイドバーなどを思い切って無くすことも考える
　　　　　　　　便利さよりシンプルさを強調して、使いやすくする
　　　　サイトの階層を複雑にしない
　　　　　　一度の読み込みでできるだけ多くの情報が読み込めるように工夫をする
　　　　段組を使わない
　　　　　　横幅に限界があるので、サイドバーは設けない

　　（３）リンクは一目で分かるようにする
　　　　タッチパネル操作であることを考慮する
　　　　　　マウスポインタが表示されず、ロールオーバー（マウスオーバー）機能は使えない
　　　　　　　　マウスを文字の上に置くと、コメントが浮かび上がったり、文字の色が変わったりする機能
　　　　　　一目でリンクだとわかるように工夫する必要がある

　　（４）タッチ操作に最適な行間や余白をとる
　　　　タッチ操作が誤操作しない様に、文字や画像の行間を見直す
　　　　　　入力を求める場合には、キーボード入力しやすい工夫を施す
　　　　　　選択を求める場合には、選択しやすくボタン等にも配慮する

　　（５）リキッド（可変幅）でデザインする
　　　　縦長の画面と横長の画面の双方でアクセスされる、固定幅でデザインはしない
　　　　　　文節で区切って改行するのではなく、段落で区切って改行する
　　　　リキッド（可変幅）デザインにして、デザインが崩れていないかどうかをチェックする

　　（６）便利なソフトは使わない、見慣れた画面にする
　　　　Flashは使わずに代替手段を考える
　　　　　　可能であればアニメーションgifで代用する
　　　　　　動画をアップロードして、YouTube等の動画サイトへ繋げる
　　　　スマホのＯＳや標準アプリの操作性と一致させたデザインにする
　　　　　　操作の感覚がＯＳと似ていれば取っ付きやすくて分かりやすくなる
　　　　　　角丸で四角形のアイコンを使う、グラデーションの背景に大きなボタンを配置する

　　（７）ＨＴＭＬ５とＣＳＳ３を活用する
　　　　できるだけシンプルなデザインにして、ＣＳＳ３で表現力を高める
　　　　　　ＩＥは徐々に追い着いて来ているので、バージョンを気にする必要もなくなる

　　（８）画面のデザインをスホ用ＯＳに合わせる
　　　　スマホの操作性と一致させることによって、誰にでも簡単に操作に馴染んでもらう
　　　　　　角丸で四角形のアイコンを配置する
　　　　　　グラデーションの背景に大きなボタンを配置する

実際、ＰＣ用画面ににモバイル用の画面を切替えてみた
　　初めてということもあり、試行錯誤を繰り返しながら時間がかなり掛かった

　　いくら修正とテストを続けても一向に完成しないことに気付いた

　　レスポンシブなデザインにして、viewportを使えば
　　　　ＰＣ用でもモバイル用でも共有できるＨＴＭＬソースとＣＳＳソースが出来上がるのは分かった
　　　　これは技術的に可能だと言うことであって、必ずしも満足するモノに仕上がるとは限らない
　　　　双方を満足させようとしたら、時間が幾ら有っても足りないことに気付いた

以下のサンプルを使って説明します

スマホ画面

※※※　スマホの場合は左側の内容が画面いっぱいに表示されます
※※※　　　これ以上、表示項目を増やすと画面が煩雑になると思われた
※※※　パソコンの場合は右側の画面がスカスカ状態で表示されます
※※※　　　かといって表示項目を増やせばスマホ画面が煩雑になってしまう

※※※　要するに、それぞれに適した画面を個別に作成するのが一番良くて
※※※　　　作成者は効率よく作成でき、ユーザは使い勝手が良くなると分かりました

以下のように方針を決めて今後は対応する
　　スマホ対応の進め方（方針編）を参照してください

実際にHTMLやスタイルシートを変更して、どういった画面表示になるかを試してみる
　　基本方針としてはＣＳＳの変更のみで対応することにする

切替え作業に着手する前の状態は以下の通り
　　横幅を固定し、２カラムで作成したサイトを切替えの対象とする
　　最上段はheader部、中央はmain部と右横にsidebar部、最下段はfooter部となっている
　　横幅８００pxの固定幅で定義している

１．スマホの試行テストを開始する
スマホの表示をテストする
　　・違和感の有る画面が表示される
　　　　８００pxの固定幅画面全体を忠実にスマホ画面に表示する
　　　　　　文字は小さくて読みづらい、ピンチアウト（拡大）操作すれば読めるようにはなる

ＨＴＭＬを修正する（全ページのheader部の修正となるが、限定的なので方針内とする）
　　・ＨＴＭＬに【viewport】を追加する
　　　　　<meta name=”viewport” content=”width=device-width,initial-scale=1.0″ >

スマホの表示をテストする
　　・違和感の有る画面が表示される
　　　　【initial-scale】を指定したにも関わらず、数倍に拡大されたものが表示される
　　　　　　sidebar部はオーバーフローしmain部の下方に回りこんで表示されている
　　　　　　文字は小さくて読みづらい、画面下方にはスライドバーが表示されている
　　　　ピンチイン（縮小）操作すれば読めるようにはなる、画面下方のスライドバーも見えなくなる

スマホ用のスタイルシートを用意する
　　・ＨＴＭＬに【link】を追加し、新たにスマホ用ＣＳＳを指定する
　　　　<link rel=”stylesheet” href=”css/smart.css” media=”screen and (max-width: 500px)” type=”text/css”/>
　　　　従来のＰＣ用ＣＳＳ定義の行の次に挿入する
　　　　　　共通のスタイルシートを先に、個別のスタイルシートを後に定義する
　　　　　　　　※ｌｉｎｋ命令と@import命令の読込み順位は不明、だが経験値としてこの順でないといけない

　　・ＣＳＳファイルを新たに用意する
　　　　【@import】命令で共通のスタイルシートを呼び出しておく
　　　　【width】で定義してある固定幅の値を１００％と上書き訂正する（当然複数箇所の対応となる）

スマホの表示をテストする
　　・違和感の有る画面が表示される
　　　　違和感は有るが、ＨＴＭＬとＣＳＳの値が反映され始めていると確信する
　　　　後は、ＣＳＳの微調整を繰り返して行い、気長に表示画面をスマホ用にするだけとなる

修正手順を整理しながら、少しづつ進める（実際には、行きつ戻りつの試行錯誤を何度と無く繰り返す）
　　・ＨＴＭＬの修正は以下の様にする・・・・・・表示幅の大きいモノから順に並べて定義する
　　　　<meta name=”viewport” content=”width=device-width,initial-scale=1″ / >
　　　　<link rel=”stylesheet” href=”css/pc.css” type=”text/css” media=”screen and (min-width: 1024px)”/>
　　　　<link rel=”stylesheet” href=”css/tablet.css” type=”text/css” media=”screen and (min-width:768px) and (max-width:1023px)”/>
　　　　<link rel=”stylesheet” href=”css/smart_l.css” type=”text/css” media=”screen and (min-width:480px) and (max-width:767px)”/>
　　　　<link rel=”stylesheet” href=”css/smart_s.css” type=”text/css” media=”screen and (max-width:479px)”/>

　　　　値の設定はスマホは320px x 480px、タブレットは768px x 1024pxと想定している

　　・ＣＳＳの修正は以下の様にする
　　　　【width】を１００％にする、画面横幅いっぱいに表示されると想定する
　　　　【background-color】を使って各ＣＳＳごとに色を変えた、ＣＳＳ定義の反映状況の確認に使用する
　　　　　　HTMLの記述やＣＳＳの定義に自信が無い初期段階での表示テストには有効であった

スマホの表示をテストする
　　　　縦にして表示すると
　　　　　　特定のブロックだけが右に飛び出している
　　　　　　背景の色を見て、修正した縦型ＣＳＳが反映されていると確信する
　　　　横にして表示すると
　　　　　　画面からはみ出さずにピッタリと収まっている
　　　　　　文字の大きさがアンバランスな感じ、途中で切れている部分もある
　　　　　　背景の色を見て、修正した横型ＣＳＳが反映されていると確信する
　　　　縦で表示してから横にすると
　　　　　　文字も大きくなり、画面からはみ出してしまう、ピッタリ収まっていたのに・・・・かなり長時間悩んだ
　　　　　　　　収まらなくなった原因は【inirtial-scale】はページを読み込んだ時のみ有効と分かる
　　　　　　　　読み込んだ後で縦横を変化させても、ページの再読み込みは行わないため
　　　　　　　　320px分を480pxにして表示したため、１．５倍の大きさになって表示されたと分かる

　　ここまでのテストで基本的な動きが保障されたので、後はＣＳＳの微調整だと割り切る
　　　　デバイスの表示幅の範囲に合わせて最適な固定幅を定義をしたり
　　　　デバイスの物理属性に合わせて最適なＣＳＳを選んだり
　　　　試行テストの種類にはまだ先がある、が一旦ここで打ち切ってＣＳＳの微調整を行って収束させる

２．タブレットの試行テストを開始する
タブレットの表示をテストする（８００pxの固定のまま）
　　　　横にして表示すると
　　　　　　画面からはみ出さずにこじんまりと中央に収まっている
　　　　　　背景の色は、タブレット用に指定した色ではなくて、ＰＣ用の色が反映されている

　　タブレットはＰＣ用のＣＳＳで賄えると判断し、タブレットのテストは終了させる

モバイル端末用に表示を切替える（試行編、対応編）も必ず読んでください

ＰＣサイトをモバイル端末用サイトに変換する方法
　　・ＷＰで構築したサイトはプラグインを使って切替える方法
　　　　【WPtouch】等のプラグインを使って、ＰＣサイトを変換する
　　　　PCサイトとのデザインの統合が取りにくい
　　・ＰＣサイトをサービスを使って切替える方法
　　　　【shutto】等のサービスを使って、ＰＣサイトを変換する
　　　　PCサイトから、パーツやコンテンツをドラッグアンドドロップして簡単に構築できる
　　・レスポンシブWebデザインへ切替える方法
　　　　スクリーンの横幅に合わせてスタイルシートを切り替える方法、手軽に対応できる
　　　　CSS3のメディアクエリを使って、ＰＣサイトを変換する
　　　　端末に合わせて、ファイルサイズやユーザインタフェースが最適化されるわけではない
　　・スマホ向けフレームワークを使って再構築する方法
　　　　オープンソースのスマホ向けフレームワークを利用して再構築する
　　　　【jQuery Mobile】等を使って、ＰＣサイトを変換する
　　・HTML5とCSS3で新たに構築する方法
　　　　モバイル端末用のサイトをゼロから構築する、ＰＣサイトは残す
　　　　デザインやレイアウトの自由度が最も高く、いちばん習得しやすい方法
　　　　ＰＣサイトと更新の同期をとる必要が発生する

「レスポンシブWebデザイン」での方法を記述する

ＨＴＭＬソースを修正する（その１）
　　HTMLヘッターのタグ部分に【viewport】を設定する
　　デバイスの横幅で表示する、という意味である

　　モバイル対応を施さないと
　　　　何も対応せずにPC 向けのサイトを表示すると、９８０pxの前提で表示するので
　　　　結果として、文字が小さくなって表示され読みにくくなる

　　デバイスの横幅で表示すると
　　　　<meta name=”viewport” content=”width=device-width”>
　　　　横向きにした時に、縦向きの画面を横に引き伸ばして表示しようとするので
　　　　結果として、表示される文字数は同じで、各文字が拡大表示され読みにくくなる

　　横向きの時は一行の文字数を増やすと
　　　　<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”>
　　　　横向きにした時に、横に引き伸ばさずに等倍（１．０）で表示するので
　　　　結果として、横１行に表示される文字の数は多くなる
　　　　但し、ピンチによる拡大・縮小ができないという大きな弱点が生じる

　　ピンチを可能にする
　　　　<meta name=”viewport” content=”width=device-width,initial-scale=1.0″ >
　　　　ピンチは可能で横向きにした時に１行の文字数も増える

　　最後に
　　　　文字のサイズを固定化したいなら、CSS に次の様に指定する
　　　　　　body {
　　　　　　-webkit-text-size-adjust: 100%;
　　　　　　}

ＨＴＭＬソースを修正する（その２）
　　外部スタイルシートをLink要素と【media】を用いて互いに適用させる
　　　　<link rel=”stylesheet” href=”css/smart.css” media=”screen and (max-width: 500px)” />
　　　　<link rel=”stylesheet” href=”css/tablet.css” media=”screen and (min-width: 501px) and (max-width: 800px)” />
　　　　<link rel=”stylesheet” href=”css/style.css” type=”text/css” />

　　　　１行目は、最大５００px（４８０pxのスマートフォンとする）の場合のＣＳＳを指定する
　　　　２行目は、５０１px～８００px（タブレットとする）の場合のＣＳＳを指定する
　　　　３行目は、それ以上（ＰＣとする）の場合のＣＳＳを指定する

ＨＴＭＬソースを追加修正する（その３）
　　画像の制御などは横幅に左右されるので、正確な対応が必要である
　　　　画像の横幅を指定しなかったり、１００%で指定する等等
　　　　対応しないと、横スクロールしようとするので見難くなる

スタイルシート（ＣＳＳ）を修正する
　　フレキシブルレイアウトを適用する場合には
　　　　要素の単位を%で指定したり、最小幅と最大幅を指定して微調整を図る

フロートを使った場合の配置ルール
　（１）左にフロートされたボックスの左外辺（マージンがある場合はマージンの左辺）が
　　　包含ブロックの左辺より左側にあってはならない
　　　　　同じ事が右にフロートされたボックスにも当てはまる
　　　　　つまり包含ブロックからははみ出ないということ

　（２）左にフロートされたボックスの後ろに、別の左にフロートさせたボックスがある場合
　　　後ろのボックスは前のボックスの右側に配置されるか、下に配置されなければならない
　　　　　同じ事が右にフロートされたボックスにも当てはまる
　　　　　右に空いてるスペースにより、収まりきれれば右側に、収まりきれなければカラム落ちになるということ

　（３）左にフロートされたボックスの右外辺（マージンがある場合はマージンの右辺）が
　　　右側にフロートされたボックスの左外辺より右にあってはならない
　　　　　同じ事が右にフロートされたボックスにも当てはまる
　　　　　フロートしたボックス同士は重ならないということ

　（４）フロートされたボックスの上外辺は
　　　包含ブロックの上辺より上にあってはならない
　　　　　包含ブロックからははみ出せないということ

　（５）フロートされたボックスの上外辺（マージンがある場合はマージンの上辺）は
　　　それ以前の要素が生成したブロックボックス、またはフロートボックスの上外辺より上にあってはならない
　　　　　２番目にフロートしたボックスが、先にフロートしたボックスの上辺より上にくることはないということ

　（６）フロートされたボックスの上外辺（マージンがある場合はマージンの上辺）は
　　　それ以前の要素が生成したボックス内の行ボックスの上辺より上にあってはならない
　　　　　２カラムレイアウトで考えれば分かりやすい

　（７）左にフロートされたボックスの後に、別に左にフロートされたボックスがある場合
　　　後ろのボックスの右外辺が包含ブロックの右辺より右にあってはならない
　　　　　同じ事が右にフロートされたボックスにも当てはまる
　　　　　包含ブロックからははみ出すことはできない、幅が入りきらなければ下にレイアウトされるということ

　（８）フロートされたボックスは出来る限り上に配置されなければならない
　　　　　余分な空白はできずに、可能な限り上に配置されるということ

　（９）左にフロートされたボックスは、出来る限り左側に配置されなければならない
　　　右にフロートされたボックスは、出来る限り右側に配置されなければならない
　　　　　後に続くフロートされたボックスよりも、優先的に上方に配置される
　　　　　　　カラム落ちするのであれば、後から配置された方が下に、先に配置された方が上に配置されるということ

　（１０）フロートされたボックスに clear プロパティーが適用される場合
　　　そのボックスの上辺は
　　　　　　「clear:left」の場合はそれ以前の全ての左にフロートされたボックスの、
　　　　　　「clear:right」の場合はそれ以前の全ての右にフロートされたボックスの
　　　　　　「clear:both」の場合は左右両方にフロートされたボックスの
　　　　　下外辺よりも下に配置されなければならない
　　　　　クリア したボックスは、フロートしたボックスよりも下に配置されるということ

表示対象のデバイスを指定する
　　【media】要素は、ブラウザの解像度に合わせてCSSを呼び出すために使用する
　　主なデバイスタイプとして【screen】、【print】と双方を含む【all】、これ以外は動作しないブラウザがある

メディアクエリー一覧
　　「width」は、ウィンドウの横幅
　　「height」は、ウィンドウの縦幅
　　「min-width」は、最小ウィンドウの横幅
　　「max-width」は、最大ウィンドウの横幅
　　「min-height」は、最小ウィンドウの縦幅
　　「max-height」は、最大ウィンドウの縦幅
　　「device-width」は、画面の横幅
　　「device-height」は、画面の縦幅
　　「min-device-height」は、画面の最小の縦幅
　　「max-device-height」は、画面の最大の縦幅

論理演算子一覧
　　「and」は、「それと」の意味
　　「,」は、「または」の意味
　　「not」は、「ではない」の意味
　　「only」は、古いバージョンのブラウザに適用させないため

Webデザインのレイアウトをまとめる
　　レスポンシブwebデザイン(Responsive Web Design)
　　　　一つのソースでディスプレイの幅に合わせてデザインを最適化する方法
　　　　CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更する
　　エラスティックレイアウト(Erastic Layout)
　　　　要素の単位をemで指定する
　　　　emは1文字分の幅なので文字の大きさを自由に変えてレイアウト幅を変更する
　　リキッドレイアウト(Liquid Layout)
　　　　要素の単位を%で指定する
　　　　ブラウザサイズによって相対的・可変的に幅が変わり、サイズに合わせて情報を提供できる
　　フレキシブルレイアウト(Flexible Layout)
　　　　リキッドレイアウトと同じで要素の単位を%で指定する、最小幅と最大幅を指定する
　　　　最大値と最小幅を指定してるため可読性やレイアウトの崩れをコントロールできる
　　固定幅レイアウト(Fixed Layout)
　　　　要素の単位をpxで指定する
　　　　レイアウト幅が固定され、意図した通りのレイアウトで表示される
　　グリッドレイアウト(Grid Layout)
　　　　架空の縦横線を下地とし、そこに出来たブロックごとに文字や画像などの要素を配置する
　　　　整った安定感のあるレイアウトになるが、多くのサイトで使われているので見慣れたレイアウトになる
　　可変グリッドレイアウト(Fluid Grid Layout)
　　　　グリッドベースのpxを%に変えて、グリッドの仕組を可変レイアウトにする
　　　　ブラウザサイズに合わせて整った要素が再配置されるので、正確に情報を伝えられる

viewportのパラメータ記述

注意事項
　　widthの初期値は、ブラウザにより異なる場合がある
　　複数のプロパティを指定する場合は、カンマ（, ）で区切る

表示領域設定の必要性
　　デフォルトの状態では、幅980pxの領域にWebページが表示される
　　スマートフォン向けに作られたページ（一般的には幅320px）では、無駄に小さく表示されて横幅が余る
　　　　可変幅にしている場合は横に伸びてしまう

　　スマートフォン向けに最適化したい場合
　　　　meta要素（viewport）を使って表示領域を設定する
　　　　　　領域の幅やズーム倍率を調整することで、スマートフォンに適した大きさで表示される様になる

widthプロパティについて
　　領域の幅を設定する
　　デフォルトの幅は９８０、範囲は２００～１０，０００
　　値にはピクセル数、または【device-width】を指定する
　　　　meta name=”viewport” content=”width=320″
　　　　meta name=”viewport” content=”width=device-width”
　　　　　　【device-width】を指定した場合は、初期のズーム倍率が1 になる
　　　　　　【initial-scale】で変更することも可能

heightプロパティについて
　　領域の高さを設定する
　　デフォルトの高さは、【width】と縦横比から計算され、範囲は２２３～１０，０００

initial-scaleプロパティについて
　　初期のズーム倍率を設定する
　　１．５を指定した場合は１．５倍に拡大、０．５を指定した場合は半分に縮小して表示する
　　　　meta name=”viewport” content=”initial-scale=1.5″

minimum-scale と maximum-scaleプロパティについて
　　ユーザーがズームできる範囲を指定する（どちらかのみを指定することも可能）
　　　　minimum-scale … 最小倍率
　　　　maximum-scale … 最大倍率
　　　　　　以下の例だと、0.5倍～2倍の範囲でズームが可能となる
　　　　　　meta name=”viewport” content=”minimum-scale=0.5, maximum-scale=2″

user-scalableプロパティについて
　　ズーム操作を許可するかどうかを指定する
　　noを指定すると、ズームの操作が無効になる
　　　　meta name=”viewport” content=”width=device-width, user-scalable=no”
　　あわせて CSS に次のように指定しておく。
　　　　body {
　　　　　　　　-webkit-text-size-adjust: 100%;
　　　　　　　}

ブラウザにはデフォルトスタイルシートというモノがあり、あらかじめスタイルシートが定義されている
　　通常HTMLで文章を記述すれば、ＣＳＳの指定が無くても適度な間隔や大きさで文章が表示される
　　便利では有るが、CSSで明確に指定しないので、ブラウザ間の表示の様子に差が出てくる

リセットCSSとは、初期値化したＣＳＳを使用することで、各ブラウザの設定内容を無効化するもの
　　全ての要素が全てのブラウザで同一のスタイルで統一されて表示される様になる
　　　　要素セレクタごとに各々リセット値を記述する
　　　　デフォルトで使っていた機能がリセットされ無くなるので、省略していた記述が新たに必要となる
　　リセットCSSを提案しているサービスは多くある、一番有名なのは【Yahoo! UI Library】である

ノーマライズCSSとは、ブラウザごとのＣＳＳの差を埋めてくれるもの
　　デフォルトスタイルシートを維持したまま、ブラウザごとの整合性をとってくれているＣＳＳです
　　　　各ブラウザの差を埋めるだけの必要最低限の記述で済ましている（機能的に不足した状態である）
　　　　そのままリセットCSSとして使用するのは止めた方が良い
　　　　　　各ブラウザ対応する際に参考程度に利用するのが良いと思われる

CSSでは、各要素が生成する四角い領域のことをボックスと呼ぶ

それぞれの名称 　　content・・・・・・内容 　　border・・・・・・境界線 　　padding・・・・・内容とボーダーの間の余白 　　margin・・・・・・ボーダーと他のボックスとの間の余白

marginとpaddingの考え方
　　全ての要素は二つのブロックから構成された一番内側に入っていると考える
　　　　外側のブロックは他の領域との堺を作り出している
　　　　内側のブロックは外側のブロックと距離を置くことによって他の領域と離れた位置に置かれる
　　　　　　これがmargin、これによって他の境界線（border）と自らの境界線（border）が重ならなくなる
　　　　要素は内側のブロックと距離を置くことによって境界線と離れた位置に置かれる
　　　　　　これがpadding、これによって要素が自らの境界線（border）と重ならなくなる

次に、<div>と<p>とで入れ子になった包含ブロックを考えてみる

親要素の<div> のパディングの内側に<p>が配置される 　　<p> 要素の幅は、親要素の<div> のパディングの内側いっぱいに広がる 　　斜線の部分を、<div>が作り出した包含ブロック（コンテナブロック）と言う 　　　　こうやって、より外側のブロックが内包するブロックの場所と大きさを決めることになる

次に、ブロックボックスとインラインボックスの違いについて

ブロックボックスは、独立したかたまりとして、どんどん下にレイアウトされていく 　　インラインボックスは、行内の一部として、順次横にレイアウトされていく

隣り合うブロックでのマージン相殺について
　　上下に隣り合っているボックス間では、マージンの相殺が起こります
　　　　上のボックスで「margin-bottom: 50px」を指定し、
　　　　下のボックスで「margin-top: 30px」を指定した場合
　　　　　　大きい方の値「50px」が採用される
　　　　※入れ子になった様な複雑な場合は
　　　　　　互いにborder（境界線）を引くと境界が明確になり相殺が起きなくなる
　　左右に隣り合っているボックス間では、マージンの相殺は起こらない

ＷＰは記事の作成中に、自動的に記事を保存する（リビジョン）機能がある
　　プラグイン「Better Delete Revision」をインストールし、不要になった記事の履歴を削除する

「Better Delete Revision」は公式プラグインとして登録されているので簡単にインストールできる
　　管理者画面　→　プラグイン　→　新規追加　→　プラグインのインストール　から
　　　　検索キーワードに「Better Delete Revision」 と入力して検索する
　　　　直ぐにインストールされ、自動的に有効化されて終了する

次に「Better Delete Revision」を使ってレビジョンを削除する
　　管理者画面　→　設定　→　Better Delete Revision　から
　　【Check Revision Posts】ボタンをクリックする、リビジョンの一覧が表示される
　　【Yes, I would like to delete them】ボタンをクリックする、リビジョンを一括して削除できる

さらに、データベーをス最適化する
　　先ほどの削除用画面に表示されている【Optimize Your Database】ボタンをクリックする
　　　　即座にデータベースの最適化が実行される

以上で、レビジョンが削除され、データベースも最適化される

ブログ記事を書くと、「新しいピンバックが承認待ちです」というメールが届く
　　ブログ記事中でＷＰの記事にリンクを張るとリンク先へメールが届く様になっている
　　ＷＰの記事にリンクを張られたので、承認しますかの通知メールです

　　通知メールと同じ内容がコメントとしてダッシュボードに掲示される
　　　　承認作業は、管理者画面　→　コメント　と進み、画面を見て判断しコメントの承認という形をとる

承認メールの通知を解除する方法
　　ＷＰの管理者画面　→　設定　→　ディスカッション設定
　　　　他のブログからの通知(ピンバック・トラックバック) を受け付けるのチェックを外す
　　　　これだと、正しく行われるピンバックやトラックバックも全て受け付けないという設定になってしまう

　　自分自身のピンバックだけ（Self Pings）を停止するプラグイン【No Self Pings】を使用する
　　　　本来のピンバックは維持し、セルフピンバックだけを止める

　　ＷＰの設定でピンバックを止める
　　　　ピンバックを送信しなければセルフピンバックも発生しない
　　　　　　管理画面　→　設定　→　ディスカッション　に進む
　　　　　　「この投稿に含まれるすべてのリンクに通知を試みる」のチェックを外す
　　　　全てのピンバックが停止してしまうので、あまり良策ではない

　　自分のサイト内リンクを相対リンクにする
　　　　ページへのリンクを相対リンクにしてしまえば、ピンバックは送信されない
　　　　　　相対リンクとは、URLを省略してファイル名でリンクすること
　　　　　　　　<a href=”yyy.html”>相対リンク</a>
　　　　　　絶対リンクとは、リンク先URLを、「http://」から完全記述すること
　　　　　　　　<a href=”http://www.abc.com/yyy.html”>絶対リンク</a>

「モデレートしてください」という通知メールが届くことがある
　　届いたコメントやトラックバック（ピンバック）の承認作業をしてください、という意味です

　　通知メールの内容を確認する
　　　　「新しいピンバックが承認待ちです」という内容だと
　　　　　　ＷＰの記事にリンクを張られたので、承認しますかの通知メールです

　　通知メールと同じ内容がコメントとしてダッシュボードに掲示される
　　　　承認作業は、管理者画面　→　コメント　と進んで、コメントの承認という形をとる
　　　　コメントへの承認かピンバックへの承認かを画面を見て判断し、各々対応する

モデレート作業の抑制策
　　　　コメントが数多く寄せられ、対処に困った時にはコメントスパム対策を設定するを参照する
　　　　ピンバックが数多く寄せられ、対処に困った時にはピンバックを承認するを参照する

ピンバックを送信する、ピンバック機能、とかに言葉として使われる
　　他の人のブログを参照し、それにリンクさせたブログを自分が書いた時に
　　相手に対して関連したブログを書いたことを通知する（ピンバックの送信）
　　相手のブログの中へ自分のブログを自動で表示させる（ピンバック機能）

(1)最初にＡさんがブログ（http://aaa）を作成する

(2)Ａさんのブログを読み、ＢさんがＡさんのブログへのリンクを記述したブログ（http://bbb）を作成する

(3)Ｂさんがブログを投稿すると、記載されたリンク先のURL（http://aaa）へピンバックを送信する

(4)Ａさんのブログは、ピンバックを送信してきたＢさんのURLを自分の記事内に自動で表示する

ピンバックを送信することで、Ａさんのブログ上にＢさんのブログへのリンクを自動的に表示させる
　　ピンバックは自分の記事の本文内に記述されたリンクにだけピンバックが送信される

注意点
　　まったく無関係な記事に対して送信することは出来ません
　　ピンバックを受信した場合、概要は表示せずリンク元のURLだけを表示する
　　ピンバックは双方共にＷＰを使っている場合だけしか利用することはできない

トラックバックを送信する、トラックバック機能、とかに言葉として使われる
　　他の人のブログを参照し、それに関連するブログを自分が書いた時に
　　相手に対して関連したブログを書いたことを通知する（トラックバックの送信）
　　相手のブログの中へ自分のブログを自動で表示させる（トラックバック機能）

(1)最初にＡさんがブログ（http://aaa）を作成する

(2)Ａさんのブログを読み、Ｂさんがブログ（http://bbb）を作成する

(3)ＡさんのブログURLをトラックバック送信先として入力し、投稿するとトラックバックがＡさんに送信される

(4)Ａさんのブログは、ＢさんのブログURLと概要をＡさんのブログ内に自動で表示する

トラックバックを送信することで、Ａさんのブログ上にＢさんのブログへのリンクを自動的に表示させる
　　トラックバックは任意のURLに対してトラックバックを送信できる

注意点
　　送信する側は自分の記事の内容に関わらず任意のURLにトラックバックを送信することができる
　　　　無関係のブログに対してトラックバックを送信する等、本来の目的とは違う使い方をする人が出てきた

【moderate】
　　名詞
　　　　穏健な人、温和主義者
　　形容詞
　　　　節度のある、穏健な、適度である、並の
　　自動詞
　　　　やわらぐ、風がなぐ、なだめ役をする

　　ＷＰ関係での用法としては、「なだめ役をする」が適当でしょう

プラグインの導入可否を判断する
　　現状での改行の扱い
　　　　投稿記事の編集を行う際に注意すべき点
　　　　　　「enterキー」だと、段落となり１行スペースが空き、そのスペース行には入力できない
　　　　　　「shiftキー」＋「enterキー」だと、<br>の改行となり、その行に続けて入力可能
　　　　通常のエディターに慣れていると勝手が狂ってしまう

　　　　改行分だけスペースを空けてくれる「brBrbr」と言うプラグインがあるが
　　　　　　今度は記事の中の段落タグ<p>が取り除かれてしまい、整形作業が発生することにもなる
　　　　　　後述の行頭スペースの扱いの件も有って、プラグインは使わないことにする

　　現状での行頭スペースの扱い
　　　　投稿記事の編集を行う際に注意すべき点
　　　　　　行頭にスペースを置いて、行の先頭を揃えようとした場合
　　　　　　　　スペース文字は無視されて、勝手に前に詰められてしまう
　　　　通常のエディターに慣れていると勝手が狂ってしまう

　　　　行頭スペース問題を解決してくれる「PS Disable Auto Formatting」と言うプラグインがあるが
　　　　　　行頭スペースをタグで修飾して、単純な空白文字ではないと宣言するだけ
　　　　　　上述の改行問題も解決してくれるが、途中の段落定義が効かないのは同じ
　　　　　　どうやっても、通常のHTML編集とは同じ仕様にはならないので、プラグインは使わないことにする

マカフィーのお勧め
　　自分に関係するキーワードを選び、それに固有の情報を加え、それをさらに加工する
　　　　関係するキーワードが「light」で固有の情報が「mcafee.com」だとすると
　　　　　　「123」　　　　先頭に固定文字をセット
　　　　　　「light」　　　lightの「i」を数字の「1」に置き換える、最後尾の「t」を大文字「T」に変える
　　　　　　「jdqr33」　　キーボードで「mcafee」の1段上にある文字と数字を付ける
　　　　　　「^!」　　　　　最後に特殊文字を入れる
　　　完成形は「123l1ghTjdqr33^!」となる

　　　必ず数字と文字（大文字と小文字の両方）、特殊文字を入れるべきだと推奨している
　　　　　特殊文字が使えないケースもあることから、２回３回と試すことを勧めている

よく使われるパスワードとして
　　　（１）グローバルパスワード
　　　　　すべてのオンラインアカウントで同じパスワードを使い回す方法
　　　　　これは、最も避けるべき方法と指摘する
　　　　　　　何年も前に利用したサイトがハッキングされただけで
　　　　　　　現在も利用しているアカウントもすべて破られてしまうためだ。
　　　（２）パスワード候補リスト
　　　　　パスワードを複雑さで分類して利用する方法
　　　　　　　一番複雑なパスワードは金融関係
　　　　　　　やや簡単なパスワードはショッピングサイト
　　　　　　　その他のパスワードはSNSで使用する
　　　　　最善策ではない
　　　（３）秘密のパスワードやメモ帳
　　　　　　アクセスごとに異なる大量のパスワードをメモ帳に書き留めること
　　　　　　　　メモ帳を紛失したり盗まれる可能性があると指摘
　　　　　　定期的なパスワード変更を課す多くの企業では
　　　　　　　　パスワードを書いた紙切れが引き出しなどに置かれ、他人が簡単に入手できるケースもある
　　　　　　職場の管理者からパスワード変更を頻繁に求められるケースでは
　　　　　　　　対象のWebサイトに相当する文字列だけを書き留めておけば十分
　　　　　　　　文字列のみであれば、例え見られても第三者による悪用を防げる

投稿記事を順次読み込んで
　　・記事の抜粋を表示する
　　・カテゴリーを判別して件数をカウントする　場合には

下記の様なカスタマイズを施す
　　・通常のサイトからＷＰの機能を利用することを宣言する
　　　　【wp-load.php】を読み込む
　　　　　　便宜的に【include_once】を使って読み込む

　　・サンプルとして載せておきます
　　　　事前に【query_posts( ‘cat=?’ )】を設定しておく
　　　　　　？の部分はカテゴリーコードを指定する

　　　　$i=0;
　　　　if(have_posts()) :
　　　　　　while(have_posts()) :
　　　　　　　　the_post();
　　　　　　　　$i=$i+1;

　　　　　　　　この間に処理ロジック

　　　　　　　　if ($i==$count_no) {break;}
　　　　　　endwhile;
　　　　endif;

　　　　【$count_no】で順次読み込みを終了させる
　　　　　　ＷＰは表示件数の省略値として「１０件」を設定済み（この値でループはｓｔｏｐします）
　　　　　　変更手順は記事の表示件数を変更するを参照して値を変更しておく

通常、一度に表示される記事の件数は１０件である
　　インストール時に省略値として設定されている

この表示件数は変更すことが出来ます
　　管理者画面　→　設定　→　表示設定
　　　　「１ページに表示する最大投稿数」のボックスの値を変更する
　　　　変更を保存するボタンを押下して終了させる

通常、記事の一覧を表示すると投稿日の逆順に表示される
　　投稿日の古い記事が一番下に、投稿日の新しい記事が一番上に表示される

投稿日の日付を”自由自在”に変更する
　　管理者画面　→　投稿一覧　→　記事野編集画面　→　右サイド
　　　　新規の場合は「すぐに公開する」の項目の「編集」をクリックして日付を指定する
　　　　既存の場合は「公開日時」の項目の「編集」をクリックして日付を変更する

ＷＰのコメントには誰でも自由に投稿できる
　　多数の投稿がコメントに寄せられると、コメント承認待ちの状態で投稿が滞留する
　　承認用通知メールとなって多量にメールボックスにメールが滞留することにもなる
　　コメントの内容をチェックしてくれるプラグインをインストールする

「Akismet」はＷＰをインストールすると、既に同梱されセットアップされています
　　管理者画面　→　プラグイン　→　インストール済みプラグイン　から
　　　　Akismetを有効化する

次にAkismetを使うために、API キーを入力する
　　管理者画面　→　プラグイン　→　インストール済みプラグイン　から
　　【プラグインのサイトを表示】をクリックして、Akismetのサイトを表示する
　　Akismetのサイトが表示されたら、【Get an Akismet API key】ボタンをクリックする
　　Akismetのプラン選択画面が表示されたら、【Personal Site】から進んでいく
　　　　「有料」かと驚かず、そのまま進めば無料で使用できる様に設定できます
　　次に、名前やメールアドレスなどの登録情報を入力する
　　　　画面右側の「ツマミ」をいちばん左側に移動させて、無料にする
　　【CONTINUE】ボタンをクリックして登録を完了させる
　　　　この時、画面にＡＰＩキーが表示される（見逃す可能性が高い）

次に、ＡＰＩキーを入力する
　　先ほど設定したメールアドレスに、「Akismet API key」が届く
　　管理者画面　→　プラグイン　→　Akismet 設定　から
　　「Akismet API key」を設定する

以上で、コメントスパム対策は完了する

日本語環境でＷＰを正しく動作させるために必要となる機能を設定する
　　英語圏で作られたＷＰを日本語環境で正しく動作させるためのプラグインをインストールする

「WP Multibyte Patch」は日本語ＷＰをインストールすると、既に同梱されセットアップされています
　　管理者画面　→　プラグイン　→　インストール済みプラグイン　から
　　　「WP Multibyte Patch」を有効化するだけでよい

　　PHP のmbstring系関数を使用しているので
　　　　動作がおかしい場合はＰＨＰ環境も確認してください

記事タイトル直下に「コメントをどうぞ」のテキストリンクが表示される
　　まだ記事本文やコメントを見る前に、「コメントをどうぞ」では具合が悪いので変更する

テーマファイル内の”Content.php”をcopyして「child」ホルダー配下に置き
　　以下のソース部分を探し出してコメントアウトする
　　　　<?php if ( comments_open() ) : ?>
　　　　<div class=”comments-link”>
　　　　<?php comments_popup_link( ‘<span class=”leave-reply”>’ .　　→これ以降は省略する
　　　　</div><!– .comments-link –>
　　　　<?php endif; // comments_open() ?>

　　　　非表示にしないで、「コメントをどうぞ」の位置を変える場合には
　　　　　　”Content.php”の内部で該当ソース部分を移動させれば良い

記事の抜粋を表示すると、末尾に「続きを読む」と表示され、記事本文へのリンクが張られている
　　リンクをカスタマイズするには「child」ホルダー配下の「functions.php」に以下の設定を追加する

　　　　//末尾を調整するコード
　　　　function new_excerpt_more($post) {
　　　　return ‘　……’ . ‘<br>’;
　　　　}
　　　　add_filter(‘excerpt_more’, ‘new_excerpt_more’);

　　「続きを読む」の文言でなく「・・・・・・」と含みを持たせた表示となる
　　　　記事本文へのリンクは自分でプログラミングする

記事の抜粋を表示するには「the_excerpt()」というテンプレートタグを使用する
　　「child」ホルダー配下の「functions.php」に以下の設定を追加する

　　　　//長さを調整用コード
　　　　function new_excerpt_mblength($length) {
　　　　return 80;
　　　　}
　　　　add_filter(‘excerpt_mblength’, ‘new_excerpt_mblength’);
　　　　//

　　初期値は１１０がセットされているので、returnする長さを自由に変更する

記事のページ上部にヘッダー部として表示されている部分
　　サイトのタイトルはヘッダー部に表示されるタイトルのこと
　　キャッチフレーズはサイトの説明文のこと

いずれも、管理者画面　→　設定　→　一般　と進み設定する
　　分かりやすくて、目に付く言葉を選んで設定する

WPで作成したブログを表示した時に最初に表示される画面をフロントページ（初期画面）と呼ぶ
　　通常では最新投稿記事から順に複数表示される、固定化されたページが表示される訳ではない
　　初期画面を固定化させて、サイト訪問者に好印象を与える様に設定し直す

各記事を表示したページのヘッダー部に「メニュー」として表示する場所が用意されている
　　通常、左端に「ホーム」としてリンクが表示されている
　　「ホーム」をクリックすると、最新の投稿記事が表示される

　　「ホーム」をクリックさせて特定のページを表示させるには
　　　　管理者画面　→　設定　→　表示設定　と進み
　　　　　　「フロントページの表示」が「最新の投稿」となっているので
　　　　　　　　「固定ページ」を選択し、さらに特定の固定ページを選べば
　　　　　　　　「ホーム」をクリックした際に、その選ばれた固定ページが表示される様になる

投稿記事に写真等を載せたい場合
　　管理画面　→　メディア　→　新規登録　の画面からアップロードする

事前にアップロードファイルを保管する場所を用意する
　　【…任意…/wordpress/wp-content/uploads/】、要するにuploadといったディレクトリーを用意する
　　　　パーミッションは７０７にしておく

ApacheなどのWebサーバで使用する制御用ファイルです
　　Webサーバの動作をディレクトリ単位で制御します
　　　　.htaccessファイルがあるディレクトリとそのサブディレクトリに効果が及ぶ
　　　　サブディレクトリにも.htaccessファイルを別に置くこともできる
　　　　　　この場合は両方のファイルの効果が発生する、矛盾するときはサブディレクトリの設定を優先する

具体的には
　　CGIやSSIなどを実行するための宣言(命令)
　　　　【AddType application/x-httpd-php .htm .html】の指定をする
　　拡張子ごとにファイルタイプを指定するMIMEタイプの設定
　　ユーザ認証
　　ＩＰアドレスやドメイン単位でのアクセス制限
　　デフォルトドキュメントの設定　　等々

パーマリンクの設定を変更する際に
　　管理画面で変更した時、エラーとなって変更が反映されないことがある
　　ＷＰが既に投稿されたパーマリンクの名前を書き換え様として、書き換えできないエラーが発生している
　　　　赤字の部分は各インストール環境によって適宜設定し直すこと

.htaccessファイルの内容を更新する
　　Apache（サーバー管理ソフト）にファイル更新の許可を与える必要がある
　　.htaccessファイルに修正を施す
　　　　既存の書き換え規則や他の指示を削除せずに、上書き（挿入）できる仕組みになっている

　　　　定義例
　　　　　　<IfModule mod_rewrite.c>
　　　　　　RewriteEngine On
　　　　　　RewriteBase /pc_club/wordpress/
　　　　　　RewriteRule ^index\.php$ – [L]
　　　　　　RewriteCond %{REQUEST_FILENAME} !-f
　　　　　　RewriteCond %{REQUEST_FILENAME} !-d
　　　　　　RewriteRule . /pc_club/wordpress/index.php [L]
　　　　　　</IfModule>

.htaccessファイルが存在しない場合
　　新規に作成する必要がある
　　　　ローカルコンピュータ上で「1.htaccess」のような仮の名前でファイルを作成する
　　　　　　　ドットから始まるファイル名をWindowsでは扱えないので、一旦別の名前で作成する
　　　　上記の定義パラメータを記述する
　　　　ＷＰディレクトリの必要なディレクトリー配下にFTP を用いてアップロードする
　　　　　　　ディレクトリは階層構造になっているので、影響させたいＷＰを含むディレクトリを選ぶ
　　　　ＦＴＰソフト上で.htaccessにリネームする

同じサーバー上にＷＰを２個以上設置した場合
　　　　各ＷＰが区別できるホルダー配下に.htaccessファイルを設置する
　　　　ＷＰのプログラム群が入っているホルダーと同じ位置に設置すると見た目に分かりやすくなる

WordPressの画像拡大を行うプラグインをインストールする
　　画像をクリックすると背景が暗くなり、画像を拡大して表示する

　　（１）プラグインの導入
　　　　管理者画面　→　プラグイン　→　新規追加
　　　　　　検索で【WP-lightpop】と入力し【プラグインの検索】ボタンをクリックする
　　　　　　　　※現在、検索しても表示されません※
　　　　　　　　　　【WP jQuery Lightbox】に切り替えて利用しています
　　　　　　「いますぐインストール」ボタンをクリック（サーバー更新のためパスワードが必要）
　　　　　　【WP-lightpop】の【プラグインを有効化】をクリック
　　　　　　これでインストール完了

　　（２）横幅の最大値を設定しておく
　　　　インストールしたままの状態だと、横幅は画像の元のサイズで拡大表示される
　　　　　　Wordpressの記事幅より大きく表示されると画面が見にくくなる

　　　　管理画面→設定→lightpop→リンクタイプごとのオプション
　　　　　　画像ファイルの拡大表示時の最大値を適当に設定する（８００とした）、高さはゼロでよい

パーマリンクとは
　　投稿された記事への恒久的（半永久的）なＵＲＬのことです
　　　　内部や外部からＬＩＮＫする際に使用するリンク先となります

初期設定では、クエスチョンマークと多くの数字からなるURLが既に設定されています
　　パーマリンクとアーカイブ用にカスタムなURL構造を作成することができます
　　これにより、リンクの見た目、使いやすさ、そして継続性が改善できる

管理画面を使ってパーマリンクを設定する
　　　　ＷＰの管理者画面（ダッシュボード）　→　設定　→　パーマリンク設定
　　　　　　共通設定で「月と投稿名」を選択した
　　　　　　好みでどれを選んでも良い
　　　　　　　　年月はシーケンシャル番号に成り得るので、並び替え易いと考え設定した
　　　　　　　　投稿名は日本語でＵＲＬが表示されるので、見易いと考え設定した
　　　　「変更を保存」で完了する

既に作成した投稿記事にはパーマリンクの設定が反映されない
　　こういった際にはパーマリンクの設定を変更するを参照してください

レンタルサーバーへインストールした際の手順を整理して載せておきます
　　【WordPress Japan】にアクセスし、最新版をダウンロードする

　　先ず、解凍してサーバーにホルダー（wordpress）ごとアップロードする
　　　　設置場所に付いては個別対応願います

　　ディレクトリー（wordpress）のパーミッションを【７０７】に設定する
　　　　一時的に書き込み可能にしておいて、後で書き込み不可に戻す

　　ＷＰの初期設定を実施する
　　　　ホルダーごと移したのでwordpressホルダー直下の【index.php】をクリックして動かす
　　　　　　警告メッセージが表示される、【wp-config.phpファイル】を作成するのリンクをクリックして先に進める

　　　　データベース設定の画面に進む
　　　　　　事前にレンタル業者から情報が届いていたので、以下の項目を入力する
　　　　　　　　・データベース名
　　　　　　　　・ユーザー名
　　　　　　　　・パスワード
　　　　　　　　・データベースのホスト名
　　　　　　　　・テーブル説頭辞

　　　　　　複数のＷＰをインストールする場合にはテーブル説頭辞を順次変える（初期値はwp_で設定されている）

　　　　メッセージ「」が表示されてインストールが完了する
　　　　　　ディレクトリー（wordpress）のパーミッションを【７０５】に戻して置く

　　ＷＰの動作確認を行う
　　　　wordpressホルダー直下の【index.php】をクリックして動かし、動作確認をする