WordPressテーマ「Stinger3」の画像の周りに線を入れる方法

2014/02/102018/09/05

[adsense]

画像の周りに線を入れる方法

今回もWordPressの人気テーマ「Stinger3」のカスタマイズ備忘録です。OSXローカル環境にwordpressをインストールする方法で構築したローカル環境のWordPressでカスタマイズをします。ローカル環境は外部サーバーを経由しないのでレスポンスも良く、こういった試行錯誤の作業を行うにはかなり便利です。ちょっと難しそうなイメージはありますが、一度設定してしまえば使いたい時だけ起動するだけなので構築されていない方は是非導入してみてください。自分のローカル環境にあるStinger3は先日投稿したWordPressテーマ「Stinger3」のサイドバーの幅を変更する方法で記事幅とサイドバーの幅を変更してあります。興味ある方はそちらも挑戦してみてください！それでは始めます。

style.cssを開いて編集

普段、記事を投稿する時は一緒に画像もアップする事がほとんどだと思います。たまに背景が白っぽい画像をアップする事もあると思いますが、画像が背景色とかぶって写真がイマイチはっきりしない場合があります。こんな画像です、

多くのブロガーが利用している「ぱくたそ」さんから頂戴した画像です。どっからが画像で、どっからが背景なのか分かりにくい印象です。今回そんな問題を解決する為に画像に枠を付けてこんな風に、

[adsense]

枠を付けて画像の見た目をハッキリさせます。スタイルシート(style.css)を開きます。
例：ダッシュボード→外観→テーマ編集から→スタイルシート(style.css)自分は編集にTransmit4を使っています。

自分の環境では２５７行目ぐらいに記事タイトルの項目があります。

/*記事タイトル*/

.entry-title {
	font-size: 30px;
	line-height: 35px;
	color: #333;
	margin-bottom: 20px;
}
.entry .entry-content .entry-title a:hover {
	text-decoration: underline;
}
.entry-title a {
	color: #333;
	text-decoration: none;
}
/*アーカイブタイトル*/

.entry-title-ac {

ここの１５行目の後（/*アーカイブタイトル*/の上）に下記のコードを追加します。

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

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

/*アーカイブタイトル*/

.entry-title-ac {
  font-size: 24px;
}

アーカイブタイトルはデフォルトだと何も記載されていないと思いますが、こちらの設定を追加してください。最終的に下記のようになればOKです。今回追加した部分は４行目以降です。

.entry-title a {
	color: #333;
	text-decoration: none;
}
.sumbox img {
  border:solid 1px #ccc;
  padding:3px;
}

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

/*アーカイブタイトル*/

.entry-title-ac {
  font-size: 24px;
}

これで完成です！ブログの画像をチェックしてみてください！いかがでしょうか？画像に囲み線が入って見た目がスッキリしました。
読んで頂いてありがとうございました。

[adsense]