大変申し訳ないですがコメントの案内にありますようにテーマへの質問は、お手数ですがフォーラムの方に書き込んでいただけると助かります。 こちらから、「トピックを追加」ボタンを押してコピペで同様の... お世話になっております。 ランキングに関して質問がございます。 普段通りランキングを作成していたところ、20つ目の商品で「ランキングを更新できませんでした。」とランキング作成ページ上部に表示さ... こんにちは、cocoonのテンプレートを使用している者です。 質問を書かせていただきます。 内部リンクでのブログカード表示の件です。 記事からURL(https//…)をコピーし、投稿画面に... http://kouritsu.biz/how-to-set-related-posts-by-yarpp/. Webサイトを作り始めて3〜4ヶ月目くらいにトップページを作りたい!と思う様になりました。しかし、いざネットで作り方を調べてみたら簡単そうで難しい・・分からない事だらけで全然進みませんでした。, 初心者だからこその実体験をベースにして、Cocoon / WordPress におけるトップページの作成方法と簡単なカスタマイズ方法を纏めてみました。少しでも参考になれば幸いです。, 固定ページはカテゴリーやタグに属さないので、投稿一覧やカテゴリーページには表示されません。例えばこの様なページに使います。, 実は投稿ページをトップページにする事も可能ですので、固定ページとは何か?についてあまり深く考え過ぎない方が良いです。, 固定ページの内容(中身)の作り方は投稿ページと同じです。とりあえずは適当な文章や画像を入れて保存します。, 私の場合はタイトル・パーマリンク共に「home」にしました。一般的で覚えやすいと思うので、迷ったならそうしておきましょう。※既に home という名称を使っている場合は他の名前で, 「固定ページ」にチェックを入れ「ホームページ」で先程作ったhomeを選択して保存。, 設定後にトップページを見てみると、先程作った固定ページ(home)の内容がいつもの投稿ページの様に表示されます。, サイト全体が変わってしまうのかと不安がありましたが、ヘッダー・フッター・サイドバーなどは設定前と変わらずに表示されます。, まずは自分に出来るかどうかは考えず完成イメージを紙に描いてみます。※この時代なので別に紙じゃなくても良いです, 1人でアイデアを出すのも限界がありますので、色々なサイトを参考にしながら「サイト全体」「部分的」「雰囲気」「フォント」「カラー」など真似していくのが良いですね。, とりあえず簡単そうだと思った箇所から作ってみましょう。私の場合は適当な画像をいくつか並べて、その上下か左右にタイトルや説明文を添えようと思っていました。, ブロックエディターのメディアと文章が使えそうだったのですが、私のスキルではどうしても画像にリンクが貼れず。。でもカラムやテーブルを使えば実現できそうだと知りました。, この様に、チャレンジする過程で少しずつ知識やスキルが身についてくるので、そういった面でも重要度も必要性も高いトップページのカスタマイズはスタートに最適だと思います。※最初否定してましたけど, Canvaは無料の画像作成アプリ。私みたいな素人でもオシャレなそれっぽい画像を簡単に作ることができます。Googleアカウントで登録できるので、アイキャッチ画像の作成などにオススメです。, 全く方向性が決まっていない場合はカラムを使って構成を整えてみましょう。当サイトのトップページもカラム数を2にして画像や文章を入れているだけです。, トップページ感を出すために以下の項目は非表示にしました。以降のコードはCocoonに限定されるもの含まれているのでご注意下さい。, 投稿・固定ページ一覧で確認したいページのタイトルにマウスカーソルを合わせると、ブラウザの下部にページID[〜post=◯◯◯◯]が表示されます。※スマホの場合はタイトルのリンクを長押し, タイトルの下に投稿日と更新日を表示する設定にしていますが、トップページのみ非表示にしました。ページIDは前項と同様です。, トップページの中身をどうするか迷った場合、とりあえずブロックエディターのカラムを使ってページの構成を整えます。画像やテキストなどアイデア次第でオシャレでバランス良いトップページにできるかも。, 画像は表示されてるのにブラウザのグルグルマークが消えない?wordpressプラグインsmushをインストールしたら改善した話。, CoconのカスタマイズCSSコードのサンプルです。追加CSSの卒業に向けて子テーマの編集を始めています。目次や見出しやグローバルナビなど。まずはコードの名称が分からないとカスタマイズできませんよね. Cocoonでスニペットを非表示にする手順 1)WordPressの管理画面(ダッシュボード)でCocoon設定をクリックして下さい。 2)Cocoon設定のタブメニューで「インデックス」をクリックして下さい。 デザイン性が優れている PlayStation Plusに加入中なのにオンラインマルチプレイ開始時に加入を求められる, Google Search Console【登録したけど全然データが反映されない】. 僕も最初はワードプレスもコクーンも全然使い方がわかんなくて、目次ってどうやるんだろ?っていろいろ調べました。, Cocoonが勝手に目次を作ってくれるなんて思ってもいなかったです。目次作成プラグインなんていらないんだね, 本記事では、冒頭に書いたようなことでお悩みの方にはとても役立つこと間違いなしです。, 目次機能が搭載とうさいされているコクーンの設定からカスタマイズまでそのすべてをわかりやすく画像を付けて解説していきます。, 目次はとても重要な要素ですので、しっかり理解してあなたのブログに活かしてくださいね, そしたらまずは目次の基本的な設定方法から解説していきます。この記事を見ながらあなたも実際にやってみてください。, ワードプレスの編集画面(ダッシュボード)からCocoon設定→目次と進んでみましょう。, この目次のページの上から順番にその設定項目にどんな意味があるのか説明していきます。, 目次を表示するにチェックしていれば、目次が表示されるようになります。だから目次を使いたい人は絶対チェックしないといけません!, ここにチェックしていない場合でも、ショートコードを使うと目次は表示されます。ショートコードについては後で詳しく説明があります。, 目次をどういうページに表示させるか決められます。タグページは目次いらねって思ったらそこだけチェック外しましょう。, こういう要望についても対応できます。あとで説明がありますので、そこまでお待ちください。, 僕はシンプルに「目次」だけど「タップできる目次」とかにしてアピールする人もいるよね, まず「目次の表示切替機能を有効にする」にチェックをいれると目次タイトルの横に表示切替用の言葉が出てきます。その言葉は自由に決めましょう。, その文字をタップ/クリックすると、目次が開いたり閉じたりと切り替わるようになってます。, そして「最初から目次内容を表示する」にチェックを入れると目次の中身が見えてる状態で表示されます。, チェックを入れなければ中身は見えず「タイトル」と「開く」だけ見えている状態になっています。, 目次を表示する条件を決めます。見出しの数がいくつ以上なら目次を作りますか?という質問ですね。, 「見出しって何」っていうあなたは後で説明しますのでお待ちください。画像だけおいときますね。, あんまり深いとこまで全部表示させるとめっちゃ長い目次になるので、H2かH3くらいにしといた方がいいです。, 目次をメインカラム(本文が表示される部分)の真ん中に表示するか、左はしに表示するかを決めるためのチェックです。, 目次と広告(グーグルアドセンス)の表示する順番どうしますか?という話です。広告のクリック率に影響が少なからずあると思います。, 見出しで改行(
タグ)とかしてるときに目次でも改行するなら有効。別に必要ないならチェックしないでOK, 以上でCocoon設定は終了です!これで普通に記事を書けば目次は表示されるはず‼一度試してみてください。, Cocoon設定で目次を設定しても記事内で目次が表示されないときは、下の2つが原因のことが多いです。当てはまることがあったら、修正してみてください, 「Table of Contents Plus」などの目次を自動で生成するプラグインを有効化している場合、目次が表示されないことがあります。, 逆に、プラグインの機能を使って目次を表示したいときはCocoon設定で目次を表示しないようにチェックを外し、プラグインを有効化しましょう。, Cocoonの目次機能は、H見出しをもとに作成されます。記事の中でH見出しを使っていない場合は目次は表示されません!, H見出しは単なる装飾ではなく、記事構造的にとても重要なものです。キーワードを入れ込んだり、項目数や項目の大きさをよく考えて使う必要があります。, 見出しについての詳細は下に外部リンクを貼っておきますので、そちらをご覧ください。外部リンク見出しタグの使い方と絶対に知っておくべき注意点, Cocoonには、Cocoon設定の目次で設定したこと以外に1記事ずつ個別に目次の表示/非表示を設定する機能があります。, 基本的に全部の記事で目次を表示するけど、特定のページで目次を表示したくないときはこの機能を使いましょう。, 逆に、基本的には全部の記事で目次を表示しないけど、特定のページで目次を表示したいときは?, その時は、Cocoon設定の「目次を表示する」チェックを外し、特定のページだけショートコードで表示すればOKです。, この文字を目次を入れたいところに打ち込むだけです。試しにやってみた画像を下にはります。, このショートコードのオプション機能として、見出しの深さをどのくらいにするか?を指定することができます。, みたいに書くと、H2見出しまでの目次ができます。数字は2か3がいいと個人的には思います。, あなたがもっと表示したいのであれば、4とか5とかもっと大きい数字を入れてみましょう。, その代わり、記事構造がちゃんとh4、h5等を使ってきれいになっていないとだめですよ, 僕はサイドバーに目次を表示する機能を使っています。PCで見ているあなたは実際に見えていますよね。, 詳細については別記事に書いていますので、やってみたい方はそちらを見ながら設定してみてください。関連記事【Cocoon】サイドバーで目次を追従させる方法【初心者向け】, 関連記事【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】, について解説してきました。この記事を読み込めばCocoonの目次機能は網羅できていると思います。, ぜひあなたのブログでもCocoonの目次機能を使いこなして、ユーザーにやさしいブログを心がけてください!, 当ブログでは、本記事以外にもCocoonやブログに関する記事をいくつか書いています。興味のある方はご覧になってみてください。, とうげです。30代サラリーマンです。地方進学校→一浪→大学理工学部→就職。行動することを大切にしています。投資、アフィリエイト、ブログやってます。インデックス投資で1000万円運用中。本業は地方に長期出張する施工管理→技術職へ異動。小さいときはロボット作り屋さんになりたかった。, 【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】, 【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する, 現場事務所のインターネット接続は光回線か?wifiか?現代人の私の条件別おすすめ!, 【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない, 【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】. Cocoon(コクーン)を使っていて、目次を表示するという設定をしてるのに、なぜか目次が設定されない時の対処方法, WordPressテーマコクーンを使っていて、コクーン設定で目次を表示するにチェックを入れてるのに表示されない場合, それならTable of Contents Plusの有効化を解除すれば一発で治ります, 何がいいかって、余計なプラグインを入れなくていいことが一番私にとってはありがたいと感じてます, 目次表示・ウィジェット・Googleアナリティクスの紐付けなどなど、全部標準装備されています, プラグインは少なければ少ないほどいいと個人的には考えてますので、Cocoonのカスタマイズ性の高さには非常に助かっています, 唯一不満なことといえば、モバイル画面で下に表示されるメニューがカスタマイズできないことですかね, ほとんどの人はスマホで見てるので、ここにオススメ記事などのURLを設定できるテーマが非常に便利です, アフィリエイトサイトなどでスマホ画面の下のモバイルメニューにLPなどを設置したい場合は、これらのテーマを使うのがおすすめです, 有料テーマを買うのであれば、このモバイルメニューをカスタマイズできるテーマを購入するのが良いですね。, 【購入特典:60日間サポート付き】 Cocoonで目次の設定を行うには「Cocoon設定」をクリックします。 上に並んでいるタブの中から「目次」をクリックします。 目次の表示(または非表示) 目次の表示:目次を自動で表示するには チェックを入れます。チェックを外すと目次は表示されません。 本記事では無料WordPressテーマ「Cocoon」の目次をオシャレにカスタマイズする方法を紹介しています。 有料テーマ「SANGO」っぽく可愛いデザインにしたい方は必見です! 結論、Table of Contents Plusというプラグインが有効化されている可能性があります, wordpressのテーマのCocoon(コクーン)は無料なのに機能やカスタマイズ性が高くてとても便利です, 【ブロガーの検索術】おすすめと検索してもまとめサイトばかり。あなたが本当に知りたい情報を調べる方法, 【初めてブログ記事外注する方へ】crowdworksプロジェクト形式でライターを雇う流れ。仕事依頼の出し方を解説, 【ブログ外注で忙しくなった】自分の時間がなくなる…週1対応で安定更新できる4つの対策, 【アフィリエイト記事のキーワード選定方法】公式サイトLPを見て集客記事を作りましょう(オンライン英会話のケーススタディ), 記事を読んで欲しいターゲットは思い切り絞ろう。クイズ形式で学ぶアフィリエイト記事の書き方超基礎, 【一発解決】Cocoon(コクーン)で目次が表示されない原因と対策。Table of Contents Plusを無効化するだけでした.

