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

アプリーチがsimplicityでうまく表示されない

この記事は2016年2月18日に更新しました。
情報が古くなっている可能性があるのでご注意ください。

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

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

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

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

スポンサーリンク

アプリーチとは?

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

手順はとても簡単で、

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

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

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

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

レイアウトが崩れた様子

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

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

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

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

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

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

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

製作者に直接聞いてみた

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

twitterでのやりとり

appreach

アプリーチ表示崩れ解決方法

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

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

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

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

simplicityCSS編集

54行目~60行目のCSS

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

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

54行目「/*記事・カテゴリ中の画像を要素内に収める*/」の項目の

60行目 height:auto !important;をheight:auto;にして、ファイル更新。

「!important」を削除するだけでOK

行数がわからなければ、CTRL+Fで検索ボックスを表示させ、「画像を要素内に」などと検索すれば該当の54行目を教えてくれる。

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

height: auto !important;の意味

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

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

「height: auto !important;」

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

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

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

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


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

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

google関連記事広告
スポンサーリンク

コメント

  1. ペロ より:

    初めまして。私はアメブロでブログを書いているんですがアプリーチの同じ問題で悩んでいてこちらのブログにたどり着きました。プログラミングにあまり詳しくないんですが、もしよろしければ本体のCSSをいじるのところを詳しく教えていただけると嬉しいです。ダッシュボードというものも触ったことがなくて、先ほど初めて開いてみて分けが分からず固まってしまいました。汗
    ちなみにMacを使っています。
    もしお時間があればでいいのでどうぞよろしくお願いします。

    • 管理人 より:

      ペロさんへ。
      アメブロでも同様のアプリーチ問題があるとの指摘ありがとうございます。
      当サイト初コメントでマンモス嬉ピーです。

      どの無料ブログでもやり方は同じです。
      CSS(レイアウトに関する記述文章)を変更すればいいんです。

      「アメブロ CSS 編集」などで検索するとCSSの編集方法に関する記事が出てきます。
      僕が調べたところ、アメブロのCSS編集ってどこからできるの?http://ameblo.jp/css-staff/entry-10967761544.html
      という記事が参考になるかと思います。

      CSS編集画面までいけたら
      60行目 height:auto !important;をheight:auto;にして、ファイル更新で完了です。
      60行目がわからなかったらCSS編集画面でCTRL+Fで検索ボックスを表示させ「画像を要素内に」などと検索すれば該当の54行目を教えてくれるので60行目がすぐわかります。

      もし、この方法でもペロさんのアプリーチが正常に反映されないなら、
      ワタナベタツアキさん https://twitter.com/nabettu
      に直接聞くとアドバイスもらえるかもしれません。

  2. ペロ より:

    管理人さんへ

    こんなに早くお返事もらえるなんて感激です!
    早速CSS編集用のデザインに変更してCSSをいじっています。

    本当にありがとうございました^^

  3. […] 解決策も含め以下ブログ記事で紹介されていますのでそちらもご参照ください。 アプリーチをsimplicityで使ったら画像が大きくなりすぎる時の解決方法 | おっさんの放課後 icon-external-link […]

コメントをどうぞ

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください