ブログの作り方

Bloomでブログを作る

Bloomでブログを作る手順1。記事スライダーとウィジェットを設置

TCDの「Bloom」は、女性向けのオシャレなサイトを作ることができるテーマです。

このテーマを実際に購入してみましたが、思っていたよりも美しいサイトができますよ^^

実はアフィリエイトのサイトに使うと、かなり良いんじゃないかと思っています。

コンテンツの量が多くなっても、多くの記事をスッキリ表示してくれる点が良いですね。

では、小物やアクセサリーのサイト「Bloom(仮)」を実際に作ってみましょう。

★TCDのテーマはこちらをどうぞ↓
デザインの美しさは最上級!「TCD」のWordPressテーマを5段階評価してみた>>

記事を多めに用意する

Bloomは、記事をたくさん表示できるテーマなので、記事数が少ないと寂しいサイトに見えてしまいます。

そこで、まずは記事を多めに用意してください。

12記事くらいあれば、それなりに充実しているように見えると思います↓
ブログの記事を作る

作成した記事すべてに、アイキャッチ画像を設定しておいてください。

Bloomでは、トップページ上部に「記事スライダー」を設置することができるのですが、その記事スライダーにアイキャッチ画像が表示されます。

Bloomの記事スライダーは大きいので、画像にはこだわりましょう。

この画像の善し悪しでサイトの見栄えは大きく変わります。

では、12の記事にアイキャッチ画像を設定した状態のサイトがこちらです↓
記事スライダーを設置

Bloomでは、最新の記事2つが大きな画像で表示されるようになっています。

上の画像で言うと、メイク道具とブレスレットの画像が最新の記事になります。

単純に記事を並べるだけでないので、サイトに変化が付いていいですよ。

ヘッダーとフッターにコンテンツを表示

続いて、ヘッダー部分に記事スライダーを、フッター部分にフッター記事一覧を表示させてみようと思います。

ヘッダー部分には、記事スライダー、画像スライダー、動画スライダーを表示させることができます。

この中でも記事スライダーは、埋もれてしまいそうな記事を一等地に表示させることができるのでおすすめです。

記事スライダーを設置する

記事スライダーを表示させるためには、

外観→TCDテーマオプション→トップページ

にあるヘッダーコンテンツを「記事スライダー」にします。

記事スライダーの設定

このとき、その下にある記事タイプは、今回は「おすすめ記事」にしておきます。

続いて、記事スライダーに表示させたい記事にチェックを入れていきましょう。

投稿→投稿一覧から、表示させたい記事をクリックします。

bloomのおすすめ記事設定

上の画像のように、「おすすめ記事1」にチェックを入れて保存してください。

表示させたい記事すべてにチェックを入れれば、記事スライダーの設定は完了です。

スライダーを設置

上の画像のように、ヘッダー部分に記事スライダーが表示されているはずです。(ハートのアクセサリーのところです。)

Bloomの記事スライダーは、かなり大きく表示されるようになっています。

迫力のある記事スライダーですよね。

フッター記事一覧を設置する

フッターにも記事を表示させてみましょう。

外観→TCDテーマオプション→フッター

を表示します。

フッター記事一覧設定

上の画像のように設定をしてください。

  • 「このコンテンツをトップページに表示する」にチェック
  • 「このコンテンツを下層ページに表示する」にチェック

その下にあるキャッチフレーズは何でも良いのですが、ここでは「今月の特集記事」としておきます。

これだけ設定しておくと、下層ページも含めてフッター記事一覧が表示されます。

フッター記事一覧

フッター記事一覧では、一度に3つの記事が表示されます。(PC表示)

それが時間が経つと、次の3つの記事に入れ替わる仕様になっています。

ウィジェットを設置する

サイドバーにウィジェットを設置してみましょう。

Bloomでは、オリジナルのウィジェットがいくつかありますが、その中でも「サイト情報」「デザインされた記事一覧」「ランキング一覧」を使ってみようと思います。

サイト情報

外観→ウィジェットとクリックして、ウィジェットの画面を出します。

この中に「サイト情報(tcdバージョン)」というウィジェットがあるので、「トップページ」の項目にドラッグします↓
Bloomサイト情報

サイト情報の中は、上の画像のように設定しましょう。

  • 「タイトル」を入力します。ここでは、サイト情報と入力しました。
  • 画像とリンク先を選択します。
  • 「説明文」を入力します。
  • 「ボタン」のラベルとリンク先を選択します。

Bloomサイト情報2

ウィジェットを設定すると、上の画像のように表示されます。

