2章、簡易的なデザイン設定

セミナー概要

今回は2章です。

2章ではワードプレスの簡易的なデザイン設定についてまとめます。

何度かやっているうちに理解できていくので失敗を恐れずにデザイン設定をやってみてください。

慣れてきたらその手順を作業手順書にすることをおすすめします。それがあれば同じ設定がすぐにできます。

<1章(自己紹介)|第3章(吹き出し/テンプレート機能)

メニューバーの設定

ダッシュボードの「外観」⇒「メニュー」にて設定。

ワードプレス管理画面「メニュー」

メニューバーに入れるのは以下の

・TOP
・特定の記事
・お問い合わせ

などがおすすめ(個人的にはお問い合わせはメニューバーではなくて、フッダーに入れてるかな)。

サイドバーの設定

ダッシュボードの「外観」⇒「ウィジェット」にて設定。

ワードプレス管理画面「ウィジェット」

・検索
・人気記事
・最新記事
・カテゴリ

あたりがおすすめです。

 

サイトアイコンの設定

サイトアイコンの設定は、まず「外観」⇒「カスタマイズ」へ。

ワードプレス管理画面「カスタマイズ」

カスタマイズ内の「サイト基本情報」をタップ

ワードプレス管理画面「カスタマイズ⇒サイト基本情報」

次のページでサイトアイコンをアップロード。

 

スキンの設定(適宜)

おおまかなデザインとしてスキンを設定してみましょう。

ダッシュボードのCocoon 設定をクリックすると

ワードプレス管理画面「テーマcocoon設定」

Cocoon 設定画面が出てきます。その初期画面がスキンの設定になっています。少し下がっていくとスキン一覧があります。

ワードプレス管理画面「スキンの選択」

適当に選んで一番下にある変更をまとめて保存をクリックしてください。新しいスキンに切り替わります。

 

ヘッダーを編集したい使いたい場合(適宜)

ヘッダーを編集したい場合は先のCocoon 設定画面の上部にあるヘッダーをクリックします。

ワードプレス管理画面「テーマcocoon設定のヘッダー」

するとヘッダーの編集画面に移動します。

・ヘッダー背景色
・ヘッダー文字色

などを変更してどのように変わるかチェックしてみましょう。

あとロゴを入れることも可能です。予め作ったロゴも試してみましょう。

 

表示設定(適宜)

トップページの記事表示設定の変更も可能です。

Cocoon 設定上部の右の方にインデックスがあるのでそれをクリック

ワードプレス管理画面「テーマcocoon設定のインデックス」

クリックして表示された設定画面にて「縦型カード2列」「縦型カード3列」といった設定が可能です。

それ以外にも下がっていくと「枠線の表示」「自動生成抜粋文字数」などの設定も可能。この辺りも実際に試してみるといいでしょう。

あと、更に下がっていくと「投稿日を表示するかどうか?」「更新日を表示するかどうか?などの設定も可能」です。

 

文字装飾のやり方

通常の編集

通常はこれ

太字はこれ

イタリックはこれ

打ち消し文字はこれ

文字色赤はこれ

背景色はこれ

スタイルにて編集

スタイルの赤下線

黄色マーカーはこれ

黄色アンダーラインマーカーはこれ

ボックスの補足情報は以下のような感じ

適当に文字入れてみた

ボックス(タブ)のヒントはこんな感じ

適当に文字入れてみた

 

タイムゾーン設定(適宜)

ダッシュボードの「設定」ー「一般設定」よりタイムゾーンを「東京」にしておくといいでしょう。

 

まとめ

とにかく、いろいろやってみよー!

コメント