「Wallpaper Engine」オシャレでかっこいい!時計付き壁紙の作り方

Wallpaper Engine のワークショップを覗いてみると、時計付きの壁紙がたくさんありますよね。

オシャレな時計・ファンシーな時計などジャンルも様々。

ですが、そのままの状態だと背景が黒塗りだったり地味だったり・・・

う~ん、真っ黒・・・とにかく重い印象を受けます。

シンプルで見やすくて、時計に関しては気に入っているものの・・・

皆様は、こんな経験ありませんか?

「時計はかっこいいけど、背景が・・・」

「背景を好きな画像にできたらいいのになあ・・・」

ご安心ください。できるんです。

 

今回ご紹介するのは、ワークショップの壁紙をカスタマイズする方法。

機能的でかっこいい壁紙が、簡単に作れますよ!

このような壁紙も朝飯前。背景の画像を変更しただけですが、なかなかデスクトップ映えしていますよね。

ちなみに、作業時間は10分ほど。ごく短時間で済みます!

こんな方にオススメ

・時計付きの実用的な壁紙が欲しい

・自分だけのオシャレ壁紙を作りたい

事前に申し上げおきますが、CSSというテキストファイルの中身をいじります。

基本的にコピペするだけの作業なんですが、抵抗を感じる方がいらっしゃるかもしれません。

より手軽に、壁紙をカスタマイズする方法もあります。

こちらの記事でご紹介しておりますので、ご覧くださいませ。

Wallpaper Engine 用の最強壁紙「Perfect wallpaper」。オシャレな時計やオーディオビジュアルが自由自在。

2019年8月26日



時計付き壁紙の作り方

具体的な説明の前に、手順の流れについてお話します。

① ワークショップで時計の壁紙を入手

② ファイルをコピー

② お好みの画像を背景に設定

この3部構成で進めていきます。

既にカスタマイズしたい時計壁紙を持ってるよ!

という方については、こちらからスキップ。②からご覧くださいませ。

時計の壁紙を入手

まずはworkshopから入手しましょう。

clockで検索、typeをwebに指定すると見つけやすいです。

Webタイプの壁紙は、HTMLやCSSといったWebプログラミング言語で作られています。

時計は、時間に合わせて針が動いたり、数字が変わったりしますよね。

こういった処理を、プログラミング言語を使って表現しているわけです。

ここでは、この時計壁紙を使ってみます。

サブスクライブを選択。ダウンロードしましょう。

完了したら、デスクトップでの表示を確認します。

時計とデフォルトの背景が表示されていますね。

これからの手順で、背景を好きな画像に変えていきます。

コピーする

「壁紙をカスタマイズ」といっても、ダウンロードしたファイルに直接手を加えるわけではありません。

複製したファイルを使用。元のデータはそのままにしておきます。

こうすることで、問題発生時の対応がかなり楽に。

元データを再度貼り付けるだけ、これで完全に元通りです!

 

それでは進めていきましょう。

Wallpaper Engine のトップ画面を開きます。

左上に、追加した時計壁紙が表示されていますね。

この上で右クリック。「エクスプローラーを開く」を選択します。

 

時計壁紙のファイルが表示されます。

壁紙ファイルの場所
../steamapps/workshop/content/431960/1618710508

この「1618710508」というフォルダ内にあることがわかります。

数字の羅列で意味わからんですよね。

 

Steam ワークショップのコンテンツは、このように番号で管理。

「431960」はWallpaper Engineを、「1618710508」は先ほどの壁紙を指します。

「steamapps」より上のパスは、環境により異なる場合も。

Windows のデフォルトは「C:/Program Files/Steam (x86)/steamapps/~」。

インストール先を変更した場合など、当然ながらデフォルトとは違うパスになります。

 

では手順に戻ります。

1つ上(1つ前)のフォルダに戻り、この「1618710508」をフォルダごとコピーします。

 

これを別の場所に貼り付けるのですが、少し遠いのでお気を付けください。

壁紙ファイルの貼り付け先
../steamapps/common/wallpaper_engine/projects/myprojects

この「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」の世界。

今後も皆様に対してアレコレ情報を提供できれば、と考えております。

本記事を最後までご覧いただき、ありがとうございました。

=>『トップページ』に戻る