ブログ

アプリ紹介ツール『アプリーチ』のレイアウトが崩れるので、解決してみた。<br>が原因?

どうも、たっつんです!

ok723.hatenablog.com
この記事で「Evernoteはいいぞ!」って伝えたくて、初めて『アプリーチ』っていうアプリ紹介ツールを使ってみることにしました。

mama-hack.com
紹介したいアプリを検索すると、ブログに貼り付けるコードを自動で生成してくれるとても便利なツールです!

早速使ってみたんですが…何回やっても何故かレイアウトが崩れる!!!
css修正して解決してみたので、同じ症状で困っている方はぜひ参考にしてみてください〜

アプリーチを使ってみる

f:id:ok723:20160616120052p:plain
サイトで生成されたコードをコピーして…

f:id:ok723:20160616120053p:plain
作られたコードをブログ編集画面にそのままペーストすると…

f:id:ok723:20160616120054p:plain
あれ!?!!なんかおかしなことになってる!
他のブロガーさんはそのまま使えてるみたいなので、私のブログだけがおかしいのかな。元々入れてるcssが誤作動起こしてるのかもしれない。

<br>が原因?

f:id:ok723:20160616120056p:plain
調べてみると何故か<br>が差し込まれてる。これがズレの問題みたいだったのでcssに

 #appreach-box br{
display: none;
}

を書き足すと、正常に表示されるようになりました。

f:id:ok723:20160616120058p:plain
キレイになったー!

少しだけレイアウト変更

下の余白が気になったので

#appreach-box {
border-radius: 4px;
border: solid 1px #e4e4e4;
margin-bottom: 10px;
padding-top:10px;
}
#appreach-image{
width:110px !important;
}
#appreach-appname{
font-weight:bold;
}
.appreach-links{
margin-top: 15px;
}

を書き足してレイアウト少し変えてみました。

f:id:ok723:20160616121836p:plain
アプリアイコンとボタンが揃って見えるから少し見やすくなったかな〜。

まとめ

根本的な原因はわからなかったけど、<br>消すことで正しく表示されるようになったので、同じ症状になる方はこの方法試してみてください〜!
ちなみに、ブログテーマそのままで「見たままモード」に変更して同じコード貼ってみると、正しく正常に表示されました…。一体何が原因なんだろう…。

ABOUT ME
たっつん/イラストレーター
たっつん/イラストレーター
大阪在住のブロガー&イラストレーターのたっつんです。2017年からフリーランスとして活動中。 アラサー独身女性の生き方や好きなものについてつづるブログです。詳しいプロフィールはこちら

Amazonでのお買い物を格安にする方法

Amazonでのお買い物は、Amazonギフト券を使うとお買い得ですよ!

5,000円以上のギフト券チャージでポイントが貯まる
→プライム会員なら最大3.0%
→通常会員は最大2.0%

\Amazonでオトクに買い物しよう!/

≫ Amazonでギフト券チャージ(入金)する 

 

Amazonで買い物する時、普通に現金払いやクレジットカード払いにしてませんか?

それ実は、とてももったいないことしてますよ…!

Amazonギフト券をチャージでお買い物すると、そのチャージ金額に応じてポイントがプレゼントされるって知ってましたか?

 

コンビニ払いでチャージクレカ払いでチャージ
1回のチャージ額通常会員プライム会員1回のチャージ額プライム会員
90,000円以上〜2.0%3.0%90,000円以上〜一律1.0%
40,000〜89,999円1.5%2.5%40,000〜89,999円
20,000〜39,999円1.0%2.0%20,000〜39,999円
5,000〜19,999円0.5%1.5%5,000〜19,999円

 

例えば、Amazonプライムデーなど大規模なセール開催時に、90,000円以上のお買い物をした場合。

通常の現金・クレカ払い:支払い90,000円

ギフト券チャージで支払い:支払い90,000円+2,700円分(90,000円×3.0%)のポイントプレゼント

つまり、通常だと90,000円の支払いだけで何ももらえませんが、ギフト券にチャージしてお買い物すると、90,000円の買い物が実質73,000円になるというわけですね。

更に、プライム会員だと還元率が高くなります。月額コーヒー1杯分の金額で様々なサービスが利用できるので、まだプライム会員じゃない人はぜひこの機会に入会してくださいね!

同じ金額の買い物してるのに、ポイントがこんなについてくるなんて…おトクすぎる…!さっそくギフト券チャージしよ♪

\Amazonでオトクに買い物しよう!/

≫ Amazonでギフト券チャージ(入金)する 

 

COMMENT

メールアドレスが公開されることはありません。