2008.04.10

画像の配置とキャプション付け

キャプション付き画像を左に寄せて配置するにはまずstyle.cssにどんな名前ででもいいのですが、取りあえずはcaprightと言う名でクラスセレクタを作成し以下、必要そうなプロパティーに夫々値を入れ

.capright {
float: right;/*画像の左寄せ*/
margin:0px 10px 0px 0px;/*画像の周囲からの空き*/
font-size: 0.9em;/*文字サイズ*/
color: #333;/*文字色*/
}

のように書き加えておきます。そして投稿記事書き込み画面では

<div class="capright">
<a href="http://リンク先元の画像のURLjpg">
<img src=’http://アップロードしたサムネイル画像のURL.jpg’ /></a>
<br />キャプション</div>

のように青いタグとキャプションを書き込むと「キャプション付き画像の右寄せ。」になり画像をクリックした場合元の大きい画像が開かれるようになります。

江ノ島
江ノ島

という事で、左に寄せた「江ノ島の画像」表示のサンプルです。

style.cssの「.capright」のfloat: rightを「.capleft」を作成しfloat: leftも作っておけば「.capright」「.capleft」の選択だけで左寄せ、右寄せが出来るようになります。

この場合はサムネイル画像を使用したので画像をクリックすると左右800pxの大きい画像を見る事ができます、又その場合はブラウザの戻るボタンで戻って下さい。

又、画像にテキストを回り込みさせた後に続くテキストは回り込みの解除をする必要があります、そんな場合は<br style="clear:right" />と書き込んで回り込みの解除をします。

InternetExplorer6でレイアウトずれが発生する
「float」を使ってレイアウト設定をした場合「margin」が指定したものより大きくなり、レイアウトずれを起こしてしまうそうです。

これはIE6(IE5も)のバグで、IE7では修正されているそうです。

ともかく僕も「float」を使ったCSSにそれぞれ『display:inline; /*IE6対応*/』を加える事にします。

画像アップロード

画像をアップロードテスト
投稿画面の「メディアを追加」右の画像を追加ボタンをクリックし画像をアップロードしてみましたがアップロード出来ません。

このサイトはサーバーにXREAを利用している為かもしれません。

ググってみると
XREA で WordPress ファイルアップロード機能を利用する
が引っかかってきました。これを参考に
XREA SUPPORT BOARD - PHPをCGIとして動かす方法について」の記述がありました。

適当なテキストエディタに下記の内容を書き、「htaccess.text」と名前をつける。

<files admin-functions.php>
AddHandler application/x-httpd-phpcgi .php
</files>

「htaccess.text」ファイルを、wp-admin ディレクトリにアップロードし名前を「.htaccess」に変更。

設置したWordPressの管理画面→設定→その他の設定→アップロード
のアップロードするファイルの保存場所を「wp-content/uploads」とし、
にて「アップロードしたファイルを年月ベースのフォルダに整理」にチェックを入れ設定を更新。

WP設置サーバーの「wp-content」配下に「uploads」ディレクトリを設置、その配下に「2008」年名のディレクトリをその配下に「04」月名と次の「05」月名のディレクトリを設置しそれらのディレクトリに書き込み権限(707)を与えました。

wp-content/2008/03/とwp-content/2008/04/の二月分のディレクトリを設置した事になります。
相模上臈杜鵑草
再び投稿画面「メディアを追加」右の画像追加ボタンをクリックし画像をアップロード、今度はアップロード出来ました。

ダッシュボード→設定→その他の設定→アップロード
にてサムネイルのサイズを幅200高さ200、中サイズ幅の上限800高さの上限600としました。
ダイヤモンド富士
しかし、画像のタグにclass=”alignright”等が挿入されるものの、 画像配置の左、中央、右寄せとはなりません。