ブログ

【Gutenberg+JIN】アプリーチが崩れる・上手く貼れない時の対処法!原因はとても単純

アプリーチ

どうもFlad(@Flad_Box)です!

記事の中でアプリのリンクを貼る際に便利な【アプリーチ】ですが、ブログテーマをJIN、記事作成にGutenberg(グーテンベルク)を使用していると…

画像のように、アプリアイコンが異様に大きく、リンクのサイズがバラバラで「形が崩れちゃった」という人、多いのではないでしょうか…?

解決方法が見つからず、こんな記事を書いている人も見つけました…

【WordPress初心者向け】JINでGutenbergは使ってはいけない|てば旅 手羽その先へ (tebasaki-of-the-world.com)

ですがご安心ください!

僕はテーマにJIN、記事作成にグーテンベルクを使用していますが…

Google アプリ

Google アプリ

Google LLC無料posted withアプリーチ

このように、綺麗に貼る事が出来ますよ!

詳しいやり方を解説しますね

見た目が崩れる原因は?

画像のように、アイコンが異様に大きく、App StoreリンクとGoogle Playリンクの位置も大きさも異なる状況ですが…

アプリーチでコピーしたコードを…

そのままペーストしてませんか?

実は、そのままペーストしてしまうとおかしい結果となってしまいますが、【ブロックの追加】から【カスタムHTML】を選ぶ事で一瞬で解決します

綺麗にアプリーチを貼る手順

「アプリーチを使用した事ないよ!」と言う人にも分かりやすく、綺麗に貼る方法を解説しますね!

1.アプリーチでリンクを貼りたいアプリを検索

アプリーチ (mama-hack.com)
↑まずはこちらからアプリーチに飛びましょう↑

【ブログパーツ作成】の下の検索欄に、リンクを貼りたいアプリの名前を検索してみましょう

iPhone版とAndroid版の検索結果が表示されます。検索結果が思っていたアプリと異なる場合は、【複数検索】から、探してみましょう

2.コードをコピーする


検索結果から下へスクロールすると、【出力イメージを確認しましょう】と、様々な項目から貼った時の見た目を変更出来ます…が、こだわりがなければ特に気にせず無視しても大丈夫です

その下の、【ASP経由でアプリを紹介して、収益をあげませんか?】の項目も気にしなくて大丈夫です


↓重要な部分はココ!↓

【コードをコピーしてブログに掲載しましょう】までスクロールして下さい!

新コードか旧コード、お好みの方を選んだら下の【コピーする】をクリックしてコピーしましょう!「新コードを追加する際はCSSをブログに追加してください」とリンクが貼ってありますが、僕は追加してません

※【新コード】【旧コード】とありますが、少しだけ見た目が異なります(下記画像参照)


3.Wordpressの記事編集で、ブロック追加

WordPressの記事編集画面にて、リンクを貼りたい行間でEnterキーでブロックを作成したら、右に表示される黒い+(ブロックの追加)より、【カスタムHTML】を選択(無い場合は検索してください)

4.2でコピーしたコードをペースト(貼り向け)

【HTMLを入力…】と薄く書いてあるブロックが表示されるので、そこに先程アプリーチでコピーしたコードをペーストしましょう!



コードが表示されますが、ここで【プレビュー】をクリックしてみると…?

いかがでしょうか?綺麗に貼れたのではないでしょうか?

まとめ

いかがでしたか?

新しいゲームや便利なアプリをまとめているブログは多いと思いますが、「JINで Gutenbergを使ってたらリンクが貼れない!」なんて悩まなくても大丈夫です

コードを貼る時は【カスタムHTML】を使ってみる!

アフィリエイトリンクなどでも使うことになるので、ブログをやる上では、結構大事な機能ですよ♪