ディーエムガジェット

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

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

      2015/02/16

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

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

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

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

スポンサーリンク

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

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

WordPress[Stinger5] 画像の周りに線(囲み線)を入れる

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

WordPress[Stinger5] 画像の周りに線(囲み線)を入れる

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

スポンサーリンク

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

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

WordPress[Stinger5] 画像の周りに線(囲み線)を入れる

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

WordPress[Stinger5] 画像の周りに線(囲み線)を入れる

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

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

WordPress[Stinger5] 画像の周りに線(囲み線)を入れる

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

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

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

ここの10行目の後と34行目の後に下記の画像サイズを97%に変更するコードをペーストします。

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

スポンサーリンク

確認してみましょう!

WordPress[Stinger5] 画像の周りに線(囲み線)を入れる

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

 - WORDPRESS

Message

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

CAPTCHA


  関連記事

WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法
WordPress サイドバーにFeedlyボタンとRSSボタンを表示する方法
WordPressの人気テーマ「Stinger3」の追尾型SNSボックスを削除する方法
WordPressの人気テーマ「Stinger3」の追尾型SNSボックスを削除する方法
WordPress[nend] スマホ用広告(アフィリエイト)の導入方法
WordPress[nend] スマホ用広告(アフィリエイト)の導入方法
WordPress[Contact Form 7] ブログにお問い合わせフォームを設置
WordPress[Contact Form 7] ブログにお問い合わせフォームを設置
WordPress[Stinger3] 記事下のSNSボックスの背景色を変更する方法
WordPress[Stinger3] 記事下のSNSボックスの背景色を変更する方法
WordPress ブログにメンテナンス中と表示 Easy Pie Maintenance Mode
WordPress ブログにメンテナンス中と表示 Easy Pie Maintenance Mode
WordPress 蛍光ペン風テキスト装飾をCSSに設定
WordPress 蛍光ペン風テキスト装飾をCSSに設定
WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法
WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法
WordPress Backup to Dropbox
バックアップ命「WordPress Backup to Dropbox」を導入
WordPress 投稿一覧にタイトル文字数と本文文字数を表示させる
WordPress 投稿一覧にタイトル文字数と本文文字数を表示させる