はい。ブログの記事にはかならず画像を一つつけようと思ってます。そのほうが見た目も綺麗だし、なんか楽しいですしね。一応、記事に関連する画像があればそれを使うのですが、なければ記事のフィーリングに近いものを使うようにしています。
僕が今利用しているWordpressのテンプレートはYokoです。デフォルトのデザインのようにシンプルで、それでいて綺麗です。気に入っています。人気のテーマの一つでしょうね。ただ、ちょっと気になる点があったんです。それは画像を表示した時に枠が付けられない点です。CSSで指定しても無視されてしまう。僕の画像はプログラムやサイトの切り抜きが多くて背景が白の事が多いんです。枠がないとブログの背景と同化してどこまでが画像かわからなくなってしまっていたんですよね。そこで、取り組みました。YokoのCSSの修正です！
修正方法（カッコ悪い）
結果を書きますと修正は一応出来ました。テーマ編集>スタイルシート(style.css)で開くスタイルシートの一番最後に以下のコードを付け加えています。
/* --- Morizotter Customize ---- */
#content .single-entry-content img {
max-width:90%;
padding: 10px;
border: 1px solid silver;
background-color: #efefef;
}
#content .entry-content img {
max-width:90%;
padding: 10px;
border: 1px solid silver;
background-color: #efefef;
}
Gistにもアップしてみた Gist: Simple Image frame to WordPress Theme Yoko
カッコ悪いですねー。応急処置的な感じです。ポイントは、max-widthの90%です。一覧画面とブログ単体の画面で画像サイズがちゃんと収まるようにしています。月刊アーカイブとカテゴリでは画像が表示されないようなので対応していません。
あとで書くように、このテーマ、ちょっと画像に加工を加えると構造がおかしくなるんですね。。
試行錯誤
まず最初に、imgにpadding:10pxとbackground-color:#efefefとborder:1px solid silverをつけてみました。すると下の画像のようになってしまったのです。
ChromeのDeveloperなんとかで表示してみるとこんな感じでした。
なにか飛び出てます。オレンジ色の枠はブログ本文の枠と同じなので、飛び出てるのがおかしいんです。よくわからないままChrome Developer何とかの右の方に表示されている値を見ていくと、PropertiesのところでWidthが463pxとなっていました。これをChromeなんとかで動的に修正してみると440あたりで綺麗に本文内に画像が収まりました。
でこのimg[Attributes Style]というのが値を決めているようです。WordpressのCSSやらヘッダーファイルやら色々見て探したんですが、見つからない！もういいや！ってことで上記の解決策になりました。
Yokoを使っている方でもし、この記事を見てうまくいったらおめでとうございます！あと、この問題根本的には解決していません。もし何かヒントをお持ちの方がいらしたら教えて下さい。
よろしくお願いいたします。(´・ω・｀)
