ヘッダー画像を挿入
ここでは画像・メニューの配置・サイトのイメージカラーその他、ページ全体の見た目を構築していく。まずはサイトの印象をかなり決定的にする重要な要素・ヘッダー画像。私の場合、ネット上にて広く知られているアイコンとなる作品の画像が既にあるので、「何を」入れるかではなく、「どう」入れたかの実際の手順を確認していく。
Cocoon設定（１）→ヘッダー（２）から設定画面にアクセス・・・
・・・同画面を下方向にスクロール→「ヘッダー背景画像」選択ボタンをポチると・・・
・・・画像の選択画面が現れ、自分のパソコンに保存されている画像をドラッグ＆ドロップにて挿入して（１）、「画像を選択」ボタンをポチり（２）、ウェブ上で確認・・・
・・・するとこうなる。このヘッダーの枠は縦３００ｘ横１２００ｐｘが適正とされており、何も考えずに縦１６００x 横１２００ｐｘの画像を入れると強制的にカットされ、妙な感じになってしまう。これはこれで面白いとは思うが、ヘッダー枠に収まるように画像を加工する。
縦３００x 横１２００ｐｘの画像とは即ち横長の画像なわけで、適当な横長の画像を用意できればなお良いが、ここではこの画像に余白を追加→横長の画像を作成する。画像編集ソフト・「JTrim」を起動→上部に並ぶツールバー「イメージ」からプルダウン（１）→余白作成のウィンドウが開く。ここで余白の大きさのピクセルの数値を変える。左を「９９９」（１０００未満のみの指定になる。矢印２）右を「５００」にしてみると（３）・・・
縦１２００ｘ横３０９９pxの画像を作成→これをヘッダー画像に設定して変化を見てみる。
少々ましにはなったが、できれば顔面の顎のあたりまで入るようにしたい。
再度画像をJTrimにて加工する。カーソルを合わせ、切り抜き範囲を設定→ツールバーの「イメージ」からプルダウン→「切り抜き」ボタンをポチリ画像の余分な部分を切り抜き、ヘッダー画像に設定→ウェブ上の見え方を確認すると・・・
作品顔面の主要部分が確認できる画像が設定できた。
ページ全体の設定
雰囲気を形成する要素・・配色・各種項目の配置・フォントの種類と大きさetc・・・詳細を自分好みに設定していく。
ダッシュボード→Cocoon設定（１）→全体を選択（２）で、まずはサイトのキーカラー・・サイト内の見出し・その他の色を設定する（３）。
「サイトキーカラー」下の「色を選択」ボタンをポチると（１）、ビジュアル的に色を選択するツールがプルダウンで現れ、これで好みの色を選択する。ここでは既に私が選択した色とそのカラーコード「#00508e」が表示されている（２）。色選択ツール内の〇にカーソルを合わせ、動かして任意の色を選択できる。（３）好みの色を探索後、見つけたカラーコードをメモしておき、各候補から決定する時に（２）に書き込んでその色を選択できる。
その他の設定は以下の通り
- フォント：指定なし（一般的な角ゴシック体）
- モバイルフォント：１６px
- 文字の太さ：５００（１００（細い）～９００（太い））
- サイト背景色：指定なし（白）
- サイト背景画像：なし
- etc・・・
これらの設定にて、それなりに見やすいサイトに仕上がる。おいおいお好みでデザインを変えていく事も可能。現状では欲張らずにこの感じで公開する。
ヘッダーメニュー作成
記事へのアクセスを容易にするメニューバー。ここではサイトの固定的な基本情報のグローバルメニュー（ヘッダーメニュー）を作成していく。
管理画面 / ダッシュボード→外観（１）→メニュー（２）→「メニュー構造」の項目内・「メニュー名」の空欄に「グローバルメニュー」と書き込む（３）この名前は任意で自分好みの名前・・・トップメニュー等でも差し支えない→更にメニュー表示の任意の位置にチェックを入れる（４）ここではヘッダー（画面の上方）に表示されるよう設定したが、言うまでもないが、後からカスタムが可能で、とりあえずでよろしいかと思う。そして忘れずに「メニューを作成」ボタンをポチる。
ここでは既に固定ページを作成済みであることを前提に話を進めていく。（ワードプレス導入備忘録６ 投稿編 / 固定ページ作成 参照）まずは編集するメニューを選択（１）→「メニュー項目を追加」項目・固定ページ内の「すべてを表示」にてすべてを選択（２）→メニューを追加ボタンをポチると（４）・・・
固定ページの記事がメニューに追加された。
読者の利便性のためにもトップページに戻るための「ホーム」ボタンはあったほうがよろしいかと思う。「メニュー項目を作成」パネル内・カスタムリンク（１）にて→トップページのURLを書き込み（２）→リンク文字列に名称を記入（３）→メニューを追加ボタンをポチると（４）・・・
メニューに「ホーム」が追加された。
メニュー階層と順番の調整
この管理画面での並び順は上→下で、ウェブ上での表示は左→右となる。例：サイトマップ 拡大期 ABOUT How となる。通常日本語の文を読む時の視線移動は左→右なので、サイトの階層のトップである「ホーム」ボタンは左端がよろしいかと思う。よってこれを入れ替える。これはマウスを駆使したドラッグ＆ドロップでサクッとできる。
更にメニュー構造のパネルにて表示順の入れ替えとメニュー階層の作成を行う。これもマウスを駆使したドラッグ＆ドロップでサクッとできる。メニューが左に寄った状態で、階層のトップ・・いわゆる「親」になっている。その一つ下に階層の一つ下にしたい、いわゆる「子」のメニューをドラッグ＆ドロップで持ってきて→更にカーソルを合わせ、右に数センチずらすと、階層のいわゆる「子」になる。この要領で階層を作る。
階層を作成でき、「メニューを保存」ボタンをポチる。これにてウェブ上の見え方を確認すると・・・
無事メニューは表示された。「作者年譜」にカーソルを合わせるとプルダウンで「子」メニューが現れる。
コメント