Wallpaper Engineでおしゃれでかっこいい時計を自作したい
SteamアプリのWallpaper Engineで時計の壁紙を自作したいと思ったことはありませんか？Wallpaper Engineで検索するとおすすめの時計壁紙がたくさん検索結果に表示されると思いますが、時計は好きだけど壁紙は違うものにしたい…というケースもあるかと思います。
そこで、オリジナルの時計の壁紙を追加してみましょう。この記事では、Wallpaper Engineでのおしゃれでかっこいい時計の作り方をご紹介していきます。Wallpaper Engineを導入していない方は、下記リンク先の記事にて導入方法をご紹介していますのでぜひご覧ください。
Wallpaper Engineでおしゃれでかっこいい時計を自作する方法
ベースとなる時計の壁紙をダウンロードする
それでは、Wallpaper Engineでおしゃれでかっこいい時計を自作する方法を説明します。まずは「Workshop」タブの検索フォームに「Clock」と入力して検索を行い、ベースにしたい時計の壁紙をダウンロードしましょう。ダウンロードしたフォルダをコピーする
時計の壁紙のダウンロードが完了すると、デスクトップの壁紙がダウンロードした時計の壁紙になります。Wallpaper Engineのウィンドウに戻り、壁紙のサムネイルを右クリックしてメニューの「エクスプローラーを開く」をクリックしましょう。
エクスプローラーで、ダウンロードした時計の壁紙のフォルダが開きます。フォルダには数字が割り当てられていますが、画像では「431960」がWallpaper Engineのこと・「82289466」が壁紙のフォルダのこととなります。エクスプローラー左上にある上矢印のボタンをクリックして、一つ上の階層に戻りましょう。
壁紙のフォルダを右クリックして、メニューの「コピー」をクリックしましょう。
Steamをインストールしたフォルダから「/steamapps/common/wallpaper_engine/projects/myprojects」フォルダを開き、コピーしたフォルダをmyprojectsフォルダに貼り付けます。コピーしてからカスタマイズを行うことになるのですが、多くの場合はフォルダ内に「壁紙の元画像がある」・「壁紙の元画像がない」という2パターンになります。このパターンによって、この後の操作が異なります。
壁紙の元画像がある時計の場合
壁紙の元画像が用意されている場合は、画像を格納しているフォルダに壁紙にしたい画像を貼り付けて、ファイル名を分かりやすいものにするか元画像と同じものにリネームしましょう。元画像は削除するか、適当にリネームしておきましょう。
画像ファイルを置き換えたら、「CSS」フォルダを開いて「style.css」をメモ帳などのテキストエディタで開きましょう。
style.cssに記述されている「background: url();」もしくは「background-image: url();」行を探します。（）の中に背景画像のパスが記載されているので、ファイル名をコピーした画像と同じにリネームしてからファイルを上書き保存しましょう。
壁紙の元画像がない時計の場合
壁紙の元画像がない時計の場合も、まずは使用したい画像をコピーして「style.css」があるフォルダに貼り付けます。続いて、「style.css」をメモ帳などのテキストエディタで開きます。「background:」という記述の後ろに色のコードが記載されている部分がありますが、ここを「background-image: url();」に変更して、（）の中を画像のファイル名にしてからファイルを上書き保存しましょう。style.cssと同じフォルダ内に画像ファイルを置けば、パスは不要となりファイル名のみで大丈夫です。
これで、好きな壁紙に時計を合わせてカスタマイズすることができました。Wallpaper Engineのメニューで見分けがつくようにする
上記で説明した方法でカスタマイズした時計の壁紙を使用することができますが、Wallpaper Engineのメニュー上では同じサムネイル・タイトルのものが表示されている状態になってしまいます。そこで、サムネイルとタイトルをカスタマイズして見分けられるようにしましょう。
カスタマイズした時計の壁紙のフォルダ内にある「preview.jpg」が、サムネイル画像になります。ファイルサイズが1200*1200の画像を用意して「preview.jpg」と名前をつけて保存したら、元々あった「preview.jpg」とファイルをすり替えましょう。
これで、サムネイルが変更されます。サムネイルは適当にデスクトップ画面をスクリーンショットしてペイントで加工するなど、自分に分かりやすい方法で作成しましょう。
次に、壁紙のタイトルをリネームします。フォルダ内の「project.json」ファイルをメモ帳などのテキストエディタで開きましょう。
「project.json」ファイル内で「title」記述を探します。画像の場合は「"title" : "Nixie Clock"」となっていますので、この「Nixie Clock」をリネームして好きな名前にしてからファイルを上書き保存しましょう。
これでタイトルも変更され、見分けられるようになりました。
