記事作成(テキストと写真)の備忘録

記事作成の概要

「ある対象をホームページに載せるための作業をものすごくおおざっぱにいえば,テキスト等の対象(要素)にタグをつけてHTML形式の文書とし,そのタグ+α(セレクタ)にCSSを適用して修飾,加工をするということになる。」。例えば,以上を「**」とし,これをタグをつけて段落とするためには,「<p>**</p>」とし,これを太字にするには,「p{font-size:bold;}」とする。

ボックスこそ恨みの的だ!

そこで思い出したのだが,最初にホームページの作成を始めたときは本当にストレスがたまったが,それは結局「ボックス」のせいであった。すなわちある種の要素は「ボックス」(領域)構造となっていてそれにCSSを適用するということになるのだが,「ボックス」は,ボーダー,外側のマージン,内側のパディングから構成されていてそれぞれを指定しなければならず(デフォルトはある。),ボックス同士の関係やマージンにも独自の関係があるのでなかなか思いどおりにならない上に,各種ブラウザーの表示方法が違ったり,しかもバグがあったりで,一番大事なことはそのことを理解して作業することであり,それが分からないと簡単なトップページを表示させるのでさえ大変であった。だからプロ,セミプロの人は仕方ないとしても,どうして素人がそんなこと,特にバグにかかずり合わなければならないのか,ということから,実は,WordPressはそのほとんどを,何百種類も公開されている全く表示の異なる「テーマ」がやってくれるので,いいよねということになる。

残された問題は,WordPressの各テーマの構造を理解すること,そして「記事を書き,写真を撮って加工する」という実質的な作業をした上で,あとは読みやすく見やすくするという限りで,「テーマ」で使われていたり自分で記事に使ったりしているHTMLを理解し,CSSを適用すればよいということになる。ちなみに,WordPress.comでCSSを全体に適用するためにスタイルイートを利用することはプレミア(有料)サービスになっているので,それもしないというのも一つの選択だが,私は途中まで来た以上,そうはいかない。個別ページの都度の加工はHTMLに書き込むことで可能である。

ところで段落が「ボックス」であって,段落が1行空いて表示されるのは,標準のCSSでそのようなマージンが設定されていること,段落と見出しは,重なることのできない「ボックス」同士であること等を思い出したが,こんな簡単なことでも頭にないと,作業は進まない。

テキストを検討する前提

記事を加工するために①全体のタイトル,②今は隠れているフロントページのタイトルと記事,③固定ページのタイトルと記事,④投稿ページのタイトルと記事のソースを探してみた。

①「<div id=”page” class=”hfeed”><header id=”branding” role=”banner”><hgroup><h1 id=”site-title”><span><a href=”http://matrixfirm.wordpress.com/” rel=”home”>マトリックス法律事務所</a></span></h1><h2 id=”site-description”>弁護士村本道夫の仕事とoff-the-job time  TEL 03-5708-7712</h2></hgroup>」,②<h2 class=”entry-title”>TOP</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://matrixfirm.wordpress.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”>である。

CSSによる加工

まず何をしたかのコメントは,/* */ で囲んだ範囲に記載する。
書き方は,セレクター{プロパティ名:プロパティ値;プロパティ名:プロパティ値;・・・;}。スペース,タブ,改行を入れられる。
複数のセレクターに同じプロパティを適用するときはセレクターをカンマで区切る。h1,h2,h3
親要素に含まれる子要素は半角。
セレクターは,タイプセレクターor*+クラスセレクタ,IDセレクター,疑似セレクターという構成。
p.sample クラスsampleの要素p,*.sample クラスsampleのすべての要素p
クラス属性は半角で区切って複数指定できる。
p#sample IDsampleの要素p

具体的な方法-タイトルと見出し

全体のタイトルは今後の課題としよう。記事のタイトルがh1で,h3が様々な場所での小さな表示として使用されていることを考えると,記事中の見出しをh2,h3・・とし,必要なら,CSSで変更することが正しいのかもしれない。

記事の種類とCSS

記事は,<div class=”entry-content”>となっているが,固定記事(div class=”kotei”),雑録的な投稿記事(div class=”toukou”),本を紹介する投稿記事(div class=”book”)に分けることにする。
前2者は,適宜,見出しを入れ,段落を入れ,リストが入り,写真を入れる。
後者の本を紹介する投稿記事は,定型的であり,表が入る。

/*記事の中冒頭Ⅰ字下げ */
.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;
}

うまくいかないときは「実験」だ

上記のうち,1字下げはうまくいった(hも下がっている。)そのほかは最初はだめだった。セレクターがまずいのか,プロパティがだめなのか。そこでどうしたらいいかということで,私は今日,いつもどおり本屋に行って何かないかなあと探し,いつもどおり無駄な本を買ってきてしまった(しかもKINDLE本もある。)。

何かを探す(頼る)のではなくて,自分で「実験」してみるというのが,ヒトとして身につけた「目的手段推論」だよね(このことは追って。)。

だから一つの記事(HTMLファイル)に,上記のCSSをスタイルシート形式で読み込ませて適用してみれば良い。それなら簡単にだめなところを「改良」できそうだ。

そのためにDreamweverがあるが,またこれがねえ。でもくじけずにやってみよう。基本の文書をHTMLにして何とかCSSを読み込ませればできる。

問題は,それでセレクターの指定を,クラス(半角)要素としたらうまくいった。.クラスとどう違うのか,混乱する。

写真の処理

一番苦手な部門だ(これまで,シャッターを押すこと以外カメラについて興味を持ったことがない。)。

まずデジカメで撮った写真を8.1パソコンのピクチャフォルダに取り入れ管理しなければならないが,現在,添付されていたソフトがパソコンにインストールされていないので,そこが手作業になっている。写真管理ソフトは色々あるので何とかなるはずだが。

  • このWEBサイトで使用する写真は,
    ① ヘッダーの写真(1000px × 288px)
    ② 記事に挿入する写真
    ③ アイキャッチ画像(「入門」のP194ページにある。)
    ④ そのうち,登山や旅行の写真で構成する記事も作成してみたいが,追ってにしよう(いささか遅すぎるという感もあるが。)。
  • 写真処理の手順であるが,
    ① デジカメ写真はそのままではサイズが大きいので写真のサイズを変更する。ペイントを使用すると簡単だ。ペイントで写真を開き,%かピクセルで縮小する。ヘッダーの写真(1000 × 288)は大きさが決まっており,記事に挿入する写真は少なくても横をそれより小さくする。縦横30%にしてみた。これをJPEGで「HP加工用」に保存する。それ以前の工程は,1)adobe bridgeですべてを選択して写真を表示,2)photshopのイメージ,画像解像度でピクセルを変える,3)表示で「画像サイズに合わせる」にする,4)web用に保存,jpegにするだった。使いこなせばこちらの方が便利なようだ。
    ② 加工した写真を,メディアの新規追加で,ライブラリーに保存する。
    ③ これを新規投稿の,メディアの追加で読み込む。複数の写真が読み込める。
    ④ ヘッダーは,ダッシボード,外観,ヘッダーから,写真の変更と,文字色の変更ができる。カスタマイズのヘッダーも利用出来る。ここは多少混乱するが,外観,ヘッダーで何とかなる。

いずれにせよ,写真処理については,もう少し精通する必要がある。