今回はCocoonの見出しをカスタマイズしていきます。 見出しというのは、 <h2></h2> や <h3></h3> で囲った、タイトル等を指します。 今回はその見出しをデフォルトの状態から脱却するために、自分の思い描くデザインにカスタマイズしていきましょう! ブログでは目次を作る必要がありますので、Cocoonの機能を使用した目次と多彩なLuckyWP Table of Contentsプラグインを使用した目次の両方を紹介して比較できるようにしています。 WordPress/Cocoonを使ったブログでの『目次』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応してい … WordPress無料テーマ『cocoon』を使うときの、アドセンス設定方法です。, 『cocoon』を使えばアドセンスはめちゃくちゃ簡単に設置することができるし、アドセンスを貼る数も種類も場所も、ワンクリックでできちゃいます。, 記事タイトルの下はファーストビュー(記事に訪れてから一番最初に見るページ)なのでクリックされやすい場所です。ここにリンクユニットを設置します。, レクタングルを貼ってもいいですが、過去にスマホのファーストビューにレクタングルを貼るとポリシー違反になることがあったので(今は大丈夫って言われていますが)、リンクユニットを設置しておくほうが無難です。, タイトル上に設置してもいいですが、目に入りやすい記事タイトルを読んだ後は、視線が下にいく人が多いはずです。(早く記事を読みたいから), ダブルレクタングル(レクタングルを横並びに2つ)に設定してもいいと思います。ただ個人的にはシングルでもダブルでもそんなにクリック率に変わりはないと思ってるので、シングルにしています。, 目次の上に広告が表示されるので、モバイル画面ではワンスクロールかツースクロールすると表示されることが多いですね。, ここにチェックを入れてしまうと、見出し毎に「見出し上に広告」が表示されてしまうので個人的にはおすすめしません。, 1記事あたりに設定する見出しがいつも3つぐらいという方なら、チェックを入れてもいいかもしれませんね。, ユーザーが記事を読み終えたとき、目に留まりやすいように本文下(記事下)にシングルレクタングルを表示させるようにします。 Cocoonは自動で目次の作成を行う。「目次の表示」にチェックが入っているか確認; 見出しの数字を設定する際は、目次の章(見出し2)、節(見出し3)、項(見出し4)を意識 Copyright © 2019 MegaoBlog All Rights Reserved. 2018/4/27. Cocooonは完全レスポンシブ対応の最強の無料テーマですが、スマホで見るときに気にかかっていたことがありました。, Cocoonの場合、プラグインの追加なしに目次を自動的に表示されるよう設定できます。, 数字がほぼ縦に一直線に並んでしまってH2とH3の判別がわかりづらくなっていました。, cssコードはその都度より、作業の手間も少ないので③が終わったあと、まとめて記載します。, もっと違ったアイコンにしたいという方はアイコンサイト・Font Awesomeで探してみてください。, cocoonでFont Awesome 5(最新版)が使えるようになりました。「cocoon設定→全体→サイトアイコンフォント」でFont Awesome 5にチェックを入れればOKです。, 【追記】20年10月現在、FontAwesomeはバージョン6が最新です。Cocoon設定「Font Awesome 5」でも、バージョン6のコードは、ほとんどのアイコンでそのまま使えます。, CSSコードは必ず「子テーマ」のスタイルシート(CSSデザイン)に貼ってください。「こはる(小貼る)」と覚えましょう。, 枠からはみ出しているときは、コードの/**左の位置**/の数値を変えて調整してみてください。, Cocoonはユーザーによるカスタマイズを求めるテーマでもありますので、多少のプログラミング知識が必要になります。, って方はWordPress有料テーマも検討してはどうでしょうか?(※正直、無料テーマでCocoon以上のもの、ないです!), プログラミングやコードの知識がなくても、サイト作りが容易になりますヨ。>>>WordPressおすすめの有料テーマ↓打ち消し線の理由↓, 僕は別サイトでWordPress有料テーマを使ってますが、SWELLが最高です。コード知識なしで、キレイなサイト作りができます。, Cocoonがどうも扱いづらくて有料テーマを考えてる方は正直、SWELL一択でいいかなと思います。それぐらい僕は惚れました。。。(*´ω`*)>>SWELL公式サイト, Cocoonをごりごりカスタマイズした記事まとめているんで、よかったらどうぞm(__)m, 【元産経新聞社サンスポ記者】 ★20年3月、15年間勤めたサンスポを退職→雇われない生き方を実践中。, 【2020年11月5日までお得キャンペーン中!】 ◎ドメイン永久無料 ◎20%off、月額料金720円〜 ◎新サービス「WordPressクイックスタート」なら、速攻ブログ開設! ・レンタルサーバーの契約 ・ドメイン名の取得・設定 ・SSLの設定 ・WordPressの設置 まとめてエックスサーバーが自動でやってくれるから、従来の煩雑な設定が不要。, 【設定方法を全画像付き解説!】 https://to-chi.org/wordpress-quickstart/, コメント失礼します。 当サイトでもこの記事を参考にさせていただきました。ありがとうございます(*^_^*), 1点CSSの記述にミスがありましたのでお伝えさせていただきます。 font-family: “Font Awesome 5 Free”; という部分ですが font-family: “Font Awesome 5 Free”;(誤) font-family: “Font Awesome 5 Free”;(正) でした。 クォーテーションが全角表記になっているので、コピペではFont Awesome 5 Free動作しませんでした。口出し申し訳ございません。(T_T), コードミス大変失礼しましたm(_ _)mしかも、箇所まで特定してくれるとは助かります。, 30代のプログラミングスクール選び【転職支援視点】 | 失敗しないプログラミングスクールをランキングでご紹介!, CocoonになくてSWELLにあるもの5つ、SWELLになくてCocoonにあるもの3つ, Cocoonを使っていて、SWELLが気になっている人、多いのではないでしょうか?僕もその一人だったんで、SWELLを使ってサイト運営してみました。本記事では、実際に2テーマを並行して利用する筆者が、両テーマを「ある&なし」の視点で比較。WordPressテーマ選びの参考に、ぜひ参考にしてください。, WordPressテーマ・Cocoonでブログ運営すること1年…都度行ってきたカスタマイズ記事がたまってきたので、Cocoon初心者ユーザーの方へ向けて目的別にまとめました。トップページをサイト型にしたい、サイドバーの表示を変えたいなど、要望別に詳細ページへと飛べます。Cocoonユーザーの方、是非、ご活用ください。, 「Cocoonを使ってるけど、なんかブログが重いかも…」という方、一度サイトスピードを測ってみてはいかがでしょう?無料ツールで簡単に計測できますし、Cocoonなら高速化設定も簡単です。「亀」数値が出てくるようなら、せっかくブログに来てくれた読者を手ぶらで帰してしまっているかもしれませんので対策しましょう!, 「WordPressのテーマ、Cocoonってどうなの?実際に使っている人の意見を聞きたい」←この悩みを解決する記事です。僕が、この1年Cocoonを使用して感じたメリット5つ・デメリット2つをご紹介。Cocoonに向くタイプ、向かないタイプも解説してます。是非、テーマ選びの参考にしてください。, 「Cocoonのスキンに合ったカラーがブロックでも使えるようにならないかな。デフォルトのものじゃ、どうも自分のブログに合わないんだよな〜」←こういった疑問に答えます。Cocoonはアップデートによって、カラーパレットに自分の好きな色を6種類追加できる仕様になりました。ごにょごにょとコードをイジらなくても標準でできます。, 「ブログの記事数が増えてきたから、Cocoonのトップページでいろんな記事を掲載したい!」「でもカスタマイズがむずかしそう…」。本記事はそんな悩みに応えます。Cocoonならトップページのサイト型へのカスタマイズは簡単です。本記事を読めば3ステップでサイト型トップページができちゃいます!, 「全然、内部リンクボタンやアフィリエイトボタンが押されない!」←こちらを完全にCocoonのせいにしてボタンをカスタマイズしました。Cocoonには豊富なボタンバリエーションがありますが、ふわりと浮かんだデザインにしたらクリック率も上がるのでは、と。やってみたら、実際にクリックが上がった!(気がする)。. Cocooonは完全レスポンシブ対応のWordPress最強の無料テーマですが、スマホで目次を表示する際に、親子見出しの判別がつきにくいことが気になっていました。なので今回はデザインごとCocoonの目次をカスタマイズ!Cocoonならプログラミングの知識はいりません。 今回は、テーマCocoonを使用した際の目次設定について、失敗談を踏まえチェックするポイントを3点お話します。, 初めてブログを書いて、いざ、ブログをアップデートしようと思いきや、何か違和感を感じました。今まで自分が読んできた諸先輩方のブログと比べ、明らかに何か物足りことに気がつきました。, ブログ初心者の私は、目次は自分で作成するものと勝手に思っていました。しかしCocoonには最初から目次を自動で作成してくれる機能が備わっているそうです。有難いです。, 私は、「目次の表示」にチェックが入っているなら、ブログ作成画面に目次が表示されるものだと思っていました。しかし、目次は作成中の画面には表示されません。, しかし、「プレビュー」をクリックしても、目次が表示されませんでした。新たな問題発生です。, ※クリックする際、注意点があります。「プレビュー」の横にある「更新」をクリックすると内容がアップデートされますので「プレビュー」をクリックする際はお気をつけ下さい。, 目次設定以外にも設定が必要そうな為、調査を開始しました。すると、見出しの設定が目次に関わっていることが分かりました。見出しについては、見出し2,3,4と設定できるのは知っていました。しかし、見出しの数字を理解していなかった為、適当に見出しの数字を選択していました。, 目次の章に当たる部分が見出し2に当たります。そこから見出し3、見出し4と選択することで、章、節、項と目次が設定されます。, しかし、見出しの設定と目次の関係を理解した上で、見出し設定を行ったものの相変わらず目次は表示されません。, 結論からお伝えすると、目次が表示されない原因は、「Table of Contents Plus」が有効の設定になっていたためです。そもそも「Table of Contents Plus」とは、目次を自動で作成してくれるプラグインです。その為、Cocoonの目次自動作成機能と「Table of Contents Plus」が競合してしまった結果、目次が表示されないという問題が起きたようです。, 他テーマからCocoonに変更した場合、「Table of Contents Plus」が無効の設定になっていることを確認してください。, Cocoonの目次自動作成機能は、設定方法や注意点を理解すれば、非常に便利な機能です。目次作成でお困りの方に、ご参考になれば幸いです。, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。. WordPressを徹底解説 - インストールから集客できるブログを作るまで. ダウンロードしてみる Copyright © 2019-2020 yujiblog. Cocoonの目次ジャンプする先の位置を追加CSSで調整して見出しを見やすくする方法をご紹介します。Cocoonの目次は見出しクリックでジャンプできて便利ですが見出しがギリギリで表示されるので位置調整したい人向け。初心者もコピペで出来ます。 All Rights Reserved. 月収10万円以上稼ぎたい人への「メール講座」もやってます。, ブログで月収10万円達成した後、月間100万PVブログを作成・完全外注システム化・1記事だけで10万円・情報発信で月収190万円…etcなどを経験。小さな子供と動物だけに好かれるタイプ。. 「シングルレクタングル」→「リンクユニット」→「関連コンテンツユニット」と3つ続けて表示させるようにします。, 広告の表示位置には「インデックスページの表示位置」と「サイドバーの表示位置」の2つがあります。, 投稿ページに比べるとクリック率は下がりますが、「設置しないよりは設置したほうが得かな?」ぐらいのノリで設置すればいいと思います。, 「アドセンス表示方式」の「自動広告とマニュアル広告を併用」か「マニュアル広告設定」にチェックを入れる 目次が想定通り表示されない場合にチェックするポイント3点. WordPressの「ダッシュボード」を開く(WordPressを開いた際の最初のページ), 見出しの数字を設定する際は、目次の章(見出し2)、節(見出し3)、項(見出し4)を意識, 他テーマからCocoonに変更した場合、「Table of Contents Plus」が無効の設定になっていることを確認. 超初心者用のCocoonの目次の作り方です。私のような素人で作り方がわかるように説明していますので、目次が作れなくて困っている方は是非チェックしてみてください。一緒に楽しくブログが作れるようになりましょう。 (ダブルレクタングルでもいいです), 記事下にSNSボタンが表示されますが、その上にリンクユニットが表示されるようにします。, つまりさきほどの「本文下のシングルレクタングル」の真下に、リンクユニットを設置するということになります。, モバイル画面でレクタングルを縦に続けて並べるのはポリシー違反に触れる可能性がありますが、レクタングル→リンクユニットだったら問題ありません。, SNSボタンの「下」に設置してもいいですが、広告が続けて並んでいたほうが目に入りやすくなるかなって思います。, 関連コンテンツユニットが使えるようになったら、リンクユニットの下に表示させるようにしましょう。 Twitter Facebook 7 はてブ 0 Pocket 0 LINE コピー. ブログでは目次を作る必要がありますので、Cocoonの機能を使用した目次と多彩なLuckyWP Table of Contentsプラグインを使用した目次の両方を紹介して比較できるようにしています。 サイトを100%活用するために. 【Cocoon】ブログ初心者でもできる『ヘッダーメニュー(グローバルメニュー)』のおしゃれなカスタマイズ【コピペでOK!】, 【もしもアフィリエイトでOK】Amazonアソシエイト審査に1発合格した話【初心者向けに登録方法を解説】, 【超簡単】初心者でもできる『かんたんリンク』の使い方【もしもアフィリエイト/WordPressブログ】, 【その画像の著作権、大丈夫ですか?】僕がおすすめする『安心』のフリー素材サイト9選!, 【2020年最新攻略法】Amazonアソシエイトの審査方法が変わる!アカウント作成から180日以内に少なくとも3つの適格販売が必要に。, 【もしもアフィリエイト】初心者でもできる『かんたんリンク』のおしゃれなカスタマイズ【コピペでOK!】, 【利用者が増えている理由とは?】『もしもアフィリエイト』を実際に使ってみた感想【口コミ・評判・メリットまとめ】, 【その画像の著作権、大丈夫ですか?】僕がおすすめする『安心のフリー素材サイト』9選!.