ブログでおすすめ商品やサービスを紹介する際に、テーブル（表）で紹介して、◎や△を付けたい場合があります。とても有効で分かりやすく、読者ファーストのデザイン、装飾になります。

装飾例

本記事では、テーブル（表）に◎や△を付ける方法を解説します。◎◎しちゃいましょう！

プラグイン「SIMPLE BLOG DESIGN」を使う

「SIMPLE BLOG DESIGN」の紹介

SIMPLE BLOG DESIGN は「株式会社メリル」が発売する有料（ 9,800円 ）のプラグインです。本記事の目的であるテーブルへの◎〇△などの記号付与はもちろん、ブログ制作に役立つ多様な機能が包含されています。

その他にも優れた機能がありますので、有料ですが、利用価値の高いプラグインとしてご紹介します。

SIMPLE BLOG DESIGN で追加されるブロック例

「SIMPLE BLOG DESIGN」の購入

SIMPLE BLOG DESIGN のご購入は、「株式会社メリル」の専用ダウンロードページからクレジット会社情報を入力しモジュールをダウンロードします。支払いはクレジットカード支払いとなります。買い切り式ですので、一度購入してしまえば永続的に使えるほか、自身が運営しているサイトであれば、使いまわし可能です。（１回買えば複数の自分のブログで利用できる）

SIMPLE BLOG DESIGN のご購入はこちらから

PR

＼一日でも早いほうが役に立つ／

SIMPLE BLOG DESIGN のご購入はこちらから

プラグインの購入はこちらから（https://meril.co.jp/simple-blog-design）

テーブル（表）に◎や△を付ける方法

「SIMPLE BLOG DESIGN」でテーブルを作る

〇や△を入れるテーブルは「SIMPLE BLOG DESIGN」専用のテーブルを用います。テーブルは WordPress のパターンから選択します。

「SIMPLE BLOG DESIGN」で記号（〇や△）を入れる

実際にテーブルに〇や△を入れていきます。

こちらのように、赤字にしたり☆を付けたりすることもできます（実際に 「SIMPLE BLOG DESIGN」で作成した表になります）。

購入とプラグインのインストール方法

「SIMPLE BLOG DESIGN」は有料プラグインとなっています。以下の「購入はこちらから」をクリックして、購入・ダウンロードページに進んでください。

SIMPLE BLOG DESIGN のご購入はこちらから

PR

＼一日でも早いほうが役に立つ／

SIMPLE BLOG DESIGN のご購入はこちらから

プラグインの購入はこちらから（https://meril.co.jp/simple-blog-design）

支払いが完了すしたら続けて以下のファイルをダウンロードします。

インストール完了です。「SIMPLE BLOG DESIGN」の機能を使い始めることが可能です。

WordPress テーマによっては、標準機能で記号を使うことができる

WordPress のテーマ SWELL （有料：17.600円）を用いている場合は、テーマの標準機能でテーブル内に記号（〇など）を表示することができます。

SWELLで作ったテーブル（記号）の例

SIMPLE BLOG DESIGN プラグインよりも若干記号が小さめなのが特徴です。詳しくは以下の記事を参照してください。

＼SWELLで作るテーブルの中の記号／

Enjoy SWELL

【SWELL】テーブルの中に「〇（二重丸・丸）」や「△（三角）」を表示する方法 | Enjoy SWELL SWELL は標準の機能でテーブルの中に「〇（二重丸・丸）」や「△（三角）」を表示することができます。本記事では、テーブルにマークを付ける方法を解説します。

SIMPLE BLOG DESIGE と SWELL の比較

SIMPLE BLOG DESIGN プラグインでも SWELL でも似たような記号表示をすることができます。実際の見た目を比較します。

WordPress のお役立ちテクニックはこちら

まとめ：テーブルの中に「〇（二重丸・丸）」や「△（三角）」を表示する方法

ブログでおすすめ商品やサービスを紹介する際に、テーブル（表）で紹介して、◎や△を付けたい場合があります。とても有効で分かりやすく、読者ファーストのデザイン、装飾になります。「SIMPLE BLOG DESIGN」プラグインを使うと、簡単に◎や△をを付けることができます。

見やすいデザイン・装飾はクリック率、収益率を上げます。１日でも早く導入して１日でも早く収益アップを狙いましょう。

ブログの作り方などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

詳しくはこちら

