ワード プレス 見出し デザイン。 ワードプレス記事見出しの使い方と付け方を解説!SEOの役割もあるのでシッカリ覚えておこう

【5分で完了】ワードプレスの見出しデザインの変え方を教えるよ。

ワード プレス 見出し デザイン

6 Arial, Helvetica, sans-serif; text-align:center; color: 333; background: f0e800; -webkit-transform: rotate -3deg skew -3deg ; -moz-transform: rotate -3deg skew -3deg ; -o-transform: rotate -3deg skew -3deg ; -ms-transform: rotate -3deg skew -3deg ; transform: rotate -3deg skew -3deg ; text-shadow:1px 1px 0 rgba 255,255,255,1 ; box-shadow: 0 1px 2px 0 rgba 0,0,0,0. 6 "Times New Roman", Times, serif; text-align:center; color: ffe8e8; background: f99; -webkit-transform: rotate -3deg skew -3deg ; -moz-transform: rotate -3deg skew -3deg ; -o-transform: rotate -3deg skew -3deg ; transform: rotate -3deg skew -3deg ; box-shadow:0 1px 2px 0 rgba 0,0,0,0. 2 ; background-image: -webkit-gradient linear, left top, left bottom, from rgba 0, 0, 0, 0. 0 , color-stop 0. 08, rgba 255, 255, 255, 0. 5 , color-stop 0. 12, rgba 255, 255, 255, 0. 5 , color-stop 0. 12, rgba 0, 0, 0, 0. 0 , color-stop 0. 88, rgba 0, 0, 0, 0. 0 , color-stop 0. 88, rgba 255, 255, 255, 0. 5 , color-stop 0. 92, rgba 255, 255, 255, 0. 5 , color-stop 0. 92, rgba 0, 0, 0, 0. 0 , to rgba 0, 0, 0, 0. 8em; margin: 0 0 1. 5em; font-size: 1. 143em; font-weight: bold; border-radius: 5px; color: 333; background: fff; text-shadow: 1px 1px 0 fff, 1px 1px 0 999; border: B92A2C solid 2px; background-image: -webkit-gradient linear, left top, right bottom, from rgba 255, 255, 255, 0. 0 , color-stop 0. 4, rgba 255, 255, 255, 0. 0 , color-stop 0. 4, rgba 0, 0, 0, 0. 1 , color-stop 0. 6, rgba 0, 0, 0, 0. 1 , color-stop 0. 6, rgba 255, 255, 255, 0. 0 , to rgba 255, 255, 255, 0. 6 Arial, Helvetica, sans-serif; color: 333; background: fff; text-shadow: 1px 1px 0 fff, 2px 2px 0 999; border-top: 333 solid 3px; border-bottom: 333 solid 3px; background-image: -webkit-gradient linear, left top, right bottom, from rgba 255, 255, 255, 0. 0 , color-stop 0. 4, rgba 255, 255, 255, 0. 0 , color-stop 0. 4, rgba 0, 0, 0, 0. 1 , color-stop 0. 6, rgba 0, 0, 0, 0. 1 , color-stop 0. 6, rgba 255, 255, 255, 0. 0 , to rgba 255, 255, 255, 0. 2 Arial, Helvetica, sans-serif; color: 666; background: ccc; border-top: ccc solid 1px; border-right: 999 solid 1px; border-bottom: 999 solid 1px; border-left: ccc solid 1px; text-shadow:1px 1px 0 rgba 255,255,255,1 ; box-shadow: 0 0 0 1px rgba 255,255,255,0. 5 inset; background-image: -webkit-gradient linear, left top, left bottom, from rgba 220, 220, 220, 1. 0 , color-stop 0. 25, rgba 240, 240, 240, 1. 0 , color-stop 0. 30, rgba 235, 235, 235, 1. 0 , color-stop 0. 36, rgba 240, 240, 240, 1. 0 , color-stop 0. 50, rgba 235, 235, 235, 1. 0 , color-stop 0. 80, rgba 215, 215, 215, 1. 0 , to rgba 210, 210, 210, 1. 0 ; background-image: -webkit-linear-gradient top, rgba 220, 220, 220, 1. 0 , rgba 240, 240, 240, 1. 0 ; background-image: -moz-linear-gradient top, rgba 220, 220, 220, 1. 0 , rgba 240, 240, 240, 1. 0 ; background-image: -o-linear-gradient top, rgba 220, 220, 220, 1. 0 , rgba 240, 240, 240, 1. 0 ; background-image: linear-gradient to bottom, rgba 220, 220, 220, 1. 0 , rgba 240, 240, 240, 1. 143em; font-weight: bold; margin: 0 -1. 8em 1. 5em -1. 8em; padding: 0. 143em; font-weight: bold; margin: 0 0 1. 5em; padding: 0. 5em 0. 5em 0. 5em 2. 8em; left: 0. 5em; padding: 0. 8em; font-size: 1. 143em; font-weight: bold; border: 2px solid 4169E1; border-radius:18px; box-shadow: 3px 3px 3px rgba 0,0,0,0. 4 ; -moz-box-shadow: 3px 3px 3px rgba 0,0,0,0. 4 ; -webkit-box-shadow: 3px 3px 3px rgba 0,0,0,0. 4 ; -o-box-shadow: 3px 3px 3px rgba 0,0,0,0. 4 ; -ms-box-shadow: 3px 3px 3px rgba 0,0,0,0. 5em; padding: 0. 8em; background: 000080; color: fff; font-size: 1. 0 , color-stop 0. 20, rgba 255, 255, 255, 0. 0 , color-stop 0. 20, rgba 255, 255, 255, 0. 1 , color-stop 0. 40, rgba 255, 255, 255, 0. 1 , color-stop 0. 40, rgba 255, 255, 255, 0. 3 , color-stop 0. 60, rgba 255, 255, 255, 0. 3 , color-stop 0. 60, rgba 255, 255, 255, 0. 5 , color-stop 0. 80, rgba 255, 255, 255, 0. 5 , color-stop 0. 80, rgba 255, 255, 255, 0. 6 , to rgba 255, 255, 255, 0. 0 , color-stop 0. 20, rgba 255, 255, 255, 0. 0 , color-stop 0. 20, rgba 255, 255, 255, 0. 1 , color-stop 0. 40, rgba 255, 255, 255, 0. 1 , color-stop 0. 40, rgba 255, 255, 255, 0. 3 , color-stop 0. 60, rgba 255, 255, 255, 0. 3 , color-stop 0. 60, rgba 255, 255, 255, 0. 5 , color-stop 0. 80, rgba 255, 255, 255, 0. 5 , color-stop 0. 80, rgba 255, 255, 255, 0. 6 , to rgba 255, 255, 255, 0.

