キャプションをつけて画像を挿入する。

銀座松屋のショーウィンドウ。
銀座の夜景は綺麗です。

銀座夜景IMG

ショーウィンドウに映る、Apple。

<div id="attachment_43" class="wp-caption aligncenter" style="width: 640px">
<a href-"http://www.www.www/wp/wp-content/...中略...jpg">
<img src="htttp://ww.www.www/wp/....中略....jpg" alt="銀座夜景IMG"></a>
<p class="wp-caption-text">ショーウィンドウに映る、Apple。</p></div>

captionのショートコードタグには、上記のハイライトされているソースが出力されている。
全体がマークアップされている<div>には、「wp-caption」と「aligncenter」というクラス名が指定され、
キャプション文章がマークアップされている<p>には、「wp-caption-text」というクラス名が指定されている。

/* 記事内の画像 */
.wp-caption {
   border: solid 1px #aaaaaa;
   text-align: center;
   padding-top: 5px;
}

borderプロパティで、枠線の太さを１px、色をグレーに指定し、
text-alignプロパティでキャプションを画像の中央に揃えて表示している。
また、padding-topプロパティで画像の上に余白を挿入している。

2012/08/21　3:20 AM｜ カテゴリー ： WordPress｜ コメント

本文の左右に画像を挿入する-Part.2

新宿夜景IMG02今度は、右に画像を挿入してみる。
画像の設定画面で、配置を右にしても、CSSで配置を設定しないと右には配置されない。
これは、CSSの設定を初期化したためで、defaultのTwenty-Elevenなどのテーマだと、
問題なく表示されると思われる。

クラス名が「alignright」の画像に対してfloatプロパティを「right」と指定する。
これで画像が右側に配置され、左側に後続のコンテンツが回りこんで表示される。
また、margin-leftとmargin-bottomに10pxの余白を挿入し、画像と文章の間隔を調整する。

/* 記事内の画像 */
… 略 …
.alignright {
   float: right;
   margin-left: 10px;
   margin-bottom: 10px;
}

2012/08/21　2:32 AM｜ カテゴリー ： WordPress｜ コメント

本文の左右に画像を挿入する。

東京夜景IMG本文中の画像を挿入したい位置にカーソルを合わせる。
画像を左右に配置する場合、横に表示したい文章の行頭にカーソルを合わせる。
ここでは、１行目の文章の行頭にカーソルを合わせて「画像を追加」ボタンをクリックしました。

しかし、このままでは画像の横に文章が表示されないので、スタイルシートで配置を指定します。

p.postinfo {
   color: #2b76cc;
   text-align: right;
   margin: 20px 0 0;
   clear: both
}

/* 記事内の画像 */
.alignleft {
   float: left;
   margin-right: 10px;
   margin-bottom: 10px;
}

画像の横には文章だけを表示するため投稿日のところで回りこみを解除する。
そこで、投稿日をマークアップした<p class="postinfo">にたいして「clear: both」を指定する。

2012/08/21　1:25 AM｜ カテゴリー ： WordPress｜ コメント

記事の本文に画像を挿入する

東京湾大華火祭の花火

/* 記事内の画像の位置を中央に配置 */
.aligncenter {
   display: block
   margin-left: auto;
   margin-right: auto;
}
/* 画像のまわりの枠線を削除する。 */
div.post img {
   border: none;
}

画像を中央に配置することに成功。
画像をアップロードするウィンドウで、「画像を中央に配置」という項目を選択しても、適用されなかったのは、
自分でHTMLとCSSをリセットしてしまったためだったことがわかりました。

2012/08/16　6:19 PM｜ カテゴリー ： WordPress｜ コメント

Syntax Hilghligterが正常に表示できない。

WordPressの投稿でソースコードを楽に表示させるために、
pluginの”SyntaxHighlighter Evolved”を入れてみたが、
ソースコードが表示させるだけで、その他の見た目は全く反映されない。

そのうち、なんとかしたい。。。
以下は、syntaxHighlighterで表示させているソースコード。
背景は、自分でCSSで設定したもの。

<html>
 <head>
  <title>test</title>
 </head>
  <body>
   <p>このソースコードは、英語で言う"This is a pen."のようなものですね</p>
  </body> 
</html>

ここで何時間も詰まってしまっている。
わからないことは後に回して、できることからやっていくことも大切かも？
でもそれって悔しいし、何か気分がモヤモヤしてしまう。。。

＝＝＝　追記　＝＝＝

SyntaxHighlighter無事表示できるようになりました。
原因は、templateをカスタマイズしたため、SyntaxHighlighterに必要なテンプレートタグを削除してしまったためでした。
<?php wp_head(); ?>を<head>内に入れとかないと、SyntaxHighlighterで必要なjavascriptが動かないようです。
SyntaxHighlighter以外にも、<?php wp_head(); ?>を入れないと、機能しないpluginがあるそうなので気をつけたほうがいいですね。

<head>

…中略…

<?php wp_head(); ?>
</head>
<body>

…中略…

<?php wp_footer(); ?>
</body>

SyntaxHighlighterでは、<?php wp_head(); ?>の他に、
上記のコードのように</body>の前に<?php wp_footer(); ?>もソースに書かないといけないようです。

2012/08/14　1:22 PM｜ カテゴリー ： WordPress｜ コメント

« 古い記事 新しい記事 »