日時を表示するパーツは元ネタにもありますが、機能性を高めるために曜日も表示して、タップしたらアラームアプリが起動するようにしました。

目次

ウィジェット設定

ウィジェットをタップ時のアクション　アラームアプリ（僕はスマートアラーム）
ウィジェット名　タイム

モジュール設定

テキスト circle

半透明な円は文字で作りました。今回初めて使用するテキストモジュールですが、簡単な文字列を表示する時に使うものです。

モジュール名　circle
Xオフセット　-14
Yオフセット　10
高度なテキスト編集　●
サイズ　131
色　#41000000
フォントの種類　Normal

リッチテキスト date

日付を表示します。曜日は僕の感覚で色をつけてみました。

モジュール名　date
Xオフセット　-5
Yオフセット　-10
高度なテキスト編集　#DM# / #Dd# $#Df#=1?[c=ffc0c0]Sun.[/c]$$#Df#=2?[c=ffc0ff]Mon.[/c]$$#Df#=3?[c=ffc040]Tue.[/c]$$#Df#=4?[c=c0c0ff]Wed.[/c]$$#Df#=5?[c=c0ffc0]Thu.[/c]$$#Df#=6?[c=ffff80]Fri.[/c]$$#Df#=7?[c=c0ffff]Sat.[/c]$
サイズ　14
色　#ffffff
フォントの種類　Crimson Text-Semibold

高度なテキストの部分が長くてややこしいですが、内容は難しくないはず。

リッチテキスト time

時刻を表示します。やり方は日時と一緒。

モジュール名　time
Xオフセット　-5
Yオフセット　20
高度なテキスト編集　#DHH#:#Dmm#
サイズ　29
色　#ffffff
フォントの種類　Crimson Text-Semibold

#DHH#とすることで24時間表記の二桁表示に、#Dmm#とすることで分も二桁表示になります。

以上で完成です。