Dinesh Bafna

Successful Entrepreneur and Business Leader

cocoon h1 カスタマイズ 5

padding: 0.2em 0.5em;/* 上下 左右の余白 */ margin: 1.8em 0 1em; ブログを書く際の見やすさとして重要になってくるのが「見出し」です。 見出しは、新しくまとまった文章を書き始める最初に設定します。 もし見出しが無くて文章が切れ目なく続くと、読む方は文章を把握できない状況になり兼ねません。 そこで順に見出しを追っていく事で、文章全体の流れが把握できるるようにする必要があります。 見出しは所謂小タイトルで、文章が分かるようにタイトル(見出し)を設定します。 bottom: -4px; 【Cocoonカスタマイズ】コピペで楽々!グローバルナビをおしゃれにカスタマイズしませんか?, 【Cocoonカスタマイズ】アピールエリアを使って読んでほしい記事は目立たせよう!. margin: 1.5em 0 1em; 見出し1(H1)は記事のタイトルで使われますので、記事本文中はH2~を利用します。, H2やH3タグは、サイドバーやウィジェットタイトルなどにも使われている為、記事内の見出しのみを変えたい場合は「entry-content」クラスを明示してCSSに記述します。, 上記CSSには背景色を指定していませんが、Cocoonの見出しデザインで、H2タグにはキーカラーを使って背景色をつけているので、背景色を変えたい場合は以下のように指定します。, 画像を使っています。画像はご自身でご用意ください。24~32pxの正方形がお勧め。, 初期設定されている見出しデザインの他、スキンを利用している場合も、初期デザインが異なるので、以下のまとめを参考に必要のない項目を打ち消したり、上書きしてデザインして下さい。, はじめまして。 以前こちらで見出しをコピペさせて頂きました。 今回見出しデザインの変更を考えているのですが、こちらで使わせて頂いたコードが強く(?)、別のコードが反映されず悩んでいます。 恥ずかしながらcssなどの知識はほぼゼロです。, 新しいコードを反映させるためには、どのようにしたら良いかご教授願えませんでしょうか。 どうぞよろしくお願いいたします。, 山﨑様 はじめまして。お返事遅くなり申し訳ありません。 えっと、、、 以前にコピーして頂いたコードを削除されるか、そのコード自体を編集されれば良いかと。 この件に限らず、必要のないコードを残したままにされない方が良いです。 ちなみに、同じクラス名に対して複数の記述がある場合、 表示結果は、CSSの行で下に書いているコードで上書きされます。, ご丁寧に返信くださってありがとうございました。 過去に記入したCSSの削除方法すらわかっていなかったので、迷走していました。 「コードを削除すれば良い」と教えていただき、無事思った通りにできました。 今回はお世話になりました。 ありがとうございました!, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。. WordPressテーマのCocoonをはじめて利用する方向けに、SEO対策などを含めたのおすすめCocoon設定を紹介しました。SEOに強く機能性の高いブログにするために、この記事で一括設定してしまいま … }, .article h1 { color: #fff; からあげ棒、ありったけ (WordPressテーマ THE THOR 使用) Windows10の電源プランを「AMD Ryzen™ Balanced」に強制設定する!, 低価格なiVANKY製の4K60Hz対応DisplayPortケーブルを購入する!. Cocoonの見出し(h1~h6)についての装飾CSSを掲載しています。デフォルトのデザインでも問題ないですが、余裕があればサイトコンセプトに合わせたカスタマイズをしてみましょう。 Copyright © 2018 MASAa.net All Rights Reserved. このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。, 今回は、WordPressテーマ Cocoonでの「見出し1タイトル(h1タグ)」~「見出し4(h4タグ)」のカスタマイズについてまとめてみました。, WordPressテーマ Cocoonの「見出し」については、過去2度ほどカスタマイズを行ってきました。, WordPressテーマ Cocoonで使える見出しは、「見出し1タイトル(h1タグ)」「見出し2(h2タグ)」「見出し3(h3タグ)」「見出し(h4タグ)」「見出し(h5タグ)」「見出し(h6タグ)」となります。, しかし、表などの背景もピンクを採用しており、それらが重なって「見出し」と言うのが若干認識辛い状況です。, 「見出し1タイトル(h1タグ)」~「見出し4(h4タグ)」のデザインのカスタマイズを行います。, 「見出し1タイトル(h1タグ)」~「見出し4(h4タグ)」のカスタマイズ内容は、下記の通りです。, 「スタイルシート(style.css)」を開き、今回のカスタマイズ内容を既存の「見出し1タイトル(h1タグ)」~「見出し4(h4タグ)」の設定(.article h1~.article h4)と入れ替えます。, 今回のカスタマイズによって、「見出し1タイトル(h1タグ)」~「見出し4(h4タグ)」のデザインは次のようになりました。, また、「見出し1タイトル(h1タグ)」と「見出し2(h2タグ)」~「見出し4(h4タグ)」では若干色合いを変更しています。, 「見出し1タイトル(h1タグ)」は濃く、「見出し2(h2タグ)」~「見出し4(h4タグ)」は薄くしてみました。, 「見出し1タイトル(h1タグ)」~「見出し4(h4タグ)」に対してデザインを付けたことで、サイト全体が明るくなりました。, また、見出し専用のデザインなので、文中にある見出しを見つけやすくなり記事自体が読みやすくなった思います。, 大学生と高校生の二人娘のパパで弱小ブロガー。初めてのPCはMZ-80C、その後MZ-80B、PC-8001/8801/6601/9801/88VA等を経て現在のメイン機はRyzen 7 3700X搭載の自作PC。WordPressテーマ CocoonとTHE THOR(ザ・トール)を使って3つのWordPressブログサイトを運営中。このサイトのWordPressテーマはCocoonを使用。PC関連のレビュー記事ご依頼承ります!, ZMASAa.blog Cocoonをお使いの場合は、下記の記述で当サイトと同じ色になります。 別の色にされたくなったときには、#の後ろの英数字をご変更ください。.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {color: #333; line-height: 1.5;}.article h1 {padding: 0; font-size: 32px; THE THOR(ザ・トール) Cocoonで見出しのデザインを好みのものにカスタマイズする方法です。見出し1(H1)は記事のタイトルで使われますので、記事本文中はH2~を利用します。デザイン設定する為の指定方法と、まるごとコピー利用できるコードを載せています。カスタマイ }, .article h4 { デザインは大好きだけれど、HTMLやCSS、WordPressは初心者なわたし。たくさんつまづきながらWordPressでのブログカスタマイズに奮闘しています。, WordPressのテーマは、シンプルな無料テーマ「Cocoon」を使用しています。, ご自由に真似していただいて構いませんが、あくまで初心者が試行錯誤しています。保証や賠償はいたしかねますし、アドバイスもたぶんできませんので、ご了承ください。, 見出しのデザインでわたしが最も重要だと思うのは、「階層がわかること」。 最も求められている役割ですよね。, 特に記事内で最も大きな見出しとなる「h2」は、「ざーっとスクロールしていても、ぱっと目に飛び込む存在感」がほしいと感じています。, わたしは「軽やかで明るい」「適度にゆるい」と感じてほしいので、「h2」と「h3」はそんな雰囲気のデザインにしたつもりです。, 真剣な気持ちで文章を読んでほしいブログだと、色を抑えたシンプルなものがおすすめです。, わたしは、シンプルな無料のWordPress テーマ「Cocoon」を使用しています。, Cocoonで「記事内の見出しのみ」をデザイン指定するには、下記のclassを指定します。, 紹介するCSSは「Cocoon」に合わせています。メディアクエリのブレークポイントも、Cocoonと揃えました。他のテーマをご利用の方は、各テーマに合わせたclass名をご使用ください。, 行間を調整。元の line-height は1.25でしたが、狭いと感じたので少し広げました。, 横幅1030px以上ではフォントサイズ32pxに、スマホやタブレットではフォントサイズ28pxに。, ここまでは、記事を区切る線になってほしいので、横幅いっぱいを使うデザインにしています。, 子テーマのCSSに追記すれば、反映されるはずです。 パソコン選びのコツ line-height: 1.5; All Rights Reserved. }, .article h5 {  パソコン関連 ぶっちろぐ こんにちは、yujiです!このブログでは、WordPressを使ったブログ運営について詳しくまとめています。, このブログではWordPressテーマのCocoonを使っていますが、Cocoonを利用する最大のメリットは、細かくカスタマイズできることとデザインのポテンシャルが高いことです。, この記事にまとめた方法で、以上のようなCocoonのカスタマイズを再現できるので、参考にしていただけたらと思います。, ▶【2020年最新攻略法】Amazonアソシエイトの審査方法が変わる!アカウント作成から180日以内に少なくとも3つの適格販売が必要に。, ▶【年収7ケタ突破】僕のブログの収益化方法まとめ【大変だけど、ちゃんと稼げる】▶【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較!, 「まずはCocoonを利用するうえで、事前に設定しておくことをまとめておきます。」, WordPressメニュー「外観」の「テーマ」から、『CocoonChild』が有効化されていることを確認してください。, Cocoonでは「スキン」機能があり、さらに細かく洗練されたデザインを1クリックで実装することができます。, yujiblogではスキンの「ホワイトラーメン」を実装して、若干の変更を加えています。, SEOに強く機能性の高いブログにするために、おすすめのCocoon設定を以下の記事で紹介しています。, スタイルシートに以下のコードをコピペしてください。メモ書きも残しておいたので、参考にしていただけたらと思います。, コピペができたら「ファイルを更新」をクリックします。以上でCocoonの基本的な設定は完了です!, 「ここからはブログデザインを紹介します。まずは、ブログ上部のカスタマイズからまとめていきます。」, ここからは、Cocoonのヘッダー部分と、インデックスのカスタマイズをしていきます。, このようにブログの最上部に表示され、全体の印象に大きく影響するのがヘッダーロゴです。ロゴ部分には画像を挿入するので、好きなデザインを当てはめることができます。, このようにページ上部に表示され、ブログ内のアクセスをなめらかにするのがヘッダーメニューです。ブログ上部に常に表示されることになるので、サイトにあったデザインにカスタマイズしておくことをおすすめします。, アピールエリアでは、このように読者の目に留まりやすい位置にリンクを張ることができます。例えばアクセスを集めたいページを目立たせることができ、PVを伸ばすことができます。, このようにおすすめしたい記事やカテゴリーの画像リンクを、ヘッダー下の目立つ部分に表示させることができます。こちらもブログ読者に対し画像付きの訴求ができるので、設定をおすすめします。, このように統一性のあるデザインにすることで、まず読者にとって読みやすく、良い印象を与えることができます。, 以前から、お問い合わせページやツイッターのDMで「インデックスカードのカスタマイズを知りたい」との要望が多くいただいていました。, この記事にまとめた方法で、以上のようなCocoonのインデックスカードを再現できるので、是非参考にしていただけたらと思います。, このようにできるだけシンプルにまとめることで、圧迫感のない自己紹介ができます。ブログ上部に表示されるので、個性のあるオリジナルカスタマイズがおすすめです。, 次に、カテゴリー/タグクラウド/アーカイブ/検索のカスタマイズを紹介していきます。, このようにカテゴリーやタグ、アーカイブをまとめることで、読者は興味のある記事を探しやすくなり、ブログ内のアクセスが良くなります。すべてのページに表示されるので、シンプルなデザインであることが必要です。, このように記事タイトルは必ず読者の目に付く場所なので、デザインを整えておくとブログの印象が良くなります。記事タイトル周りの投稿・更新日や、カテゴリー・タブのデザインも含めてのカスタマイズです。, 文中に以上のような装飾を入れることで、読者にとってまず見た目でわかりやすく、そして読みやすいブログになります。段落構成に必須なので、是非カスタマイズしてみてください!, このように段落ごとの内容が一目でわかるようになっているので、読者が読みたい部分を探しやすくなります。基本は非表示で、必要な時だけ表示できる設定にしています。, このように吹き出しをカスタマイズして使い分けることで、記事の導入や話の展開をスムーズにすることができます。画像も自由に設定できるので、ブログのイメージキャラクターを定着させましょう。, このようにオリジナルデザインのブログカードでおすすめ記事を提示することで、内部SEOの効果を高めることができます!記事概要欄が省略されずに、すべて表示されるように設定しています。, ここからは、Cocoonの投稿記事下のエリアで使えるカスタマイズを紹介していきます。, このように最小限シンプルなデザインにすることで、限られたスペースで、邪魔にならずにボタンを配置できます。配置するボタンの種類は、自由に変更可能です。, このようにサムネイルとタイトルをバランスよく配置することで、記事を読んだ読者からのクリックが期待できます。限られたスペースで、しっかり記事を訴求するデザインです。, ここからは、Cocoonのフッターやその他の細かい部分のカスタマイズを紹介していきます。, このようにサイドバーと同様のコンテンツを配置することで、ブログ全体の構図が読者に伝わりやすくなります。コードはすでにほぼ入力済みなので、少しだけ編集します。, このようにツイッターのタイムラインを埋め込むことで、ブログとの連携が柔軟にできます。モバイル表示だと読み込みがどうしても重たくなってしまいますが、ツイッターアカウントを持っている方にはおすすめです。, 以上の4つのCocoonのデザインを再現できるので、参考にしていただけたらと思います。, yujiblogでは、こちらの記事が人気となり、WordPress/CocoonでのWEB制作をしたい人向けに、よく検索されるブログとなりました。, 僕は以上のWEBデザインスキルを独学で習得しました。そこで、プログラミング未経験の僕が独学でWEB制作を学んだ方法について、以下の記事でまとめてみました。興味のある方はどうぞ!(1か月でWEB制作できるようになります。), この記事が少しでもお役に立てたら幸いです。最後まで読んでいただき、ありがとうございました!, ▶【年収7ケタ突破】僕のブログの収益化方法まとめ【大変だけど、ちゃんと稼げる】▶【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較!▶【もしもアフィリエイト】初心者でもできる『かんたんリンク』のおしゃれなカスタマイズ【コピペでOK!】▶【利用者が増えている理由とは?】『もしもアフィリエイト』を実際に使ってみた感想【口コミ・評判・メリットまとめ】▶【その画像の著作権、大丈夫ですか?】僕がおすすめする『安心のフリー素材サイト』9選!, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, 理系の大学で研究した後、海外留学や慈善団体での活動を経験し、現在はフリーランスとして自由な人生を楽しんでいます。, これまでの主な居場所はTwitterです。おかげさまで様々な出会いがあり、現在は約6万人の方とつながっています。, 【審査承認されたので解説】2020年最新Amazonアソシエイトの審査方法!アカウント作成から180日以内に少なくとも3つの適格販売が必要に。, 2020年3月以降のAmazaonアソシエイト審査方法変更点と、その攻略法を詳しく紹介します。この変更についてはまだネット上に情報が不足しているので、ブログをはじめたてで混乱している方の参考になるかと思います。, 【初心者向けSEO対策】おすすめの『Cocoon設定』をまとめて紹介【これで安心】, WordPressテーマのCocoonをはじめて利用する方向けに、SEO対策などを含めたのおすすめCocoon設定を紹介しました。SEOに強く機能性の高いブログにするために、この記事で一括設定してしまいましょう!, 【Cocoon】ブログ初心者でもできる『ヘッダーロゴ』のおしゃれなカスタマイズ【コピペでOK!】, WordPress/Cocoonを使ったブログでの『ヘッダーロゴ』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。, 【Cocoon】ブログ初心者でもできる『ヘッダーメニュー(グローバルメニュー)』のおしゃれなカスタマイズ【コピペでOK!】, グローバルナビメニュー(ヘッダーメニュー)とは、ヘッダー下にあるメニューのことです。ここにはカテゴリーを並べてあるのですが、さらに細かいタグごとのサブメニューを表示できるようにします。カスタマイズはコピペでOKです。, 【WordPress】初心者でもできる『アピールエリア』のおしゃれなカスタマイズ【コピペでOK!】, WordPress/Cocoonを使ったブログでの『アピールエリア』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。, 【WordPress】ブログ初心者でもできる『おすすめカード』のおしゃれなカスタマイズ【コピペでOK!】, WordPress/Cocoonを使ったブログでの『おすすめカード』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。, 【Cocoon】初心者でもできる『モバイル表示版ヘッダーメニュー』のおしゃれなカスタマイズ【コピペでOK!】, WordPress/Cocoonを使ったブログでの『モバイル表示版ヘッダーメニュー(グローバルメニュー)』をカスタマイズします。すべてコピペでOKなので「初心者なりにブログをおしゃれにしたい!」という方にもおすすめです。, 【Cocoon】初心者でもできる『トップページのインデックスカード』のおしゃれなカスタマイズ【コピペでOK!】, WordPress/Cocoonを使ったブログでの『トップページのインデックスカード』をカスタマイズします。コピペでOKなので「初心者なりにおしゃれにデザインしたい!」という方にもおすすめ。モバイル表示対応です。, 【Cocoon】ブログ初心者でもできる『プロフィール』のおしゃれなカスタマイズ【コピペでOK!】, WordPress/Cocoonを使ったブログでの『プロフィール』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。, 【Cocoon】ブログ初心者でもできる『サイドバー』のおしゃれなカスタマイズ【一括コピペでOK!】, WordPress/Cocoonを使ったブログでの『サイドバー』を一括カスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。, 【Cocoon】ブログ初心者でもできる『人気記事ランキング』のおしゃれなカスタマイズ【コピペでOK!】, WordPress/Cocoonを使ったブログでの『人気記事ランキング』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。, 【Cocoon】ブログ初心者でもできる『記事タイトル』のおしゃれなカスタマイズ【コピペでOK!】, WordPress/Cocoonを使ったブログでの『記事タイトル』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。, 【Cocoon】ブログ初心者でもできる『見出し(H2~H5)』のおしゃれなカスタマイズ【コピペでOK!】, WordPress/Cocoonを使ったブログでの『見出し(H2~H5)』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。, 【Cocoon】ブログ初心者でもできる『目次』のおしゃれなカスタマイズ【コピペでOK!】, WordPress/Cocoonを使ったブログでの『目次』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。, 【WordPress】初心者でもできる『吹き出し』のおしゃれなカスタマイズ【コピペでOK!】, WordPress/Cocoonを使ったブログでの『吹き出し』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。, 【無料で聞く読書】僕はオーディオブックで年間100冊聴いてます【おすすめ音声アプリ比較】, 僕は音声アプリを使い始めて、3日に1冊ペースで読書できるようになりました。毎日忙しくて本を読みたくても読めない…。気になる本を買うだけで満足してしまう…。そんな人でも読書ができてしまうのが『オーディオブック』です。, 【Cocoon内部SEO対策】初心者でもできる『ブログカード』のおしゃれなカスタマイズ【コピペでOK!】, WordPress/Cocoonを使ったブログでの『ブログカード』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。, 【Cocoon】初心者でもできる『SNSシェアボタン』のおしゃれなカスタマイズ【コピペでOK!】, WordPress/Cocoonを使ったブログでの『SNSシェアボタン』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。, 【Cocoon】初心者でもできる『本文下の関連記事』のおしゃれなカスタマイズ【コピペでOK!】, WordPress/Cocoonを使ったブログでの『本文下の関連記事』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。, 【Cocoon】初心者でもできる『フッター』のおしゃれなカスタマイズ【コピペでOK!】, WordPress/Cocoonを使ったブログでの『フッター』をカスタマイズします。コピペでOKなので「初心者なりにブログをおしゃれにデザインしたい!」という方にもおすすめです。モバイル表示にも対応しています。, 【WordPress】初心者でもできる、ブログへの『ツイッター埋め込み』のやり方とおしゃれなカスタマイズ, WordPressを使ったブログでの『ツイッター埋め込み』の方法を解説します。モバイル表示 だとどうしても重たくなってしまいますが、ツイッターアカウントを持っている方はブログとの連携が柔軟にできるのでおすすめです。, 【Cocoon】初心者でもできる『フッターメニュー/各種ボタン』などのおしゃれなカスタマイズ【コピペでOK!】, WordPress/Cocoonを使ったブログでの各種細かい装飾をカスタマイズしていきます。コピペでOKなので「初心者なりにブログをおしゃれにしたい!」という方にもおすすめです。モバイル表示にも対応しています。, 僕はプログラミング未経験から独学で習得しました。最初は自分のパソコンすら持っておらずブラインドタッチもできなかったのですが、センスのない状態から勉強した結果「副業のWEB制作で、本業の収入を超える」ことができました。.

アラウーノ 水位 上げ方 4, Topping D70 Bluetooth 7, Ipad 日本語入力 できない 8, ダイハツ ロッキー オートライト 感度調整 4, ヤングマガジン 2019年52号 Rar 5, ピティナ C級 2019 4, アドレスv125の 単 相交流全波整流化 マニュアル 10, 猫 長毛種 うんちつく 5, Cities Skylines デカール アスファルト 16, Naruto クシナ 2ch 7, ロードバイク ツーリング おすすめ 9, Dynabook T553 メモリ増設 13, 沖縄 平屋 増築 5, サトシ 歴代 ガチパ 5, あつ森 桟橋 飛行場 4, Bmw X3 M40d 乗り心地 7, 間取り 帖 クローゼット 13, Nec パソコン Hdmi 4, Ps3 Csid Free 28, あつまれどうぶつの森 ゆきみ 人気 54, バイク 立ち ご け 10, ボカロ Pv 一枚絵 4,

TAGS