MENU
アーカイブ
カテゴリー

Cocoonの背景設定方法を解説!サイトのカスタマイズ初級編

  • URLをコピーしました!
目次

背景は小さなイメージが集まってできる?背景を変えてみよう

妻美

サイトの背景ってどうやって変えるんでしょ?

でぃーちち

サイトの背景変えてみよっか。背景は小さなイメージの集合体であることが多いんだよ。

背景有無の見本を確認

背景をつけるとどうなるのか…

ビフォーアフター画像

斜めにストライプ模様が入りました。

わかりにくいよ!って方もいるかもしれません。

別の背景見本画像

ガラッと雰囲気が変わりました。

簡単に着せ替え感覚で自分好みのサイトを作れます。

背景の設定方法

妻美

ストライプの背景をつけてみたいな!

でぃーちち

設定方法を教えていくよ

STEP
背景画像の取得
STEP
背景へ画像を適用

背景画像の取得

商用利用フリーの背景画像を今回はCocoonのテーマサイトから取得します。

Cocoonで検索して、公式ページへ

「サイドメニュー」「検索」の入力欄に「背景」と入力して検索をかけます。

「背景画像のダウンロード」記事をクリック。

ページ内からお好きな背景を選択して、「ダウンロード」ボタンをクリック。

今回は「ホワイト・ストライプ01」をダウンロードします。

ダウンロードフォルダにダウンロードされます。

ダウンロードファイルを別のフォルダに移動しておきましょう。

これで背景画像の取得は完了です。

続いて、取得した画像をサイトに適用させます。

背景へ画像を適用

「WordPress管理画面」「外観」「背景」の順でクリック。

「左側メニュー」「背景画像」をクリック。

「右側のプレビュー」で背景画像を適用した状態を確認できます。

左下のボタンからパソコン、タブレット、スマホ表示を切り替えて確認可能。

設定に戻り、「画像を選択」をクリック。

「ファイルをアップロード」「ファイルを選択」をクリック。

『背景画像の取得』にてダウンロードしてきた画像を選択後、「開く」をクリック。

選択した画像にチェックが入ってることを確認し、右下の「画像を選択」をクリック。

設定項目画面

  1. プリセット
    1. 「カスタム」を選択
  2. 画像の位置
    1. 「左上」を選択
  3. 画像サイズ
    1. 「元のサイズ」を選択
  4. 背景画像の繰り返し
    1. チェック
  5. ページと一緒にスクロール
    1. チェック
  6. 右上の「公開」をクリック

これで背景が設定されました。

プレビュー画面の背景も変わっています。

まとめ

妻美

背景の模様って大きい画像を使ってるんじゃないんだね

でぃーちち

面白いよね。小さな画像が繰り返されて模様が形成されるんだ

小さな模様なら試しに作って、どのように表示されるのかチャレンジしてもいいかもしれません。

オリジナル画像からWEBサイトを作ったら愛着も湧きますからね!

でぃーちち
くまさんくらっせの先生
くまさんくらっせライティング担当
妻美と一緒に素敵な学びを伝えていきたい

この記事が気に入ったら
フォローしてね!

よかったらシェアしてください!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次