読者です 読者をやめる 読者になる 読者になる

轟け!サブカル女子

上京を夢見るサブカル女

アプリ紹介ツール『アプリーチ』のレイアウトが崩れるので、解決してみた。<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>消すことで正しく表示されるようになったので、同じ症状になる方はこの方法試してみてください〜!
ちなみに、ブログテーマそのままで「見たままモード」に変更して同じコード貼ってみると、正しく正常に表示されました…。一体何が原因なんだろう…。