Wallpaper Engine のワークショップを覗いてみると、時計付きの壁紙がたくさんありますよね。
オシャレな時計・ファンシーな時計などジャンルも様々。
ですが、そのままの状態だと背景が黒塗りだったり地味だったり・・・
「時計はかっこいいんだけど、背景が気に入らない」
「好きな画像を背景に指定できればいいのに」
こんな経験をされた方も少ないはず。
ご安心ください。
ワークショップから入手した壁紙であっても、背景は変更可能です！
本記事でご紹介するのは、「ワークショップの壁紙をカスタマイズ」する方法。
機能的でかっこいい壁紙が、簡単に作れますよ！
このような壁紙も朝飯前。背景の画像を変更しただけですが、なかなかデスクトップ映えしていますよね。
ちなみに、作業時間は10分ほど。ごく短時間で済みます！
・時計付きの実用的な壁紙が欲しい
・自分だけのオシャレ壁紙を作りたい
事前に申し上げておきますが、CSSというテキストファイルの中身をいじります。
基本的にコピペするだけの作業ですが、抵抗を感じる方がいらっしゃるかもしれません。
より手軽に、壁紙をカスタマイズする方法もあります。
こちらの記事でご紹介しておりますので、ご覧くださいませ。
時計付き壁紙の作り方
具体的な説明の前に、手順の流れについてお話します。
① ワークショップで時計の壁紙を入手
② ファイルをコピー
② お好みの画像を背景に設定
この3部構成で進めていきます。
既にカスタマイズしたい時計壁紙を持ってるよ！
という方については、こちらからスキップ。②からご覧くださいませ。
時計の壁紙を入手
まずはworkshopから入手しましょう。
clockで検索、typeをwebに指定すると見つけやすいです。
Webタイプの壁紙は、HTMLやCSSといったWebプログラミング言語で作られています。
時計は、時間に合わせて針が動いたり、数字が変わったりしますよね。
こういった処理を、プログラミング言語を使って表現しているわけです。
ここでは、この時計壁紙を使ってみます。
サブスクライブを選択。ダウンロードしましょう。
完了したら、デスクトップでの表示を確認します。
時計、およびデフォルトの背景が表示されていますね。
これからの手順で、背景を好きな画像に変えていきます。
コピーする
「壁紙をカスタマイズ」といっても、ダウンロードしたファイルに直接手を加えるわけではありません。
複製したファイルを使用。元のデータはそのままにしておきます。
こうすることで、問題発生時の対応がかなり楽に。
元データを再度貼り付けるだけ、これで完全に元通りです！
それでは早速進めていきましょう。
Wallpaper Engine のトップ画面を開きます。
左上に、追加した時計壁紙が表示されていますね。
この上で右クリック。「エクスプローラーを開く」を選択します。
時計壁紙のファイルが表示されます。
この「1618710508」というフォルダ内にあることがわかります。
数字の羅列で意味不明ですよね。。
Steam ワークショップのコンテンツは、このように番号で管理。
「431960」はWallpaper Engineを、「1618710508」は先ほどの壁紙を指します。
「steamapps」より上のパスは、環境により異なる場合も。
Windows のデフォルトは「C:/Program Files/Steam (x86)/steamapps/～」。
インストール先を変更した場合など、当然ながらデフォルトとは違うパスになります。
では手順に戻ります。
1つ上（1つ前）のフォルダに戻り、この「1618710508」をフォルダごとコピーします。
これを別の場所に貼り付けるのですが、少し遠いのでお気を付けください。
この「myprojects」フォルダ内に貼り付けます。
「steamapps」までは共通ですので、まずはここに戻りましょう。
そこから順にフォルダを開くようにすると、見つけやすいです。
新たに背景を設定
ここまでは作業の準備段階。
これからが背景を設定する手順になります。
設定方法は、壁紙によって異なります。
「myprojects」に貼り付けた壁紙のファイル。その中に、
・背景の画像がある
・背景の画像がない
基本的にこの2パターン。
ファイルやフォルダの構成が違う場合もありますが、この点だけ確認すればOKです。
それでは、「背景の画像がある場合」から解説していきます。
背景の画像がある場合
① 画像を置き換える
② style.css をいじる
2通りの方法をご紹介。
① 画像を置き換える
新たに設定する画像のファイル名を、壁紙の背景画像のファイル名と同じものに変更します。
ここでは「1.jpg」にリネーム。
これを「imagesフォルダ」内に貼り付け、上書きします。
以上です。簡単ですよね(^^)
正常にデスクトップ表示されるか確認してみましょう。
パーフェクト・・・
同じファイル名にする場合、拡張子も合わせる必要があります。
今回の例で言えば、新たに設定する画像がPNGファイルの場合。
PNGからJPGに変換し、それから上書きしましょう。
② style.css をいじる
背景は「style.css」 というファイルにより指定されています。
これをいじって、新たな画像を背景として表示させる。
これがもう一つの方法です。
まずは背景に設定したい画像を、壁紙の「imagesフォルダ」内に貼り付けます。
ここでは「test01.png」という画像を使用。
次に「style.css」を開きます。
中身はテキストファイルなので、メモ帳やワードパッドOKです。
英語でごちゃごちゃ書かれていますね。
とは言っても、いじるのは一行だけです。
background: url();
もしくは
background-image: url();
2つ書きましたが、どちらも意味は同じです。
()の中には、背景画像のパス（場所）が記載。
ここを、新たに設定する画像のパスに変更します。
それでは上の文を探しましょう。
「background」でテキストを検索すれば、簡単に見つかりますよ。
これです。(‘images/1.jpg’)となっていますね。
この「1.jpg」の部分を、「test01.png」に変更します。
以上です。これまた簡単ですよね(^^)
次からは、背景画像が存在しない壁紙の場合についてお話します。
手順は、先述したstyle.cssへの修正とほぼ同じ。
ほぼコピペするだけの簡単作業です。
背景の画像がない場合
こちらの時計壁紙を例にお話しします。
見事なまでに真っ黒背景ですね・・・
元となる壁紙ファイルを「myprojects」にコピーするところまでは同じ流れ。
貼り付けたら、ファイルの中見を見てみます。「1284389355」フォルダ内ですね。
先ほどの「1.jpg」のような、背景画像は存在しません。
デスクトップでは黒い背景が表示されていましたよね。
真っ黒い画像がありそうですけども・・・
もちろん、cssフォルダやjsフォルダの中にもありません。
この場合なんですが、実は「style.css」で背景色を黒に指定しています。
試しに開いて見ましょう。
この「background: black;」の部分。
これが「背景色を黒に設定する」コードです。
この状態で画像を貼り付けても、背景に反映されず黒いまま。
そんなことはありません！チャチャっと終わります！
先述したstyle.cssの修正で、「background: url();」という文章を使いましたよね。
()の中に画像の場所を入力すると、背景に設定されるアレです。
これがそのまま使えます。コピペでOKですよ！
では早速やってみましょう。
これまで同様、まずは背景にする画像を準備。
ここでは「test02.jpg」というファイルを使用。
「cssフォルダ」内にコピーします。
次に「style.css」を開きます。
先ほどお話した「background: black;」。
この上から「background: url();」と入力します。コピペでOKです。
（）内に「test02.jpg」と入力します。style.css と同じ場所に画像を置いたので、ファイル名のみでOK。
これで完了です！お疲れ様でした。
デスクトップは下記画像の状態に。
時間が見やすいよう暗めに調整したのですが・・・
暗すぎましたね(^^;直します・・・
仕組みについては、「絶対パス 相対パス」でgoogle検索すると解説記事がHitします。
詳細を知りたい方は、調べてみてください。
以上で時計付き壁紙の設定は完了。
お好みの背景を設定した壁紙が、問題なく動作します。
これからお話するのは「必須ではないが、やった方がスッキリする」そんな+αの設定。
「こういうのもあるのね」と、軽い気持ちで眺めていただければ幸いです。
おまけ
設定完了後、Wallpaper Engine のトップ画面を開きます。
壁紙のサムネイルやプレビュー、各種情報を確認できますよね。
ここで、新しく背景を設定した壁紙を見てみると・・・
元の壁紙と完全に同じ。
ダウンロード順に並ぶため、左側が変更後です。
わからなくなるということはありませんが・・・なんだかモヤモヤが。
どうせなら、こちらの表示も変えてみましょう。
サムネイルとプレビュー
トップ画面のサムネイル、およびプレビューには、壁紙フォルダ内の「preview.jpg」が使われます。
それゆえ、
① サムネ用の画像を準備、ファイル名「preview.jpg」で保存
② 壁紙フォルダ内に貼り付け・上書き
やることはこれだけです。
では早速始めていきましょう。
まずはカスタム壁紙をデスクトップに表示。スクリーンショットを撮影します。
これを画像編集ソフトでトリミング。ペイントなどでOKです。
1200px×1200pxにカットし、名前を「preview.jpg」として保存します。
これをカスタム壁紙のフォルダ内に貼り付け、上書きします。
ここでは「1618710508」フォルダの中ですね。
以上です。これで、サムネイルなどの表示が切り替わります。
確認のため、Wallpaper Engine のトップ画面を開いてみましょう。
マーベラス・・・
手順完了後、Wallpaper Engine を再起動しましょう。
「貼り付けた画像が反映されない！」といったトラブルを防げますよ。
タイトル
最後に、タイトルを変更します。
タイトルは、サムネイル上、およびプレビューの下に表示される壁紙の名前です。
現状では、元壁紙と同じ「Neon Clock 24h (Animated) (Fixed)」になっています。
まず、カスタム壁紙ファルダ内の「project.json」を開きます。
メモ帳などを使いましょう。
「project.json」ファイルにはタイトルやタグ、タイプなど、壁紙の情報が記載。
上の画像で「”title” : “Neon Clock 24h (Animated) (Fixed)”,」という記述がありますよね。
ご覧の通り、この部分がタイトルを決定する文章になります。
ここを「”title” : “Neon Clock custom”,」に変更。
変更後は、下記画像のようになります。
では、改めてトップ画面を見てみましょう。
タイトルも表示が切り替わっていますね！これで完璧です(^^)
お疲れ様でしたm(__)m
まとめ
ここまでオシャレな時計付き壁紙の作成方法、および関連設定についてお話してきました。
いかがでしたか？
「意外と簡単なのね！」「ちょっとやってみるわ」
こんな風に感じていただけたら幸いです。
知れば知るほど、奥が深い「Wallpaper Engine」の世界。
今後も皆様に対してアレコレ情報を提供できれば、と考えております。
本記事を最後までご覧いただき、ありがとうございました。
