2020/02/28 情報を更新いたしました。

皆さんはプログレスバーというものをご存知でしょうか？プログレスバーとは、プロジェクトの進捗状況や自身の能力値などを可視化して表現できるものです。プログレスバーを活用することでプロフィールをより視覚的に表現出来るようになります。（ progress : 進歩、発達、発展、前進、進行、成り行き、経過 ）

今回はそんなプログレスバーを手軽に使えるようになるプラグイン「WP Progress Bar」についてご紹介していきます。また、動画解説も用意しておりますので、そちらがよろしければご視聴ください。

ポートフォリオサイトに利用できる！自身の能力水準や進捗状況を表示するプラグイン「WP Progress Bar」

「WP Progress Bar」

「WP Progress Bar」は、一案件辺りの進捗状況や自分自身のスキルレベルをプログレスバー形式で記してくれるWordPressプラグインです。これを使うことで、表現しづらい自身のスキルレベルを数値化してグラフ形式に表示してくれるため、情報発信者の詳細なスキルレベルを読者が知りたい時に役立ちます。

またポートフォリオサイトに記載することで、自分の能力を視覚的に表現することができるので、信頼を得るきっかけになるかもしれません。

「WP Progress Bar」の使い方

それではさっそく使い方についても見ていきましょう。まずはWordPressの管理画面から「プラグイン」>「新規追加」で「WP Progress Bar」と検索してプラグインをインストールして有効化します。

「WP Progress Bar」のインストール

もしWordPress上の検索結果に「WP Progress Bar」が表示されない場合は、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールすることでも利用可能です。

WP Progress Bar

「WP Progress Bar」の設定方法

プラグインを選択

プラグインを導入できたら、次は「WP Progress Bar」そのものの設定をしていきましょう。設定をするには「プラグイン」>「WP Progress Bar」を選択。

設定

すると設定画面が出てくるので順にセットしていきます。ちなみに設定できる項目は以下の通り。

  • Text Color：文字色を変更できます。読みづらくなってしまうと意味がないので黒か白を設定しましょう。
  • Background：背景色を変更します。パーセンテージ設定が100%未満の場合、背景色が浮き彫りになるので色選択には注意が必要です。
  • Progress Color：プログレスバーの色を設定します。ゲージの色となる部分なので、好きな色を設定しましょう。
  • Width:幅を設定します。デフォルトサイズでは200pxで100%の設定になっているのでとくに変更の必要はありません。
  • Margin Bottom：要素間の間隔を設定します。サイトのデザインが特殊な場合はいじる必要がありますが、基本的にはデフォルトのまま利用しましょう。
  • Enable Text Shadow：プログレスバーのテキストにテキストシャドウが設定できます。
  • Disable Box Shadow：既存に入っているボックスシャドウを無効化します。見映えを調整したい方だけ設定しましょう。
  • Disable Default CSS：デフォルトのCSSを無効化します。プログレスバーのデザインをイチから弄りまわしたい方は使ってみてもいいかもしれませんが、CSSの知見がない方は空欄のままにしときましょう。

基本的に最初は「Text Color」、「Background」、「Progress Color」だけ設定すれば残りはデフォルトのままで大丈夫です。

変更を保存

後は「変更内容を保存」して設定は完了です。

ショートコードを貼り付ける

設定が完了したら、「Shortcode」欄より[wp_progress_bar text=”Photoshop” pc=”90″]の記述をコピーして投稿欄の文中に貼り付けましょう。

ショートコードを改変

最後にショートコード欄内の「Photoshop」を好きな文章に「90」を設定したいパーセンテージに変更して保存すれば完了です。

プレビュー実行結果

プレビュー画面を見るとこの通り。きちんと設定出来ましたね。

デザインカスタムしたプログレスバーをそれぞれ設置してみよう！

さて、プログレスバーの設定方法をご紹介しましたが、これまでの設定方法だと一つだけしかプログレスバーのデザインを設定することが出来ません。

そこでここでは、一つひとつ違ったデザインのプログレスバーにしてみましょう。

記入欄を空白に

やり方は簡単。「プラグイン」>「WP Progress Bar」欄に記述した内容を「Shortcode」欄以外すべて未記入の状態にして保存します。

ショートコードを改変する

次に先ほどと同様に、「Shortcode」欄より[wp_progress_bar text=”Photoshop” pc=”90″]の記述をコピーして投稿欄の文中に貼り付けましょう。

貼り付けられたら、ショートコード内の記述を改変・追加していきます。

記述の仕方は、Shortcode欄と文中に挿入したショートコードの記述を見習っておこないます。

改変コード

たとえば、progress_colorを設定したいなら、[wp_progress_bar text =”HTML5″ progress_color=”#4286f4″ pc=”90″]といった形で「”（ダブルクォーテーション）」の後に半角スペースを入れ、カスタマイズしたい項目名＝”カラーコード（16進数記述）”で改変しましょう。

設定が完了したら、最後に保存します。
スキルレベルを可視化

実際に使ってみるとこの通り。ポートフォリオサイトらしくスキルレベルを分かりやすく表現出来ましたね。

まとめ

今回は、プロジェクトの進捗状況や自身のスキルレベルを可視化するプラグイン「WP Progress Bar」の機能とその使い方をご紹介しました。

ポートフォリオ等、数値だけでは伝わりにくい要素を手軽に可視化することが可能になります。表現したい内容によっては痒いところに手の届くところがプログレスバーの魅力の一つ。「既存の実績だけでは見映えが物足りないかも…」と思う方は、ぜひ導入してコンテンツのアピールに活用してみてください。