アプリーチをsimplicityで使ったら画像が大きくなりすぎる時の解決方法

この記事の読了時間は約4分です。

AndroidアプリとiPhoneアプリをまとめて紹介できる、アプリーチ。

僕が使用しているwordpressテーマsimplicityで、アプリーチの貼り付けコードを入力すると、画像がとんでもなく大きく表示されて、レイアウトが崩れてしまう。

アプリーチ製作者のワタナベタツアキさんにTwitterでダイレクトメッセージを送って、解決方法を聞きました。

アプリーチとは？

アプリーチはアンドロイドアプリとiPhoneアプリをまとめて紹介できるアプリ紹介の便利ツールです。

手順はとても簡単で、

1. アプリーチのサイトへ行き
2. アプリ名を検索
3. 発行されたコードをコピー&ペーストでブログのエディタに貼り付ける

アプリーチはsimplicityと相性が悪い？

僕が直面した問題は、発行されたコードを貼り付けると、アンドロイド、iPhoneへ誘導する画像がとんでもなく大きく表示されること。

ブログ投稿前のビジュアルエディタでは正常に表示されるのに、公開前のプレビュー、実際に記事投稿URLでは画像がめちゃくちゃでかく表示されてしまう。

レイアウトが崩れた様子

アプリーチ表示崩れ解決方法１：子テーマCSSに追加

アプリーチに関する記事が少なく解決方法が見つからない。

唯一、simplicityとの関連性でレイアウトが崩れると言及していたサイト↓

simplicityの子テーマにCSSを追加してレイアウトを調整する方法が紹介されています。

僕の場合は、紹介されていたコードをコピペで適用させても、うまく表示されなかった。

wordpressでは、子テーマのテンプレートを導入して、その子テーマにCSSを追加していくというのが王道。「アプリーチ表示崩れ解決方法１」はこのやり方。

本体をいじらないので安全。でも、それだと他サービスを利用して、画像の表示が崩れるたびにCSSを追加しなければいけない。

製作者に直接聞いてみた

アプリーチ製作者のワタナベタツアキさんにTwitterでダイレクトメッセージを送って、解決方法を聞きました。

twitterでのやりとり

というわけで本体のCSSをいじることに着手。

アプリーチ表示崩れ解決方法２：本体のCSSをいじる

「本体のCSSをいじる」といっても、一部分を削除するだけなので超簡単。

ダッシュボードから、外観＞テーマ＞編集するテーマを選ぶ＞simplicity1.93(simplicity childではない)を選択する。

54行目～60行目のCSS

/*記事・カテゴリ中の画像を要素内に収める*/
.article img,
.category-description img,
.wp-caption,
.hover-image{
max-width:100%;
height:auto !important;　　　←ココを変更する！
}

height:auto !important;をheight:auto;に

アプリーチが正常表示された

height: auto !important;の意味

アプリーチが普通に表示できるようになったので一安心。

ワタナベタツアキさんありがとうございました！

 

「height: auto !important;」

CSSがわからないので、この1行が意味してることはよくわからない。

!important　というのは何よりもこのルールを優先しろ！っていう時に使うらしい。

参考height: auto !important; という記述、これってどういう事？- Yahoo!知恵袋

それが今回は問題を起こしてたようだ。

---

この記事をブログ等で紹介する際は下のHTMLコードをコピペしてお使い下さい。
泣いて喜びます。

<a href="http://49hack.jp/appreach-resize/">アプリーチをsimplicityで使ったら画像が大きくなりすぎる時の解決方法</a>