Twenty Twelve でアイキャッチ用のアプリアイコンが枠線で囲まれるのを解消する2つの方法

Butterfly Beyond the Borders
photo credit: Roger Lynn via photopin cc

せっかく角丸のアプリアイコンを用意したのに、アイキャッチ画像に設定したら枠線で囲まれてしまって角丸が台なしー。WordPress デフォルトテーマの Twenty Twelve でそんな現象に見舞われました。試行錯誤した結果、万能ではないものの2つ解消策が見つかりました。

目次

  1. やりたいこと
  2. 枠線で囲まれる理由
  3. 方法その1
  4. 方法その2
  5. 宿題

1. やりたいこと

今回やりたいことは、WordPress にアップロードしたアプリのアイコン画像を、角丸のまま表示させることです。スクリーンショットの左側が、Twenty Twelve の機能によって画像が枠線で囲まれた状態。これを右側のように表示させることが目標です。

screen shoot

ちなみにこのアイコンは iPhone のタスクマネジメントアプリ Things のものです。その洗練されたデザインが大好きです。

2. 枠線で囲まれる理由

まず、なぜ画像が枠線で囲まれてしまうのかを調べました。参考になったのはこちらのページ。

記事の内容は、以前のデフォルトテーマの Twenty Eleven についてですが、Twenty Twelve にも似たような機能が盛り込まれていました。スタイルシート(style.css)に記述されている次のコードが該当します。

.entry-content img,
.comment-content img,
.widget img,
img.header-image,
.author-avatar img,
img.wp-post-image {
	/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
	border-radius: 3px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

ここにある border-radiusbox-shadow が画像を彩ってくれる設定です。

3. 方法その1

最も簡単にできる対策としては、この機能を無効にしてしまう方法があります。たとえば5-7行目を、6行目を削除して次のように書き換えると、アイキャッチ画像についてはこの機能が働かなくなります。

変更前:

.author-avatar img,
img.wp-post-image {
	/* Add fancy borders......

変更後:

.author-avatar img {
	/* Add fancy borders......

アイキャッチ画像ではなく、記事の中に張り付けた画像の枠線をなくしたければ、1行目(.entry-content img,)を削除すれば対処できます。

ただ、これらの方法はアイコン以外の画像も一斉に枠線が非表示になってしまうことが難点です。

4. 方法その2

アイコンをアイキャッチ画像ではなく通常の画像として記事の冒頭に張り付け、クラスを指定して個別に設定を変える方法もあります。

記事の投稿画面で画像を張り付けると、このようなコードが挿入されます。

<img src="http://xxx/wp-content/uploads/xxx.png" alt="xxx" width="xxx" height="xxx" class="xxx" />

ここで、クラスの指定を追加します。例では app-icon としました。

<img src="http://xxx/wp-content/uploads/xxx.png" alt="xxx" width="xxx" height="xxx" class="app-icon xxx" />

そして style.css に、このクラスに適用するスタイルを追記しておきます。

/* アプリアイコン */
div.entry-content img.app-icon {
  border-radius: 0;
  box-shadow: none;
  float: left;
  margin: 0 10px 10px 0;
}

border-radius: 0;box-shadow: none; は、枠線の表示を無効にするための記述。float: left;margin: 0 10px 10px 0; は、記事の本文をアイコン画像の右側に回り込む形で表示させるための記述です。

こちらの方法は、枠線を消したい画像だけに明示的に指定できるので、私はひとまずこの方法を選びました。

ですが、アプリアイコンをアイキャッチ画像に設定しているわけではないので、ページによって表示サイズを切り替えるといった柔軟な対応はできません(本当はできるのかもしれませんが、自分の力ではそこまでできませんでした…)。

5. 宿題

私は今のところ、トップページのアイキャッチ画像の表示サイズを PC では 150px x 150px に、スマートフォンでは 75px x 75px に設定しています。

ですが、2番目の方法を選んだので、端末によって表示サイズを切り替えることができません。また、トップページと記事の個別ページとで表示サイズを変えることもできていません。この辺りが今後の宿題です。

コメントを残す

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