2022/06/11 Podcastはしばらくお休みします。
TCDテーマMAGで背景色や背景画像を設定する方法
こんにちは。安慶名勇子(アゲナユウコ)です。
このブログはTCDのMAGというWordPressテーマで作っています。とてもシンプルで使いやすいのですが…、標準仕様のグレーの背景はちょっと物足りないなと感じていたのでカスタマイズしました。
ネットサーフィンしていると、MAGのテーマを使っているブログに出会うことが良くあるんですが、標準仕様のままだとすぐに「あ、同じテーマだ」とわかってしまうんですよね。
別に誰かと同じまま使うのもいいっちゃいいのですが…、愛着のある自分だけのブログですもの。私は、自分好みにアレンジしまくって使いたいんです。そう。愛車をカスタマイズして自分仕様にして楽しみたい、あの感覚と同じ(わかるでしょ?)。
というわけで今回は、TCDテーマMAGを自分好みの背景にアレンジしたい方のために、具体的な設定の仕方をお伝えします。見た目の印象も、ブログへのモチベーションもアップしますよ!ぜひお試しください。
仕上がりイメージ
背景を変えると、ほんとブログの印象って変わります。試しにいろいろ変えてみたのでまずはご覧ください。
↓こちらはTCDテーマMAGの標準仕様のままの背景。薄いグレーですね。

↓ 背景色を赤にしてみました。まぁ…インパクトあります。

↓ 色なし。真っ白な状態がコチラ。

色を変えただけでも、見やすさや印象が変わりますよね。では、続いて背景を画像にしてみるとどうなるか。
↓こちらはピンクの和紙画像を背景に設定。

↓こちらは水面の画像を設定。

ブログの印象、全然違いますよね。
あまりにも奇抜な色や、ごちゃごちゃした画像を背景に使うと見づらくなりますので注意が必要です。記事より背景に目が行ってしまうのではブログの本来の目的を果たしませんから、シンプルかつブログのテーマにあった背景を意識しつつ、好みのものを選ぶといいですね。
背景変更の手順
背景の色を変えたい場合
まずは背景色の設定方法から。
TCDテーマMAGの管理画面の左メニュー「外観」→「テーマの編集」を選びます。

スタイルシート(style.css)内のコードから下記の文字を探します(基本設定の部分)。
1 2 |
body { font-family:Arial,sans-serif; color:#333; line-height:1; min-width:1125px; background:#f8f8f8; } |
『background:#f8f8f8』の部分が背景色を指定するコードなので、『#』以降の数字を好きなカラーコードに変えて、保存ボタンを押せば設定完了です。
背景画像を設定したい場合
背景に使用したい画像は、先にメディアにアップロードしておいてください。その後の手順は、背景色の変更とほぼ同じ。
TCDテーマMAGの管理画面の左メニュー「外観」→「テーマの編集」を選びます。

スタイルシート(style.css)内のコードから下記の文字を探します(基本設定の部分)。
1 2 |
body { font-family:Arial,sans-serif; color:#333; line-height:1; min-width:1125px; background:#f8f8f8; } |
『background:#f8f8f8』の部分を消し、下記のように変更します。
1 2 |
body { font-family:Arial,sans-serif; color:#333; line-height:1; min-width:1125px; background-image: url("【画像のURL】"); } |
【画像のURL】は、メディア内の画像をクリックすると出てきます。そちらをコピーして貼り付けてください。

保存ボタンを押せば設定完了です。
カスタマイズは慎重に!
カスタマイズ前にはバックアップを取ることをお忘れなく!子テーマを作成しているならなお良し!です。背景画像のカスタマイズ、ぜひ楽しんでみてくださいね!