コクーン

トップページをカスタマイズ|固定ページで作成する(コクーン)

トップページは、「コクーン設定」の【インデックス】タブから、

簡単に変えられます。

今回はこの設定を使わないで、自分でカスタマイズしてみたいと思います。

このブログのように、カテゴリー画像を使った3カラム(3段組み)表示にカスタマイズしてみたいと思います。

さらに、トップページのみ、右サイドバーを非表示にして消したいと思います。

もちろん、下のような2カラム(2段組み)にもできます。

※モバイルでは1カラム表示になります。

ちょっと長いですが、手順を説明します。

最初にカテゴリー画像を準備する

pixabayO-DANといった、無料で使用できる画像素材サイトで好きな画像を探し、下のようなカテゴリー画像を作ります。

3カラム(カテゴリーが3つ)なので、3枚(サイズ567×220)用意しました。

サイズは好みで調整してください。

Step1 記事のグループ分け

次に、各カラム(段組み)に入れる記事のグループ分けをします。

1グループに5記事ずつ入れて、3グループ作りたいと思います。

記事5つをメニューで編成する

「外観」>「メニュー」を開きます。

メニューを開く

下の画面になります。

新しいメニューを作成しましょう。 をクリック

② 任意のメニュー名(例:トップカテゴリー1)を入れる 

メニューを作成 ボタンを押す

次に、新しいメニュー(グループ)に入れる記事を5つ選びます。

④ 固定ページ・投稿・カテゴリーを展開し、入れたい記事(カテゴリー)に を入れる

メニューに追加  ボタンを押す

すると、記事が下のように追加されます。

⑤ ドラッグして好きな順番に入れ替える

⑥ 最後にメニューを保存 ボタンを押す

1グループ目が完成です!

上の手順を繰り返す

上の手順を繰り返して、新しいメニューをもう2つ作ります。

メニュー作成の手順

  1. 新しいメニューを作成しましょう。をクリック
  2.  メニュー名(例:トップカテゴリー2・3)を付ける
  3.  メニューを作成 ボタンを押す
  4.  5記事選んでメニューに追加  ボタンを押す
  5.  好きな順に並び替える
  6.  最後にメニューを保存 ボタンを押す

3つのメニューが保存されました。

Step2 固定ページでトップページを作る

次に、トップページ本体を作成します。

「固定ページ」>「新規作成」を開きます。

新規記事の編集画面になります。

ブロックを3カラムにする

まず、好きなタイトル(例:トップページ)を付けます。

画像に alt 属性が指定されていません。ファイル名: top_4.jpg

① ブロックの [ ⊕ ] を押して展開し、からをクリックします。

カテゴリー画像とメニューを呼び出すコードを入れる

下のように、3ブロックにそれぞれ最初に作成した画像を1枚ずつ貼り付けます。

そして、各3つの画像の下に、先ほど作ったメニューを呼び出す下のショートコードをそれぞれを入れます。

  1. [navi name="トップカテゴリー1" arrow="0"]
  2. [navi name="トップカテゴリー2" arrow="0"]
  3. [navi name="トップカテゴリー3" arrow="0"]

上のように右にアロー「>」を入れたい場合は、ショートコードのarrow=「0」を「1」に変えます。

アローを入れられる

トップページの編集は、これで完了です。

新着記事を表示させるには?

新着記事を自動的に表示させるには、カテゴリー画像の下に以下のコードを貼り付けます。

  1. /*新着記事を呼び出すショートコード*/
  2. [new_list count="5" type="default" cats="all" children="0" post_type="post"]
  3. /*ここまで*/


新着5記事を表示する設定になっています。countの「5」 の数字を変えて記事数を変更できます。

タイトルを消したい|手順3

このまま公開すると、下のようにタイトルが入ってしまいます。

これを消したいと思います。

外観」>「テーマエディター」を開きます。

コクーンの「子テーマ」>「スタイルシート」を開きます。

トップページのみタイトルを非表示にする下のコードを貼り付けます。

  1. /* トップページのタイトル非表示 */
  2. post-●●●● h1.entry-title {
  3. display: none;
  4. }

※コードの「post-●●●●」には、トップページの編集画面URLにある番号を入れます。

いよいよ、「固定ページでトップページを作る」手順2で作成したページを表示させます。

設定」>「表示設定」を開きます。

ホームページの表示」の設定を変えます。

  • ①「固定ページ」にチェックを入れる
  • ② 固定ページ(手順2)で作成したページを選ぶ
  • ③ 「変更を保存」ボタンを押す

公開されました!

サイドバーも消しておく|手順4

最後に、トップページのみ、サイドバーを非表示にして消したいと思います。

Cocoon設定」>「全体」タブを開きます。

下方の「サイドバーの表示状態」で、フロントページで非表示に変更して保存します。

これでサイドバーが非表示になりました!

以上で作業完了です!お疲れ様でした。

