見出しの挿入方法と種類一覧2019年1月20日SANGOではあらかじめ40種類近くの見出しを用意しています。HTMLとCSSの知識が無くても、ビジュアルエディタから簡単に使用することができます。ブログに個性を出すために、ぜひご活用ください。h2などと書こうGutenbergエディタを使っている場合こちらの記事をご覧ください。通常の見出しの使い方まずは、通常の見出しの使い方から解説します。見出しにしたい部分のテキストを選択します。いうドロップダウンをクリックします(なお、このドロップダウンはビジュアルエディタのときのみ表示されます。テキストエディタでは表示されません)。すると、見出し2〜見出し5の選択肢が表示されるかと思います。この中から使いたい見出しを選びましょう。MEMO見出しの使用ルールについては、こちらの記事を参考にしてみてください。↑こちらは見出し2を選んだときの表示です。初期設定ではシンプルなものにしています。必要に応じてカスタマイズして頂ければと思います。HTMLは以下のようになります。↑こちらは見出し3を選んだときの表示です。HTMLは以下のようになります。↑こちらは見出し4を選んだときの表示です。HTMLは以下のようになります。↑こちらは見出し5を選んだときの表示です。HTMLは以下のようになります。HTML<h5>見出し5の表示例</h5>見出し1は無いの?見出し1(h1)は記事のタイトルで使われています。本文では基本的に使わない方が良いため、スタイル設定には表示されないようにしてあります。サルワカくん初期設定の見出しのスタイル(色を変えたり、線をつけたり...)を変える方法については後ほど解説します。SANGOのオリジナル見出しを使おう上で紹介した見出し以外にSANGOでは多数の見出しが用意されています。その前に、見出しにしたいテキストをドラッグで選んでおきましょう。選択できたら、スタイルをクリックします。この中の[見出し]という項目にカーソルを当てると、見出しの選択肢がずらっと表示されます。見出し名しか表示されないので、お手数ですがこちらのページを参考に使用する見出しを探して頂ければと思います。見出し8:オレンジ見出しをクリックするとエディタ上にこのように見出しが挿入されます。MEMO挿入した見出しにはpタグが使われています。]をクリックし、使いたい見出しレベルを選びましょう。このようにして好きなタグで各デザインの見出しを使うことができます。サルワカくんSEOのために無理して見出しタグに変える必要はないかと思います。SEOに強いと言われている「NAVERまとめ」だと、本文に見出しタグ(h2やh3タグ)は一切使われていません(ぜんぶpタグ)。オリジナル見出しの種類ここからSANGOで使用できるオリジナル見出しを一覧で紹介していきます。テキストエディタなどで記事を書く方は、クラス名をコピーして、pタグやh2、h3タグなどに適用して頂ければと思います。見出し1:下線シンプルな下線の見出しです。hh1">~</p>※h2やh3タグにしてもOK見出し2:点線下線カスタマイザー(ダッシュボード⇒外観⇒カスタマイズ⇒色)で登録したメインカラーが文字と下線の色となります。メインカラーを赤にしていたら、色は赤になります。メインカラーが線の色となります。線・文字ともにメインカラーが使われます。上級者向けクラス名の「main-◯」を「accent-◯」に入れ替えると、アクセントカラーが使われるようになります。main-bdr">~</p>見出し5:塗りつぶし背景が塗りつぶされた見出しです。カスタマイザーで登録した下地色が背景色に使われます。pastel-bc">~</p>見出し6:囲い枠テキストが枠で囲まれたタイプのものです。メインカラーが文字と枠線に使われます。背景色にはカスタマイザーで登録した下地色が、下線にはメインカラーが使われます。main-bdr">~</p>見出し8:オレンジ見出しやわらかい雰囲気の橙色のデザインです。登録色に関わらず、この色になります。hh8">~</p>見出し9:影付き塗りつぶし影付きの塗りつぶし見出しです。カスタマイザーで登録した下地色が背景色に使われます。左側が丸まったタグ風の見出しです。カスタマイザーで登録した下地色が背景色に使われます。下側向きのふきだし型見出しです。カスタマイザーで登録された色とは関係なく、この配色になります。かわいいステッチ付のテープのようなデザインです。カスタマイザーで登録された色とは関係なく、この配色になります。hh12">~</p>見出し13:ステッチ白ステッチが白になったバージョンです。カスタマイザーで登録された色とは関係なく、この配色になります。hh13">~</p>見出し14:角がはがれかけ角がはがれかけたバージョンです。カスタマイザーで登録された色とは関係なく、この配色になります。hh14">~</p>見出し15:片側折れ片側が折れたようなデザインの見出しです。カスタマイザーで登録された色とは関係なく、この配色になります。hh15">~</p>見出し16:片側折れ(別色)別色のパターンです。カスタマイザーで登録された色とは関係なく、この配色になります。途中で色が変わる下線付きのデザインです。カスタマイザーで登録された色とは関係なく、この配色になります。hh17">~</p>見出し18:色が変わる下線2さきほどと別色のパターンです。カスタマイザーで登録された色とは関係なく、この配色になります。hh18">~</p>見出し19:下線やじるし先端が尖った下線付きの見出しです。カスタマイザーで登録された色とは関係なく、この配色になります。hh19">~</p>見出し20:背景ストライプ背景がストライプに塗られたデザインです。カスタマイザーで登録された色とは関係なく、この配色になります。hh20">~</p>見出し21:背景ストライプ2さきほどのデザインに加えて左側にボーダーがついたものです。カスタマイザーで登録された色とは関係なく、この配色になります。hh21">~</p>見出し22:ストライプ+上下線ストライプに加えて上下線がついたものです。テキストは中央寄せになります。カスタマイザーで登録された色とは関係なく、この配色になります。hh22">~</p>見出し23:ストライプの下線ストライプの下線です。カスタマイザーで登録された色とは関係なく、この配色になります。hh23">~</p>見出し24:両端線のばし両端に線を伸ばしたタイプの見出しです。class=”center”>見出し文とタグ</div>というようにクラス名“center”のdivタグではさみます。線と線が交差する見出しです。スマホで見た方がややオシャレに見えます。hh25">~</p>見出し26:大カッコで囲う少し大きめの括弧で囲うシンプルな見出しです。見出しの一文字目だけ大きくなるデザインです。右側に向かって少しずつ消えていく下線をつけたものです。カスタマイザーで登録された色とは関係なく、この配色になります。hh28">~</p>見出し29:背景グラデーション背景にグラデーションを使って、段々と消えていくような表現にしてみました。カスタマイザーで登録された色とは関係なく、この配色になります。hh29">~</p>見出し30:チェックマーク見出しの先頭にチェックマークがつきます。ビジュアルエディタ(投稿画面)ではアイコンは表示されないのでご注意ください。カスタマイザーで登録された色とは関係なく、この配色になります。hh30">~</p>見出し31:シェブロンマークこちらもFontAwesomeを使っています。hh31">~</p>見出し32:フラット塗りつぶしこちらもFontAwesomeを使っています。hh32">~</p>見出し33:角丸ぬりつぶし角を丸くして少しかわいさを出しています。hh33">~</p>見出し34:肉球ゆるい雰囲気を出したいときにどうぞ。hh34">~</p>見出し35:リボン(1行のみ)2行以上になるとデザインが崩れてしまうので、短めのテキストのときだけご使用くださいませ。class=”center”>〜</div>で挟めばOKです。hh35">~</p>見出し36:片側リボン片側のみリボン風の形になった見出しです。こちらも1行で収まるテキストのときのみご使用ください。hh36">~</p>Q&A形式で使える見出し(クエスチョンの方)こちらに回答を書きますVer1.3.2より追加された見出しです。他の見出し同じくビジュアルエディタのドロップダウンから挿入できます。hha">回答</p>見出しを自分好みにカスタマイズするには?CSSを編集することになります。この場合、子テーマを用意したうえで、編集していくのがおすすめです。見出しをカスタマイズするときに知っておきたいことCSSを学ぶつもりはないという方も、色の変え方くらいは覚えておいても良いのではないかと思います。CSSでは、各パーツの色は以下のような書き方をして指定します。.hh28やh2などの見出しタグの前に、半角スペースを空けて.entry-contentとつけるのがポイントです。}CSSでは色は、色コード(#F89174のような書き方をよくします)や、色名(yellowとか)で指定します。「文字色を白(色コード#FFF)にして、背景色をオレンジ(orange)にして、線の色を黒にしたい(色コード#000)」場合には、以下のような書き方をすることになります。色;という書き方をされることもよくあるので注意しましょう。書いておきながらですが、これだけじゃイマイチピンと来ないと思います。時間に余裕があるのであれば、こちらの記事をざっと流し読みしてみてください。5〜10分ほどでCSSの基本がつかめるはずです。{〜}などと書くと、トップページの記事一覧カードに使われているh2タグに対しても、カスタマイズ内容が適用されてしまいます。{〜}と書くことです。これにより、記事内のh2タグに対してのみカスタマイズが適用されます。本当に初歩的な質問失礼します。前回の質問への丁寧な回答ありがとうございました。まで作業を行ったのですが段落のドロップダウンやWindowsのワードのようなスタイルなどの表示がありません。様々なサイトを見たのですが解決方法がわかりませんでした。2019/11/24見出しの肉球アイコンをダイヤモンドアイコンに変更したいサルワカ様、いつもお世話になっております。すみません、初歩的な質問になってしまうことを知りつつも、つまづいてしまいましたので、教えてくださいませ。お手隙の際に、御指南いただけますと幸いです。