Cocoonをインストールしてみる
「ロリポップ！レンタルサーバー」のWordPress簡単インストールを使って無料の「Cocoon」をインストールした。
FTPでファイルをアップロードしてインストールしなくていいので、初心者には非常に有難い。
メニューから「サイト作成ツール」→「WordPress簡単インストール」→「WordPressのインストール先・設定」で「サイトURL」にインストール先を入力。
「入力は任意です」の文字のところに「独自ドメイン設定」で設定した「公開 (アップロード) フォルダ」を入力する。
「WordPressの設定」で「サイトのタイトル」「ユーザー名」「パスワード」等を入力し「Cocoon」を選択して一番下の「入力内容確認」をクリック。
インストール先がOKなら、「インストール先のディレクトリに同じ名前のファイルがある場合は上書きされます。」で「承諾する」にチェックを入れて「インストール」をクリック。
インストールすると、サイトURLと管理者ページURLが表示されるので、管理者ページURLにアクセスする。
管理画面の「WordPressへようこそ！」の文字が出たら、ようやくここからがスタート。
ここまででかなり疲れてしまったけど。。。
「管理メニュー」→「テーマ」（または「外観」→「テーマ」）をクリックして「Cocoon」を選択しようと思ったら、何故か２つある。
「Cocoon」と「Cocoon Child」
作成者のわいひらさんのサイトを見たら、「Cocoon」親テーマではなく「Cocoon」子テーマを有効化して使うことを推奨していた。
理由は60過ぎのじじいにはよく理解できなかったが、素直に「Cocoon Child」を有効化して使ってみる。
Cocoonを設定してみる
まずは、スキン選び。
「管理メニュー」→「Cocoon設定」からスキンを選択。
シンプルで使いやすそうなわいひらさん作成のスキン「COLORS（グリーン）」を選択。
テーマカラーは緑に決定！
取りあえず適当な記事を3つほど（画像あり画像なし）投稿してみる。
管理画面「新規」→「投稿」
最初に躓くのはやはりブロックエディタだろう。
ブロックって何だ？
「タイトル追加」のところに「タイトル」を書けばいいのかな？
その下に本文か？
画像はどうやって付ける？
『ブロックを選択するには「/」を入力』という意味が、さっぱり理解できなかったけど、その右側にある「＋」をクリックして出て来たリストの中から「画像」→「アップロード」で画像が付けられた。
とにかく習うより慣れろ。
参考サイトを見ながら、いじくり繰り回すしかない。
アイキャッチ画像が2枚並んでいる？
さっそく疑問点が。。。
同じアイキャッチ画像が2枚縦に並んでいる。
デフォルトの設定で何故こうなっているのかは知らないが、とにかく「Cocoon設定」の「画像」から修正。
「アイキャッチの表示」の項目の「本文上にアイキャッチを表示する」のチェックを外す。
ついでに「アイキャッチの自動設定」の「アイキャッチ自動設定を有効にする」にチェックを入れる。
「Cocoon設定」の「本文」を開いて「本文余白」の「行の高さ」を適当にいじる。
行間を広げたり狭めたり。。。
私は「本文余白」→「行の高さ」2.5に設定（デフォルト1.8）
私の場合、行間だけがちょっと気になったので、別に違和感がなければ直す必要はありません。
あとはおいおい修正していけばいいのでは？
キャッチフレーズを入力
管理メニューから「ダッシュボード」→「設定」→「一般」で「キャッチフレーズ」を入力して一番下にある「変更を保存」をクリック。
私は「時刻形式」と「週の始まり」を変更しました。
プロフィールを作る
キャッチフレーズを踏まえてプロフィール作成に入る。
管理メニューから「固定ページ一覧」を開き「新規追加」をクリック。
「タイトルを追加」のところに「プロフィール」と入力。
右側の設定にある「URL」をクリックしてパーマリンクの「プロフィール」の文字を「profile」に変更して「下書き保存」する。
さんぽブロックのところに「ハンドルネーム (handle name) :さんぽ（sanpo)」と書いて、その後が詰まる。。。
目次のデザインを変更する
目次のデザインをちょっとお洒落にしようと思い、いじってみました。
Y&K Studio さんのページ↓を参考にさせていただきました。m(__)m
管理メニューから「Cocoon設定」→「全体」→「サイトアイコンフォント」→「Font Awesome 5」にチェックを入れる。
アイコンフォントは自由に変更可能ですが、有料無料のものがあり、バージョンも気にしなくてはいけません。
Font Awesome 5にチェックを入れたら、Font Awesome 5のアイコンリストの中から無料（free）のものを選んでください。HTMLで使う場合は、CSSで指定したクラス名で。 クラス名：fas fa-list ユニコード：f03a HTML使用例：<i class=”fas fa-list”></i>
style.css にコードを貼り付ける場合は、ユニコードで。
Y&K Studio さんのCSSをそのままコピペして使う場合は何もしなくていいですが、アイコンフォントを変更する場合は「\」（またはバックスラッシュ）でエスケープ処理をするのを忘れないように。
「content：”＼f03a”；」←この部分を「content：”\f03a”；」という具合に。（全部半角です）
※バックスラッシュが必要なときは、半角にしてキーボードの「\」が刻印されているキーを押してください。
日本語でWindowsを利用している場合、コマンドプロンプトでは、バックススラッシュ（＼）の代わりに、円マーク（￥）が表示されます。（バックスラッシュと円マークは同様の機能を持ちます）
記号の「バックスラッシュ」の半角は、日本語のフォントには含まれない記号です。
サイトアイコンフォント「Font Awesome 5」のリスト↓です。「Free」をクリックして選択。
コメント