・頁の体裁を整える-COCOON の設定



前回は「とにかく」Word Pressで頁を作ってみました。

今回はもう少し自分好みの頁にしましょう。

COCOON ではこの細かな設定ができます。

1. COCOON 設定

a.ヘッダー


( COCOON 設定)

●ダッシュボード → COCOON 設定 → ヘッダー

-この頁の設定-
・ヘッダーレイアウト : センターロゴ(ディフォルト)
・ヘッダー固定 : あり
・高さ : 120
・ヘッダーロゴ : 306 × 90
・キャッチフレーズ表示しない
・グローバルナビ文字色 : #000040
・グローバルメニューナビ巾 : テキストに合わせる
・あとは未記入。

・変更をまとめて保存


(グローバルメニュー)

●ダッシュボード → 外観 → メニュー

・ここでは階層メニュー、外部リンクなどいろいろなメニューが複数作れます。 → 「メニューを保存」
・貼り付け場所はヘッダーとフッター。チェックをしなければ貼り付けられない。
・「新しい固定頁をメニューに追加」 → 階層メニューに働く。カスタムリンクメニューは関係なし。
ここで作ったメニューはウイジェットでサイドバーやフッターに貼りつけられます。 → 「ウイジェットを保存」

-この頁のメニュー-
・ヘッダーに「大まかなサイトメニュー ( カスタムリンク ) 」
・サイドバーの最初に「 階層メニュー ( グローバルメニュー・自動作成 ) 」
・サイドバー追従領域に 「 詳しいサイトメニュー ( カスタムリンク ) 」
・サイドバー最後に「 階層メニュー ( グローバルメニュー・自動作成 ) 」
・メインカラムボトムに「パンくずリスト」( 固定頁で設定・自分が今どこにいるかを示す )

いろいろな場所にメニューを貼って、使いやすい場所を探しましょう。

b.文字など


( COCOON 設定)

●ダッシュボード → COCOON 設定 → 全体,本文,カラム

-この頁の設定-

●全体
・サイトテキストカラー : #000040
・サイトフォント : ヒラギノ(デフォルト)
・文字サイズ : 16px
・文字色 : #000040
・モバイルフォント : 16px
・文字太さ : 300
・サイトアイコンフォント : Awesome4 ( ※キャパ越え・ディフォルト )
・サイトリンク色 : #000040
・サイト選択文字色 : #000060
・サイト選択背景色 : #84acba
※ドラッグで選択した範囲の色設定です。ここを設定していないと選択範囲が現れないことになります。
   慌てて、マウスを買い換えないようにしましょう。
・サイドバー : 右
・サイドバー表示 : 全ての頁で表示
・サムネイル表示 : サイト全体のサムネイルで表示 (※キャパ越え )
・あとは、空欄かディフォルト
※サイドバーの文字色 : #000040,#990000

●本文
・行の高さ : 1.8×文字高さ
・行の余白 ( 行と行の間 ) : 1.8×文字高さ
・外部リンクの開き方 : 新しいタブで開く

●カラム
・メインカラム : 巾/900,余白/20,枠線巾/0
・サイドバー : 巾/300,余白/20,枠線巾/0
・カラム間巾 : 0
・全体巾 : 1280

( COCOON での文字設定 )

●次のことができる

① COCOON 設定 → ベースとなる文字の大きさ・太さ・字体
② ブロックボタンの「T」 → ブロック内の文字の部分的な拡縮
③ 右メニューのブリセットサイズ → ブロック全体の文字の拡縮
※①と②は他のテーマにはない。

●他のテーマでは
・③で文字の大きさを変えられるだけ。
・そのテーマによって小,標準,中など予め大きさが決められている。カスタムで好みのサイズにできる。
   (例) dekiru → 小 / 13,標準 / 16,中 / 20,ディフォルト / 不明。
(例)Twenty Nineteen → 小 / 18.5,通常 / 22,大 / 36.5,ディフォルト / 不明
   サイズ選択の用語も設定サイズもテーマによって異なる。

