【WordPressプラグイン】スキルバーを3分でブログに表示する方法

Sponsored Links
この記事を書いている人 – 中村和磨 –

ワードプレスを最も得意とし、Webマーケティング全般に詳しい。
ネットで効率よく集客をしたい、収益の柱を増やしたいといった方にブログを中心としたマーケティングを教えている。
※元幼稚園教諭なので、子供を見るとついつい笑顔になってしまう。
LINE@で詳しいプロフィールをのぞく

こんにちは。Netchildのかずまです。

 

知り合いのサイトでこのようなスキルバーを表示されていました。

分かりやすくて素敵だと思ったので自分のサイトにも取り入れてみようと思いました。

ワードプレスはプラグインが豊富でほとんど何でもできるのですが、やはりできました。

こちらが導入してみた感じです。

 

 

綺麗でいい感じですね。

しかも、導入はすごく簡単です。

プラグインを導入して、ショートコードを貼り付けるだけなので、3分もあればできてしまいます。

 

では、導入方法を解説していきます!

 

プラグイン「SKT Skill Bar」を導入する

ワードプレスの管理画面(ダッシュボード)を開きましょう。

①プラグイン⇒②新規追加⇒③「SKT Skill Bar」で検索します。

④インストールボタンを押して有効化しましょう。

 

ここまで出来たらあとはショートコードを新規投稿やウィジェット(サイドバー等)などに貼り付けるだけでOKです。

スキルバーの種類は3つあります。

 

3種類のスキルバーとショートコード

まずはどんなものがあるのかを紹介します。

ショートコードのカスタマイズはあとで説明します。

 

棒グラフタイプ

冒頭でも紹介したタイプのものになります。

以下のショートコードをコピペして新規投稿やウィジェットなどにコピペして使います。

 

半円タイプ

半円のデザインになります。

 

サークルタイプ

 

ショートコードのカスタマイズ

半円タイプのショートコードを例にとって解説します。

半円タイプのショートコードには4つの指定があります。

それらをいじっていけばカスタマイズが可能です。

  • skill percent=パーセンテージで示す数値になります。
  • title=文字通りタイトルです。
  • bar_foreground=バーの数値部分のカラーです。75%の場合、75%部分の色
  • bar_background=バーの数値部分以外のカラーです。75%の場合、25%部分の色

 

skill percent=”86″ title=”やさしさ” bar_foreground=”#43b349″ bar_background=”#aee1b1″

例えばこのように中の部分だけ変更します。

カラーの値はカラーコードを入れないといけないので、どんな色の組み合わせがいいかわからないって人は以下の記事を参考にしてみてください。

色彩センス0でも簡単にブログのイケてる配色が分かるとっておきの方法!

2016.12.06

 

仕上がりはこんな感じです。

僕の人間度を表したものです。

良い感じの仕上がりですね!

 

まとめ

いかがでしたか?

コードを埋め込むだけで簡単にスキルバーが作れましたね。

本当にWordPressはプラグイン一つでなんでもできてしまいます。

こういったアニメーションのバーがあるだけで、ほかのブログとの差別化の一つになり、ユーザーに覚えてもらいやすくなるかもしれません。

インパクトもあるので、必要があれば導入してみてください。

役に立ったコンテンツはシェアできます

ワードプレスの設置をプロに全てお任せ!
ワードプレス設置代行サービス


ワードプレスでブログを作ってみたいけど、初めてのことだから右も左も分からない・・・

とお困りのあなたへピッタリの「ワードプレス設置代行サービス」です!


・なるべく費用を抑えて設置したい。
・ブログに必要最低限の機能を入れておいてほしい。
・記事を書くことだけに集中したいので、初期設定、SEO対策やら何までお任せしたい!

私のワードプレスノウハウを余すとこなく詰め込んで完成させたサービスです。
業者よりも安く、サービスが充実している!と自負しています。

コメントを残す

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