カテゴリー
エッジプラス1テンプレートの質問

見出しのつけ方

ご利用のテンプレート:ブログタイプ2テンプレートについて
ご利用のサーバー:ロリポップ
お客様のスキル:「WordPressは初めて」
ご質問内容:記事内に見出しを書いて読みやすくしたいのですが、
E004などはTinyMCE Advancedを有効化にすれば見出しというスタイルが選べて、
非常に楽に見出しをつけれたのですが、E002ブログタイプのサイトにTinyMCE Advancedを入れてもうまく作動しません。
どうすれば良いでしょうか?

「見出しのつけ方」への7件の返信

お世話になっております。

見出しですが、E002タイプはh1などの見出しテキストにデザインが入っていないので、
見出しを適用したときに、普通のテキストのように表示されます。
デザイン見出しにはなりませんが、
ソースコードにはh1テキストとして記述されます。
ですので、TinyMCE Advancedやテーマの不具合というわけではないです。

E004タイプは見出しデザインが入っているので、
h1などの見出しを適用すると切り替わったように見えます。
もちろん、ソースコードでもh1テキストとして認識(記述)されます。

h1などの見出しにもデザインを組み込みたい場合は、
cssを追加するなどして対応していただければと思います。

簡単に見出しデザインができるサイトを紹介します。
見出しメーカー → http://midashi-maker.v-colors.com/

このサイトの「見出し表示サンプル」でh2の見出しを作る時の説明します。

「menuTabLight」という見出しを使いたい場合、menuTabLightのcssをコピーして、
「.menuTabLight」のクラス名を「h2」に書き換える。
それを記事投稿画面の「カスタムcss」に入りつけ。(もしくはテンプレートのstyle.cssに追加)

下記のような感じです。

上記のcssを ↓のようにクラス名の部分を変更。

それで、投稿画面でテキストを「見出し2」にすれば見出しデザインが適用されます。
カスタムcssに記述すれば、各ページごとの見出しデザインを変えることができます。

ただ、h1の場合、テンプレートのヘッダー上の部分のテキストがh1になっているので、
h1にスタイルを追加してしまうと、ヘッダー上のh1まで変更されてしまいます。
(その見出しデザインが適用されてしまう)
ですので、h2以降にcssを追加してください。
各ページの記事本文部分の見出し1(h1)にもデザインを適用したい方もいるかと思いますので、
ヘッダー上のh1には別のcssを追加するなどしようかなと思っています。
※ 今は適用されていません。

返信ありがとうございます。

上記のh2以降をコピペして、投稿ページ下のカスタムCSSに張り付けて、
記事に見出し2と入力してみたのですが、
何も変わりはありません。。。
これはなぜでしょうか?
もしお分かりだしたらアドバイスいただけると幸いです。

お世話になります。

> h2以降をコピペして

とありましたが、
h2という文字以降のcssをコピペして~という意味ではなく、
「h2以降にcssを追加して」ということです。

h1にcssを適用してしまうと、ヘッダー上のh1までデザインが適用されてしまうので、
h2以降(見出し2~見出し6などという意味)の見出しにcssを追加してください。
ということです。

わかりづらい書き方で申し訳けありません・・・

ですので、

とりあえず、上記をそのまま丸ごと追加してみてください。
カスタムcssのフィールドに(もしくは、style.cssに直接)追加してから、
記事本文のh2にしたいテキストを「見出し2」にする。
そして、保存(投稿)してください。
すると、見出しにしたテキストにデザインが適用されていると思います。

返信ありがとうございます。。。

h2 {
margin:0 0 10px 0;
padding:2px 8px;
border-width:0 0 0 5px;
border-color:#029EBC;
border-style:solid;
background:#80CEDD;
color:#017589;
line-height:140%;
font-weight:bold;
}
をそのままカスタムCSSにコピペしました。

h2にしたいテキストを「見出し2」にするの意味が良く分からないのですが、

h2みたいな記述にするのか?
見出し2にすればいいのか・・・
良く分かっていなくて申し訳ありせん。

お世話になります。

> h2にしたいテキストを「見出し2」にするの意味が良く分からないのですが、

上記の件ですが、見出し2=h2です。
見出し2にしたテキストはh2になります。(ソースコードで<h2>タグに囲まれる)

見出し(h1~h6)はただ単に、デザインされたリードのようなパーツではなく、
HTML的にも検索エンジンがページの内容を把握する上必要な要素になります。
(※ 見出し(h1~h6 )は重要だという意見や、大して重要ではないという意見など様々ですが)

HTML的な要素なので、少し勉強しないとわからないかもしれません。
HTMLの基本なのでお調べになってください。

以下、見出しにする方法です。

例えば、「エッジプラス1テンプレート」という文字をh2にしたい場合、
「エッジプラス1テンプレート」の部分のテキストを反転させてから、
ビジュアルモードの「段落」と書いてあるドロップダウンメニューで「見出し2」を選択。

そのあとエディタのHTML(テキストモード)で見てみると、
下記のようにテキストがh2タグで囲われてると思います。

h2用のcssを追加しておけば、
見出し2(h2)にしたテキストに、そのcssが適用されます。

お世話になります。

やっぱりサイトを作成&運営しておくのであれば、
ある程度のHTMLの知識は必要になってきます。

ただHTMLやCSSやPHP、その他のスクリプトなどの知識がなくても
サイトが作れるのがwordpressです。

すべてのことを深く勉強しなくてもいいとは思いますが、
(いろいろ知ってたほうがサイトを作成しやすいですが)
wordpressの記事投稿エディタの中のボタンなど、
そのボタンがどういう使い方ができて、それはHTML的にどのようなものなのか、くらいを知っておくと
サイト構築するときに役に立つと思いますよ^^

コメントを残す