2017年10月3日SHAREツイートシェアはてブLINEこんにちは。Netchildのかずまです。知り合いのサイトでこのようなスキルバーを表示されていました。分かりやすくて素敵だと思ったので自分のサイトにも取り入れてみようと思いました。ワードプレスはプラグインが豊富でほとんど何でもできるのですが、やはりできました。こちらが導入してみた感じです。綺麗でいい感じですね。導入はすごく簡単です。プラグインを導入して、ショートコードを貼り付けるだけなので、3分もあればできてしまいます。Bar」を導入するワードプレスの管理画面(ダッシュボード)を開きましょう。Bar」で検索します。4インストールボタンを押して有効化しましょう。ここまで出来たらあとはショートコードを新規投稿やウィジェット(サイドバー等)などに貼り付けるだけでOKです。スキルバーの種類は3つあります。3種類のスキルバーとショートコードまずはどんなものがあるのかを紹介します。ショートコードのカスタマイズはあとで説明します。棒グラフタイプ冒頭でも紹介したタイプのものになります。以下のショートコードをコピペして新規投稿やウィジェットなどにコピペして使います。半円タイプ半円のデザインになります。サークルタイプショートコードのカスタマイズ半円タイプのショートコードを例にとって解説します。半円タイプのショートコードには4つの指定があります。それらをいじっていけばカスタマイズが可能です。percent=パーセンテージで示す数値になります。title=文字通りタイトルです。bar_foreground=バーの数値部分のカラーです。75%の場合、75%部分の色bar_background=バーの数値部分以外のカラーです。このように中の部分だけ変更します。カラーの値はカラーコードを入れないといけないので、どんな色の組み合わせがいいかわからないって人は以下の記事を参考にしてみてください。色彩センス0でも簡単にブログのイケてる配色が分かるとっておきの方法!仕上がりはこんな感じです。僕の人間度を表したものですw良い感じの仕上がりですね!まとめいかがでしたか?コードを埋め込むだけで簡単にスキルバーが作れましたね。本当にWordPressはプラグイン一つでなんでもできてしまいます。いったアニメーションのバーがあるだけで、ほかのブログとの差別化の一つになり、ユーザーに覚えてもらいやすくなるかもしれません。インパクトもあるので、必要があれば導入してみてください。JetPlugins一択!この記事を書いた人Kuuuワードプレスを最も得意とし、Webマーケティング全般に詳しい。ネットで効率よく集客をしたい、収益の柱を増やしたいといった方にブログを中心としたマーケティングを教えている。