●文字の大きさについて
通常、ポイント ( pt)が使われるが、ワードプレスではピクセル ( px ) が使われる。
pt は長さの単位、px は解像度の単位で同じではないらしい。1pt = 1.33 px とか → こちら
一般に10.5 pt が標準だから、14 px =10.5 2pt で14 pxが標準的な大きさとなる。

しかし、実際に表示させてみると「16px で見やすい、15px は 小さめ」
「16px → 12pt 」が標準的な大きさとなる。
ただし、「好み」や「カラム巾」も関係するので実際に表示させて決めることになる。

● COCOON での「プリセットサイズ」/ COCOON 設定「16px」・メインカラム巾900
ディフォルト → ブロックに書ける字数 / 46,実際に表示される字数 / 56
標準 → ブロックに書ける字数 / 52,実際に表示される字数 / 56
・ディフォルトにしても標準にしても実際に表示される字数は同じ。ブロックでの表示が違うだけ。
・プリセットサイズは常に「ディフォルト」になるから、いちいち標準に切り換えないで、
「ブロックで改行されてから、あと10文字打てる」と思えばよい。

・小や中にすると実際に表示される文字も小さくなったり大きくなったりする。

● COCOON でのブロックボタン「T」
そのブロックの中の文字をドラッグしてその大きさを個別に変えられる。
大きさも「px」で表示される。

●『HPBでは編集画面巾と表示される頁巾は同じだぞ!』

c. サイトアイコン ( ファビコン )

・「512 × 512」の「PNG」画像をする

・Word Press管理画面 → 外観 → カスタマイズ → サイト基本情報 → 「サイトアイコンを選択」

・画像選択画面 → ファイルをアップロード → ファイルを選択 → 該当画像を選択

・サイト基本情報画面に戻るので → 「公開」

d.目次

( COCOON の目次作成機能 )

COCOON では目次作成機能が付いています。
だから、Table of Contents Plus などの目次作成プラグインは必要ありません。

● COCOON 設定 → 目次

・目次の表示 : 表示するかしないか
・表示頁 : 投稿頁,固定頁など選択
・目次タイトル : 指定書き入れ
・目次の表示切り換え : 「閉じる」で目次をするか
・表示条件 : 見出しがいくつ以上になったら目次を表示するか
・目次表示の深さ : どの見出しレベルまでするか
・目次ナンバー : 各目次に番号をつけるかどうか
・目次の中央表示 : しない → 左端になる
・見出し内タグ : 有効 → 無効でもリンクは張られる。

・ウイジェットでサイドバーなどに同じ目次を表示できます。

・目次は最初のH2見出しの前に作られます。
だから、見出しはH2から始めなければなりません。※H1はタイトル
「小ぶりの見出しがよい」とH4見出しから始めると、目次は出てきません。


( COCOON の目次の問題点 )

① 頁区切り(改頁)をした場合、次の頁の最初の見出しが H2 でないと目次が表示されない

・ 見出し1 ( H2 ) / 見出しa( H3 ) で書いていて、改頁をして見出しb( H3 ) で書き出すと、
    見出しbの上に目次が現れません。目次は次の見出し2( H2 ) の上に現れます。

・対処
①改頁をしたときには次の頁の最初の見出し を H2 にする。ここではb( H3 )をb( H2 )にする。
② COCOON 設定/目次で「目次を表示しない」にして、目次を表示したいところにショートコード「toc」で呼び出す。

② 頁区切り(改頁)をすると目次が途切れる

・その頁に表示される目次は「その頁の見出し」です。改頁された「次の頁の見出し」は含まれません。
読者が次の頁をめくって始めて次の頁の目次が現れます。
改頁してあるとはいえ、次の頁は前の頁と一体です。
読者は、その頁全体の目次を見たいと思うはずです。
これができれば、ウイジェットでサイドバーにその頁全体の目次も表示できます。

・この点につき、 COCOON 質問では
「プログラムに修正を加えれば全体目次が表示される」と指摘されています。※こちら
しかし、「ib/toc.php」の記述には該当する記述がありませんでした。


( 「Extended Table of Contents」は使えない )

