SIMPLE BLOG DESIGNを使ってみる【機能をすべて紹介】

自分のブログをもっと読みやすく、楽しく書きたいと思いませんか?

そんな方におススメのプラグイン【 SIMPLE BLOG DESIGN 】の紹介です。

わたしの使っているテーマ「SWELL」はテーブルの装飾が少し弱いです。

このプラグインでテーブル・比較表の部分を強化してくれますよ。

では、【SIMPLE BLOG DESIGN】をさっそく使ってみたいと思います。

現在は9,800円(買い切り型)にて販売されています。

\ おススメプラグイン /

このサイトでわかること

SIMPLE BLOG DESIGNで使える7つの機能がすべてわかります。

文字装飾・表(テーブル)比較表・背景色ブロック・背景色ブロック(タイトルあり)・チェックポイントブロック・リスト(箇条書き)・説明リストの7項目です。

目次

文字装飾を試す

文字装飾は「太字」「赤太字」「黄色背景」なんですね。

・・・説明の途中ですが、ちょっとごめんなさい。

もう、このくまちゃんにやられそうです。

かわいいーー

安倍さん(くま)っていうんですって。

なるほど。

黄色背景を選んでも太字になるんですね。

noco

ふきだしではどうかな?

ふきだしの文字でもちゃーんと使えました。

表(テーブル)・比較表を試す

さっそく表をお試し

やり方は簡単です。

①のをクリックしましょう。

②のパターンを選びましょう。

あとはSIMPLE BLOG DESIGNの中で表示される表から、使いたいものを選びましょう。

とりあえず、一番上の[縦並びテーブル(ヘッダー画像)]を選んでみました。

タイトルえへへ
キャプション
?
キャプション
キラキラ
キャプション
ガーン
キャプション

キャプション
タイトルえへへキラキラガーン
タイトル
(4.5 / 5.0)
(3 / 5.0)
タイトル
タイトル
タイトル
タイトル詳細を見る詳細を見る詳細を見る詳細を見る詳細を見る

はい、このやり方で、簡単に表ができあがりました。

画像を入れる

①画像を入れたい部分をクリックしましょう。

②下矢印 ⅴ の部分をクリックしましょう。

③インライン画像を選びましょう。

画像を選ぶと、入りました(上の表に画像が入っています)。

公式サイトでは

公式サイトでは、画像を入れたい箇所を選択 >リンクマーク >インライン画像  で画像を入れるようになっています。

わたしはその方法だとできませんでした。

SWELLだからとかあるのかな?

インライン画像を探したら、下矢印 のなかにありました。

文字の背景に◎や△などをいれる

これは楽しい!

①テーブル背景(◎とか)を入れたい文字を選択しましょう。

②安倍さんの出番です。

③入れたい背景を選びましょう。

ヘッダー・ボタンの色をかえる

赤丸の部分は右の見出しの色で、緑の丸の部分はボタンの色で変えられます。

ほんと、簡単でキレイにできあがりますね。

その外にも列の固定とか表をスクロールさせない設定が、右の追加設定でできますよ。

星評価を表示させる

テーブルのセルに、星評価を入れることができます。

0~5までの数字を0.5単位で入れられますよ。

①星評価を入れたいセルを選びましょう。

②安倍さんをクリックし、一番下の[/]星評価をクリックしましょう。

③「sbd_rate 4.5」と表示されるので0~5を0.5単位で入力しましょう。

noco

うわぁ、完成!!
商品の比較表などにとっても便利だね

「詳細を見る」にリンクを貼ろう

①リンクを入れたい詳細を見るボタンをクリックしましょう。

②編集ボタンを押しましょう。

例えば「https://tubunote.com/」のように入力しましょう。

<a href=””…>のようなタグはつけません。

noco

これでリンクしたページにいけるよ

上で紹介した以外のテーブルの種類はこの3つ

タイトル
タイトル
タイトル
タイトル
タイトル
タイトル
タイトル詳細を見る詳細を見る詳細を見る詳細を見る
[縦並びテーブル(ヘッダーテキスト)]
タイトルタイトルタイトルタイトルタイトル

キャプション
詳細を見る

キャプション
詳細を見る

キャプション
詳細を見る
[横並びテーブル(ヘッダー画像)]
タイトルタイトルタイトルタイトルタイトル
詳細を見る
詳細を見る
詳細を見る
[横並びテーブル(ヘッダーテキスト)]
noco

全部で4パターン♪

背景色ブロックを試す

背景色ブロックを試してみました

