自分のブログ記事でアプリを紹介する方法(WordPress/CSS)

ブログ運営

2021.09.17 2021.03.29

ピケピ

初めまして、ピケピ(@papa_pkp)と申します！

さっそくですが、

↓こんな感じのアプリ紹介の記事を作るためのレイアウト作成方法をまとめましたので、参考にして頂ければ嬉しいです。

ノハナフォトブック印刷・成長記録アプ‪リ‬

‬フォトブック　簡単に印刷

ジャンプできる目次

レイアウト作成方法
まとめ

レイアウト作成方法

WordPressの「カラム」と「クラシックHTML」と「CSS」を使って実現しています。

カラム

この部分はWordpressの「カラム」を使って実装します。

全体のブロックとタイトル、本文にCSSを設定します。CSSのソースは下の方に書いときます。

CSSの設定は、各ブロックを選択して「高度な設定」の中の「追加CSSクラス」に入力します。

タイトルのCSSなら、タイトルを選んだ状態でブロックの「追加CSSクラス」に入力。

クラシックHTML

そしてここは「クラシックHTML」の「テーブル」を使います。

ただ、ここでもCSSを使わないと、表示が切れたり、パソコン/スマホで見え方が違ったりします。

クラシックHTMLの場合は、「ツール」-「ソースコード」でCSSを設定します。

ソースコードの中にクラスを追加します。

table のすぐ後ろに「class=”app-syokai”」を追加すればOKです。

App StoreとGoogle Playの画像はそこらへんに落ちてる画像でOKです。

CSS

CSSは以下をコピペしてください。

cssファイルをいじるのもいいですが、記事内に「カスタムHTML」として以下をコピぺする方法がおススメです。いちいちcssファイル更新するのめんどいし、たぶんこんなニッチなCSSはこの記事でしか使わないという想定で。

<style>
.margin0 {
    margin-bottom: 0px!important;
}
.app-gazo img {
    border-radius: 10px;
}
.app-syokai{
    height: 0px!important;
}
.app-syokai img{
    max-width: 125px;
    border-radius: 15px;
}
.app-syokai-yoko img{
    max-width: 325px;
    border-radius: 15px;
}
.container table tr:nth-of-type(2n+1) {
    background-color: #ffffff !important;
}
.mozihaba {
    line-height: 15px;
}
.app-gazo {
    flex-basis: 20%!important;
    margin-right: 6px;
}
.app-detail {
    flex-basis: 55%!important;
}
.app-title {
    margin: 0!important;
}
</style>