cocoonをサイト型にカスタマイズしてみた!やり方をざっくり解説!

さんちーさん

Webデザインの知識なんて皆無の私がした最大級のカスタマイズ!
コピペでいけるから、やってみてほしい!!!!

運営サイトのトップページをカスタマイズしてみました
思った検索結果が出なかったから、自分で記事にまとめます←

実は3サイト参考にさせていただきました

作り方はふるふるサイトさんを、カスタマイズのCSSのコピペを島根移住ブログさんを、タグのいじり方をものぐさWebノートさんを参考にさせていただきました

正直最後のタグのいじり方でめちゃくちゃ時間とられたし、これがわからず未完成のままでした……

それでは実際のページの作り方を紹介していきます!

まず固定ページを作る

これはふるふるサイトさんを見てください
超絶分かりやすい!
文字だけでポイントを説明(スクショがうまく撮れないから)

  • ステップ1
    固定ページを新規で作る

    このページがトップページになるから、わかりやすいように名前はトップページにしよう!

  • ステップ2
    COCOONブロックから2カラムを選択する

    2つ並んで表示させたいか3つ並んで表示させたいかで2カラムか3カラムか選べばOK!
    見やすさでいくなら2カラムがおすすめ!
    モバイルだと1つずつしか表示されないっぽい!

  • ステップ3
    カラムの中の見出しを付ける

    運営サイトでは「W洗顔」「保湿」「肌トラブル」「フォトブライダル」「商品レビュー」「新着記事」の6つの見出しをそれぞれ使ったよ!

  • ステップ4
    ショートコードを使う

    </>の中にあるショートコードを活用!
    新着記事の場合は、それをそのまま使えば大丈夫!
    カテゴリーを表示させたいときはふるふるサイトさん、タグを表示させたいときにはプラスでものぐさwebノートさんを参考にしてね

  • ステップ5
    ボタンを作る

    COCOONデザインの中にあるボタンを選択
    ダブルクリックしてボタンに文字入れたり場所調整しよう!
    URLを貼る方法はふるふるサイトさんがわかりやすいよ!

  • ステップ6
    目次を消す

    目次が表示されてうまくきれいに表示できてない……
    そもそも目次って消せるの?

    はい、消せます、「文書」の中に「ページ設定」というところがあります
    「目次を表示しない」にチェックを入れれば大丈夫!

    これで目次ありのださページを卒業できます

これで一度公開すればOK!

省略するとこんな感じ
ここでは私の失敗談を書いていくね!

タグがとっちらかってる

タグが1記事にしか使われてないのいっぱい、むしろ0個の消してないものもたくさん……
おまけにこのタグを使えば整理できてわかりやすいのに、というのも散見されました……

とりあえず普段からタグの整理はしておいたほうがいいですね!

タグの整理だけで2~3時間かかったのは内緒……

逆に言うと、タグ付け直したことで記事の関連性が高まったと思いたい←

ショートコードの順番は要注意!

実はタグを表示させるのに四苦八苦

属性の順番を間違えていたから!!!

ものぐさwebノートさんのnew_listの順番で書かないといけないのに間違えて書いてました……

これを探すのに実は2時間かかったのは内緒……
解決策がわからな過ぎて、一度カテゴリーを作ってカテゴリーで表示させてました……

スタイルシートの編集

これは島根移住ブログさんの「固定ページのデザイン調整」を完全にまるまるコピペ!

どれがいらないか判断しながらコピペがおすすめですが、私はもう完全コピペ!
正直タグが表示できないことで疲れまくったので……

しかしここでもトラブルが発生するのが私なのです

テーマエディターが見つからない→管理メニューを探す

なぜか知らないですが、私は皆さんの言ってるところにテーマエディターがないのです
これまた不思議……

以前ブログのコミュニティの詳しい人にも「え?」と言われたことがあります

画面の上にある「管理メニュー」のなかの「カスタマイズ」を押せば、スタイルシートの編集ができます

追加CSSに島根移住ブログさんのものをまるまるコピペすれば間違いなし!!!

フロントページを「固定ページ」に設定

「設定」ー「表示設定」を選びます

「ホームページの設定」のところで「固定ページ」の前にある●ポチを押します
その後先ほど作ったページを表示すればOK

これで先ほど作った固定ページがトップページに変わります!

そしてここでもやらかすのが私……

カスタマイズのところで設定しようとする

追加CSSのところにも「ホームページ設定」があります

ここで設定してもいけそうじゃーん

安易にしてみましたが、設定されず……

あとから見てみるとどうも変なところをクリックしてたみたい……

それなら最初から書いてあるほうでするほうが早い!

一生懸命「固定ページ一覧」をクリックする

「ホームページの設定」のところで「固定ページ」の前にある●ポチを押します

さきほどこう書いたのには理由があります

そう、●ポチ押さずに固定ページ一覧へのリンクを押してました
なぜリンクを押したのか、それはゲームしながら設定してたからです←

なんとまあ、あほなことしてました!

フッターから固定ページを消す

運営サイトだと固定ページがフッターに表示されるようになってました
別に気にならない人ならそのままで、気になる人は消しましょう

「ダッシュボード」ー「外観」-「メニュー」を選択しましょう

「メニューの編集」タブのなかの、編集するメニューを選択の中から「フッターメニュー」を選びましょう

対象ページの▼を押して、左下の「削除」を選択

固定ページで新着記事を作った場合は、この時に削除しておくと楽!

これで素敵なページができます

まとめ:普通の人が集中してやったら20分もあればできる

私は5時間くらい?かかってしまいましたが、このページにまとめた方法で行えば、多分そんなに迷わずに行けます

  • タグは日ごろから整理してる
  • ショートコードに書く順番を間違えない
  • テーマエディターがすぐ出てくる
  • ながら作業をしない

これらの条件がそろえば、難なくできます

カスタマイズってハードル高そうに感じがちですが、全然ハードル高くありません
だって私でも出来たから!

これをきっかけにチャレンジしてみませんか?

そんな感じ!


BIPでは日常生活のこと、マインド面に関することを発信していきます!
普段は美容ブログを運営中!
コスメコンシェルジュで元ビューティカウンセラーが美容、ボディメイクについて発信しています
気になる人はこちら!

+4
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
さんちーさん
スポンサーリンク
sunchyをフォローする
BIPのアウトプット展示会場

コメント

  1. […] […]

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