WordPress
Flickrのクリエイティブ・コモンズライセンスのものを利用できるWordPressのプラグインが「Photo Dropper」です。
記事の編集画面から検査・選択して本文に挿入することができ、著作者のクレジットも自動挿入されるので、入れ忘れることがありません。
下の画像が「Photo Dropper」を利用したものです。
ウィジェット機能を利用するために”functions.php”というファイルを準備する。
“functions.php”ファイルは、テキストエディタなどで空のphpファイルを作成しておく。
アップロード先のディレクトリは、
[ wp ]-[ wp-content ]-[ themes ]-[ sample ]
“functions.php”をアップロードしたら、”functions.php”を編集するため
WordPressダッシュボードの[外観 > テーマ編集]でテーマ編集画面を開き、
右のテンプレート一覧から「テーマのための関数(functions.php)」をクリックする。
ウィジェット機能を有効にするために以下のコードを記述する。
<!--?php //ウィジェット register_sidebar(); ?-->
<!-- コンテンツ --> <div id="content"> … 略 … </div><!-- #content END --> <!-- サイドバー --> <div id="sidebar"> ここはサイドバーです。 </div><!-- #sidebar END -->
サイドバーを作成するため、サイドバーのコンテンツをindex.phpに挿入。
/* コンテンツ */
div#content {
width: 680px;
float: left;
}
/* サイドバー */
div#sidebar {
width: 220px;
float: right;
}
サイドバーとコンテンツ部分の横幅を指定し、
それぞれにfloatの指定をし２段組で表示させる。
銀座松屋のショーウィンドウ。
銀座の夜景は綺麗です。
ショーウィンドウに映る、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プロパティで画像の上に余白を挿入している。
今度は、右に画像を挿入してみる。
画像の設定画面で、配置を右にしても、CSSで配置を設定しないと右には配置されない。
これは、CSSの設定を初期化したためで、defaultのTwenty-Elevenなどのテーマだと、
問題なく表示されると思われる。
クラス名が「alignright」の画像に対してfloatプロパティを「right」と指定する。
これで画像が右側に配置され、左側に後続のコンテンツが回りこんで表示される。
また、margin-leftとmargin-bottomに10pxの余白を挿入し、画像と文章の間隔を調整する。
/* 記事内の画像 */
… 略 …
.alignright {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}
