記事作成（テキストと写真）の備忘録
記事作成の概要
「ある対象をホームページに載せるための作業をものすごくおおざっぱにいえば、テキスト等の対象（要素）にタグをつけてＨＴＭＬ形式の文書とし、そのタグ＋α（セレクタ）にＣＳＳを適用して修飾、加工をするということになる。」。例えば、以上を「＊＊」とし、これをタグをつけて段落とするためには、「<p>＊＊</p>」とし、これを太字にするには、「p{font-size:bold;}」とする。
ボックスこそ恨みの的だ！
そこで思い出したのだが、最初にホームページの作成を始めたときは本当にストレスがたまったが、それは結局「ボックス」のせいであった。すなわちある種の要素は「ボックス」（領域）構造となっていてそれにＣＳＳを適用するということになるのだが、「ボックス」は、ボーダー、外側のマージン、内側のパディングから構成されていてそれぞれを指定しなければならず（デフォルトはある。）、ボックス同士の関係やマージンにも独自の関係があるのでなかなか思いどおりにならない上に、各種ブラウザーの表示方法が違ったり、しかもバグがあったりで、一番大事なことはそのことを理解して作業することであり、それが分からないと簡単なトップページを表示させるのでさえ大変であった。だからプロ、セミプロの人は仕方ないとしても、どうして素人がそんなこと、特にバグにかかずり合わなければならないのか、ということから、実は、WordPressはそのほとんどを、何百種類も公開されている全く表示の異なる「テーマ」がやってくれるので、いいよねということになる。
残された問題は、WordPressの各テーマの構造を理解すること、そして「記事を書き、写真を撮って加工する」という実質的な作業をした上で、あとは読みやすく見やすくするという限りで、「テーマ」で使われていたり自分で記事に使ったりしているＨＴＭＬを理解し、ＣＳＳを適用すればよいということになる。ちなみに、WordPress.comでＣＳＳを全体に適用するためにスタイルイートを利用することはプレミア（有料）サービスになっているので、それもしないというのも一つの選択だが、私は途中まで来た以上、そうはいかない。個別ページの都度の加工はＨＴＭＬに書き込むことで可能である。
ところで段落が「ボックス」であって、段落が１行空いて表示されるのは、標準のＣＳＳでそのようなマージンが設定されていること、段落と見出しは、重なることのできない「ボックス」同士であること等を思い出したが、こんな簡単なことでも頭にないと、作業は進まない。
テキストを検討する前提
記事を加工するために①全体のタイトル、②今は隠れているフロントページのタイトルと記事、③固定ページのタイトルと記事、④投稿ページのタイトルと記事のソースを探してみた。
①「<div id="page" class="hfeed"><header id="branding" role="banner"><hgroup><h1 id="site-title"><span><a href="http://murachanlaw.com/" rel="home">マトリックス法律事務所</a></span></h1><h2 id="site-description">弁護士村本道夫の仕事とoff-the-job time TEL 03-5708-7712</h2></hgroup>」、②<h2 class="entry-title">ＴＯＰ</h2>で、テキストは<div class="entry-content"><div class="kotei">で後者は私が設定、③<h1 class="entry-title">業務案内</h1>で、テキストは<div class="entry-content"><div class="kotei">で後者は私が設定、④<h1 class="entry-title"><a href="http://murachanlaw.com/2014/12/04/%e6%97%a5%e5%90%91%e5%b1%b1%e3%82%92%e6%ad%a9%e3%81%8f/" rel="bookmark">日向山を歩く</a></h1>で、テキストは<div class="entry-content">である。まとめると
①は、<h1 id="site-title">、②は、<h2 class="entry-title">、③④は、<h1 class="entry-title">、テキストは、<div class="entry-content">である。
ＣＳＳによる加工
まず何をしたかのコメントは、/* */ で囲んだ範囲に記載する。
書き方は、セレクター{プロパティ名:プロパティ値;プロパティ名:プロパティ値;･･･;}。スペース、タブ、改行を入れられる。
複数のセレクターに同じプロパティを適用するときはセレクターをカンマで区切る。h1,h2,h3
親要素に含まれる子要素は半角。
セレクターは、タイプセレクターor*＋クラスセレクタ,ＩＤセレクター,疑似セレクターという構成。
p.sample クラスsampleの要素p、*.sample クラスsampleのすべての要素p
クラス属性は半角で区切って複数指定できる。
p#sample ＩＤsampleの要素p
具体的な方法－タイトルと見出し
全体のタイトルは今後の課題としよう。記事のタイトルがh1で、h3が様々な場所での小さな表示として使用されていることを考えると、記事中の見出しをh2、h3・・とし、必要なら、ＣＳＳで変更することが正しいのかもしれない。
記事の種類とＣＳＳ
記事は、<div class="entry-content">となっているが、固定記事（div class="kotei"）、雑録的な投稿記事（div class="toukou"）、本を紹介する投稿記事（div class="book"）に分けることにする。
前２者は、適宜、見出しを入れ、段落を入れ、リストが入り、写真を入れる。
後者の本を紹介する投稿記事は、定型的であり、表が入る。
/*記事の中冒頭Ⅰ字下げ */
.entry-content {
text-indent: 1em;
}
/*記事の中の大見出し */
.entry-content h2{
font-size: 1.5em;
color: #0000ff;
}
/*記事の中の小見出し */
.entry-content h3{
font-size: 1.3em;
color: #dda0dd;
}
/*記事の中の段落をあけない*/
.entry-content p{
margin-bottom: 0;
margin-top: 0;
}
うまくいかないときは「実験」だ
上記のうち、１字下げはうまくいった（hも下がっている。）そのほかは最初はだめだった。セレクターがまずいのか、プロパティがだめなのか。そこでどうしたらいいかということで、私は今日、いつもどおり本屋に行って何かないかなあと探し、いつもどおり無駄な本を買ってきてしまった（しかもKINDLE本もある。）。
何かを探す（頼る）のではなくて、自分で「実験」してみるというのが、ヒトとして身につけた「目的手段推論」だよね（このことは追って。）。
だから一つの記事（ＨＴＭＬファイル）に、上記のＣＳＳをスタイルシート形式で読み込ませて適用してみれば良い。それなら簡単にだめなところを「改良」できそうだ。
そのためにDreamweverがあるが、またこれがねえ。でもくじけずにやってみよう。基本の文書をＨＴＭＬにして何とかＣＳＳを読み込ませればできる。
問題は、それでセレクターの指定を、クラス（半角）要素としたらうまくいった。.クラスとどう違うのか、混乱する。
写真の処理
一番苦手な部門だ（これまで、シャッターを押すこと以外カメラについて興味を持ったことがない。）。
まずデジカメで撮った写真を８．１パソコンのピクチャフォルダに取り入れ管理しなければならないが、現在、添付されていたソフトがパソコンにインストールされていないので、そこが手作業になっている。写真管理ソフトは色々あるので何とかなるはずだが。
- このＷＥＢサイトで使用する写真は、
① ヘッダーの写真（1000px × 288px）
② 記事に挿入する写真
③ アイキャッチ画像（「入門」のP１９４ページにある。）
④ そのうち、登山や旅行の写真で構成する記事も作成してみたいが、追ってにしよう（いささか遅すぎるという感もあるが。）。 - 写真処理の手順であるが、
① デジカメ写真はそのままではサイズが大きいので写真のサイズを変更する。ペイントを使用すると簡単だ。ペイントで写真を開き、％かピクセルで縮小する。ヘッダーの写真（1000 × 288）は大きさが決まっており、記事に挿入する写真は少なくても横をそれより小さくする。縦横３０％にしてみた。これをＪＰＥＧで「ＨＰ加工用」に保存する。それ以前の工程は、１）adobe bridgeですべてを選択して写真を表示、２）photshopのイメージ、画像解像度でピクセルを変える、３）表示で「画像サイズに合わせる」にする、４）ｗｅｂ用に保存、ｊｐｅｇにするだった。使いこなせばこちらの方が便利なようだ。
② 加工した写真を、メディアの新規追加で、ライブラリーに保存する。
③ これを新規投稿の、メディアの追加で読み込む。複数の写真が読み込める。
④ ヘッダーは、ダッシボード、外観、ヘッダーから、写真の変更と、文字色の変更ができる。カスタマイズのヘッダーも利用出来る。ここは多少混乱するが、外観、ヘッダーで何とかなる。
いずれにせよ、写真処理については、もう少し精通する必要がある。