ディーエムガジェット

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[Stinger3] Twitterメンション設定
WordPress[Stinger3] Twitterメンション設定
WordPress[Stinger3用 子テーマ] サイトマップ(目次)を設置する方法
WordPress[Stinger3用 子テーマ]サイトマップ(目次)を設置する方法
WordPressテーマ「Stinger3」に子テーマを導入する方法
WordPressテーマ「Stinger3」に子テーマを導入する方法
WordPress[Stinger3]Amazonアソシエイトの自動ランキングを導入
WordPress[Stinger3] Amazonアソシエイトの自動ランキングを導入
WordPress[MAMP] ローカル環境へ本番環境を復元する
WordPress[MAMP] ローカル環境へ本番環境を復元する
WordPress[Public Post Preview] 記事を限定公開する
WordPress[Public Post Preview] 記事を限定公開する
WordPressテーマ「Stinger3」見出しから自動的に目次を作ってくれるプラグインを導入
WordPressテーマ「Stinger3」見出しから自動的に目次を作ってくれるプラグインを導入
WordPress[Stinger3] RSSフィードにアイキャッチ画像を表示
WordPress[Stinger3] RSSフィードにアイキャッチ画像を表示
WordPress[Broken Link Checker] リンク切れを自動通知する方法
WordPress[Broken Link Checker] リンク切れを自動通知する方法
WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ
WordPress[Stinger5] フッターにカテゴリを追加するカスタマイズ