Wind-Sunlight - Webプログラミング 風の巻

今日は土曜日、朝からWordPRess 漬けです。

まずは、テーマを決めました。いろいろ試した結果、最初のEasyAllになりました。迷った末に最初に戻りました。でも、ヘッダーは「風」をイメージして変えました。

そして、ついでに、ページも試して見ました。[about me] ページを作りました。「まーなんて簡単」で、調子に乗って、そのページに画像を付けました。そこからが大変！

画像をマウスドラッグで記事に挿入できるのは、便利ですが、動きが変！それにビジュアルエディタが余計な事をします。勝手に人(私の書いたHTML)のタグを消します。これは、ビルダー並だな。うー困った。ビジュアルエディタ止めよかな。と思いましたが、「凝ったことしなければいいや」と割り切りました。 ぼやきは止めて、説明します。

画像アップロードの準備

画像ファイルはデフォルトで　wp-content/uploads　にアップロードされます。変更するには[オプション][その他の設定]で行います。ですから、画像ファイルをアップロードするには、まず、このディレクトリを作って適当なパーミッションを与えておく必要があります。

画像ファイルの管理について

WPは画像ファイルを１つの画像ディレクトリ（デフォルト：wp-content/uploads）に入れて管理します。アップロードした画像は、どの記事やページからでも使えます。例えば、ある記事の中で image.ｊｐｇ をアップロードして見ると：

• image.jpg
• image.thumbnail.jpg

を画像ディレクトリに作ります。では、同じファイルをアップロードしたらWPはとどうなるのでしょう？実際にして見ると：

• image1.jpg
• image1.thumbnail.jpg

を作りました。WPは画像のファイル名もデータベース管理してそうです。FTPで勝手にアップできそうにないですね。

記事に画像を挿入する方法 

　画像のアップロードは簡単です。次に、画像を記事に挿入する方法ですが、２×３の方法があります。まず、サムネイルですが、WordPressはPHPなのでMTのようにImageMagicとかを気にする必要はありません。画像をアップロードすると、その画像のサイネイルを自動で作ってくれます。ですから、記事に挿入する画像として：

• オリジナル画像を使う
• サムネイルを使う

が選択できます。ですが、どちらを使おうが

縦：96px　横：128px

にサムネイル表示されます。オリジナル画像を使った場合、imgタグに height=”96″ が挿入されます。また、画像にリンクを張る事ができます。その種類は：

1. リンクしない
2. 画像にリンク — 画像ファイルにリンクします
3. ページにリンク — 画像専用のページを作ってそのページにリンクします

です。 実際に見ていただきましょう。

（１）サムネイルを使用

（２）オリジナル画像を使用

どうでしょう。 （１）と（２）は見た目も動きも同じです。違いはHTMLを見ないと分かりません。（１）はサムネイル画像を使用していて、（２）はオリジナル画像を使っていますが imgタグに height=”96″ が挿入されます。

さて、問題が１つあります。オリジナル画像を表示したい場合、どうするのでしょう？分かりません。とりあえす。HTML表示にして、height=”96″ を削除しています。こんなんでいいのだろうか？例えば、こんな風に：

また、サムネイルのサイズ自体を変えるにはどうすのでしょうか？調べて見ると、次のサイトを発見、先達はいるものですね。感謝！感謝！

http://naviwave.com/blog_w/?p=6
後、遭遇した問題は、画像の右横にテキストを持ってくるには、align=”left”　ですが、これは、ビジュアルエディタでできます。でも、普通は、画像に余白とか必要です。CSSで一括指定するのだろうか？また、HTMLを直にいじってしまいました。 style=”margin: 0px 10px” こんなんでいいのか？

で、「ぼやき」の原因は

さて、最後にもう１つ問題を。これが、冒頭の「ぼやき」の原因です。ビジュアルエディタで、画像をマウスで、ごそごそいじると（コピーしたり消したり、ドラッグしたりすると）、なんと、変なリンクがあちこちに作成され、投稿内容がボロボロになります。なんか変！です。うまく説明できませんが、ときかく変なんです。

今日はここまで。そろそそ、夕ご飯の時間です。