2019.10.18スポンサーリンク誰得コンテンツ、「Cocoonをコーポレートサイトっぽくカスタマイズ!」の3回目。1回目「トップページ編」、2回目「メニュー編」はこちら。Cocoonをコーポレートサイトっぽくカスタマイズ!1トップページ編Cocoonが便利すぎて、なんとかコーポレートサイトとかビジネスサイト、企業サイトっぽくカスタマイズ出来ないかと思いいろいろ試してみることにしました。トップページカスタマイズ編です。www.nullllog.com2019.10.15Cocoonをコーポレートサイトっぽくカスタマイズ!2メニュー編Cocoonが便利すぎて、なんとかコーポレートサイトとかビジネスサイト、企業サイトっぽくカスタマイズ出来ないかと思いいろいろ試してみることにしました。プルダウンメニューの親ページにはリンクさせないようにします。www.nullllog.com2019.10.16料金表といえばテーブル、つまり表。表なんて簡単じゃん、と思うでしょうし私もそう思ってたんですが、スマホ・PCどちらでも綺麗に見せようと思うとけっこう悩むんですよね...。今回はこんな感じの料金表ページにしようと思います。あ、メインビジュアルの写真変えました。全ページのサンプルができたらこのサイトも公開しようと思います。固定ページでは「更新日」を表示させたくないこのサンプルではページを「固定ページ」で作成し、「投稿」でお知らせやスタッフブログを作ろう、と考えています。タイトルの右下にご注目ください。投稿日と更新日が表示されている!お知らせやブログなどの情報は「情報の鮮度」や「いつの情報なのか?」が大事かもですが、料金ページやアクセスページなどは投稿日は不要と思われます。表示させないようにしたいと思います。日付の表示設定は「Cocoon設定」の「SEO」「本文」にありますが、こちらで「表示しない」の設定にすると、ブログなどの「投稿ページ」でも表示されなくなってしまうんですよね。(少なくとも2019年10月では個別の設定が出来ないと思います)なので、ここは泣く泣くdisplay:none;を使用します。これは公式のフォーラムにも書き方が載っています。固定ページ中心のサイトを作成しています。ページの特性上、時間や投稿者の情報はできる限り無くしたいです。cocoon設定の固定ページタブ、もしくは個別の固定ページ編集のところで、時間表示と投稿者表示の取捨選択ができるようにしていただけると嬉しいです。表の上が、「左にメニューの説明」「右にイメージ写真」という2カラム構成になっているのですが、Cocoonはこのカラム分けがめっちゃ簡単。「ビジュアルエディタ」を使用します。「タグ」のプルダウンから、今回は「2カラム(1:1)」を選択。すると簡単にカラム分けが出来ます...!(編集画面ではカラムに背景色が付いていますが、実際は背景色はないです。)あとは見出しやテキスト、画像を入れていくだけ。Cocoonは便利機能が多すぎて使いきれない。Generator表(テーブル)を作っていきます。Generator」で簡単に作れます。Generator」の使い方を分かりやすく説明します。www.nullllog.com2019.09.03テーブルをスマホで見るとこんな感じで、説明の部分の行が多くなっています。スペック紹介などでよくありますね。Cocoonはテーブルのレスポンシブ化もワンクリック「Cocoon設定」の「本文」タブの「テーブル設定」で「レスポンシブテーブル:横幅の広いテーブルは横スクロール」にチェックを入れると、横スクロールするようになります。列が多い表だと、スマホでは列幅が狭くなり改行が多くなってしまうため、場合によってはこの方が見やすいかもしれません。ちなみにこの横スクロール、チェックを入れるとPCでもスクロールしてしまいます。今回はメディアクエリの設定を追記して、768px以下だけ横スクロールするようにしました。「レスポンシブテーブル:横幅の広いテーブルは横スクロール」にチェックを入れて、CSSに下記を追加。難しい事はしていないのですが、Cocoonのカラム分けとテーブルのレスポンシブ化機能を紹介したかったので書きました。料金表だったり会社概要だったり、表を使う機会ってけっこう多いんですよね。ひととおりできあがったサンプルサイト公開しています。コピーnullllをフォローするnullllnullllog関連記事WORDPRESSCocoonをコーポレートサイトっぽくカスタマイズ!7おまけ:ヘッダに電話番号編Cocoonが便利すぎて、なんとかコーポレートサイトとかビジネスサイト、企業サイトっぽくカスタマイズ出来ないかと思いいろいろ試してみることにしました。ヘッダ(ナビゲーション)に電話番号を表示させる方法です。超初心者がSVGをWordPressで扱う方法をまとめておきます。デフォルトではWordPressでSVGファイルをアップロードできないため注意が必要です。無料レンタルサーバ「XFREE」でのWordPressの設定方法・使い方をわかりやすく説明します。誰でも無料でWordPressを使用することができます。WORDPRESSWordPressテーマ、どうやって選ぶ?Wordpressテーマを「どのように選んだか」「どのように選べばいいのか」のお話です。WORDPRESSCocoonの「吹き出し」機能のデフォルト一覧とカスタマイズ方法Cocoonの「吹き出し」機能のデフォルト一覧とカスタマイズ方法を詳しく解説します。WORDPRESSWordPress無料テーマCocoonのショートコードの使い方WordPress無料テーマCocoonのショートコードの使い方や設定できる項目、オプションについてまとめておきます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。素材アーカイブ2020年2月2020年1月2019年12月2019年11月2019年10月2019年9月2019年8月おすすめサーバこのサイトでも使用しています。GeneratorCocoonはテーブルのレスポンシブ化もワンクリック料金表ページの完成AUTHOR書いた人nullll未経験から突然小さな会社のインハウスWebデザイナーになりましたので、WEBサイト制作に役立つ情報のメモを残そうと思います。同じような方の参考になれば幸いです。nullll14人気記事Cocoonをコーポレートサイトっぽくカスタマイズ!1トップページ編2019.10.152020.01.09Cocoonをコーポレートサイトっぽくカスタマイズ!6おまけ:新着情報編2019.11.262020.01.14Cocoonをコーポレートサイトっぽくカスタマイズ!7おまけ:ヘッダに電話番号編2019.12.122020.01.09Cocoonをコーポレートサイトっぽくカスタマイズ!2メニュー編2019.10.162020.01.09Cocoonをコーポレートサイトっぽくカスタマイズ!3料金表編2019.10.182020.01.09nullll未経験から突然小さな会社のインハウスWebデザイナーになりましたので、WEBサイト制作に役立つ情報のメモを残そうと思います。同じような方の参考になれば幸いです。Reserved.検索メニューWEBWORDPRESSWORKSいろいろプロフィールタイトルとURLをコピーしました。