ディーエムガジェット

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テーマ「Stinger3」見出しから自動的に目次を作ってくれるプラグインを導入
WordPressテーマ「Stinger3」見出しから自動的に目次を作ってくれるプラグインを導入
WordPress[Stinger5] プラグインなしで背景を画像にする
WordPress[Stinger5] プラグインなしで背景を画像にする
WordPress[Stinger3]Amazonアソシエイトの自動ランキングを導入
WordPress[Stinger3] Amazonアソシエイトの自動ランキングを導入
WordPress[TwitterCards] ツイッターに概要を表示させる方法
WordPress[TwitterCards] ツイッターに概要を表示させる方法
WordPress[Stinger3] サイドバーのアイコンを変更する方法
WordPress[Stinger3] サイドバーのアイコンを変更する方法
WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更
WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更
WordPress[Stinger3] コメントスパムを減らすプラグイン
WordPress[Stinger3] コメントスパムを減らすプラグイン
WordPress[Stinger5] 画像に囲み線を入れる
WordPress[Stinger5] 画像に囲み線を入れる
WordPress[Stinger3用 子テーマ] 追尾型SNSボックスを削除する方法
WordPress[Stinger3用 子テーマ]追尾型SNSボックスを削除する方法
WordPressテーマ「Stinger5」に子テーマを導入する方法
WordPressテーマ「Stinger5」に子テーマを導入する方法