WordPressの無料テーマ「Cocoon」の記事目次を開閉可能にするカスタマイズ方法を紹介しています。サンプルコードのコピペだけでカンタンに実装できます。また、開閉時のアニメーションをつける方法もあわせて紹介しています。 おかげさまで即解決しました!! Cocoonでは、Table of Contents Plus のようなプラグインを使用せずとも、テーマの独自機能で以下のような目次を表示させることが可能です。 参考 自作の吹き出しを作成して利用する方法. セレクタやプロパティについて詳しく知りたい方は、サルワカさんのこちらの記事をご覧になってみて下さい。, 「color:#英数字6ケタのカラーコード(または3ケタ);」で色を決めています。, そして、上のコードを先ほどの “Cocoon Child: スタイルシート (style.css) ”にベターっと貼り付けます。, 貼り付ける場所はどこでも構いませんが、もし不安でしたら「子テーマ用のスタイルを書く」の直後に貼り付けて下さい。, プロパティ「background」(背景色)、「border」(枠線)で指定します。, 「border」で枠線の太さを「5px」、線の種類を「solid (実線)」、線の色を「#000000 (黒)」で指定しました。, 線の種類は「solid」の他にも「dashed (破線)」「double (二重線)」などがあります。, 変わらない場合は「!important」をコードの最後につけて強制的に変更します。, また「!important」をつけても変化がない場合は、コード自体を間違えている可能性もあります。, プロパティ「color」(文字の色)と「font-size」(文字の大きさ)で指定します。, 項目の文字色と大きさは変わりましたが、番号の色と大きさがそのままなので、タイトル文字の大きさも含めて目次全体の設定を変更します。, (PCやタブレットで見ると)ちょっとデカすぎる気もしますが、極端な例なので…(^_^;), ブログに目次があると読者の利便性が向上して、結果的にSEOにも効果があるようです。, 冒頭でもお伝えした通り、Cocoonは見出しを入れると自動的に目次が作成されます。, SEO的にはそれだけでも十分なので凝りすぎる必要もないと思いますが、カスタマイズすることによりブログ全体に統一感が生まれます。, このブログでは、主に出身地の青森のこと、トラックや交通安全のこと、自分が覚えたWordPressやCocoonの設定方法などを書いていきます。.