・全目次を表示させるのに「Extended Table of Contents」プラグインが使われています。 ※こちら
・デフォルトではタイトル下に目次が出ますが、ショートコード 「extoc ] で好きな場所に出せます。
・もっとも、サイドバーに ショートコート「extoc」を入れてもサイドバーに目次は表示されません。

私も当初「Extended Table of Contents」を使っていましたが、不具合が分かりました。
それは、目次からリンク先へうまく飛ばないこと。
これはリンク先を「見出し内の半角英数字」で判断していることが原因です。

〇見出しの区別

目次プラグインでは各目次からその見出しにリンクを張るのに、
各見出しにラベル(アンカー)をつけるわけではありません。
各見出しを「何らかの方法」で区別してリンクを貼っているのです。

例えば、 COCOON では「最初から〇番目の見出し」と区別しています。
「#toc1,#toc2,#toc3…」、改頁をした次の頁の見出しは「/2/#toc1,#toc2,#toc3…」

〇Extended Table of Contents の区別

Extended Table of Contentsでは見出しの中にある「半角英数字」で区別します。
だから、次の場合は見出しを区別できずリンクが張られません。

① 見出し番号に全角の「1,2,3…」や、「a,b,c…」を使った場合。
② 見出し番号に「①,②,③…」や「イ,ロ,ハ…」を使った場合。

ただし、その見出しに半角英字があれば区別します。

例えば、
「イ.Word Pressの利点」、「ロ.Homepage builderの利点」なら、
「#Word Press」,「#Homepage builder」と区別します。

しかし、「イ.Word Pressの利点」、「ロ.Word Press欠点」なら、同じ「#Word Press」となって区別できません。
もちろん、「イ.ワードプレスの利点」、「ロ.ホームページビルダーの利点」では
英字がないので区別できません。「# だけ」どなります。

次に、「見出し番号 1 の下にある 見出し番号 a 」と「見出し番号 2 の下にある見出し番号 a 」を
「#1-a」,「#2-a」と区別せず、同じ「#a 」とし、その見出しの中に含まれる半角英字で区別します。
見出しに英字がなかったり、同じ英字しかなかったりすると二つの見出しを区別できません。
この場合は最初の「#a」にリンクします。

また、見出しを区別できる場合でも、改頁をした次の頁についてはリンク先(「page=2#〇〇」)に飛びません。

以上のように、Extended Table of Contents は
「各見出しに含まれる英字が異なっていないと」各見出しを区別できず、リンク先に飛びません。

〇それなら、

「見出しに、見出しを区別できる英数字を付けてその英数字を消したら」?

例えば、1ai ( 1-a-イ ),1aro ( 1-a-ロ ),1aha ( 1-a-ハ ) と見出しにつけて、文字を背景色にして見えなくする。
無駄です、しっかりと現れます。

結局、「Extended Table of Contents」は和文には向いていません。

e.SEO設定

COCOON では各頁にSEO設定欄があります。

HPBの「編集 → 頁のSEO設定 → タイトル,キーワード,文字列(説明),検索対象」と同じ項目です。
使い慣れたSEO設定画面ですから、問題なく使えます。

適正文字数まで残り何文字かも表示されます。

もし、HPBで作った頁のSEOをコピーするのなら、
HPB頁の <meta> タグをコピーすればよいのでしょうがでしょう が、
それをどこに貼りつけたらよいのかが分かりません。(キャパ越え)

HPB頁のSEO設定画面のタイトル,キーワード,文字列をコピーして
COCOON 頁のSEO欄に貼りつけるのが無難でしょう。

選任のための法律知識・

【広告】
・当サイトはXサーバーの「×10」。
プラン変更自由です。
Xサーバーなら、まず不足はない。
「ドメイン移転・管理費用ゼロ」のときに!
・当方は「とくとくBB」の「V6プラス」。
夜中に1Mbの画像がタイムオーバー。
それって、プロバイダーの混雑?
同じV6プラスなのに…。
「とくとくBB」に変えて問題解決。



タイトルとURLをコピーしました