詳しくはこちら

詳しくはこちら

WordPress の情報、テクニック一覧はこちらをクリック！

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR

ブログ記事やお店のサイトを作った際に、大きく目立たせたいテキスト文字列などをグラデーションで採色したいケースがありますね。赤や青など単色なら簡単ですが、グラデーションさせる場合はいったいどうするのでしょう？

テキスト色をグラデーションさせる方法はCSSを使って簡単に実施できます。コピーして利用できるよう、サンプルコードを本記事で紹介します。本記事では、テキスト文字の文字色をグラデーションする方法を解説します。どんどんグラグラしちゃいましょう！

グラデーションサンプル

テキスト文字の文字色をグラデーションさせるサンプルです。上下方向、左右方向、中心から外側に向けてのグラデーションなど、多様な表現が可能です。

上下のグラデーション

グラデーション

グラデーション

左右のグラデーション

グラデーション

グラデーション

中心から外側へのグラデーション

グラデーション

グラデーション

グラデーションの設定方法

WordPress でテキスト文字の文字色をグラデーションさせる方法です。

Step.1 文字列を設定し、クラス名をつける

• WordPress でテキスト文字列を配置して、ブロックの設定で追加CSSクラスに任意のクラス名（例：myGradientTextSample）を設定する

Step.2 CSS を設定する

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

設定するCSSのコードは下記です。

