パソコンが好きになるブログ〜表技・裏技・便利技伝授!

北海道札幌市中央区 大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…


テーマ:

こんにちは、パソコンインストラクターの川上雄大です。

 

 

記事の中で見出しをこのように↓する

 

 

 

これは見出しです

 

 

記事を書いていますが↓

 

「見出し」をうまく使いましょう!

 

 

 

さらに、違った見出しのパターンを「見出しその2」として出してみますね。

 

 

 

見出しその2

 

<div style="margin:0; padding:0; border-bottom:2px solid #4dac26;"><span style="margin:0; padding:6px 12px; background:#4dac26; color:#ffffff; border-top-left-radius:6px;border-top-right-radius:6px;font-size:1.2em;font-weight:bold;display:inline-block;">見出しその2</span></div>

 

こんな感じの見出しもどうでしょうかね。

 

 


※記事アップ当初は、このような見出しにしていました↓

 

 

見出しその2

 

<div style="margin:0; padding:0; border-bottom:2px solid #4dac26;"><span style="margin:0; padding:6px 12px; background:#4dac26; color:#ffffff; border-top-left-radius:6px;border-top-right-radius:6px;font-size:1.2em;font-weight:bold;display:">見出しその2</span></div>

 

このタグですと、見出し下がはみ出しています。(しかし、スマホでははみ出していません。)

コメントにて、ご指摘をいただき、現在は下がはみ出していないタグに修正しております。

ご指摘いただきまして、ありがとうございます。


 

 

他の色のパターンはこちら↓

 

 

紺色(カラーコード:#000066)↓

 

見出しその2

 

<div style="margin:0; padding:0; border-bottom:2px solid #000066;"><span style="margin:0; padding:6px 12px; background:#000066; color:#ffffff; border-top-left-radius:6px;border-top-right-radius:6px;font-size:1.2em;font-weight:bold;display:inline-block;">見出しその2</span></div>

 

 

青色(カラーコード #0000ff)↓

 

見出しその2

 

<div style="margin:0; padding:0; border-bottom:2px solid #0000ff;"><span style="margin:0; padding:6px 12px; background:#0000ff; color:#ffffff; border-top-left-radius:6px;border-top-right-radius:6px;font-size:1.2em;font-weight:bold;display:inline-block;">見出しその2</span></div>

 

 

水色(カラーコード:#00ffff)↓

 

見出しその2

 

<div style="margin:0; padding:0; border-bottom:2px solid #00ffff;"><span style="margin:0; padding:6px 12px; background:#00ffff; color:#000; border-top-left-radius:6px;border-top-right-radius:6px;font-size:1.2em;font-weight:bold;display:inline-block;">見出しその2</span></div>

 

 

赤(カラーコード #ff0000)↓

 

見出しその2

 

<div style="margin:0; padding:0; border-bottom:2px solid #ff0000;"><span style="margin:0; padding:6px 12px; background:#ff0000; color:#ffffff; border-top-left-radius:6px;border-top-right-radius:6px;font-size:1.2em;font-weight:bold;display:inline-block;">見出しその2</span></div>

 

 

別の赤(カラーコード #e5004f)↓

 

見出しその2

 

<div style="margin:0; padding:0; border-bottom:2px solid #e5004f;"><span style="margin:0; padding:6px 12px; background:#e5004f; color:#ffffff; border-top-left-radius:6px;border-top-right-radius:6px;font-size:1.2em;font-weight:bold;display:inline-block;">見出しその2</span></div>

 

 

ピンク(カラーコード #ff1493)↓

 

見出しその2

 

<div style="margin:0; padding:0; border-bottom:2px solid #ff1493;"><span style="margin:0; padding:6px 12px; background:#ff1493; color:#ffffff; border-top-left-radius:6px;border-top-right-radius:6px;font-size:1.2em;font-weight:bold;display:inline-block;">見出しその2</span></div>

 

 

緑(カラーコード #008000)↓

 

見出しその2

 

<div style="margin:0; padding:0; border-bottom:2px solid #008000;"><span style="margin:0; padding:6px 12px; background:#008000; color:#ffffff; border-top-left-radius:6px;border-top-right-radius:6px;font-size:1.2em;font-weight:bold;display:inline-block;">見出しその2</span></div>

 

 

アメーバの緑色(カラーコード:#4dac26)↓

 

見出しその2

 

<div style="margin:0; padding:0; border-bottom:2px solid #4dac26;"><span style="margin:0; padding:6px 12px; background:#4dac26; color:#ffffff; border-top-left-radius:6px;border-top-right-radius:6px;font-size:1.2em;font-weight:bold;display:inline-block;">見出しその2</span></div>

 

 

オレンジ(カラーコード:#ff9933)↓

 

見出しその2

 

<div style="margin:0; padding:0; border-bottom:2px solid #ff9933;"><span style="margin:0; padding:6px 12px; background:#ff9933; color:#ffffff; border-top-left-radius:6px;border-top-right-radius:6px;font-size:1.2em;font-weight:bold;display:inline-block;">見出しその2</span></div>

 

 

紫(カラーコード:#800080)↓

 

見出しその2

 

<div style="margin:0; padding:0; border-bottom:2px solid #800080;"><span style="margin:0; padding:6px 12px; background:#800080; color:#ffffff; border-top-left-radius:6px;border-top-right-radius:6px;font-size:1.2em;font-weight:bold;display:inline-block;">見出しその2</span></div>

 

 

黒(カラーコード:#000000)↓

 

見出しその2

 

 

<div style="margin:0; padding:0; border-bottom:2px solid #000000;"><span style="margin:0; padding:6px 12px; background:#000000; color:#ffffff; border-top-left-radius:6px;border-top-right-radius:6px;font-size:1.2em;font-weight:bold;display:inline-block;">見出しその2</span></div>

 

 

お、これ使えそう!というのがありましたら、ご自由にどうぞ~!

 

 

 

<追記>

ちなみに、この見出しはSEOに有効な見出し(H1タグ、H2タグ、H3タグ)を使った見出し、ではありません。

あくまでも、見出し風見出し、ということで^^

 

また、コメントにて、色々とご指摘をいただきまして、ありがとうございます。

当初のアップしましたHTMLタグから修正・変更させていただきました。

 

感謝申し上げます。

 

 

 


以上、アメブロ便利ワザでした。


LIDS札幌・ライフデザインスクール
川上 雄大

 

 

 

 

川上雄大

 

いいね!した人  |  コメント(9)  |  リブログ(1)

川上雄大・パソコンインストラクターさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

SNSアカウント