本日は「Cocoonのスキン設定」・「ヘッダーのタイトル文字のCSSを使った変更」・「サイドバーのプロフィールの背景画像の挿入」・「プロフィール画像の変更」の仕方を学ぶ。
本日の講義は、会員は投稿の権限しか無く、管理者のダッシュボードでしか操作が出来ない項目なので講師のPCからそれぞれが操作して学んだ。
その後、自分の仮想サーバーLocal上にあるダミーのサイトで、学んだ内容をトレースして、確認していった。再現の手順を下記に記します。
注shin：この投稿、下書きでは意図するページが表示されていますが、プレビューすると、記事の上部に 目次ブロック と 会員の投稿履歴ブロックが 挿入されます。
公開してもそうなのか？と実験的に公開しました。
公開ぺージでも同様ですね、投稿の権限内でこれを正す方法は有るんでしょうか？
解かりました！
講師の先生にヒントを頂きました。
当講義中に講義の素材としてスキンの交換をしたことが原因だろうと。
なるほど、以前、目次は自動的に入れることが出来る、たしかH1、H2の見出しは自動的に目次に表示されると・・、今回のスキンはデフォルトで見出しONになっているのでは？
以上のことを踏まえ、全ての見出しブロックをH3に変更した。すると、プレビュー画面で確認すると、目次ブロックと履歴ブロックは消去され、意図する体裁になりました。
それがこのページです。
この稿では「＊」 はクリックを表します
Cocoonのスキン設定とヘッダー画像挿入
■スキン選定
ダッシュボード Cocoon設定 ＞ ［スキン］タブ＊ 下部にある候補一覧から好みのスキンを選択する。
○ミックスブルーを選択（〇をクリック）した。
■ヘッダーの背景画像の挿入
［ヘッダー］タブ＊ ヘッダー背景画像項目：［選択］＊
アップロードorメディアライブラリーから画像選択 ＞ 挿入される。
ヘッダー項目［高さ］を画像サイズに合わせる。ここでは300とした。＞［変更をまとめて保存］＊
［追加CSS］を入力して、タイトル文字が背景に埋没しないように変更
■クラス名を確認する
ページで、右クリック ＞［ページのソースを表示］＊して開き、タイトル文字のクラス名を探し出す。
CTRL＋Fで検索、キーワードをヘッダーのタイトル名（私の場合:とんだばやし.net Blog）で検索。クラス名を推測する。
クラス名はlogo-headerだった。
■追加CSSの入力
外観 ＞ カスタマイズ ＞ 追加CSS ＞ 下記を入力する。
.logo-header {
font-size：20px;
font-weight: bold;
text-shadow：#000 1px 0 5px;
}
＞［公開］＊
以上で、タイトル文字に黒の影が付き背景画像から浮き出して見えるようになった。
■余談
因みに、私のぺージの場合、キャッチフレーズ文字も埋没するので、そのクラス名を探し出し、下記のように追加CSSに書き加えた。
.tagline{
font-weight: bold;
text-shadow: #000 1px 0 3px;
}
これで埋没を防ぐことが出来た。（注shin 今ご覧のサイトとは異なります）
プロフィールブロックの背景に画像を挿入する。
■追加CSSに書き加えるコードをWebから検索する
「cocoonプロフィールデザイン変更」「cocoonプロフィールカスタマイズ」などのキーワードでWeb検索 ＞ 検索結果ページに各種例示されているサイトがリストアップされているので、サイトを見て対象になるCSSコード（100行強）をコピー、追加CSSにペーストする。私たちはyujiblogさんを参考にした。
参考：https://yujiblog.org/wordpress-profile
■CSSコードをコピーする
yujiblogページの中にコピーすべき100行強のCSSコードが書かれた部分がある
以下のように先頭部分から末端まで
/*******************
**** プロフィール欄
*******************/
.nwa .author-box {
max-width:none;
padding: 0;
margin-bottom:0;
}
この間100行以上ある ここでは省略
@media screen and (max-width: 1023px){/スマホ画面でサイドバーを非表示/
div.sidebar {
display: none;
}
} ←ここまでコピーする
このコピーを［外観］＞［カスタマイズ］＞［追加CSS] ＊ で開いた入力箇所にペーストする。
■表示したい画像のURLを獲得、指定箇所にペーストする
ペーストされた100行強の例示CSSコードの中に「画像URLをペーストする箇所」が明示されている。
［メディア］ ＞ ［ライブラリ］ 「アップロード or ライブラリー中]の画像を選択する。そのURLを獲得してコピー、明示箇所にペーストする。＞ [公開]＊
（shin注 画像を選択すると、画面右下付近に［URLをクリップボードにコピーする]ボタンがあるので＊して取得する）
以上で、プロフィールの背景に画像が挿入されているのを見ることが出来る。
■イラストやアバターの挿入
プロフィール人物画像あるいはアバターなどは［ユーザー］ ＞ ［プロフィール] 設定ページにプロフィール画像設定ボタンがある。そこから「アップロード or ライブラリーの中」から画像を選択する。それによって画像がその箇所に挿入され、Web画面に反映される。（画像は240pxｘ240pxの正方形のものが良いようだ）
最後に [プロフィールを更新]＊ プロフィールに画像が挿入される。
以 上
コメント