----- ブログ運営に年齢制限なし!  40~50代の方でも 熱烈応援中!! -----
スポンサーリンク

WordPressブログのサイドバーに時計・カウントダウンを表示するプラグイン

ネットサーフィンでいろいろなサイトを見ていると
サイドバーにカレンダーや写真の設置をよく見かけますが
意外と時計って見かけませんよね。
営業時間が決まっているネット上のビジネスだと
時計があるのもいいかもしれません。
そこでサイドバーやメインスペースに時計を設置できるプラグイン
Countdown, Coming Soon – Countdown & Clockの紹介です。
ここでは画像付きで設定、使い方を説明してるので参考にしてみてください。

Countdown, Coming Soon – Countdown & Clockとは

このプラグインを導入することで時計、カウントダウン、タイマーを
サイドバーにウィジェットで設置できるようになります。
また、ショートコードを使うことでメインスペースにも表示できます。
別の機能としてもうすぐ公開という意味のComing Soon画面の作成もできます。

プラグインCountdown, Coming Soon – Countdown & Clockのインストール

それでは進めていきましょう。
WordPressにログインしたらダッシュボードから
プラグイン」→「新規追加」へとクリックします。

プラグインを追加のページが表示されたら
キーワード検索欄に「Countdown, Coming Soon – Countdown & Clock」と入力しましょう。
検索結果は、自動で反映されます。

Countdown, Coming Soon – Countdown & Clockを見付けたら
今すぐインストール」をクリックします。
*稀にプラグインが下の方や違うページにある場合があります。

インストールが終わると「有効化」をクリックしましょう。

有効化すると自動でインストール済みプラグインのページに移動します。
もし、WordPressバージョンの違いで移動しない場合は
自分で「プラグイン」→「インストール済みプラグイン」に移動しましょう。

これでCountdown, Coming Soon – Countdown & ClockのインストールはOKです。

アナログ時計ウィジェットの作成

ここではサイドバーに設置する時計を設定していきます。
ダッシュボードから
Countdown & Clock」→「All Countdown & Clock」とクリックします。

Countdown & Clockの作成一覧が表示されるので
Add New」をクリックしましょう。

いくつかの時計のスタイルが表示されます。
ここではClock1のアナログ時計をクリックします。

設定ページが開きますので
空白にタイトルを入力しましょう。

ここではタイトルに通常の時計と入力しました。

マウスで下へスクロールして細かな設定をしていきます。

After Expire: ここは時計には関係ないので
       どこにチェックが入っていても関係ありません。

このClock optionsで設定を行います。

Clock: チェックを入れます。

Time zone: タイムゾーンはCurrent time zoneもしくは
      自分で日本のGMT+9に合わせます。

Clock mode: 24h表示を選びました。

Timer: チェックを入れません。

Dimension: 時計のサイズになります。
      ここでは200にしています。

Alignment: 時計の設置位置になります。
      Centerにしています。

時計の設定が終わったので
画面の右上にある「公開」をクリックしましょう。

これでアナログ時計の作成・設定は終わりです。

サイドバーにアナログ時計の設置

それではアナログ時計を設置していきましょう。
ダッシュボードから「外観」→「ウィジェット」をクリックしましょう。

ウィジェットのページが開いたら
Countdown Builder」ブロックを探しましょう。

「Countdown Builder」をサイドバーに
ドラッグ&ドロップで移動しましょう。

サイドバーに入ると自動で
「Countdown Builder」の設定が開きます。
*もし複数時計を作成しているとここで選べますよ。

これでサイドバーにアナログ時計が設置できました。

確認のために「サイトを表示」をクリックしましょう。

画像のようにサイドバーにアナログ時計があれば大丈夫です。

カウントダウンの作成

続いて、カウントダウンタイマーを作成してみましょう。
ほとんど時計と同じ手順なので簡単ですよ。

Countdown & Clockの作成一覧のページを開き
Add New」をクリックしましょう。

時計を選ぶページで
ここでTimerをクリックしましょう。

設定ページが開くので
空白にタイトルを入力します。

ここではタイトルにカウントダウンと入力しました。

マウスで下へスクロールして
Timer optionsの項目で設定をしていきます。

Time settings:  カウントダウンのスタート値を入力します。
         ここでは1Hrs(1時間)に設定しています。

Enable Button: スタートボタンの表示・非表示です。
        ここではオフにしています。

Timer End Sound: 最後に音を鳴らすかどうかです。
         ここではオフにしています。

Font Family pro: 有料版のみです。

Font Size: フォントのサイズにです。
      ここでは最小にしています。

Content padding: 余白のサイズになります。
         ここでは0にしています。

Alignment: 時計の設置位置になります。
      Centerにしています。

Numbers Color pro: 有料版のみです。

Background Image pro: 有料版のみです。

これでカウントダウンの設定は大丈夫なので
公開」をクリックしましょう。

公開後はウィジェットのページで
「Countdown Builder」をサイドバーに
ドラッグ&ドロップで移動しましょう。

サイドバーに入ると自動で
「Countdown Builder」の設定が開きます。

Select countdown: カウントダウンを選びます。

これでサイドバーに設置できていますね。

これがネット上での表示になります。
カウントダウンができていますね。

これで時計、カウントダウンを設置する紹介は終わりです。

時間に関係するプラグインでしたが
現在時間ではなく曜日ごとの営業時間や
イベント用のカウントダウンなどはどうでしょうか。
興味のある方はここから参考にしてみてください。

また、本格的なカウントダウンなどもありますよ。

まとめ

今回はサイドバーの時計ウイジェットでしたがどうでしたか。
時間が関係するサイトのジャンルは限られてくるかと思いますが
旅行関係などはGMTの変更で現地の時間を表示できますよ。
また、自分のブログが少し隙間がある場合に
時計をデザイン代わりに使うのもいいですね。

にほんブログ村 IT技術ブログ WordPressへ

PVアクセスランキング にほんブログ村

タイトルとURLをコピーしました