サイト情報にはボタンを設置することができるので、購入してもらいたい商品へ誘導するリンクを設定すると良さそうですね。

このウィジェットは、売り上げにつなげられるCTAとして使えそうですよ。

おすすめ一覧

ウィジェットの中に「デザインされた記事一覧(tcdバージョン)」があるので、「トップページ」にドラッグします。

デザインされた記事一覧

上の画像のように設定します。

  • 「タイトル」は、おすすめ一覧としました。
  • 「記事一覧のスタイル」は、2カラムとします。
  • 「記事のタイプ」は、おすすめ記事2にします。
  • 「表示する記事の数」は、6にします。

デザインされた記事一覧2

ウィジェットを設定すると、上の画像のように表示されます。

Bloomの「デザインされた記事一覧」は、2カラム表示ができるようになっています。

当サイトで使っている「BRIDGE」では、同じウィジェットがありますが、2カラム表示はできません。

2カラム表示にすると、縦長にならなくていいので、画面に表示できるコンテンツの量を多くすることができます。

スマホ表示にしたときに、良い感じで2列表示になるのでおすすめです。

ランキング一覧

「ランキング一覧(tcdバージョン)」ウィジェットを、「トップページ」にドラッグします。

Bloomランキング2

上の画像のように設定しましょう。

  • 「タイトル」は、ランキングと入力します。
  • 「ランク数」は、5にします。
  • 「カテゴリー」は、全てのカテゴリーにしました。

Bloomランキング

設定すると、上の画像のような画面になります。

ランキングは、順位の文字色と背景色を順位ごとに設定することができます。

デフォルトは白と黒ですが、1から3位を金・銀・銅色にしてもいいですよね。

最初からカスタマイズできるようになっているので、自分好みの色にしてみましょう。

ここまでのまとめ

ここまでで、記事を12作って、記事スライダーを設置し、サイドバーにウィジェットを配置しました。

だいたいの骨組みがこれでできたと思います。

では、全体がどんな感じになったか見てみましょう。

Bloomサイト作成(途中)

いかがでしょうか。

私が作ってみた感想を言うと、きれいな画像を用意できれば、誰が作ってもきれいなサイトができる感じがしました。

この後設定しなければいけないのは、以下の項目です。

  • サイト最上部の「メガメニュー」
  • ヘッダー下の「タブ」
  • サイト最下部のパララックス仕様の「フッターコンテンツ」

Bloomは、メガメニューやパララックスコンテンツまで作れるテーマなんですよね。

★Bloomの使用サイトです↓
TCDの「Bloom」を使ったWordPressサイト例。テーマ選びの参考に>>

★Bloomはこちらもどうぞ↓
TCDの「Bloom」は女性向けブログに最適な美しいテーマ!>>

Bloomはこちらから↓
Bloomの詳細はこちら>>

 

関連記事

  1. BRIDGEの注意点

    TCDのテーマ「BRIDGE」の設定をするときに気をつけたこと

  2. Diverの入力補助機能

    Diverの入力補助が超多機能。ボタンやバッジ作成機能を紹介します

  3. Diverでブログを作る

    Diverでブログを作る手順1。プロフィールや記事スライダーを設定しよ…

  4. カスタムCSS欄

    TCD「MAG」のカスタムCSSを使ってみた。ボタンのデザインを簡単に…

  5. BRIDGEのカスタム投稿タイプ

    TCD「BRIDGE」のランキング機能の使い方を紹介します

  6. スワローでブログ作成1

    スワローでブログを作る手順1。基本設定と人気記事を作成

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


PAGE TOP

メーカー別おすすめ

美しい日本語にこだわった「isotype」のWordPressテーマを5段階評価…

MONOSTYLE

メーカー別おすすめ

ブログに特化した「OPEN CAGE」のWordPressテーマを5段階評価して…

スワロー

メーカー別おすすめ

マテリアルデザインのWordPressテーマ「SANGO」を5段階評価してみた

SANGOテーマ

メーカー別おすすめ

Web集客に特化した「EMANON」のWordPressテーマを5段階評価してみ…

EMANON

メーカー別おすすめ

アフィリエイト専用のWordPressテーマ「AFFINGER」を5段階評価して…

wing-affinger5

メーカー別おすすめ

多機能かつ洗練されたWordPressテーマ「DigiPress」を5段階評価し…

fresco

メーカー別おすすめ

検索上位表示と収益化「Diver」のWordPressテーマを5段階評価してみた…

Diverのテーマ

メーカー別おすすめ

デザインの美しさは最上級!「TCD」のWordPressテーマを5段階評価してみ…

TCDのSwitch