WordPressを徹底解説 - インストールから集客できるブログを作るまで. Cocoonの目次ジャンプする先の位置を追加CSSで調整して見出しを見やすくする方法をご紹介します。Cocoonの目次は見出しクリックでジャンプできて便利ですが見出しがギリギリで表示されるので位置調整したい人向け。初心者もコピペで出来ます。 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には豊富なボタンバリエーションがありますが、ふわりと浮かんだデザインにしたらクリック率も上がるのでは、と。やってみたら、実際にクリックが上がった!(気がする)。. WordPress無料テーマ『cocoon』を使うときの、アドセンス設定方法です。, 『cocoon』を使えばアドセンスはめちゃくちゃ簡単に設置することができるし、アドセンスを貼る数も種類も場所も、ワンクリックでできちゃいます。, 記事タイトルの下はファーストビュー(記事に訪れてから一番最初に見るページ)なのでクリックされやすい場所です。ここにリンクユニットを設置します。, レクタングルを貼ってもいいですが、過去にスマホのファーストビューにレクタングルを貼るとポリシー違反になることがあったので(今は大丈夫って言われていますが)、リンクユニットを設置しておくほうが無難です。, タイトル上に設置してもいいですが、目に入りやすい記事タイトルを読んだ後は、視線が下にいく人が多いはずです。(早く記事を読みたいから), ダブルレクタングル(レクタングルを横並びに2つ)に設定してもいいと思います。ただ個人的にはシングルでもダブルでもそんなにクリック率に変わりはないと思ってるので、シングルにしています。, 目次の上に広告が表示されるので、モバイル画面ではワンスクロールかツースクロールすると表示されることが多いですね。, ここにチェックを入れてしまうと、見出し毎に「見出し上に広告」が表示されてしまうので個人的にはおすすめしません。, 1記事あたりに設定する見出しがいつも3つぐらいという方なら、チェックを入れてもいいかもしれませんね。, ユーザーが記事を読み終えたとき、目に留まりやすいように本文下(記事下)にシングルレクタングルを表示させるようにします。 ダウンロードしてみる Cocoon 0.5.4公開。目次の表示切替機能を追加、他。 アップデート情報. 今回はCocoonの見出しをカスタマイズしていきます。 見出しというのは、 <h2></h2> や <h3></h3> で囲った、タイトル等を指します。 今回はその見出しをデフォルトの状態から脱却するために、自分の思い描くデザインにカスタマイズしていきましょう! WordPressの「ダッシュボード」を開く(WordPressを開いた際の最初のページ), 見出しの数字を設定する際は、目次の章(見出し2)、節(見出し3)、項(見出し4)を意識, 他テーマからCocoonに変更した場合、「Table of Contents Plus」が無効の設定になっていることを確認.

All Rights Reserved. cocoonでアドセンスを設置する方法・おすすめ位置はこの4つ ジョイ 2019-02-27 『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の目次自動作成機能は、設定方法や注意点を理解すれば、非常に便利な機能です。目次作成でお困りの方に、ご参考になれば幸いです。, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。.

ブログでは目次を作る必要がありますので、Cocoonの機能を使用した目次と多彩なLuckyWP Table of Contentsプラグインを使用した目次の両方を紹介して比較できるようにしています。 Cocoonでは、Table of Contents Plus のようなプラグインを使用せずとも、テーマの独自機能で以下のような目次を表示させることが可能です。 参考 自作の吹き出しを作成して利用する方法. この記事は 約2分 で読めます。 Cocoonをバージョンアップしました。 前回からの主な変更点はこちら。 ページ毎の目次表示切り換え機能実装; 目次の表示ページ設定機能 …

