WordPress[Stinger5] 画像に囲み線を入れる

一年半程使わせていただいた「Stinger3」から「Stinger5」へ

一昨年から一年ちょっと使用していた「Stinger3」から今年になってレスポンシブ対応の「Stinger5」へ移行しました。見た目もスッキリして洗練された感じが気に入っています。今回、Stinger5になってスタイルシートや他の設定部分も色々と変更点があったのですが、「画像に囲み線を入れる方」で少し手間取ったのでここに備忘録として残したいと思います。ちなみに「Stinger3」の時の設定方法はこちら

WordPressテーマ「Stinger3」の画像の周りに線を入れる方法 | dmgadget(ディーエムガジェット)

今回もローカル環境でカスタマイズの備忘録を残したいと思います。

OSXローカル環境にwordpressをインストールする方法 | dmgadget(ディーエムガジェット)

あと先日「Stinger5」の子テーマ導入編について書きました。今回はその子テーマにカスタマイズ内容を記載していきます。子テーマを導入していない方は下記のリンクより挑戦してみてください。

WordPressテーマ「Stinger5」に子テーマを導入する方法 | dmgadget(ディーエムガジェット)

まずは画像に囲み線を入れる設定

上記の画像は囲み線が無い状態です。これでもいいのですが、画像の背景などが真っ白だとブログの背景と同化してしまい、画像の文章なのかブログの文章なのかが瞬時に判断出来なくてちょっと読みにくいと個人的に思っています。囲み線を入れて表示すると、

どこまでが画像なのか判別しやすいので見やすいですね！それでは設定して行きましょう。

子テーマフォルダのStyle.cssに記述を追加

下記のコードを子テーマフォルダ内のStyle.cssに記述を追加します。

/*--------------------------------
画像に枠を付ける
---------------------------------*/
.sumbox img {
	border:solid 1px #ccc;
	padding:3px;
}

.post img {
	border:solid 1px #ccc;
	padding:3px;
}

保存して確認してみましょう。こんなふうになります。

ちなみにコードの編集はこちらのCoda2を使用しています。

Coda

これで囲み線は表示されました、が…

画像に囲み線が表示されました。が、ウィンドウサイズが最大の時は全体に囲み線が表示されるのですが、レスポンシブ対応のStinger5はでウィンドウサイズを小さくすると画像の囲み線の右端だけ消えてしまいます。（Stinger3やその他のテーマを使っていた時の画像サイズによって違います。）これを修正していきます。

Stinger5の親テーマから設定を変更する部分をコピーしてきます

親テーマを変更してもいいのですが、ここは子テーマに貼付けて編集をしていきます。親テーマのStyle.cssを開いて１０１９行目程から１０４７行目までぐらいをコピーします。ちょうど下記の部分になります。

/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {
aside {
	clear: both;
	float: none;
	width: auto;
	position: static !important;
	;
}
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px) {
#wrapper {
	padding: 0 20px;
}
header {
	text-align: left;
}
.sitename img {
	max-width: 300px;
	margin: 0;
}
main {
	background-color: #fff;
	border-radius: 4px;
	padding: 20px 10px;
}
/*--------------------------------
一覧記事表示部分
---------------------------------*/
#topnews dt {
	float: left;
	width: 150px;
}
#topnews dt img {
	width: 100%;
}
#topnews dd {
	padding-left: 170px;
}
#topnews .clearfix dd h5 {
	font-size: 24px;
	font-weight: bold;
	padding: 0px;
	margin-bottom: 5px;
}
#topnews .clearfix dd p {
	font-size: 13px;
	color: #666;
	line-height: 24px;
	margin: 0px;
	padding: 0px;
}
#topnews .clearfix dd h5 a {
	color: #333;
	text-decoration: none;
}
/*-- ここまで --*/
}

ここの１０行目の後と３４行目の後に下記の画像サイズを９７％に変更するコードをペーストします。

img { 
    max-width: 97%; 
    height:auto;
}

最終的に下記のようになっていれば問題ありません。

/*media Queries タブレットサイズ iPhone スマホ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {
aside {
	clear: both;
	float: none;
	width: auto;
	position: static !important;
	;
}
img { 
    max-width: 97%; 
    height:auto;
}
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px) {

#wrapper {
	padding: 0 20px;
}
header {
	text-align: left;
}

.sitename img {
	max-width: 300px;
	margin: 0;
}
main {
	background-color: #fff;
	border-radius: 4px;
	padding: 20px 10px;
}
img { 
    max-width: 97%; 
    height:auto;
}
/*--------------------------------
一覧記事表示部分
---------------------------------*/
#topnews dt {
	float: left;
	width: 150px;
}
#topnews dt img {
	width: 100%;
}
#topnews dd {
	padding-left: 170px;
}
#topnews .clearfix dd h5 {
	font-size: 24px;
	font-weight: bold;
	padding: 0px;
	margin-bottom: 5px;
}
#topnews .clearfix dd p {
	font-size: 13px;
	color: #666;
	line-height: 24px;
	margin: 0px;
	padding: 0px;
}
#topnews .clearfix dd h5 a {
	color: #333;
	text-decoration: none;
}
/*-- ここまで --*/
}

確認してみましょう！

これで縮小した時も画像に囲み線が残るようになりました。これでも消えない方は画像の配置がセンターではなくて左寄せか右寄せになってたりすると線が消えたままかもしれません。他にもっと良いやりかたがあったら教えてください！読んで頂いてありがとうございました。