お仕事の依頼はココをクリック

【カスタマイズ】コクーンのトップページをカッコよくする方法を公開

Cocoon
スポンサーリンク

まいどおおきに!おおもと(@so88qa)です

わたし
おおもと

トップページをめっちゃカッコよく改造しました!

今回は、ツイッターでとある「つぶやき」を見つけてビッビッときたので、プラグインやらCSSやらをゴニョゴニョして

Cocoon(コクーン)のトップページを魔改造して見ました!!!!!!

トップページは↓をクリック

Home Page
はじめにはじめまして!おおもと(@so88qa)と申します(_ _)当ブログは『好きなことを書く』をモットーに気の向くまま記事を書いています♪本職が忙しく更新頻度が落ちていますが粘り強く更新を続けていきますので応援の程よろしくお願い致しますm(_ _)m記事一覧

つぶやきはこちら

NAE(@__NAE__)さんは、自分でプラグインを作ったり

ワードプレスをイジクリまわしたりしているブロガー(変態)です

ぼくはブログデザインで、かなりパク(ry 参考にさせていただいています

今回の記事は、『トップページを魔改造した内容』を包み隠さずお見せいたします!

参考記事はこちらからどうぞ

ブログのトップページを作ったので、作り方から実測効果まで全部紹介
ブログトップページを作りました。コンセプト、コンテンツ設計の考え方、実際の作り方や使ったプラグイン、作成前後での数値変化などをまとめました。
【CSSカスタマイズ】コクーンで使えるCSSを追加するオススメの方法
有料級のワードプレス無料テーマCoccon(コクーン)のCSSカスタマイズ記事のまとめと、CSSを追加する方法を記載した記事です。 古いカスタマイズから新しいものまで、まとめてますので流し読みをしてください。
【コクーン】プラグインを使わずトップページをカッコよく改造する方法
トップページはブログの顔!!! そんな、トップページを『プラグインなし』で魔改造したので その一部始終を教えちゃいます!
スポンサーリンク

トップページ作成:まずは、プラグインを入れよう!

わたし
おおもと

必要なプラグインは2つだけ

トップページ作成に必要なプラグインは2つだけ

だけ

ダウンロードはこちらをクリック!

Page Builder by SiteOrigin

Page Builder by SiteOrigin
単純なドラッグ & ドロップのページビルダーを使って、おなじみのウィジェットを用いたレスポンシブページレイアウトを構築。

Newpost Catch

Newpost Catch
Thumbnails in new articles setting widget.

つぎに、プラグインの紹介をしますね

Page Builder by SiteOrigin

わたし
おおもと

ページレイアウトを簡単にできちゃうプラグイン

詳しくは、こちらの記事をどうぞ

ページのレイアウトを設定するプラグイン Page Builder by SiteOriginが便利すぎる!
新年大分あけまして、この記事書いているのが、2018年1月12日です。 年末年始、少し、体調を崩しまして、おとなしくしていましたが、そんな中、ちょろちょろ、ライフワークプレス見て、ワードプレスのサイト作ってるよ~、ありがとね~っておっしゃっていただける方に出会い。 本当、ありがたい限りです>< そんな感じで、ことしも、

おしゃれなデザインを作れちゃう優れもの「ページビルダーエディット」が記事作成メニューに新たに追加されます。

Newpost Catch

わたし
おおもと

投稿・固定ページにアイキャッチ付の新着記事を表示するプラグインです。

詳しくは、こちらの記事をどうぞ

最新記事を画像付きで表示できるnewpost catchの使い方 | ビジネスZERO
wordpressでサイトの最新記事をユーザーにわかりやすくサムネイル付きで表示してくれるプラグインnewpost catchの設定方法と使い方を紹介します。表示する箇所はサイドバーはもちろん投稿本文中でも可能です。

サイドバーや記事内に「新着記事一覧を表示」するプラグイン、Cocoon(コクーン)ではお世話になることが少ないプラグインです。

スポンサーリンク

トップページ作成:トップページを作ってみよう!

わたし
おおもと

プラグインになれるまで、大変ですけどがんばりましょう!

今回は固定ページにトップページを作成します。

手順はコレ

手順

  1. 固定ページの新規追加
  2. 右上のページビルダーボタンを押して
    エディッター画面を変える
  3. 行の追加→2カラム→挿入♂
  4. ウィジェットの追加→
    Newpost Catchを押して追加
  5. カラムに挿入されたNewpost Catchの編集
  6. タイトルを記入→
    プラグインフォルダ内のデフォルトCSS(チェックすると適用)→
    カテゴリーIDを入力
  7. デザインを押す→
    Links Colorで好きな文字色を入れる→
    終了を押す
  8. Newpost Catchの編集の複製を押して、増やす→
    5と6と7をやる
  9. ウィジェットの追加→カスタムHTMLを押して追加
  10. Newpost Catchの下に下に配置
  11. 別途記載しているHTMLコードを入力
  12. カスタムHTMLの編集の複製を押して、増やす→10をやる
  13. カラム右上の「レンチ」ボタンの行の複製でカラムを増やす
  14. 左右のカラムごとに6と7と10をやる
  15. タイトルを入れず公開を押しておわり

めっちゃ見にくいけどガマンしてね

HTMLコードはコレをコピペ

<p class="entry-title" style="text-align: center;"><a href="https://○○○○"><span style="font-size: 18px;">△△△△</span></a></p>
  • ○にカテゴリーページのURL
  • △にカテゴリー名

を入力してください。

出来上がったのはこちら↓

画像では記事タイトルがキレイですが、最初は「下線」が表示されていて、ブサイク

次から、このようにキレイにするためのCSSでの変更点を教えちゃいます

スポンサーリンク

トップページ作成:CSSでオリジナリティーを出そう!

わたし
おおもと

CSSで自分だけのトップページを作ろう!

CSSでイジるのはこちら

  1. 固定ページの投稿日を非表示
  2. トップページのグローバルメニュー非表示
  3. リンクの下線を消す
  4. ホバーの文字色・背景色を変更

固定ページの投稿日を非表示

わたし
おおもと

わいひらさんの記事をマルパク(ry 参考にしました

CSSはこちらをコピペしてね

/*トップページいろいろ非表示*/
.home.page .date-tags,
.home.page .author-info{
 display: none
}

.home.page h3 {
 padding: 0.8em;
 background-color:#a0dbdb;
 border:none;
 color:#545454;
}

本家はこちら

/*全てをまとめて非表示*/
.home.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info{
 display: none;
}

不必要なところを取り除いただけです

  • .home.page .entry-title,/*トップページのタイトル*/
  • .home.page .sns-share,/*トップページのSNSシェアボタン*/
  • .home.page .sns-follow,/*トップページのSNSフォローボタン*/
  • .home.page .date-tags,/*トップページの投稿日*/
  • .home.page .author-info{
    display: none;
    }/*トップページの更新日*/

トップページの色々なものを非表示にしていまうので、必要のないものは消して使ってください。

トップページのグローバルメニュー非表示

わたし
おおもと

カテゴリーを表示させちゃったから、トップページではいらないね

CSSはこちらをコピペしてね

/*モバイルグローバルメニュー非表示*/
.home.page #navi {
 display: none
}

出来上がったのはこちら↓

こんなにスッキリになっちゃいます!

リンクの下線を消す

わたし
おおもと

せっかくのトップページが、ごちゃごちゃして見にくいので削除!

/*NewpostCatchいろいろ変更*/
#npcatch li a{
 text-decoration:none;
}