.

ジャニーズ ファンクラブ会員数 減る 37, 本 郵送 梱包 5, 市営住宅 収入申告書 書き方 4, アウディ デイライト 消したい 4, Kindle 家族 見られたくない Ipad 4, 英検 3級 感想 5, チタン 鍋 安全性 10, 黄ニキビ 膿 出てきた 知恵袋 47, 告白 振られた ブロック 8, Vita Cfw エミュ 9, カーテンボックス Diy ブログ 4, ヴォクシー スタビライザー 交換 4, Ark レンタルサーバー マップ 変更 8, 仮面ライダーゼロワン 29話 無料 7, ご都合いかがでしょうか 英語 丁寧 15, エアガン サブマシンガン 一覧 5, 司法試験 三振 ブログ 54, ロック画面 カメラ 消す Android8 6, 自作pc 予算 30万 4, 猫 セミントラ 嘔吐 28, ドーントレス スレイヤーレベル 上げ方 20, Akb Mステ 動画 10, ネイビーシューズ ビジネス コーデ 5, ハッカ油 犬 猫 22, 天井 板 シール 13, ハモネプ Az 解散 41, Quicktime Mp4 音が出ない 6, Tern 2020 発売 日 7, シンフォギアxd Pc 連携 10, Cod Mobile Fov 6, アメリカ 5 大企業 アムウェイ 18, Jimdo ヘッダー編集 上級者 4, Iphone 通話中 ピピピ 15, ジムニー 燃費 シエラ 5, 兼崎 健太郎 刀剣乱舞 8, 小川 オーナーロッジ タープ 4, 関係代名詞 What 補語 4, Sharepoint ドロップダウン リスト 14, 自衛隊 副業 バレる 5, Sb 111 Shb 122 違い 4, 自己pr 看護学生 面接 8, つわり 歯磨き粉 味 5, 技術士 部門 選び方 8, パワプロ2018 マイライフ Ob 4, Hp Spectre X360 15 Df0000 価格 10, クレスト 歯磨き粉 研磨剤なし 9, 千葉県 中体連 野球 8, 絵文字 無料 素材 35, Unity Maya 回転 16, Garmin 945 不具合 16, Photoshop 起動 しない 7, 荒野行動 コントローラー 2020 4, 電話 緊張 どもる 43, Ea Gw30 Ea Eu30 違い 7, Gas ログイン なし 4, Destiny2 神性 ソロ 6, 同志社大学 パソコン 必要 6, ディビジョン2 ニューヨーク ビルド 5, このすば 小説 17巻 8, Nec 電気 リモコン スリープタイマー 4, α6400 ピクチャープロファイル 設定 18, 前髪 くせ毛 男 治し方 5, 街コン 告白 保留 5, Frp 補修 業者 大阪 17, ゴルフ ヴァリアント コンフォートライン 7, Iphone 音楽 入れ替え 4, イラレ 文字(縦 から 横) 4, ピン G25 アイアン ライ角 10, 電話 緊張 どもる 43, アムウェイ プロバイオプラス 効果 19, 名古屋 市立 中学校 ブレザー 5, Power Saving Mode 解除方法 17, Digno ケータイ2 未使用 4,