cocoonで企業型サイトを作ってみた。

Web制作

WordPress無料テーマcocoonで企業サイト風カスタマイズまとめ

株式会社モカデザインという架空企業サイトを作りました(`・ω・´)ゞ
株式会社モカデザイン
株式会社モカデザインでは、綺麗なだけではないSEO対策を駆使した集客できるサイトを作ります。作成後のアフターフォローも万全です。

こちらのサイトはポートフォリオに載せます。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

サイトの開設でやったこと

ドメイン取得

独自ドメイン設定
https://help.mixhost.jp/hc/ja/articles/115003735211-%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A

サーバーにWordpressインストール
https://mixhost.jp/column/wordpress-begin/

ドメインにネームサーバーの設定
https://help.mixhost.jp/hc/ja/articles/360004877872-%E3%83%8D%E3%83%BC%E3%83%A0%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AE%E7%A2%BA%E8%AA%8D%E6%96%B9%E6%B3%95

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

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】ヘッダーの下にウィンドウ幅いっぱいで画像を表示する

【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のボタンの使い方【ブログ初心者】簡単です!
当記事はブログをWordpressで始めてテーマをCocoonにした方に向けて書いています。突然ですが、Tazuki Blog のCocoon記事へこんなボタンの使い方がCocoonでは簡単にできるのをご存知ですか?HTMLやCSSなど触ら

Cocoon カスタマイズ10選!画像サイズやサムネイルサイズの修正の仕方をご紹介!

Cocoon カスタマイズ8選!画像サイズやサムネイルサイズの修正の仕方をご紹介!
無料テーマCocoonを使い始めたけど、サイトの見栄えがどうしたら良くなるのかよく分からないという方がおられるかと思います。私もCocoonを使っており、このブログでは月間3万PVを達成し、月10万円程度稼げるようになりましたこの記事では7

cocoonで企業型サイトを作ってみた。まとめ

無料で便利なcocoon。企業型サイトが出来ないか試行錯誤した記録です。
企業サイトの形にするのと、バナーなどを作るのに6時間半ほど。その他の細かい修正で1時間半なので計8時間で完成しました(∩´∀`)∩
良かったら参考にしてみてください。

Web制作
参加中ブログランキング
にほんブログ村 子育てブログ 保活・待機児童へにほんブログ村 小遣いブログ SOHO・在宅ワークへ
SNSでページをシェアする
おうちで働くママブログ フリーランスのWebデザイナー主婦

コメント

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