出来上がったのはこちら↓

これで、スッキリですね〜

「#npcatch li a{}」がNewpost Catchの文章を変更するCSSです

そのほかに

  • #npcatch img
    サムネのを整える
  • #npcatch .title
    タイトルを整える

があります。

ホバーの文字色・背景色を変更

わたし
おおもと

これ、作るの大変だった、、、、

先ほどのCSSに追記します

/*NewpostCatchいろいろ変更*/
#npcatch li a{
 text-decoration:none;
}

/*NewpostCatchいろいろ変更*/
#npcatch li a{
 text-decoration:none;
 -webkit-transition: all 0.6s ease;
 -moz-transition: all 0.6s ease;
 -o-transition: all 0.6s ease;
 transition: all 0.6s ease
}

#npcatch li a:hover{
 color:#37ab9d;/*文字の色*/
 background-color:rgba( 55, 171, 157, 0.05 )/*RGBで色を表現,0.05は色の濃さ*/
}

とりあえず、コレをコピペして好きな色を入れてください。

出来上がったのはこちら↓

いや〜苦労したかいがあってめっちゃいい出来になりました!

特に、「ふわっとなる感じ」をいい感じに表現するのに時間がかかりました

CSSの『rgba(55, 171, 157)』=『#a0dbdb』です。

#a0dbdbで検索したら、親切なGoogle神が教えてくれますよ

スポンサーリンク

まとめ

わたし
おおもと

トップページはブログの顔!

トップページはブログの顔です。

Home Page
はじめにはじめまして!おおもと(@so88qa)と申します(_ _)当ブログは『好きなことを書く』をモットーに気の向くまま記事を書いています♪本職が忙しく更新頻度が落ちていますが粘り強く更新を続けていきますので応援の程よろしくお願い致しますm(_ _)m記事一覧

ぜひ今回の記事を参考にして、自分なりのトップページを作っちゃってください。

NAE(@__NAE__)さんのトップページとぼくのトップページが似ているのは秘密な!

参考記事はこちらからどうぞ

ブログのトップページを作ったので、作り方から実測効果まで全部紹介
ブログトップページを作りました。コンセプト、コンテンツ設計の考え方、実際の作り方や使ったプラグイン、作成前後での数値変化などをまとめました。
【CSSカスタマイズ】コクーンで使えるCSSを追加するオススメの方法
有料級のワードプレス無料テーマCoccon(コクーン)のCSSカスタマイズ記事のまとめと、CSSを追加する方法を記載した記事です。 古いカスタマイズから新しいものまで、まとめてますので流し読みをしてください。
【コクーン】プラグインを使わずトップページをカッコよく改造する方法
トップページはブログの顔!!! そんな、トップページを『プラグインなし』で魔改造したので その一部始終を教えちゃいます!
わたし
おおもと

質問があれば、コメント覧に書いてね!

- Comments -

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