WordPress/Cocoonを使ったブログでの『ヘッダーメニュー』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。 前回の記事では、無料テンプレート(テーマ)【Cocoon】の背景を設定する方法を解説しました。 主に変更した個所の詳細はこんな感じです!, コチラの記事を参考にしていただいた方は、一度こちらの記事で追加したコードをすべて消してください。 Copyright © 2018 みやびな人生を送るためのアフィリエイト講座 All Rights Reserved. Cocoonのpreで表示させるコードの行間を小さくしてコンパクトにするカスタマイズ . 投稿ページは、記事タイトル、本文、カテゴリ/タグ、SNSボタン、関連記事、その他ウィジェットなどで構成されています。, これらのパーツは、「cocoon設定」→「投稿」「SNSシェア」「SNSフォロー」タブなどで、表示・非表示、表示位置が変更できるようになっています。, デフォルトで「カテゴリ/タグ」は、本文下、SNSボタン上になっています。もちろんこれで問題がある訳ではないのですが、ふと、カテゴリ/タグを上に移動させてみたいと思い立ちました。, ・固定・投稿ページ共通:tmp/content.php ・投稿ページ:tmp/single-contents.php ・固定ページ:tmp/page-contents.php, 今回は、投稿ページの「カテゴリ/タグ」の表示位置の変更が目的ですので、「tmp/content.php」をいじってみたいと思います。, ftpソフトなどで、子テーマに「tmp/content.php」をコピーします。「tmp」フォルダがない場合は、新たに作成してその中に「content.php」をコピーします。, いじる箇所は、子テーマにコピーした「tmp/content.php」の94行目あたり。, 因みに、「カテゴリ」については、すぐ上にパンくずリストがあるので、無くてもいいかなと思い、消すことにしました。, そこで、「cocoon設定」→「投稿」タブで、「カテゴリ・タグ表示」のところを「タグのみ」に設定しました。, wordpressの管理画面から、function.phpなどの.phpファイルを編集した場合、うまく動作しない時があります。, その際は、ftpソフトなどでいったん該当ファイルをローカルに保存して、そこで編集を行います。, 編集した.phpを、ftpソフトなどで再度アップロードする事で正常動作する場合があります。, .phpを編集する際は、サクラエディタ が、エラーが少ないのではないかと思います。, 上のエディタで保存する場合は、文字コード「UTF-8」、BOM「チェック無し」がエラーが少ないのでは無いかと思います。, 発売日: 2017年02月23日頃 著者/編集: 石川栄和, 大串肇 出版社: インプレス 発行形態: 単行本 ページ数: 256p ISBNコード: 9784295000792, 発売日: 2017年08月02日頃 著者/編集: 星野邦敏, 相澤奏恵 出版社: インプレス 発行形態: 単行本 ページ数: 254p ISBNコード: 9784295002017, 発売日: 2018年07月26日 著者/編集: 西山 悠太朗, 小林 睦 出版社: マイナビ出版 発行形態: 単行本 ページ数: 432p ISBNコード: 9784839966003. 前回の記事では、無料なのにたくさんカスタマイズができる【Cocoon】というテンプレート(テーマ)のダウンロード方法を解説しました。 2019.05.23. コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ!, 初めまして。cocoonのサイドバーカスタマイズのコードを使わせていただきました。コンパクトで見やすくてとても素敵です。ありがとうございます。 Googleが推進している機能の一つで、モバイル端末での閲覧した際に、表示スピードを格段に速くする仕組みです。 WordPressのブログではトップページに記事の一覧が表示されます。Cocoonでは記事一覧の表示する方法としてリスト形式やカード形式などいくつかの方法があらかじめ用意されています。ここではWordPressのテーマとしてCocoonを使用している場合にトップページの記事一覧の表示方法を変更する … WordPressのブログではトップページに記事の一覧が表示されます。Cocoonでは記事一覧の表示する方法としてリスト形式やカード形式などいくつかの方法があらかじめ用意されています。ここではWordPressのテーマとしてCocoonを使用している場合にトップページの記事一覧の表示方法を変更する … 何かよさそうなデザイン等があれば、コメントなどもらえるとうれしいです~, テーマによってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。 メニューに画像を使うのは、... WordPressで投稿前にチェックしておきたいパーマリンク・アイキャッチ画像・カテゴリ・タグなどつい設定し忘れなどありませんか? 文字部分が白抜きということですが、 私のように、「会社員をしながら」会社以外の収入源を作りたい。もっと豊かな生活を送りたい。と思っている人のお役に少しでも立てればとこのブログを立ち上げました。 様々な機能が搭載されており、設定をするのも簡単な無料テーマCocoonですが、やはり細かい部分については自分でカスタマイズしなければいけません。 今回は自分がちょっと気になった箇所についてカスタマイズしていきたいと思います。 以下の... 高機能なWordPressテーマ「Cocoon」 なんだったら、カスタマイズなんて必要はないですが、やはり多少はカスタマイズしないと個性があまり出ないような気もします。 そのため、当ブログで細かいカスタマイズ記事を少しずつ書いていま... WordPressの機能の一つとして、 「子テーマ」というものがあります。 ブログを書き始めた方の場合や、 WordPressを使い始めた方の場合は、 「子テーマ?なんだそれ」とか 「親テーマにそのままコードを書けばいいじゃん... 【WordPress】子テーマの導入方法と使い方を覚えてガンガンカスタマイズする!. 下書き保存するはずが、ボーっとして公開をポチ WordPressテーマのCocoonをはじめて利用する方向けに、SEO対策などを含めたのおすすめCocoon設定を紹介しました。SEOに強く機能性の高いブログにするために、この記事で一括設定してしまいま …      ご質問・ご要望・あなたが不安に  初期設定(デフォルト)の状態では「エントリーカード」にチェックが入っているかと思いますが、ここはあなたの好みでチェックを入れてください^^, 最小で2記事、最大で30記事まで表示させることができます。 グラデーション(「background: linear-gradient」)の色や色数は変更可能です。, 背景全体のグラデーションほどうるさくはないので、サイトの他の部分の色と合わせれば良いアクセントになると思います。, Cocoonでは、記事一覧ページと記事ページ上部(本文上)のアイキャッチ画像にカテゴリーが表示(アイキャッチラベル)されています。, 記事ページ上部(本文上)のアイキャッチラベルの表示設定は、[Cocoon設定]内で行うことができます。, WordPress管理画面左側にある[Cocoon設定]→[Cocoon設定]→[画像]タブ内にある、「アイキャッチラベルを表示する」というチェックマークを入れると表示、外すと非表示になります。, 記事一覧ページのアイキャッチラベルは、CSSで変更します。 女性はライフワークが変わることも多いですが、ライフワークが変わってもできる仕事であることも良いな♪と思っています。  ここで関連記事に関する事を設定できます。, <表示> ... Font Awesome5のTwitterアイコンのクラス属性(指定方法)が『fa』から『fab』に仕様変更され、AMPで表示されなくなりました。実装する方法を色々考えた結果、WordPres... グローバルナビに自作画像を入れると、サイトの差別化ができると共に、文字情報ではなく視覚・感覚的に内容がわかりやすい、さらに目に留まりやすい…などのメリットがあります。 今回はヘッダー部分にあるサイトロゴを左寄せるカスタマイズです。 会社に特別不満はないのですが、昇級や賞与がない事といつ何が起こるかわからない時代となった事で「会社の収入だけ」に頼っているのは危険だな…また思う存分好きな時に好きな場所へ行ったり買い物したりしたいな…との思いから、自分で会社以外の収入源を作ろう!とネットビジネスの世界へ飛び込みました。    勿論、ただの世間話も大歓迎です!! 今回は、私も使用している無料テーマ【Cocoon】で、WordPressブログの記事内に関連記事を表示させる方法や、表示させる関連記事の数の設定など、関連記事に関する設定方法について図解入りで解説します。, 2.左側メニューの①Cocoon設定にカーソルを合わせて、②Cocoon設定をクリックします。, 4.少し下にスクロールすると、「関連記事設定」という項目があります。 ワードプレスの標準ウィジェットで表示する「カテゴリー」や「タグ」を指定したものだけ非表示にする方法です。手順カテゴリーウィジェットcss1行追記css追記は以下のいずれかから行って下さい。外観→カスタマイズ→追加css外観→テーマエディター いかがでしょうか?, そのほかの場合についてはそのサイトを確認してみないと何とも言えないところですので、 この記事は無料WordPressテーマCocoonを導入したらはじめに読みたい記事です。. 自分のサイトカラーやイメージに合わせてスライド... 目次をクリックして見出しに飛ぶと、特にh2タグは見出しデザインが見切れて見えますよね。 ワードプレス(WordPress)をインストールしたら、《テンプレート(テーマ)》を設定してSEO効果を高めちゃいましょう! こっちの方が好みだという方はこちらをどうぞ!, カスタマイズをするので必ず子テーマを使いましょう! Cocoonの目次機能を有効化して、CSSにコピペするだけで目次クリック後の見出しがシッカリ見える... Cocoon一覧ページのh1タグとは、カテゴリ一覧・タグ一覧・月ごとのアーカイブ一覧・書いた人author一覧などのタイトルです。      メッセージ頂けると嬉しいです(*^ω^*) よろしくお願いします。, まるさん 置いてるメニューの位置などで、幅の狭い画面で見ると下層(孫カテゴリ)の... CocoonもSimplicityも、親テーマに管理画面上のスタイルを変更できるadmin.cssが付いてて、かなり簡単に管理画面のスタイルを変更できます。 WordPressの神テーマCocoonをインストールしたら記事を書く前に、最初にしておきたい初期設定を1ページにまとめました。要約すると新規サイトを作成する時などのカンニングペーパー的なものです。誰かのお役に立てれば幸いですが、記事は長いです。(笑) よくある原因としては、 Cocoonの管理画面の「Cocoon設定」で文字色を「白」にしている等が考えられます。 今回はアニメーションを使って、Cocoonのコンテンツエリアをフェードイン表示させるカスタマイズを行います。 WordPressのビジュアルエディタを使ってる人でエディタの上にあるボタン、イタリック・左右寄せ・中央揃え・インデントを増やす減らすなど…使いますか?使わないボタンは管理画面上から消し、スッキリさせてサクサクとタグ指定など出来たほうが良い 記事で設定したカテゴリ毎、または記事毎によって『お知らせしたいコメント』... CocoonのCocoon設定からヘッダーにロゴ:画像をいれているけど、ページ毎にロゴ(header画像)を変更したい。背景画像をガラリと変えたい。アップデートの影響を考えてPHPファイルは触... Cocoonでトップに戻るボタンを画像に変更する設定 前回こちらの記事で、 子テーマの重要性について説明しました。 今回はその子テーマの導入方法と、 使い方についてご説明します。 子テーマを導入する! 子テーマを導入する方法は2通りあります。 1つは親テーマと一緒にダウ... 高機能無料WordPressテーマ「Cocoon」 3月頃からβ版が公開され、作成者である「わいひら」さんが、利用者の意見を広く取り入れ、先月7月から正式公開となりました。 β版は会員登録をしなければ、ダウンロードできませんでしたが... 今回は無料テーマCocoonのサイドバーに設置するプロフィールボックスを、有料テーマのJIN風にカスタマイズしていきます! プロフィールを使用している場合は、結構印象が変わるますよー コピペで出来ますので、お試しください~ カ... Cocoonのpreで表示させるコードの行間を小さくしてコンパクトにするカスタマイズ. 1.ワードプレス(WordPress)にログインします。 2.左側メニューの①Cocoon設定にカーソルを合わせて、②Cocoon設定をクリックします。 3.「投稿」タブをクリックします。 4.少し下にスクロールすると、「関連記事設定」という項目があります。 ここで関連記事に関する事を設定できます。 <表示> 関連記事を表示するにチェックを入れると、あなたのワードプレス(WordPress)ブログの記事の最後に関連記事が表示されます … WordPress管理画面の投稿一覧カラム表示を切り替える機能を追加しました。見やすい一覧管理画面で作業効率をアップ。 残っていると、カスタマイズが上手くいかないことがありますので、ご注意ください。, 今回カスタマイズを適用させるためには、以下のコードをstyle.cssに追記してください。, 極力各サイトに合わせて変更できるよう、対応する箇所にコメントをしているので、変更したいコードの数値を変更すると簡単に自分好みに変更できると思います。, タイトルのデザインが中々しっくりこなくて妥協したのですが、他の部分については気に入っています! 真っ白エラーだけでなくても、... Cocoonのメニューに階層を付け、下層に子カテゴリなどをいれるとonマウスしたとき左へスライドして表示されます。 子テーマを使用... 今回もCocoonのカスタマイズです。 という事で、今回は、無料なのにシンプルで自分好みのカスタマイズがこれでもか... こんばんは、みやびです^^ 今回は、【Cocoon】の背景設定方法について解説していきます。 以下のCSSコードをCocoonの子テーマに貼り付けてください。, カテゴリー・タグのデザインはかなり細かいところなので、細部までデザインにこだわりたい場合や、練習がてらCSSを書いてみたいときにやってみると良いと思います。, […] Cocoon カテゴリー・タグ表示のカスタマイズ方法とデザインサンプル7(アイキャッチラベル、記事下) […], このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, CocoonのSNSのシェアボタンのデザインをカスタマイズする方法と、デザインサンプルを紹介します。, Cocoonのグローバルナビ(ヘッダーメニュー)のカスタマイズを紹介します。画面スクロール時にヘッダーを上部固定表示にする方法と、マウスホバー時に下線をつける方法です。, Cocoonの検索ボックス(検索フォーム)のデザインをカスタマイズする方法と、デザインサンプルを紹介します。, Cocoonのブログカード(外部・内部)をカスタマイズ(背景色・枠線・フッタードメイン非表示)する方法を紹介します。, Cocoonの記事の目次(TOC)のデザインをカスタマイズする方法と、デザインサンプルを紹介します。, 【PR】ディスクパーティション管理・復元ならMiniTool Partition Wizard, Amazon Photosデスクトップアプリの使い方(同期/バックアップ/アップロード/ダウンロード), Cocoon カテゴリー・タグ表示のカスタマイズ方法とデザインサンプル8(アイキャッチラベル、記事下), Amazon Photos(プライムフォト)の使い方(写真のアップロード/ダウンロード/削除), コピペでできるボックスデザインサンプル13とビジュアルエディタへのボタン追加方法(CSS), Cocoonのページネーションのデザインをカスタマイズする方法と、デザインサンプル5つ, Cocoon 記事の目次(TOC)のデザインをカスタマイズする方法とデザインサンプル5つ, Cocoon 人気記事ウィジェットのデザインサンプル10 | Simplicity Hacks, Cocoon 記事一覧ホバー時の動きをカスタマイズする方法と、デザインサンプル | Simplicity Hacks. WordPressのビジュアルエディタを使ってる人でエディタの上にあるボタン、イタリック・左右寄せ・中央揃え・インデントを増やす減らすなど…使いますか?, 使わないボタンは管理画面上から消し、スッキリさせてサクサクとタグ指定など出来たほうが良いですよね。, admin.cssをCocoon子テーマに導入したら、使わないボタン類をCSSで非表示にできます。, このカスタマイズの前に初心者さん向けに追加した記事よりCSSをサクッと導入してください❦, LINKCoccon管理画面スタイル変更に!CSSを子テーマに導入コピペで簡単、実装方法, ボタンを非表示にするには、消したいボタンを指定(#mceu_数字:後述)して以下CSSのように書くだけでOK!, ボタンの指定方法は人・サイトによって非表示にしたいボタンが全く違ってきます。入れているプラグインによって配置や数字が変わったり。, 私が確認した2つの方法と、PC検証ボタンですぐに確認できます。検証ボタンの使い方が分からない人はカンで行えるようザックリ説明しておきます。, 1段目はCocoonユーザーさんはほとんど変わりないけど、2段目はプラグインが入るので変わってきます。まずは1段目から見てください。, 段落は0となっているのは、#mceu_0と指定すれば反映する感じです。画像の通りの番号なので、チェックしてください。イタリックを消したい場合は2なのでまずは、イタリックを消すCSSをadmin.cssに書いて更新して消えた事をチェックしてください。, 上記同じ配列でしたら(15個)1段目が0から14まで指定があるので次、2段目はmceu_15から始まります。, 私の場合ははadQuickTagを入れているので右から#mceu_15・#mceu_16となります。, Edge・FireFox・Chromeなど検証画面の開きかた:Chromeでの使い方など詳細は以下をどうぞ。面白いですよ^^, LINK要素の検証(デベロッパーツール)の使い方!初心者がカスタマイズできる方法!HTMLとCSS入門編, この3つだけ表示させたい時は以下CSSを書いてadmin.cssに貼り付ければOK!, 書いてる途中ボタンを全部表示させるには、念のため『下書き保存』をしてから要素の検証ボタンを開き、ソースを表示します。, 29行目の}のあとにも}*/と入れてください。また非表示にするのは/**/コメントをとればOK!, admin.cssに書いてる事だけが表示されるからはじめにstyleをいれたんだね。, ご自身で使いやすいよう、WordPressエディタボタンを非表示にしてタグ打ちをサクサクしやすいようにしてみてください。, WordPress初心者がブログ運営する上で必要なバックアップ方法。エラーの対処。CSS・HTMLの基礎がわかるステップを丁寧に説明。. Cocoonを親テーマのバージョンアップした際、トップページと投稿公開ページで真っ白エラーが出ました。エラーの原因を特定する例として解決までの方法をご紹介。