ディーエムガジェット

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[Yet Another Related Posts Plugin] RSSに関連記事を追加
WordPress[Yet Another Related Posts Plugin] RSSに関連記事を追加
WordPress[Contact Form 7] ブログにお問い合わせフォームを設置
WordPress[Contact Form 7] ブログにお問い合わせフォームを設置
驚くほど効果があった無料CDNサーバー「CloudFlare」の導入
驚くほど効果があった無料CDNサーバー「CloudFlare」の導入
WordPress[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
WordPress[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
WordPress[Stinger3] 記事下のSNSボックスの背景色を変更する方法
WordPress[Stinger3] 記事下のSNSボックスの背景色を変更する方法
CloudFlareより読み込みが速い!?CDNサービス「Photon」を検証。
CloudFlareより読み込みが速い!?CDNサービス「Photon」を検証。
WordPressテーマ「Stinger3」のフォントを変更する方法
WordPressテーマ「Stinger3」のフォントを変更する方法
WordPress[Acunetix WP Security] ファイルスキャンを行ってファイルのパーミッションを変更
WordPress[Acunetix WP Security] ファイルスキャンを行ってファイルのパーミッションを変更
WordPress[SEO Friendly Images] 画像のaltやtitleに文字列を自動的に追加
WordPress[XML Sitemap Generator] 時刻設定を日本時間に修正する方法
WordPress[XML Sitemap Generator] 時刻設定を日本時間に修正する方法