次の

WordPressの見出しデザインを自由にカスタマイズする方法

ワード プレス 見出し デザイン

コード. entry-contentというのは「記事内の…」という意味の指定になります。 entry-content h2で「記事内のh2タグに対して」というように指定してデザインを変えることができるわけですね。 見出しデザインを探そう こちらの記事で見出しのデザインを大量に紹介しています。 SANGOで使える見出しがかなり含まれていますが…。 例えば、この中の少し折れ曲がったデザインのものを使ってみましょう。 まずCSSをコピペして、子テーマのstyle. cssに貼り付けます。 style. 例えば、見出し2(h2)のデザインを変えたいときには、それぞれ、. entry-content h2 と. entry-content h2::beforeに変えましょう。 以下のような感じですね。 style. css. entry-contentは記事内で使われている見出しのデザインだけを変えるために必要です(これを書き忘れると、トップページの記事一覧にまで反映されてしまいます)。 h3見出しを変えたいときには. entry-content h3と書けば良いですね。 保存してキャッシュを削除 ここまでできたら、style. cssを保存します。 ただし、このまま記事ページを開いても、見出しデザインは反映されていないかもしれません。 ブラウザが過去の見出しデザイン情報を未だに表示し続けている可能性大です。 このようにブラウザが画像やCSSを保存することは「キャッシュ」と呼ばれます。 例えば、Chromeの場合のキャッシュの削除方法は以下のようになります。 無事反映された! キャッシュを削除してからページを読み込むと、無事に反映されました。 色を変えてみよう あとは見出しの色をサイトの雰囲気に合うように変えたいですね。 MEMOCSSでの色の書き方にはいくつかタイプがあります。 「 F89174」のように6ケタのカラーコードで書くのが一般的です(このコードはHEXと呼ばれます)。 また「rgb 200,200,200 」というようにRGBという方式で書くこともあります。 で、ここで面倒なのがカラーコードをいちいち調べること。 実際の表示を見ながら色を調整できる便利な技があるので、覚えてしまいましょう。 Chrome検証モードを使うと便利 今回はChromeを使った場合の手順を紹介しますが、SafariやIEにも同じような機能が備わっています。 片側にはHTML(現在選択中のタグは青に)、もう片側にはその選択部分のCSSが表示されます。 色を選ぶ 次に色を選びます。 CSS側で. entry-content h2を見つけてbackgroundの隣の四角をクリックします。 該当部分の現在の色になっているので、どの部分を指しているのか分かりやすいですね。 すると、色を選ぶカラーピッカーが表示されます。 あとはぐるぐると調整して好きな色に変えましょう。 選んだ色はその場で反映される 嬉しいのが選んだ色がブラウザ上ですぐに反映されるところ。 これでサイトの雰囲気を見ながら、色を選んでいくことができます(ただし、style. cssに反映されるわけでないので、ページを再読込したら元に戻ります)。 色が決まったら、カラーピッカー上に表示されているカラーコード( ff9393など)をコピーして、style. css上で現在の色コードと置き換えます。 折れた部分の色を変える 折れた部分(三角形)の色も変えたいですね。 というわけで検証画面のHTML側で ::beforeをクリックします。 これで、. entry-content h2:beforeの方のCSSをテスト的に変えることができます。 変えたい部分をHTML側で探して、見た目をCSS側で変える…というわけですね。 さきほどと同じように実際の見た目をチェックしながら、色を選び、決まったら色コードをコピーします。 あとは、これを style. cssの該当する色コードと置き換えればOKです。 置き換えができたら保存して、再度ページを読み込み直してみましょう(反映されなければキャッシュを消去)。 完成! このようにして、自分の好きな配色に変えることができます。 SANGOの見出し3を変えるときの注意点 SANGOのデフォルトの見出し3(h3タグ)では、左側に線が表示されます。 そのため、CSSを上書きしたときにも、その線が残ってしまったりします。 そんなときは以下のコードを.