2018/4/27. 「シングルレクタングル」→「リンクユニット」→「関連コンテンツユニット」と3つ続けて表示させるようにします。, 広告の表示位置には「インデックスページの表示位置」と「サイドバーの表示位置」の2つがあります。, 投稿ページに比べるとクリック率は下がりますが、「設置しないよりは設置したほうが得かな?」ぐらいのノリで設置すればいいと思います。, 「アドセンス表示方式」の「自動広告とマニュアル広告を併用」か「マニュアル広告設定」にチェックを入れる (ダブルレクタングルでもいいです), 記事下にSNSボタンが表示されますが、その上にリンクユニットが表示されるようにします。, つまりさきほどの「本文下のシングルレクタングル」の真下に、リンクユニットを設置するということになります。, モバイル画面でレクタングルを縦に続けて並べるのはポリシー違反に触れる可能性がありますが、レクタングル→リンクユニットだったら問題ありません。, SNSボタンの「下」に設置してもいいですが、広告が続けて並んでいたほうが目に入りやすくなるかなって思います。, 関連コンテンツユニットが使えるようになったら、リンクユニットの下に表示させるようにしましょう。 Copyright © 2019-2020 yujiblog. 目次が想定通り表示されない場合にチェックするポイント3点. Cocooonは完全レスポンシブ対応のWordPress最強の無料テーマですが、スマホで目次を表示する際に、親子見出しの判別がつきにくいことが気になっていました。なので今回はデザインごとCocoonの目次をカスタマイズ!Cocoonならプログラミングの知識はいりません。 月収10万円以上稼ぎたい人への「メール講座」もやってます。, ブログで月収10万円達成した後、月間100万PVブログを作成・完全外注システム化・1記事だけで10万円・情報発信で月収190万円…etcなどを経験。小さな子供と動物だけに好かれるタイプ。. ブログでは目次を作る必要がありますので、Cocoonの機能を使用した目次と多彩なLuckyWP Table of Contentsプラグインを使用した目次の両方を紹介して比較できるようにしています。 サイトを100%活用するために. ↓ ↓ ↓, 「アドセンス表示方法」の「自動広告とマニュアル広告を併用」にチェックを入れると、アドセンス側で自動的に広告が表示されることがあります。どこに表示されるかは記事によって異なります。, アドセンス側で自動的に広告が表示されても構わないという方は、「自動広告とマニュアル広告を併用」にチェックを入れてください。, また、自由にアドセンスの設置場所を変えてもいいですが、アドセンスポリシーにだけは気をつけてくださいね。, 5年以上ブログで稼ぎ続けている経験を元に、「月収1万円を稼ぐことに特化したブログノウハウ」を作ってみました。お気軽にダウンロードしてみてください。 こんにちは、yujiです! このブログでは、WordPressを使ったブログ運営について詳しくまとめています。, このブログではWordPressテーマのCocoonを使っていますが、『目次』は以下のようなデザインにしています。, このように段落ごとの内容が一目でわかるようになっているので、読者が読みたい部分を探しやすくなります。, この記事にまとめた方法で以上のようなCocoonの目次を再現できるので、参考にしていただけたらと思います。, ▶【2020年最新攻略法】Amazonアソシエイトの審査方法が変わる!アカウント作成から180日以内に少なくとも3つの適格販売が必要に。, ▶【年収7ケタ突破】僕のブログの収益化方法まとめ【大変だけど、ちゃんと稼げる】▶【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較!, その他「表示ページ」や「目次タイトル」などの項目は、デザインを確認しつつ自由に変更しましょう。, Cocoon/ホワイトラーメンのデフォルトでは、以上のように表示されています。何もさわらなくてもすでにスタイリッシュです。事前準備はこれでOK。, スタイルシートに以下のコードをコピペしてください。メモ書きも残しておいたので、参考にしていただけたらと思います。, ▶【コピペでOK!】ブログ初心者でもできる『Cocoonカスタマイズ』の完全マニュアル【WordPress】, そこで、プログラミング未経験の僕が独学でWEB制作を学んだ方法について、以下の記事でまとめてみました。興味のある方はどうぞ!, この記事が少しでもお役に立てたら幸いです。最後まで読んでいただき、ありがとうございました!, ▶【年収7ケタ突破】僕のブログの収益化方法まとめ【大変だけど、ちゃんと稼げる】▶【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較!▶【もしもアフィリエイト】初心者でもできる『かんたんリンク』のおしゃれなカスタマイズ【コピペでOK!】▶【利用者が増えている理由とは?】『もしもアフィリエイト』を実際に使ってみた感想【口コミ・評判・メリットまとめ】▶【その画像の著作権、大丈夫ですか?】僕がおすすめする『安心のフリー素材サイト』9選!, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, 理系の大学で研究した後、海外留学や慈善団体での活動を経験し、現在はフリーランスとして自由な人生を楽しんでいます。, これまでの主な居場所はTwitterです。おかげさまで様々な出会いがあり、現在は約6万人の方とつながっています。, 【審査承認されたので解説】2020年最新Amazonアソシエイトの審査方法!アカウント作成から180日以内に少なくとも3つの適格販売が必要に。, 2020年3月以降のAmazaonアソシエイト審査方法変更点と、その攻略法を詳しく紹介します。この変更についてはまだネット上に情報が不足しているので、ブログをはじめたてで混乱している方の参考になるかと思います。, 【コピペでOK!】ブログ初心者でもできる『Cocoonカスタマイズ』の完全マニュアル【WordPress】, WordPress/Cocoonを使ったブログでのオリジナルカスタマイズを紹介します。すべてコピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。, プログラミング未経験の僕は、独学でWEB制作を学びました。プログラミングは難しいイメージがありますが「独学でもcssを極められる」と思います。デザインを整えると読者の満足度が高まり、年収7ケタのブログになりました。.

Twitter Facebook 7 はてブ 0 Pocket 0 LINE コピー. Copyright © 2019 MegaoBlog All Rights Reserved.

超初心者用のCocoonの目次の作り方です。私のような素人で作り方がわかるように説明していますので、目次が作れなくて困っている方は是非チェックしてみてください。一緒に楽しくブログが作れるようになりましょう。 簡単な機能ではありますが、必要な機能は揃っているかと思います。 Wordpress無料テーマ「Cocoon(コクーン)」のメリットとデメリットは知っていますか?本記事ではCocoonで月30万円の収益化に成功し、13個のテーマ使用経験のある僕が詳しく解説しています。AFFINGERやJIN、SWELLなどと違いを比較しつつ、解説しているのでテーマ選びに必見の記事ですよ。 WordPress/Cocoonを使ったブログでの『目次』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応してい … Cocoonは自動で目次の作成を行う。「目次の表示」にチェックが入っているか確認; 見出しの数字を設定する際は、目次の章(見出し2)、節(見出し3)、項(見出し4)を意識