こんにちは、利Zo-です。
【デモサイトで解説！】Cocoonでトップページを簡単に設定する！と題してお話していきます。
前回はWordPressにCocoonのインストールを画像付きで解説してみました。
問題なくインストール出来たと思います。
今回はデモサイトを使って初心者でもちょっと見た目が良くなるCocoonの使い方を紹介してみます。
今回デモサイトはCocoonで設定しているのは3か所、スキンとヘッダーと言われる部分、あとはヘッダーに入っている自分のサイトのロゴのみになります。
その他たくさん便利な機能があるのですが初心者の方がまずブログを書き始めるのに最低限必要な見た目の部分のみ設定します。
前回ちょっと紹介した下のサイトを作っていく工程を画像付きで解説してみたいと思います！
見た目ダサいよ！と思われた方は画像、デザインの選定でカッコよく出来ますんで使い方だけでも見ていってください(笑)
Cocoonでトップページを簡単に設定する！
1・いつものようにWordPressにログインすると前回インストールしたCocoonになっています。
①からダッシュボードに入ります。
2・ダッシュボードに入ったら左のメニューの「Cocoon設定」という項目にカーソルを合わせると右側にメニューが表示されるのでその中の②「Cocoon設定」をクリック。
3・Cocoonの設定画面に入りました。大量のボタンがズラリとありますがとりあえず今回は殆ど使いません(笑)
「Cocoon設定」に入ると③のスキンというボタンを押した状態の画面になっています。
プレビュー画面には設定を変更して反映されたイメージが表示されます。
4・そのまま下にスクロールして行くとスキンの一覧が表示されていきます。
④カーソルをスキンのイメージのアイコンに当てるとそのスキンで作ったサンプルのサイトが表示されます。
気に入ったスキンの左の〇チェックをクリックして選択します。
今回デモサイトに使用したのはHAIJIさんのHygieneというスキンを使わせて頂きました。
5・気に入ったスキンの〇にチェックを入れて選択したらさらに下にスクロールして行き⑤の「変更をまとめて保存」ボタンを押します。
6・プレビュー画面が変更したスキンの画面に変わりました。
実際スキンを選ぶときに表示されるイメージはそのスキンを使って色々設定を変更したものになりますので、設定直後はベースとなる表示です。
7・一度ホーム画面を確認してみましょう。左上のブログタイトルをクリックしてください。
このように表示され少しカッコよくなりました！
8・それでは次はタイトルの部分に画像を入れるのと、ロゴのデザインを変えてみましょう。
・画像はGoogleなどで検索した画像には著作権があるので勝手に使う事は出来ません！
なので、著作権フリーで自由に使える素材を「O-DAN」というサイトから頂いてきます。
この「O-DAN」というサイト、日本語で素材の検索ができるのでとてもありがたいです。
頂いた画像です。
・次にロゴを作成するのですが「ロゴメーカー」というサイトで簡単にカッコいいロゴが作れます。
実際サイトに行くと「ショップ名を入れて始める」という場所に自分のサイト名を入れるて右の青いボタンを押すだけです。そのまま編集できるので文字をクリックしフォントと色を設定するだけでかなり見栄えの良いロゴが出来ます。
保存は透過のpngで保存すれば画像が重なってもロゴだけ切り抜かれ表示されます。
作ったロゴです
頂いた素材をダウンロードして保存しておきます。
9・それではWordPressに戻ってCocoon設定の画面に入ってください。
⑥のヘッダーというボタンを押します。
10・ヘッダーの設定画面に入ったら⑦の高さという項目の数値を変えます。デモサイトは300という数値に設定しています。
数値を大きくするとヘッダーの高さが広くなるのでお好みで！(とりあえず適当に入れてみると感じがわかります。)
11・少し下にスクロールして⑧のヘッダーロゴという項目の「選択」ボタンを押します。
12・画面が変わるので左上の「ファイルをアップロード」をクリックします。
13・アップロード画面の真ん中にある「ファイルを選択」ボタンを押します。
14・先ほど作った⑪ロゴのファイルを選択します。
選択したら⑫の開くを押します。
15・画面の左上に選択したロゴが表示されました。
小さくて見ずらいですが右下⑬の「画像の選択」というボタンを押します。
16・Cocoon設定の中でロゴとして保存されました。
ヘッダーロゴの空白だった部分に画像のアドレスが表示され、下に画像が表示されます。
17・次はヘッダーに表示する画像の設定です。
少し下にスクロールしてヘッダー背景画像という項目で⑭の「選択」ボタンを押します。
18・画面が変わるので再び「ファイルのアップロード」をクリック。
19・真ん中の⑯「ファイルを選択」ボタンを押します。
20・ここも先ほどと同じように「O-DAN」で頂いた⑰のファイルをクリックして⑱「開く」ボタンを押します。
21・画面左上に選択したファイルが写真表示されたので⑲の「画像の選択」ボタンを押します。
22・Cocoon設定の中でヘッダー背景画像として保存されました。
ここもヘッダー背景画像の空白だった部分に画像のアドレスが表示され、下に画像が表示されます。
23・最後に一番下にスクロールして「変更をまとめて保存」を押して完了します！
24・プレビュー画面に変更した状態が表示されます。
左上のブログタイトルをクリックしてトップページに移動してみましょう。
25・このようにちょっとイイ感じにブログサイトが完成しました。
【まとめ】Cocoonでトップページを簡単に設定する！
Cocoonで初心者がブログを始める際の最低限の表示設定のやり方はたった３つ。
- スキンの設定
- ヘッダーロゴの設定
- ヘッダーの背景画像の設定
これだけでかなり見栄えが良くなります。
その他ブログを運営していくためには他の設定も必要ですがとにかく記事を書き始める場所まで行かないと先に進めないかと思います。
記事の初めに紹介したデモサイトには記事とプロフィール、ヘッダーの下のメニューを載せていますがそこの部分はWordPressで設定する部分になります。
初心者の方には同じソフト内でWordPressで設定する部分とテーマによって設定する部分の区別が難しいと思いますが記事を書いていくうちに「こんな感じにしたい」とか「あんな感じに出来たら」なんて考えた時に検索することでスキルが上がっていくと思います。
新着情報
コメント