年末特別価格!WordPressを始めるなら今!

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

こんにちは。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でも簡単にブログのイケてる配色が分かるとっておきの方法!

 

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

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

 

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

 

まとめ

いかがでしたか?

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

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

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

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

コメントを残す

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