次の

ワードプレス記事見出しの使い方と付け方を解説!SEOの役割もあるのでシッカリ覚えておこう

ワード プレス 見出し デザイン

「テーマがいろいろあるのは良いけど、もっと個性を出したい!」 ワードプレスでブログを制作していると、ブログの見た目にもこだわるようになってきますよね。 ワードプレスにはテーマが豊富で、簡単に自分の好きなようにデザインを変えるとことができます。 カスタマイズ機能を利用すれば、ヘッダー画像や背景画像も思いのままです。 しかし、それでもまだまだ満足できないというブロガーの方もいるのではないでしょうか? 例えばタロログでは見出しテキストが以下のようになっています。 こちらはタグを利用した場合。 文字の背景色がオレンジになっています。 続いてはタグを用いた見出しテキストです。 文章の左にオレンジの縦線が入っていますね。 これらのテキストは、あらかじめ設定をしておくことで編集画面で見出しに指定するだけで、装飾が施されるようになっています。 その都度タグなどを記述する必要がないのです。 ということで今回は、ワードプレスで見出しを変更する方法を解説します。 見出しの重要性 そもそも、皆さんは見出しテキストを正しく活用できていますか? 見出しテキストは、SEO的にもユーザビリティー的にも重要な役割を担っています。 正しい使用方法でなければ、サイトの評価に悪影響を及ぼしかねません。 まずは、ウェブサイトの見出しについて軽く解説します。 ユーザビリティーを上げる 見出しの一番大きな役割は、 本文の要点を分かりやすくして構成を正しく伝えることです。 これは、ユーザーと検索エンジン双方に対してということになります。 ブログで文章を投稿していると、どうしても文字数が多くなることがありますよね。 タロログでも、1記事数千文字なんてことも珍しくありません。 文章が長くなると、どうしても読者は読むのを躊躇してしまいます。 そこで、• 段落や改行を多くする• 難しい用語を使わない• 文章の語尾に変化を持たせ、リズム感を生み出す などのテクニックで、読者に飽きさせないように心がけて文章を書くことが大事になってきます。 見出しテキストも非常に有効です。 長い文章を適切に分けて見出しを用いることで見出しを読むだけでも大体の内容を理解させることが可能になります。 読者は、見出しを読んで自分の欲しかった情報か見極めやすくなるのです。 検索エンジンに正しく理解させる また、SEOにおいても大事な施策となっています。 検索エンジンも、見出しを読み取ることで文章の内容を把握しているのです。 見出しタグの使い方を間違えてしまうと、検索エンジンが文章の内容を誤って認識する可能性もあるので注意して使用するようにしましょう。 見出しの装飾方法 見出しの重要性は、お分かりいただけたと思います。 そこで大事なのは、見出しをしっかり見出しとして認識してもらうことです。 検索エンジンであれば見出しタグ(やなどのhtmlタグのこと)で認識できますが、読者は見た目でしか判断できません。 その文章が見出しなのか、それともただ文字サイズを大きくして太字にしただけのテキストなのか、しっかりと差別化を図りましょう。 CSSの編集 見出しタグの装飾を変更する場合、CSS(スタイルシート)が必要です。 CSSと聞くと難しそうな印象ですが、今回はそこまで難易度は高くありません。 子テーマを作成しておくと、変更前の状態のCSSが残るので変更後が気に入らなかったときなど元の状態に戻すことが可能です。 またテーマをアップデートしたときに、子テーマにはアップデートが適用されないので勝手に変更されることがありません。 CSSの編集画面に移りました。 ここでstyle. cssというファイルを編集するのですが、ここで一つ注意なのが先ほどの子テーマのstyle. cssを選択することです。 他のテーマ(元の親テーマも含む)のファイルを変えてしまわないよう注意しましょう。 編集画面右上に現在編集しているテーマが表示されるので、しっかり確認してください。 例えば、見出し2のテキストに黒の下線をひくとします。 style. cssの最後に以下のテキストを貼り付けてください。 headline2」でこの設定のクラス名を設定しています。 最後に「ファイルを更新」をクリックして、CSSの編集は終了です。 実際に表示させる まだ、CSSの編集が終わっただけで実際のブログの表示には適用されていません。 ということで、続いて投稿画面をテキストエディターで開きます。 見出しにしたいテキストをとで囲み、更新してください。 実際の表示は、次のようになります。 cssの中の「headline2」の要素を呼び出してこのように表示させているのです。 これで、見出しタグの装飾の仕組みはお分かりいただけたと思います。 もっと簡単にする 「いちいちテキストエディターを開いて、見出し2タグを記載するなんて面倒だ!」 という方も多いですよね(というより、誰もが思うはずです)。 そこでもっと作業を簡単にしてみましょう。 同様に使用しているテーマのstyle. cssの編集画面を開きます。 先ほどは、クラス名を指定していたのですがこの「. headline2」を「h2」に変更して「ファイルの更新」をクリックしてください。 このように記述することで、全て見出しタグ2にこの装飾が施されるようになりました。 装飾いろいろ 見出しの装飾を変える方法はわかりましたが、結局CSSの記述は必要です。 でも、安心してください。 CSSを学ばなくても、ネット上で簡単に調べることが可能です。 見出しジェネレータ こちらのサイトでは、以下のような設定項目を選択するだけで必要なソースを自動で生成してくれます。 あとは、style. cssに貼り付ければOKです。 賢威カスタマイズ研究所 style. cssに貼り付けてすぐに使用出来るソース文が、多数公開されています。 見本も掲載されているので、非常にわかりやすいです。 サルワカ CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選 シンプル系やおしゃれ系など5種類のデザインコンセプトで68種類の見出しが紹介されています。 こちらもコードをコピペでOKです。 自分のブログにあった色に変えてみよう 最初に紹介した 見出しジェネレータであれば、自分で色を指定できるので好きな色に設定できますね。 しかし、コピペで使える見出しデザインでは色がすでに決まっています。 タロログであればオレンジを基調にデザインされているのですが、コピペしてきた見出しデザインだけ青かったら不自然ですよね? 例としてサルワカさんで紹介されていたコードを使用させてもらいました。 このままでは不自然です。 ではどうするかというと、まずは合わせたい色のカラーコードを調べましょう。 カラーコードというのは、 の後ろに6桁のアルファベットか数字が書かれた【 f5f5f5】こんな感じのやつです。 みたことがある人も多いのではないでしょうか。 既存の見出しデザインと色を合わせたい場合 検証ツール(開発者ツール)を使ってカラーコードを確認する方法をご紹介します。 今回はGoogle Chromeを使用した場合の検証ツールの使い方を説明しますね。 自分のブログで右クリックして検証という項目を見つけます。 1番下にある 検証をクリックします。 クリックすると、 右側に検証ツールが表示されました。 続いて、右側にある検証ツールの左上にあるマウスカーソルのような形をした部分をクリックしてみましょう。 赤い枠で囲んだ部分をクリックしてください。 すると、 黒かったボタンが 水色に変わります。 その状態で見出しの上にカーソルを持っていくと、 このようになります。 その状態で見出しをクリックしてみましょう。 すると、見出しに適用されているCSSが検証ツールに表示されます。 あとは適用されているカラーコードをコピーすれば、見出しに使用されているカラーコードを取得できました。 サイト内の画像と色を合わせたい場合 ブログのロゴとして使用している画像などと色を合わせたい時もありますよね。 画像の場合は検証ツールではカラーコードを取得できません。 そのため、画像からカラーコードを取得できるwebサービスを使います。 今回使用するwebサービスはこちら イロミル まずは調べたい画像のアドレスを取得する必要があります。 赤い枠で囲んだロゴ画像のカラーコードを調べて行きたいと思います。 まずは画像の上で右クリック。 画像アドレスをコピーを選択して画像アドレスをコピーします。 コピーができたらを開きます。 先ほどコピーした画像URLを貼り付けてください。 すると、画像が反映されました。 カラーコードを取得したい部分をクリックすると、 カラーコードが取得できました。 コードを編集してみよう ここまでで適用したいカラーコードの取得は完了しました。 続いてはコピペで使いたいCSSを編集していきましょう。 僕がメモしてあるカラーコードは【colorが fffff】【backgroundが ff9b00】なので、それに当てはめていきます。 まずはこちらの見出しの場合 ソースコードはこのようになっています。 5em; color: white; border-radius: 0. whiteは fffffと同じ白なので、このままでOKです。 1行目のbackground: b0dcfa;をbackground: ff9b00;変更してみます。 すると、 背景色がオレンジに変更されました。 5em; color: white; border-radius: 0. 簡単に色を変更できますね! 続いで別の見出しデザインでも色を変更してみましょう。 こちらもサルワカさんからコピペして使用させてもらいました。 2em 0. こちらもカラーコードを変更してみましょう。 すると、 このような状態になります。 周りに青が残っていて不自然ですね。 もう少し修正してみます。 3行目にあるbox-shadow: 0px 0px 0px 5px dfefff;の色も変更。 この部分のカラーコードも同じオレンジ色をつけてみます。 まだ少し、違和感が残っていますね。 見出しの周りにある点線の色が青いので、こちらを白に変えてみたいと思います。 どうでしょうか?さっきよりよくなったのではないでしょうか。 2em 0. 基本的には colorと background、この2つのカラーコードを変更すれば自分のブログにあった見出しの色に変更できるので試してみてください。 まとめ 見出しを変えてブログに個性を出そう! いかがでしたか? 見出し文が豪華になれば、また一段とオリジナリティーの高いブログになりますよね。 見た目に変化が出ると、読者も飽きずに読みやすくなるでしょう。 CSSの編集も、難しく感じなかったと思います。 これを機に、高度なテーマのカスタマイズにも挑戦してみてもいいかもしれません。

次の