ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

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

      2015/02/16

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

スポンサーリンク

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

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

style.cssを開いて編集

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

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

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

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

スポンサーリンク

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

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

/*記事タイトル*/

.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 {

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

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

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

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

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

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

.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;
}

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

スポンサーリンク

 - WORDPRESS

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

wordpress優良プラグイン
wordpress優良プラグイン
WordPress[Stinger3]Amazonアソシエイトの自動ランキングを導入
WordPress[Stinger3] Amazonアソシエイトの自動ランキングを導入
WordPress[Acunetix WP Security] セキュリティー対策としてユーザー名(admin)を変更
WordPress[Acunetix WP Security] セキュリティー対策としてユーザー名(admin)を変更
WordPressテーマ「Stinger3」に子テーマを導入する方法
WordPressテーマ「Stinger3」に子テーマを導入する方法
WordPress[Stinger5] めちゃ便利スマホ固定式フッターメニュー
WordPress[Stinger5] スマホ固定式フッターメニューを導入
WordPress[Limit Login Attempts] ログイン試行回数を制限してブルートフォースアタックを防ぐ
WordPress[Limit Login Attempts] ログイン試行回数を制限してブルートフォースアタックを防ぐ
WordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法
WordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法
WordPress[Acunetix WP Security] テーブル接頭辞を簡単に変更する
WordPress[Acunetix WP Security] テーブル接頭辞を簡単に変更する
「All in One SEO」でカテゴリーページが[noindex]になっていた。
「All in One SEO」でカテゴリーページが[noindex]になっていた。
WordPress[Stinger3]サイドバーに人気記事を表示させる方法
WordPress[Stinger3] サイドバーに人気記事を表示させる方法