WordPress無料テーマcocoonで企業サイト風カスタマイズまとめ
こちらのサイトはポートフォリオに載せます。Web制作会社さんに営業をするときや、今まで面談してきた方々に送り、「こんなサイトを作れるよ！」と伝える為に使います。
ドメイン・サーバーなど
ドメイン：ムームードメイン
サーバー：mixhost
テーマ：cocoon
最初にメールアドレスを設定
デモレーション用にサイトに紐づけるメアドが欲しかったので、mixhostでメールアドレスを作りました。
電子メールアカウント作成
https://help.mixhost.jp/hc/ja/articles/115003742172
メールログインmixhost
https://help.mixhost.jp/hc/ja/articles/115003735051-Web%E3%83%A1%E3%83%BC%E3%83%AB%E3%81%AE%E5%88%A9%E7%94%A8%E6%96%B9%E6%B3%95
サイトの開設でやったこと
ドメイン取得
サーバーにWordpressインストール
https://mixhost.jp/column/wordpress-begin/
WordPressをインストールしてすぐにやった設定
外観→ヴィジェット→メタ情報は消す
設定→パーマリンク→投稿名にする
【初心者必見】WordPressのインストール後にすぐやっておきたい初期設定6個
https://freelance-mama-life.com/wp-first/
プラグインを導入し設定
Akismet Anti-Spam (アンチスパム)
スパム対策
メールアドレス必要 キーを2つ入れます。
Broken Link Checker
リンク切れを発見
Contact Form 7
お問い合わせページ
サンクスページや確認など追加する場合
https://form.run/media/contents/website-lp-creation/contact-form-7/
Edit Author Slug
管理者を隠す。
Edit Author Slugプラグインの使い方
https://www.adminweb.jp/wordpress-plugin/security/index23.html
EWWW Image Optimizer
画像のサイズ縮小
Google XML Sitemap Generator
検索エンジン向けのサイトマップ
Google XML Sitemapsの設定方法
https://bazubu.com/google-xml-sitemaps-27067.html
Jetpack by WordPress.com
TwitterなどのSNSと連携し自動投稿したり 簡単な集計
【愛用者が解説】WordPress（ワードプレス）のプラグイン「Jetpack」の設定方法！おすすめ機能を4つ紹介
https://briarpatch.co.jp/wp-jetpack
Pixabay Images
沢山の無料画像
UpdraftPlus – バックアップ/復元
バックアップ
バックアップ専用プラグインUpdraftPlusの使い方・設定方法まとめ
https://tekito-style.me/columns/wordpress-plugin-updraftplus
2021年から新しいプラグイン使用しています。
Invisible reCaptcha
Akismet Spamm Protection をやめてこちらにしています。
SiteGuard WP Plugin
基本的なサイトセキュリティはこれで。
cocoon設定で全体を企業サイトらしくしました。
全体タブ
サイトキーカラー…メイン画像から抽出 Googleの拡張機能のColorZillaを使用
フォント…イメージに合うものを選ぶ
サイドバー…「固定ページで非表示」
ヘッダータブ
ヘッダーロゴ↓
ヘッダーレイアウト・・・右寄せの方が企業らしさが出ますが、使用するスキンによって変更できない場合もあります。
ヘッダー背景・・・白にしました。
グローバルナビメニューの色・・・琥珀色 これはメール電話の部分で使用したボタンの色と合わせました。
SNSフォローボタン
消しました。
SNSシェア
ページのボトムだけの表示に変更。
「シェアメッセージ」→ 「＼株式会社モカデザインの活動／」に変更
・Twitter
・Facebook
・LINE
・コピー
の4種類に絞る。
エディター
私はブロックエディターが苦手なので、クラシックエディタに戻しました。
Gutenberg □Gutenbergエディターを有効にするのチェックを外す
本文
投稿情報表示設定の「投稿者名の表示」のチェックを外す。
□投稿日の表示
□更新日の表示
□投稿者名の表示
トップページを固定ページにした際にタイトル、シェア・フォローボタン、投稿日、更新日、投稿者名の表示を切り替えるCSS例
https://wp-cocoon.com/home-page-display-none/
Cocoonの投稿・固定ページの日付を非表示にする方法
https://memo2000.com/cocoon-date-hidden
Cocoonの固定ページでタイトル・更新情報・SNSボタンを非表示にする方法https://sec.ayaito.net/cocoon/manual/17443/
固定ページで内容を作り、フロントページにする
サイトのカスタマイズボタンをクリック ホームページ設定→ホームページの表示→固定ページを選択
フロントページの固定ページの設定で「ページ設定」ページタイプを1カラム（広い）
目次を表示しない
固定ページでお問い合わせページを作る。
プラグインContact Form 7を使用し、問合せページを作りました。
グローバルナビメニュー
グローバルナビのメニューを設定
https://wp-cocoon.com/header-menu/
外観→メニューを編集
カスタマイズ→メニュー→ヘッダーメニューとフッターメニュー
トップ画像やバナーなどはCanva
トップ画像
トップ画は横長の画像にしたかったので、Canvaの「Twitterヘッダーサイズ」1500×500pxで作りました。
cocoon設定でアピールエリアに画像を配置。
【Cocoon】ヘッダーの下にウィンドウ幅いっぱいで画像を表示する
高さ設定をを500pxか600px（200-800px）にするといい感じです。550pxがお勧めという方も。
ファビコン
ファビコンはCanvaのロゴサイズで作りました。極力余白を無くして作ります。
お知らせバナー
お知らせバナー3つもCanvaロゴサイズです。
画像は可愛いのが欲しかったので、ガールドロップを使用しました。
ダッシュボードの外観→ヴィジェット→固定ページ本文上に「ギャラリー」を持ってきて→「チェック・入力したページで表示」にしフロントページのみに。
ギャラリー編集でリンク先を「メディアファイル」サイズは中
モバイルでメニューをハンバーガ―メニューに
【WordPress】テーマCocoonでスマホのハンバーガーメニューを設定する方法
https://design-formom.com/252/
【Cocoon】ヘッダーモバイルボタン（スマホメニュー）をカスタマイズ
https://ikuzoblog.com/cocoon-headermobile
その他参考にしたサイト
【Cocoon】サイト型トップページのカンタンな作り方【プログラミング知識は不要！】
https://takumioowarai.info/cocoonsite
Cocoonのボタンの使い方【ブログ初心者】簡単です！
Cocoon カスタマイズ10選！画像サイズやサムネイルサイズの修正の仕方をご紹介！
cocoonで企業型サイトを作ってみた。まとめ
無料で便利なcocoon。企業型サイトが出来ないか試行錯誤した記録です。
企業サイトの形にするのと、バナーなどを作るのに6時間半ほど。その他の細かい修正で1時間半なので計8時間で完成しました(∩´∀｀)∩
良かったら参考にしてみてください。
コメント