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

ブログ運営
ピケピ
ピケピ

初めまして、ピケピ(@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>

まとめ

以上でアプリ紹介用のレイアウトが完成するはずです。

できなかったらコメントください!

ちなみにワタシのWordpressのテーマは「cocoon」を使っています。テーマが違うと実装の方法も違ってくる可能性もあるので、お気を付けください!

以上、最後までお読みいただきありがとうございました。

コメント

タイトルとURLをコピーしました