装飾デザイン PR

【JIN(ジン)】ブログデザイン:ショートコード「2カラム」「3カラム」「見出しLP用」「星レビュー」の使い方

本ページはプロモーションが含まれています

はじめまして!みよしです!
本日は、私のwebサイトにお越しいただき、ありがとうございます。

JINには、記事を装飾し、読みやすくするのに役立つ様々なショートコードが用意されています。

今回紹介するJINショートコード

  1. 2カラム
  2. 3カラム
  3. 見出し(LP用)
  4. 星(レビュー用)

JIN(ジン)の、デザイン編集は初心者に優しいため、簡単にデザインできます。
一緒にやっていきましょう!!

それでは、わかると楽しいwebマーケティングスタート♪

JIN(ジン)とは?

「JIN」は、初心者でも簡単に高品質なブログを作れるWordPressテーマです。
JINを使って、あなたも魅力的なブログを作り上げ、ブログを成功させましょう!

JIN(ジン)の魅力について
こちらの記事も読んでみてくださいね!
こちらから

 

参考:JIN公式サイト:https://jin-theme.com/ 

2カラム

カラムとは、Webサイトのコンテンツレイアウトを構成していて、主に縦方向に並ぶブロックのこと。

2カラム

  • コンテンツエリアとサイドバーが左右に分割されたレイアウト
  • 広告や関連記事などをサイドバーに表示できる
  • 情報量が多いコンテンツに向いている
  • ブログらしいレイアウト

2カラム

左のコンテンツはここに入力

右のコンテンツはここに入力

2カラム【背景色あり】

2カラム背景色あり

2カラム背景色あり

背景色の変更:color=”#000000” (カラーコード一覧表から)

2カラム【タイトルあり】

2カラム

タイトルあり(左)

2カラム

タイトルあり(右)

2カラム【タイトル&背景色あり】

2カラム

タイトル&背景色あり(左)

2カラム

タイトル&背景色あり(右)

背景色の変更:color=”#000000” (カラーコード一覧表から)

3カラム

3カラム

  • さらに多くの情報を表示できる
  • マガジンサイトのようなレイアウト

3カラム

3カラム(左)

3カラム(中央)

3カラム(右)

3カラム【背景色あり】

3カラム背景色あり(左)

3カラム背景色あり(中央)

3カラム背景色あり(右)

背景色の変更:color=”#000000” (カラーコード一覧表から)

3カラム【タイトルあり】

3カラム

タイトルあり(左)

3カラム

タイトルあり(中央)

3カラム

タイトルあり(右)

3カラム【タイトル&背景色あり】

タイトル(左)

左のコンテンツはここに入力

タイトル(中)

中央のコンテンツはここに入力

タイトル(右)

右のコンテンツはここに入力

背景色の変更:color=”#000000” (カラーコード一覧表から)

見出し(LP用)

LPライディングページは、商品品やサービスの販売促進に特化した、訴求力のあるLPのこと。

LPライディングページの特徴

  • 明確なコンバージョンゴール:
    資料請求、購入、メルマガ登録など、具体的なコンバージョンゴールを設定している。
  • ターゲット層に合わせた訴求:
    ターゲット層のニーズや課題を理解し、それに合わせた訴求を行っている。
  • 魅力的なデザイン:
    商品やサービスの魅力を伝えるために、視覚的に訴求するデザイン。
  • 簡潔でわかりやすい文章:
    ユーザーがすぐに理解できるように、簡潔でわかりやすい文章を使用。
  • 目立つCTA(Call to Action):
    資料請求や購入などの行動を促すボタンを目立つように配置している。

見出しLP用のデザイン

[lp-h2 style="1"]ここにテキストを入力[/lp-h2]

デザインは3パターンあるので、style=”1″の1を1、2、3で変更します。

デザイン①style=”1″

見出しLPデザイン1

デザイン②style=”2″

見出しLPデザイン2

デザイン③style=”3″

見出しLPデザイン3

星(レビュー用)

JINには、星レビューを簡単に挿入できるショートコードが用意されています。

このショートコードを使用すると、5段階評価の星レビューを記事やページに簡単に表示することができます。

星1
星1.5
星2
星2.5
星3
星3.5
星4
星4.5
星5

星の色やサイズも変更できる

[jinstar4.0 color="#ff0000"size="24px"]

みなさん、カラーコード知っていますか?

カラーコードとは、ウェブページや画像などで色を指定するためのコードです。
ここでは、RGBのカラーコードを16進数で表記した6桁の英数文字
例:赤「#FF0000」

便利ツール

  1. 原色大辞典色の名前とカラーコードが一目でわかるWEB色見本)
  2. カラーコード変換ツール(16進数のカラーコード、RGB値、HSV値の相互変換ができる)

出典:原色大辞典より

まとめ

おつかれさまです!

ブログ記事の文章は、わかりやすさと読みやすさが大切です。
SEO対策においても重要な項目です!!
これらのショートコードを活用することで、より魅力的なブログ記事を作成することができます。

そのわかりやすさと読みやすさをアップしていくには、
デザイン編集で「2カラム」「3カラム」「見出しLP用」「星レビュー用」を使ってブログ装飾デザインをしましょう!

その他も気になる方は…

「会話」でブログが楽しく読める!
「吹き出し機能」を紹介しています。
←画像をクリック

さいごに

webマーケターを目指す!
4児のシングルマザーです!

私が楽しくwebマーケティングを学んでいるところは
リモラボ】オンラインスクールです。

私の目標は、在宅ワークで月収50万円以上稼ぐことです。

私はまだ学び始めたばかりですが、
シングルマザーで子供が4人いても、 借金があっても、貯金がなくても
スキル0から在宅ワークで月50万以上稼げるまでの人生逆転劇を
届けていきたいと思っています。

そして、私と同じようにお金に困っているママやシングルマザーで頑張っているママに、
私のやり方を参考にしたいと思ったときのために、しっかりと成長過程を記録に残して、
発信していきます。

よかったら、どん底から這い上がっていく私の成長状況を見に来てください。
私は4人の子供達の為に絶対あきらめません!
最強の母を目指していきます。

詳しい経緯はプロフィール記事にまとめているので、よかったら読んでみてくださいね!

最後まで読んでいただきありがとうございました

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です