-コクーン

© 2021 ブログメイク

ドメイン 意味     用途                
登録開始
.international国際的海外向け製品・ サービス2014年
.globalグローバル事業、留学・ワーキングホリデー2014年
.kiwiキウイニュージーランドでのビジネス2014年

ドメイン 意味用途                
登録開始
.managementマネジメントマネジメント系業種2014年
.consultingコンサルティングコンサルタント2015年
solutionsソリューションコンサルタント、DIYサービス、
アドバイザー
2014年
.supportサポート製品、システムのサポート・問合せ窓口
コンサルティング、慈善団体
.tax税金会計士・税理士、確定申告・税金の情報 2014年
.associatesアソシエイト
(パートナー/仲間)
サークル、社名、法律家、会計士、設計2014年
.accountants会計士会計事務所、税理士、会計ソフト2014年
.singlesシングル・独身婚活・出会い2013年
.datingデート2014年
.partnersパートナー
.click意気投合マッチングサイト
2014年
.chatチャットカスタマーサービス2015年
.careersキャリア求人・派遣、職業訓練2013年
.works工場工場求人2014年

ドメイン 意味      用途               
登録開始
.marketingマーケティングマーケティングリサーチ・広告、メディア代理店2014年
.engineerエンジニアシステムエンジニア、プログラマー、ITエンジニアなど2015年
.systemsシステムシステム設計・管理、セキュリティ2014年
.engineeringエンジニアリングエンジニアリング会社2014年

ドメイン 意味    用途                
登録開始
.builders建築業者住宅・ビル建築、リフォーム、工務店、
ボディビルダー
2014年
.construction建造建築業者、配管工、左官、塗装工2013年
plumbing配管配管・水漏れ工事2013年
.expressエキスプレス 急行列車・バス・配達、名称2015年

ドメイン 意味      用途               
登録開始
.dealerディーラーディーラー2021年
.autoオート自動車2016年
.car   
車・自動車  
自動車、カーレース・スポーツカー2016年
.cars
.cabタクシータクシー・配車2013年
.tiresタイヤタイヤの製造・販売・サービス    2015年
.limoリムジンリムジン会社、レンタカー      2013年
.bikeバイクバイク・自転車の店舗や販売サイト
バイク・自転車にまつわるブログ
2013年

ドメイン 意味      用途                
登録開始
.equipment道具設備・機材2013年
.toolsツールDIY工具2014年
.lighting照明照明機器の製造・販売2013年
.solarソーラーソーラー機器の製造・販売2014年
.audioオーディオオーディオ販売2014年
.cameraカメラカメラ・写真2013年
.computerコンピュータパソコン版売・修理、ソフトウェア開発 2014年

ドメイン 意味      用途                 登録開始
.suppliesサプライ原材料・消耗品の供給2014年
.partsパーツ部品の製造・販売2014年
.diamondsダイヤモンド宝石店・アクセサリー2013年
.jewelryジュエリー2015年
.farmファーム農場・牧場・店舗名2014年
.glassガラス食器販売、ガラス修理2014年
.cleaningクリーニングクリーニング・清掃2014年
.flowersお花屋さん2015年
.studioスタジオフォト・音楽・フィットネス・
ダンススタジオ、アトリエ      
2016年
.visionビジョン・視力眼鏡・コンタクト2014年
.helpヘルプ便利屋2014年

ドメイン  意味      用途                登録開始
.tokyo東京東京に拠点を置く会社
東京に関連したビジネスやサービス
2014年
.nagoya名古屋名古屋に拠点を置く会社
名古屋に関連したビジネスやサービス  
2014年
.yokohama 横浜横浜に拠点を置く会社
横浜に関連したビジネスやサービス
2014年
.kyoto京都京都に拠点を置く会社
京都に関連したビジネスやサービス
2016年
.okinawa沖縄沖縄に拠点を置く会社
沖縄に関連したビジネスやサービス
2014年
.ryukyu琉球琉球(沖縄)に拠点を置く会社
琉球に関連したビジネスやサービス
2014年
.londonロンドンロンドンに関するもの2015年
.vegasラスベガス旅行、楽しさを強調2015年
.city都会都会の紹介、シティ(名称)として2014年
.capital首都、資本首都、資本2014年

ドメイン意味用途
登録開始
.ltd有限会社コーポレートサイト2017年
.inc企業・会社2019年
.holdingsホールディングス2013年
.venturesベンチャーベンチャー企業、起業2013年
.productionsプロダクション制作会社2013年
.enterprisesエンタープライズ
企業・企画
企業・ビジネス情報2013年
.repair修理修理会社2014年
.contractors委託業者請負業者2013年
.agency代理店代理店・取扱店2015年
.green環境保護環境保全に取り組む個人や団体、企業 2017年
.industries工業工場サイト2014年
.works工場ワークス(社名)2014年