/* グラデーションテキスト */
.myGradientTextSample{
  background: linear-gradient(to top, #CC8D00, #FFF488);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

赤字の部分で、方向、色を指定します。

完成です。追加CSSはサイト共通の場所になるので、他の記事内のテキストに同じグラデーションを使いたい場合は（テキストに）同じクラス名を設定するだけでグラデーションになります。（Step.1 だけやればいい）

WordPress のお役立ちテクニックはこちら

【自宅で出来る・一人で出来る】ブログ・アフィリエイトで始める副業

ブログ

比較的安定した収入がある会社員が、月々プラスアルファの収入を得たいと思った時に最もおすすめしたい副業は「ブログ・アフィリエイト」です。

「ブログ・アフィリエイト」とは、自分のブログを開設し企業の広告を貼ることで、読者が広告をクリックして商品を購入した場合に紹介報酬が手に入る副業です。

人気の出るサイトであれば、大きな収益が期待できることも。ストック型の収益モデルのため、作業時間以上に収益をあげられる可能性がある副業です。定年して会社を退職した後も、収入を確保し続けることができます。

ブログ・アフィリエイトの始め方がわからない場合でも手順通りやれば大丈夫、具体的な手順は こちらを参照 してください。

＼１日早く始めれば、１日早く収入が増える／

ブログ・アフィリエイトの始め方はこちらから

プラスアルファの人生は、始めなければ始まらない

まとめ：テキストの文字色をグラデーションさせる方法

テキストの文字色をグラデーションさせる方法です。

記事やサイトの表現力がまた一つアップしますね。

ブログの作り方などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

詳しくはこちら

詳しくはこちら

詳しくはこちら

WordPress の情報、テクニック一覧はこちらをクリック！

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR

右に左に画像やロゴをスライドさせるとカッコイイ演出になりますね。しかし、一体どうしたらスライドさせられるのでしょう？実は覚えてしまえば簡単です。

以下のようなロゴスライダーなど、簡単に作れます。

本記事では、画像スライダー（slick）を実装する方法を解説します。ぐらんぐらんスライドさせちゃいましょう！

画像スライダーのサンプル

実際にスライダー（slick）を実装したサンプルです。イメージにマウスを重ねると、イメージがちょっと動く仕掛けを入れています。

画像スライダーの作り方（基本）

単純に画像を並べてスライドさせる作り方です。（マウスホバーで画像が変わる処理はありません）

Slick スライダーを初期化している間の「loading…」画像の表示は行います。

サンプル（基本）

■ ライブラリとCSSの読み込み

スライダーを使うための CSS とライブラリー（※）を読み込みます。

（※ “Slick” は、多機能でカスタマイズ可能な jQuery のスライダーです。ライブラリ＝jQuery を読み込みます）

<!-- スライダー用の CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">

<!-- ライブラリを読み込む -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

「cdn.jsdelivr.net」から Slick スライダーを使うためのライブラリーを読み込みます。固定ページや投稿ページで使う場合、「カスタムHTML」ブロックを配置して、上記のコードを貼り付けてください。

■ 画像をメディアライブラリに設置

スライダーに表示するための画像（一覧に表示するための画像と、「loading…」画像（アニメーション gif で作成）は前もってメディアライブラリに読み込ませておきます。

メディアライブラリに登録したら、イメージファイルのURLを取得してきます。各イメージをクリックして詳細を表示します。

右下のファイルのURLから「イメージファイルの URL」を取得します。忘れずに「loading…」画像のURLも記録しておいてください。

■ HTML 部分

スライダーの HTML 部分です。「loadning…」画像と、スライダーで利用するイメージファイルを用意しています。

（WordPress で利用する場合は、「カスタムHTML」ブロックなどで設置します）

<!-- loading メッセージ -->
<div class="mySlickLoadingMessage"><img src="https://xxxx/xxxx_loading.gif"></div>

<div class="mySlick">
  <div class="mySlick_item"><img src="https://xxxx/xxx1.png" alt="" width="120" height="120""></div>
  <div class="mySlick_item"><img src="https://xxxx/xxx2.png" alt="" width="120" height="120""></div>
  <div class="mySlick_item"><img src="https://xxxx/xxx3.png" alt="" width="120" height="120""></div>
  <div class="mySlick_item"><img src="https://xxxx/xxx4.png" alt="" width="120" height="120""></div>
  <div class="mySlick_item"><img src="https://xxxx/xxx5.png" alt="" width="120" height="120""></div>
  <div class="mySlick_item"><img src="https://xxxx/xxx6.png" alt="" width="120" height="120""></div>
  <div class="mySlick_item"><img src="https://xxxx/xxx7.png" alt="" width="120" height="120""></div>
  <div class="mySlick_item"><img src="https://xxxx/xxx8.png" alt="" width="120" height="120""></div>
</div>

「loading…」イメージのURLと、slick スライダーで利用する各イメージのURLを並べています。クラス名は必要に応じて変えてください。

■ CSS 部分

スライダーの CSS 部分です。

（WordPress で利用する場合は、「カスタムHTML」ブロックなどで設置します）

<style>
/* ******************************* */
/* スライダー */
.mySlick {
  width : 100%;
  opacity: 0;
  height : 0px;
}

/* フェードインのアニメーション */
.mySlickFadein {
    animation: mySlickFadeInAnimation 3s ease forwards;
}

@keyframes mySlickFadeInAnimation {
  from {
    opacity: 0;
    height : 120px;
  }
  to {
    opacity: 1;
    height : 120px;
  }
}

/* イメージ */
.mySlick_item {
  margin-right: 5px;
  margin-left: 5px;
}

.mySlick_item img {
  width: 120px;
  height: auto;
}

/* loading メッセージ */
.mySlickLoadingMessage {
  display: block;
  text-align : center;
  height : 120px;
  font-size : 20px;
  padding-top : 12px;
  margin-bottom : 0px !important;
}
</style>

イメージやスライダーのサイズ（横・縦）を指定しています。スライダーの初期化終了後に「loading…」イメージは消えてスライダーをフェードインで表示させるため、そのアニメーションも定義しています。

■ JavaScript 部分

スライダーの JavaScript 部分です。

（WordPress で利用する場合は、「カスタムHTML」ブロックなどで設置します）

<script>
// スライダーの初期化
$(document).ready(function(){
  // スライダーの初期化
  $(".mySlick").slick({
    autoplay: true,
    autoplaySpeed: 0,
    speed: 5000,
    cssEase: 'linear',
    slidesToShow: 3,
    swipe: false,
    pauseOnFocus: false,
    pauseOnHover: false,
    arrows: false,
    variableWidth: true
  }).on('afterChange', function(){
    // スライダーの初期化が完了したらフェードインさせる
    $('.mySlick').addClass('mySlickFadein');
    // loading メッセージを非表示にする
    $('.mySlickLoadingMessage').hide();
  });
});
</script>

画像スライダーの作り方（応用）

画像を並べてスライドさせ、かつマウスオーバーで画像を切り替えます。メインの画像が上側にあり、マウスホバーした対象の画像にメインの画像も切り替わります。

• マウスホバー時の動くアニメーションは「アニメーション gif」を用意しています

サンプル（応用）

■ ライブラリとCSSの読み込み

スライダーを使うための CSS とライブラリー（※）を読み込みます。（ここは基本編と一緒です）

<!-- スライダー用の CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">

<!-- ライブラリを読み込む -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

「cdn.jsdelivr.net」から Slick スライダーを使うためのライブラリーを読み込みます。固定ページや投稿ページで使う場合、「カスタムHTML」ブロックを配置して、上記のコードを貼り付けてください。

■ 画像をメディアライブラリに設置

スライダーに表示するための画像（一覧に表示するための画像と、マウスホバー時のアニメーション gif 画像、「loading…」画像（アニメーション gif で作成）は前もってメディアライブラリに読み込ませておきます。

メディアライブラリに登録したら、イメージファイルのURLを取得してきます。各イメージをクリックして詳細を表示します。

今回のサンプルでは、画像のファイル名（URLのファイル名部分）を、通常時は「.png」、マウスホバー時は「_hover.gif」と切り替わるように（JavaScriptで）作っています。同じ（ような）ファイル名にしてください。

■ サンプルコード

スライダーの サンプルコードです。HTML、CSS、JavaScript を全て一緒に記載します。

（WordPress で利用する場合は、「カスタムHTML」ブロックなどで設置します）

<!-- Main -->
<div style="text-align:center">
  <div class="mySlickNeoMainImage"><img src="https://xxxx/mySlick_image1_hover.gif"></div>
</div>

<br>

<!-- loading メッセージ -->
<div class="mySlickNeoLoadingMessage"><img src="https://xxxx/loading.gif"></div>

<div class="mySlickNeo">
  <div class="mySlickNeo_item">
    <img src="https://xxxx/mySlick_image1.png" alt="" width="120" height="120" onMouseOver="mySlickNeo_changeImage(this)" onMouseOut="mySlickNeo_resetImage(this)">
  </div>
  <div class="mySlickNeo_item">
    <img src="https://xxxx/mySlick_image2.png" alt="" width="120" height="120" onMouseOver="mySlickNeo_changeImage(this)" onMouseOut="mySlickNeo_resetImage(this)">
  </div>
  <div class="mySlickNeo_item">
    <img src="https://xxxx/mySlick_image3.png" alt="" width="120" height="120" onMouseOver="mySlickNeo_changeImage(this)" onMouseOut="mySlickNeo_resetImage(this)">
  </div>
  <div class="mySlickNeo_item">
    <img src="https://xxxx/mySlick_image4.png" alt="" width="120" height="120" onMouseOver="mySlickNeo_changeImage(this)" onMouseOut="mySlickNeo_resetImage(this)">
  </div>
  <div class="mySlickNeo_item">
    <img src="https://xxxx/mySlick_image5.png" alt="" width="120" height="120" onMouseOver="mySlickNeo_changeImage(this)" onMouseOut="mySlickNeo_resetImage(this)">
  </div>
  <div class="mySlickNeo_item">
    <img src="https://xxxx/mySlick_image6.png" alt="" width="120" height="120" onMouseOver="mySlickNeo_changeImage(this)" onMouseOut="mySlickNeo_resetImage(this)">
  </div>
  <div class="mySlickNeo_item">
    <img src="https://xxxx/mySlick_image7.png" alt="" width="120" height="120" onMouseOver="mySlickNeo_changeImage(this)" onMouseOut="mySlickNeo_resetImage(this)">
  </div>
  <div class="mySlickNeo_item">
    <img src="https://xxxx/mySlick_image8.png" alt="" width="120" height="120" onMouseOver="mySlickNeo_changeImage(this)" onMouseOut="mySlickNeo_resetImage(this)">
  </div>
</div>

<style>
/* ******************************* */
/* スライダー */
.mySlickNeo {
  width : 100%;
  opacity: 0;
  height : 0px;
}

/* フェードインのアニメーション */
.mySlickNeoFadein {
    animation: mySlickNeofadeInAnimation 3s ease forwards;
}

@keyframes mySlickNeofadeInAnimation {
  from {
    opacity: 0;
    height : 120px;
  }
  to {
    opacity: 1;
    height : 120px;
  }
}

/* イメージ */
.mySlickNeo_item {
  margin-right: 5px;
  margin-left: 5px;
}

.mySlickNeo_item img {
  width: 120px;
  height: auto;
}

/* loading メッセージ */
.mySlickNeoLoadingMessage {
  display: block;
  text-align : center;
  height : 120px;
  font-size : 20px;
  padding-top : 12px;
  margin-bottom : 0px !important;
}

</style>

<!-- SLICK の実装 -->
<script>
// イメージ切り替え
function mySlickNeo_changeImage(img) {
  img.src = img.src.replace(".png", "_hover.gif");

  var divElement = document.querySelector('.mySlickNeoMainImage img');
  divElement.src = img.src;
}

function mySlickNeo_resetImage(img) {
  img.src = img.src.replace("_hover.gif", ".png");
}

// スライダーの初期化
$(document).ready(function(){
  // スライダーの初期化
  $(".mySlickNeo").slick({
    autoplay: true,
    autoplaySpeed: 0,
    speed: 5000,
    cssEase: 'linear',
    slidesToShow: 3,
    swipe: false,
    pauseOnFocus: false,
    pauseOnHover: false,
    arrows: false,
    variableWidth: true
  }).on('afterChange', function(){
    // スライダーの初期化が完了したらフェードインさせる
    $('.mySlickNeo').addClass('mySlickNeoFadein');
    // loading メッセージを非表示にする
    $('.mySlickNeoLoadingMessage').hide();
  });
});
</script>

イメージのURLやクラス名は必要に応じて変えてください。

Slick のコアオプションとイベント

JavaScript 部分で利用できる、Slick の設定（コアオプション）とイベントを記載しておきます。

Slick で利用できる設定（コアオプション）です。

Slick で利用できる設定（コアオプション）です。

いろいろ工夫して、おしゃれでかっこいい Slick スライダーを作ってみてください。

WordPress のお役立ちテクニックはこちら

【自宅で出来る・一人で出来る】ブログ・アフィリエイトで始める副業

ブログ

比較的安定した収入がある会社員が、月々プラスアルファの収入を得たいと思った時に最もおすすめしたい副業は「ブログ・アフィリエイト」です。

「ブログ・アフィリエイト」とは、自分のブログを開設し企業の広告を貼ることで、読者が広告をクリックして商品を購入した場合に紹介報酬が手に入る副業です。

人気の出るサイトであれば、大きな収益が期待できることも。ストック型の収益モデルのため、作業時間以上に収益をあげられる可能性がある副業です。定年して会社を退職した後も、収入を確保し続けることができます。

ブログ・アフィリエイトの始め方がわからない場合でも手順通りやれば大丈夫、具体的な手順は こちらを参照 してください。

＼１日早く始めれば、１日早く収入が増える／

ブログ・アフィリエイトの始め方はこちらから

プラスアルファの人生は、始めなければ始まらない

まとめ：画像スライダー（slick）を実装する方法

Slick スライダーを効果的に使えるとサイトが一段とクールになりますよね。しかし、一見難しそうに見えます。実際には、Slick スライダーは jQuery が用意されていますので、CSS と JavaScript を定型的に記載することで利用することが可能です。

たのしいサイト、魅力的なサイトをどんどん作ってくださいね。

ブログの作り方などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

詳しくはこちら

詳しくはこちら

詳しくはこちら

WordPress の情報、テクニック一覧はこちらをクリック！

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR

WordPress には、おしゃれなデザインを作ることができる「カバーブロック」機能があります。

画像の上に文字やコンテンツを表示したり、固定背景（切り抜きイメージ）などでオシャレにデザインしたり、特にトップページのデザインで大活躍するカバーブロックです。魅力的なサイトデザインのためには要な機能ですね。

本記事では、「カバーブロック」でできること、使い方を簡単に紹介します。素敵なデザインのサイトを作りましょう！

カバーブロックでできること（サンプル）

■ 画像の上に文字などのコンテンツを表示することができる

パリの街並み

７区のおしゃれ街歩きカフェ巡りと言えば「クレ通り」

パリの写真を不透明度（25%）で設定して白文字を配置しています。

■ サイト内の表示エリア横いっぱいに広げて表示

画像をコンテンツ幅を超えて、表示できる横幅いっぱいに表示します。（どこまで表示できるかは利用しているテーマによっても変わります）

■ 画像を固定して、窓枠効果を出す

記事を上下にスクロールさせてみてください。背景の画像位置が固定されたままスクロールが動きます。

■ カバーブロックを多重に利用して、よりオシャレなデザインにする

パリのおしゃれ

カフェを楽しむ

たまたま見つけたカフェに入って一休み

今日の一日素敵に過ごす

優雅な一日、パリジェンヌ

カバーブロックの上に、さらにカバーブロックを重ねてみました。

左側にテキスト、右側にカバーブロック（固定背景）とするため、カラムブロックを利用しています。

カバーブロックの使い方

■ カバーブロックの用意と背景画像の設定

WordPress の記事作成画面で「カバー」を選択します。

カバーブロックで「アップロード」または「メディアライブラリ」から画像を指定します。

■ カバーブロックへの文字やコンテンツの重ね方

カバーブロックを配置し背景画像を設定すると初期状態で「タイトルを入力」ブロックが表示されています。

ここから文章を書いたり、（通常の記事を書く場合と同様に）画像やボタンなどを配置していくことができます。

自由にブロックを配置できますので、トップページの画像や、レコメンド（おすすめ）などに利用できますね。

■ オーバーレイ配色と透過率の設定

カバーブロックの設定でオーバーレイ（背景色）と透過率を設定します。

■ 全幅設定

幅設定のアイコンに「全幅」が追加されています。設定することで全幅設定となります。（プレビュー画面で確認してください）

※ テーマごとに全幅の幅が異なります。

■ 固定背景の設定

カバーブロックの設定で「固定背景」をONにすることで、画像が固定されます。

WordPress のお役立ちテクニックはこちら

【自宅で出来る・一人で出来る】ブログ・アフィリエイトで始める副業

ブログ

比較的安定した収入がある会社員が、月々プラスアルファの収入を得たいと思った時に最もおすすめしたい副業は「ブログ・アフィリエイト」です。

「ブログ・アフィリエイト」とは、自分のブログを開設し企業の広告を貼ることで、読者が広告をクリックして商品を購入した場合に紹介報酬が手に入る副業です。

人気の出るサイトであれば、大きな収益が期待できることも。ストック型の収益モデルのため、作業時間以上に収益をあげられる可能性がある副業です。定年して会社を退職した後も、収入を確保し続けることができます。

ブログ・アフィリエイトの始め方がわからない場合でも手順通りやれば大丈夫、具体的な手順は こちらを参照 してください。

＼１日早く始めれば、１日早く収入が増える／

ブログ・アフィリエイトの始め方はこちらから

プラスアルファの人生は、始めなければ始まらない

まとめ：カバーブロックの使い方

WordPress には、おしゃれなデザインを作ることができる「カバーブロック」機能があります。

画像の上に文字やコンテンツを表示したり、固定背景（切り抜きイメージ）などでオシャレにデザインしたり、特にトップページのデザインで大活躍する機能です。

サイトデザインの可能性が広がりますね。かっこいいクールなサイトをぜひ作ってくださいね。

40代・50代「会社員におすすめ」の在宅でできる副業５選

40代・50代「会社員におすすめ」の在宅でできる副業５選はこちら

ドンドン！副業情報局

40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる） | ドンドン！副業情報局 ４０代・５０代の会社員、今の給料で満足して生活できていますか？さらに、老後に不安なく貯金できていますか？４０代、５０代だからこそ気が付く、不安に思う将来設計、し...

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選はこちら

ドンドン！副業情報局

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる） | ドンドン！副業情... ２０代、３０代の主婦にとって、これからの人生設計、お金は心配ごとの一つです。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（ま...

WordPress の情報、テクニック一覧はこちらをクリック！

アフィリエイトスクールのすすめ

アフィリエイト初心者や経験者にとって、正しいスキルを学ぶことは成功につながる重要な要素です。間違った手順でブログ運営をしていたらいつまでたっても成功しません。正しい知識はスクールで身に着けるのが一番です。

＼説明会参加無料／

おすすめスクールはこちらから

おすすめアフィリエイトスクールはこちら

１日早く始めれば、１日早く収益化できる。

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR

記事全体をセンタリングで書いているとき、リストだけ左側に寄ってしまうのは見栄えが良くありません。センタリングしたい場合もあります。

本記事では、リスト（箇条書き）や、グループ化したブロック群を、センタリングする方法を解説します。うまく利用して、読みやすい記事を書いていきたいですね。

※ ご利用の WordPress テーマによっては使えない場合があります。

リストをセンタリングする例

通常、記事全体をセンタリングして書いている場合、リストを挿入するとリストだけ左寄せになります。

リストだけ左寄せなのが気になりますね。わかりやすいように「枠」を付けていますが、「枠」が無いともっと目立ちます。

センタリングすると、記事全体とレイアウトがあってよい見た目になります。

リストや、特殊なブロックはそのままではセンタリングできない場合がありますので解決方法を紹介します。

リストなどのブロックをセンタリングする方法

■ AFFINGER を利用する場合

Windows のテーマ「アフィンガー」を利用している場合の例です。（他テーマでも考え方は一緒です）

※本操作は、AFFINGER で動作を確認しています。

STEP

グループ化する

• リストなどのブロックを「グループ化」する

STEP

レイアウトを設定する

• グループのプロパティから、「レイアウト」で中央寄せを指定する

横幅は自動調節されます。

完成です。

■ SWELL を利用する場合

Windows のテーマ「SWELL」を利用している場合の例です。（他テーマでも考え方は一緒です）

※本操作は、SWELL で動作を確認しています。

STEP

グループ化する

• リストなどのブロックを「グループ化」する

STEP

横並びを設定する

• グループのプロパティから、「横並び」を指定する

STEP

レイアウトを設定する

• 「レイアウト」で「中央揃え」を指定する

横幅は自動調節されます。

完成です。

横幅を自分で決めたい場合

グループの「レイアウト」を使った場合は横幅が自動調節されますが、横幅を自分で指定する場合は、CSS で対応します。

上図では、横幅を６０％にして、センタリングしています。

■ AFFINGER、SWELL 共通

※本操作は、AFFINGER、SWELL の両方で動作を確認しています。

STEP

グループ化する

• リストなどのブロックを「グループ化」する

STEP

グループにクラス名を設定します

• グループのプロパティから「高度な設定」の「追加CSSクラス」に、任意の文字列（クラス名）を入力する

※ここでは、仮に「myListTest」と入力しています。

STEP

CSSを設定する

• 「カスタム HTML」ブロックなどで、CSS を定義する

定義する CSS は次の通りです。

<style>
.myListTest {
    width : 60%;
    margin : 0 auto;
}
</style>

「width」が横幅です。60% とブラウザサイズ（記事エリア）に対してパーセント指定していますが、400px など、実値で指定することもできます。

「margin : 0 auto」で、センタリングします。

完成です。プレビューで確認してください。

WordPress のお役立ちテクニックはこちら

【自宅で出来る・一人で出来る】ブログ・アフィリエイトで始める副業

ブログ

比較的安定した収入がある会社員が、月々プラスアルファの収入を得たいと思った時に最もおすすめしたい副業は「ブログ・アフィリエイト」です。

「ブログ・アフィリエイト」とは、自分のブログを開設し企業の広告を貼ることで、読者が広告をクリックして商品を購入した場合に紹介報酬が手に入る副業です。

人気の出るサイトであれば、大きな収益が期待できることも。ストック型の収益モデルのため、作業時間以上に収益をあげられる可能性がある副業です。定年して会社を退職した後も、収入を確保し続けることができます。

ブログ・アフィリエイトの始め方がわからない場合でも手順通りやれば大丈夫、具体的な手順は こちらを参照 してください。

＼１日早く始めれば、１日早く収入が増える／

ブログ・アフィリエイトの始め方はこちらから

プラスアルファの人生は、始めなければ始まらない

まとめ：リストブロックをセンタリングする方法

リスト（箇条書き）や、グループ化したブロック群の横幅を調整して、センタリングして見た目を整える方法です。

ぜひ、レイアウト的にも、見た目麗しい、記事をたくさん、書いてくださいね。

40代・50代「会社員におすすめ」の在宅でできる副業５選

40代・50代「会社員におすすめ」の在宅でできる副業５選はこちら

ドンドン！副業情報局

40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる） | ドンドン！副業情報局 ４０代・５０代の会社員、今の給料で満足して生活できていますか？さらに、老後に不安なく貯金できていますか？４０代、５０代だからこそ気が付く、不安に思う将来設計、し...

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選はこちら

ドンドン！副業情報局

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる） | ドンドン！副業情... ２０代、３０代の主婦にとって、これからの人生設計、お金は心配ごとの一つです。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（ま...

WordPress の情報、テクニック一覧はこちらをクリック！

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

PR