SWELLだけでもかわいいのですが、このプラグインがあれば、見た目がワンランク上になりますね。

内容もワンランク上になるように、日々精進することといたします。

あおくん
あおくん
  • あおくんかわいい
  • 安倍さんもかわいい
  • パンダだって負けてない。

さっそくやり方です。

①左上のをクリックしましょう。

②安倍さんを探しましょう。

わたし、結構下の方で安倍さんを見つけました。

背景色は「赤」「黄」「グレー」から選べます。

背景色ブロックに画像を入れる

あら、画像も入れられるんですね。

さっそくあおくんに登場してもらいました。

①背景色ブロックの右端にでるをクリックしましょう。

②画像を選びましょう。

②の画像ではなく、右となりの[リスト]を選ぶと、背景色ブロックにリストも入れられました。

背景色ブロック(タイトルあり)を試す

背景色ブロック(タイトルあり)を試してみる

やり方は背景色ブロックとほぼ同じですね。

選ぶ部分が[背景色ブロック(タイトルあり)]を選ぶに変わります。

さっそく・・・安倍さーーーん。

安倍さんは何で安倍さんなんだろう

くまなのに何で安倍さんなんだろう。

とってもかわいいです。

愛着がわきまくります。

こんな感じですね。

背景色は「赤」「黄」「グレー」から選べます。

背景色ブロックの部分を選んで、右の追加設定の部分から色を選べます。

タイトルの一文字目を大きくする

タイトルの一文字目を大きくする

これ好きだな・・。

おしゃれだな・・・。

多分、好きすぎていっぱい使いそうな感じがする。

やりかたはコレ。

①タイトルのどこでもいいのでカーソルを合わせましょう。

②右の[1文字目が大きくなる見出し]をクリックしましょう。

背景色は「赤」「黄」「グレー」から選べます。

noco

簡単なのに、オシャレになるー

チェックポイントブロックを試す

チェックポイントブロックとは

これですね。

チェックポイント

わたしは、安倍さんにツボりました。

①左上のをクリックしましょう。

ここでも、安倍さんをさがしましょう。

②チェックポイントブロックを選びましょう。

もちろん、色も変えられます。

「オレンジ」「青」「黒」「赤」「緑」「ピンク」の6色です。

リスト(箇条書き)を試す

リスト(箇条書き)とは

わたしの好きな食べ物をリストしてみました。

  • するめ
  • ケンタッキーフライドチキン
  • イタリアン(フレンド派)

こんな感じですね。

やり方はコチラです。

①左上のをクリックしましょう。

②安倍さんを探し、[リスト(ur / ol)]をクリックしましょう。

色は「オレンジ」「」 「黒」「」「」「ピンク」の6色から選べます。

番号あり・ボーダーなしを設定する

わたしのおススメのSuchmosの曲(元気のでる曲)をリストしておきます。

  1. STAY TUNE
  2. MINT
  3. 808
  4. WIPER

やりかたはとっても簡単です。

①番号ありにするには右の追加設定から赤丸の「番号の有無」で選択しましょう。

②ボーダー枠をなくすには右の追加設定から緑の丸の「ボーダーの有無」で選択しましょう。

説明リストを試す

説明リストとは

説明リストってなんだろう?

早速ためしてみました。

STAY TUNE
Honda「VEZEL」のCMで起用され、はじめてSuchmosの曲を耳にした人も多いのではないでしょか?
ライブで聞くと、テンションがあがります。
最後の部分のBASEの部分がだいすきです。
MINT
わたしの住んでいる県で制作された曲なんです。
彼らが自動車教習所に来ているときにつくった曲なんですって。
ライブでも毎回演奏されるナンバーです。
他のリストのカラーはコチラ↓
ピンク

ふむふむ。

これが説明リストですね。

例えば、さきほどのSuchmosでおススメの曲に説明がつけられるリストですね。

リストの色、一つ一つ変えることもできるんですね。

まとめ

この SIMPLE BLOG DESIGN でできること。

  • 文字装飾
  • 表(テーブル)・比較表の作成
  • 背景色ブロック
  • 背景色ブロック(タイトルあり)
  • チャックポイントブロック
  • リスト(箇条書き)
  • 説明リスト

どれも、簡単に操作でき、記事の見た目が断然よくなるものばかりです。

SWELLだけでもかわいいのに、この【SIMPLE BLOG DESIGN】でさらにワンランク上の見た目ができあがります。

記事を書くのがたのしみになるプラグインの紹介でした。

気になる方はコチラからどうぞ♪

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる