ブログ

アプリ紹介ツール『アプリーチ』のレイアウトが崩れるので、解決してみた。<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年からフリーランスとして活動中。 アラサー独身女性の生き方や好きなものについてつづるブログです。詳しいプロフィールはこちら

社会人の私が留学に選んだのは、本気留学のサウスピーク!
サウスピーク

1月から2月までの1ヶ月間、人生初の留学をしていました。

私が今回人生で初めての海外留学で選んだのは、サウスピークです。

 

  1. サウスピークは本気留学!毎日10時間勉強できる環境だから、成果が出せる
  2. 優秀な講師陣が揃っているから、安心して勉強できる
  3. フィリピンは欧米に比べて、格安の値段で留学ができる

 

\1分で完了!/

まずは見積もり!サウスピーク留学費用を見てみる

COMMENT

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