【第6回】Wordpressの自作テーマ作成 練習。本文中に画像を挿入

Wordpress自作テーマの続きをしていきます('ω')

参考にしている書籍はこちらです↓

WordPressレッスンブック HTML5&CSS準拠

前回の内容はこちら↓

今回の内容
記事の中に画像を入れる

画像を挿入する

画像の挿入するには、Wordpressで記事を書くところから「メディアの追加」からできます。

これで画像が追加できました。

画像の挿入位置にデザインをあてる

画像を挿入して「中央揃い」「左揃い」などしてみましょう。

そして記事の文章を「テキスト」で見てみます。
すると、imgタグにはクラスが割り当てられていることがわかります。
【クラス】
中央揃え：alingcenter
左揃え：alingleft
右揃え：alingright

このクラスの指定を「style.css」で書かないといけないです。

style.css

@charset "UTF-8";
/*
Theme Name: MY THEME (Chapter 2)
Author: TRAVEL SKETCH
Description: This is my original theme.
Version: 1.0
*/


body	{margin: 0;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}

.container	{max-width: 650px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

/* 記事 */
article	{margin-bottom: 40px;}

article h1	{margin: 0;
	font-size: 32px;
	font-weight: normal}

article h1 a	{color: #000000;
	text-decoration: none}


/* 記事の付加情報 */
.postinfo	{margin-top: 15px;
	font-size: 14px}

.postinfo a	{color: #000000;
	text-decoration: none}

.postinfo .postcat	{margin-left: 20px}

.postinfo i	{color: #888888}


/* 前後の記事へのリンク */
.pagenav a	{padding: 5px 10px;
	border: solid 1px #cccccc;
	border-radius: 10px;
	color: #666666;
	font-size: 12px;
	text-decoration: none}

.pagenav .old a	{float: left}

.pagenav .new a	{float: right}

.pagenav	{overflow: hidden;
	margin-top: 40px;
	margin-bottom: 40px;
	clear:both}


/* ヘッダー */
header	{margin-bottom: 40px;
	background-color: #1e90ff;
	color: #ffffff}

header a	{color: #ffffff;
	text-decoration: none}

.siteinfo	{overflow: hidden;
	padding-top: 14px;
	padding-bottom: 14px}

.siteinfo h1	{
	float: left;
	margin: 0;
	font-family: 'Acme', sans-serif;
	font-size: 20px}

.siteinfo p	{float: right;
	margin: 0;
	margin-top: 5px;
	font-size: 12px}

/* フッター */
footer	{margin-top: 40px;
	padding-top: 14px;
	padding-bottom: 14px;
	background-color: #1e90ff;
	color: #ffffff}

/* 本文中の画像*/
article img{
	border:none;
   max-width: 100%;
   height:auto;
}

.aligncenter{
	display:block;
	margin-top:30px;
	margin-bottom:30px;
	margin-left:auto;
	margin-right:auto;
}

.alignleft{
	float:left;
	margin-bottom:30px;
	margin-right:30px;
}

.alignright{
	float:right;
	margin-bottom:30px;
	margin-left:30px;
}

回り込み防止

.pagenav	{overflow: hidden;
	margin-top: 40px;
	margin-bottom: 40px;
	clear:both}

clear:bothを追加しています。

これによって、画像を右揃えにしたときにナビゲーションが変になるのを防いでいます。

以下が完成品↓

これで画像を挿入した場合でもきれいに表示してくれるようになります。

Twitter➡@t_kun_kamakiri
ブログ➡宇宙に入ったカマキリ（物理ブログ）