【WordPress】ブロックエディタを使ってGoogle PlayとApp Storeボタンを綺麗に並べる方法
以前にもGooglePlayのダウンロードボタンとAppp Storeのダウンロードボタンを綺麗に並べる方法についての記事を書きました。
当初2つのボタンを並べるにはGoogle Playボタンが大きかったので、GooglePlayのボタンのサイズをApp ボタンに合わせるだけで綺麗に並べられていましたが、今ではApp Storeのボタンのサイズが変わっていて前の方法では並びません。
そこで以前書いた記事は綺麗に並ぶよういろいろ試して、HTMLとCSSを使った方法に書き直しました。
https://kirari-yums.net/post-11683/上記の記事の方法でどのWebサービスでもHTMLとCSSを設定出来れば2つのボタンを綺麗に並べることが出来ると思います。
ですがWordPressを使っている方には「ブロックエディタ」があります。ブロックエディタを使えば上記の記事で紹介した方法より簡単に並べられると思うので今回の記事はその方法について書きたいと思います。
WordPress以外の方は上のリンクの記事の方法で横に並べてみてくださいね。
ボタンのコードを取得する
Google Play、App Storeのダウンロードボタンのコードは以下から取得してください。
Google Play
https://play.google.com/intl/en_us/badges/App Store
https://tools.applemediaservices.com/ja-jp/app-store/Google PlayおよびApp Storeのダウンロードボタンのコード取得方法については以下の記事で詳しく書いていますので参考にしてください。
ブロックエディタを使って綺麗に並べる方法
ブロックエディタを使ってGoogle PlayとApp Storeのダウンロードボタンを綺麗に並べる方法を紹介します。
左上の＋をクリックしてグループブロックを選択する
グループブロックを選択した後、横並びをクリックする
グループブロック内の「＋」をクリックしてカスタムHTMLブロックを設置する
また左側の設定で左寄せ、中央揃え、右寄せが選択できるのでお好きな位置を選択してください。
カスタムHTMLブロックの中にコードを貼り付ける
貼り付けたらグループブロックの右下にある＋をクリックしてもう一つカスタムHTMLを設置してコードを貼り付ける。
カスタムHTMLに貼り付けたコードをブロックに変換する
ブロックに変換したら右側の設定で画像のサイズを変更する
サイトではサイズはGoogle Playボタンはwidth(横幅) 165px、height(高さ) 64px。App Storeボタンをwidth(横幅) 148px、height(高さ) 49px にしてあります。
サイズを変更したら完成です♪下のボタンは実際にこの方法で設置したボタンです。
Threads(スレッズ)のアプリページにジャンプします。
ポチップ
私はパソコンを使わずにiPadで画像の編集や記事を書いています。私のブログ運営には欠かせないものです。
最後に
今回はブロックエディタを使ってGoogle PlayとApp Storeのダウンロードボタンを綺麗に並べる方法については書きました。
Google PlayボタンとApp Storeボタンの大きさが違うので横に並べたいのに綺麗に並べられなくて困りますよね。
以前紹介したHTMLとCSSを使った方法より簡単に出来ると思います(*^^*)アプリを紹介したい時WordPressを使っている方はこの方法でボタンを並べてみてください。
またグループブロックの横並びを使えば画像なども簡単に並べることができます。何かを並べたいときグループブロックの横並びや縦並びを使ってみるのもいいと思います。
2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。
ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。
