この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
こんにちは。Netchildのかずまです。
知り合いのサイトでこのようなスキルバーを表示されていました。
分かりやすくて素敵だと思ったので自分のサイトにも取り入れてみようと思いました。
ワードプレスはプラグインが豊富でほとんど何でもできるのですが、やはりできました。
こちらが導入してみた感じです。
綺麗でいい感じですね。
しかも、導入はすごく簡単です。
プラグインを導入して、ショートコードを貼り付けるだけなので、3分もあればできてしまいます。
では、導入方法を解説していきます！
プラグイン「SKT Skill Bar」を導入する
ワードプレスの管理画面（ダッシュボード）を開きましょう。
①プラグイン⇒②新規追加⇒③「SKT Skill Bar」で検索します。
④インストールボタンを押して有効化しましょう。
ここまで出来たらあとはショートコードを新規投稿やウィジェット（サイドバー等）などに貼り付けるだけでＯＫです。
スキルバーの種類は3つあります。
3種類のスキルバーとショートコード
まずはどんなものがあるのかを紹介します。
ショートコードのカスタマイズはあとで説明します。
棒グラフタイプ
冒頭でも紹介したタイプのものになります。
以下のショートコードをコピペして新規投稿やウィジェットなどにコピペして使います。
半円タイプ
半円のデザインになります。
サークルタイプ
ショートコードのカスタマイズ
半円タイプのショートコードを例にとって解説します。
半円タイプのショートコードには4つの指定があります。
それらをいじっていけばカスタマイズが可能です。
- skill percent＝パーセンテージで示す数値になります。
- title＝文字通りタイトルです。
- bar_foreground＝バーの数値部分のカラーです。７５％の場合、７５％部分の色
- bar_background＝バーの数値部分以外のカラーです。７５％の場合、２５％部分の色
skill percent=”86″ title=”やさしさ” bar_foreground=”#43b349″ bar_background=”#aee1b1″
例えばこのように中の部分だけ変更します。
カラーの値はカラーコードを入れないといけないので、どんな色の組み合わせがいいかわからないって人は以下の記事を参考にしてみてください。
仕上がりはこんな感じです。
僕の人間度を表したものですw
良い感じの仕上がりですね！
まとめ
いかがでしたか？
コードを埋め込むだけで簡単にスキルバーが作れましたね。
本当にWordPressはプラグイン一つでなんでもできてしまいます。
こういったアニメーションのバーがあるだけで、ほかのブログとの差別化の一つになり、ユーザーに覚えてもらいやすくなるかもしれません。
インパクトもあるので、必要があれば導入してみてください。
