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

ミニマリストinアメリカ

アメリカ人夫とアメリカ・カリフォルニア州で暮らすミニマリスト主婦のブログ

アプリーチのレイアウト崩れる問題解決方法

スポンサーリンク

「アプリーチ」ブロガーの方にはお馴染み、iPhoneとAndroidのアプリを同時に紹介できるブログパーツ作成サイトとっても便利ですごくお世話になっているのですが、
実はずっと不満がありました…

アプリーチを使うとこんなことができる!

例えばはてなブログのアプリを紹介したい場合、

はてなブログ
はてなブログ
無料
posted with アプリーチ
こんな感じのものが簡単にできてとっても便利ですよね(^^)

しかーし!

改行いらなくね?問題

私ははてなブログを「はてな記法」で書いているのですが、

アプリーチで生成されたコードをコピーして、

はてなの記事作成画面にそのまま貼り付けると、
↓こーんな感じの残念な仕上がりに…
改行されすぎ…!


はてなブログ

はてなブログ
無料

posted with アプリーチ
(アプリーチ用のCSS入れてます)

原因は自動的に生成されるコードに含まれる改行です!

↓改行を除けばこんなステキな仕上がりに☆

はてなブログ
はてなブログ
無料
posted with アプリーチ

前は改行を一括削除するために、エクセルのClean関数を使って取り除いていました。
すごく簡単にできる方法ですが、私の亀パソコンじゃどうもモチベーションがあがらず…(´・_・`)

スマホでサクっとできるようにしたいな~と思って、グーグル先生に聞いてみたらすぐに解決しました(^^)

簡単に改行を取り除く方法

「改行 削除」などでググると複数のサイトがヒットするので、気に入ったものを使ってください。

私は一番最初に出てきたこちらのサイトを使用しています

アプリーチで生成されたタグを貼り付けて「改行削除」をタップすると、
一瞬で改行が削除されます\(^^)/
f:id:papiko8-l:20170417020338g:plain
改行削除後、右下の「結果を選択する」をタップすると、テキストが全選択されるので、それをコピーしてはてなの記事作成画面に貼り付けます。

✔︎ビフォー
アプリーチのコードをそのまま貼り付け(改行あり)


はてなブログ

はてなブログ
無料

posted with アプリーチ

✔︎アフター
改行削除ツールで改行を処理すると美しい仕上がりに♡

はてなブログ
はてなブログ
無料
posted with アプリーチ

✔︎さらに!
コードの頭<fieldset>、末尾に</fieldset>を付け足すと、
<>は半角に変えてください)

はてなブログ
はてなブログ
無料
posted with アプリーチ

グレーの枠で囲むことができて更に見栄えがよくなりました
*\(^o^)/*

おわりに

f:id:papiko8-l:20170417025213g:plain
(画像はこちらで作成しました)

はてなブロガーのみなさんは「見たまま」「はてな記法」どちらで書かれてる方が多いのでしょうか?
気になります( ^ω^ )

私は最初「見たまま」で書いてたのですが、私には「はてな記法」の方が使いやすいのでずっとはてな記法派です。

でも今の仕様では見たままで書いたものをはてな記法で編集することができないんですよね~(´・_・`)
見たままで書いたものをもっと見栄え良くリライトしたいのですが、しづらくて筆が進みません←

そもそも「アプリーチの改行いらなくない?」と、私と同じ悩みを持ってた方はどのくらいいるんだろう…?

良かったらブコメやツイッターでコメントくださいね(^^)

おまけ

この記事を書いてる最中に、改行を自動的に削除してくれるアプリーチ用のCSSを発見したので、近々差し替えようと思います(^^)

でも今回ご紹介した
・改行を削除する方法
・グレーの枠で囲む方法

(先頭に<fieldset>・文末に</fieldset><>は半角に変える)
は、色々と使えると思うので、頭の片隅に置いておいてくださいね( ^ω^ )