WEB記事の見出し
非常に使い勝手の良いライブドアブログですが、SP(スマホ)表示がお粗末なことだけが不満・・・


と思っている方は私だけではないのではないでしょうか。


PC表示は以前からCSSを編集して装飾なども多少、工夫をしていました。
ところが、そのCSSもSP表示はまた別物


別物だけならまだしも、ある一部はどういじっても思うように反映されない。
(私もエンジニアではないので技術が追いついていないだけかもしれませんが)


特に「h2、h3タグ」などの見出しはCSSを何をどういじっても反映されませんでした。

WEBで検索するとスマホ表示でもきちんとCSS反映が成功してる方も

css
WEB上で検索すると、ライブドアブログのSPモードでもCSSが反映され、オリジナルの装飾見出しの表示に成功している方もたくさんいるようです。


私もその方法にならって、スマホでも装飾した記事画面が反映できるように何度もトライしました!それが以下の手順。

  1. CSSのスタイルシートを作成する
  2. それをライブドアブログCMSの管理ページ内「画像/ファイル」管理の「ファイル管理」にアップロードする
  3. アップロードしたCSSスタイルシートのURLをコピー
  4. 記事の中にCSSを読み込むリンク(3のURL)コードを書く

この方法でもCSS(見出し)が反映されなかったので数通りの方法を試しました

cssがまったく反映されない
ネット検索では成功されている方が多い方法を試してもうんともすんとも言わない私のライブドアブログ。


いろいろ調べてCSSのスタイルシートもおよそ10通りぐらいつくったけどダメ。


特に「これならいける!」と思ったのにダメだったのがこの2つ。

  • スタイルシートの頭に「@charset "utf-8";」の一行を入れる
  • 見出しのコードが「.article-body-inner h2{ 」だと反映されないというので「#article-contents h2」と書き換える

PC表示でベースになっているCSSを書き換えてもダメ。
「それなら!」とPCとSPでまったく別の装飾となるCSSの設定を試みましたがダメでした。


実は、このチャレンジは1年前から定期的におこなっており・・・


さすがにもう今回ばかりはお手上げ。「これは仕様だ」とCSSをいぢるのを諦めました。
そこで!

もうCSSには頼らない!HTMLだけで装飾された見出しはできないか!?

html
CSSを使った見出しづくりが何をやってもあまりにうまくいかないもので、ライブドアブログのスマホ表示でCSSを使った見出しづくりを断念しました(苦笑)


ですが、見出しづくりをあきらめたわけではありません!
一番、汎用性の高い「HTMLのみ」でデザインしようと。


なんとかそこに見出しのタグも埋め込めればSEO的にも問題ないだろうし。
ということで、試行錯誤の末にこれに成功しました!

私が見出しづくりに成功した「HTML見出しコード」

簡単に説明すると、<div style>タグの中にデザインコード(プロパティ、値)を入れこみ、それをさらに<h>タグで囲むことで見出しとして認識させながらデザインをカスタマイズするという方法です。


すっごく端折った説明をすると(苦笑)、CSSはどこかに設置したファイルを「ここに読み込ませますよ〜」という指示にしてHTMLに埋め込むことで使用ができます。


一方、<div style>タグとは、上記の読み込ませるはずのCSSを直接書き込んでしまって使えるようにすると言ったイメージ。

実際にやってみるとこんな感じです

例えば以下のコードを反映すると、画像のようなデザインの見出しになります。
青文字の部分がデザインコードです。

<h2><div  style="padding:  15px 10px;  margin:0px 0px 10px 0px;  background: #99CCFF; border-radius:10px;">見出し作成テスト</div></h2>
見出しサンプル

<h○></h○>で囲むことで、見出しとして成立させています。
見出しとしての認識、フォントサイズはもともとライブドアブログに組み込まれている仕様のまま。


見出しのデザイン以外の部分について、自分はライブドアブログの仕様で充分だったのでそのまま使用していますが、このあたりも変更したい場合はデザインコードの中にその指示を入れこめば反映されますよ。

CSSで反映したかったデザインも見事に再現できる!!!

shutterstock_695759755
CSSでデザインを反映させようと思っていた見出しも再現できる可能性が高いです!


ちなみに私のブログで使用している↑のh2見出しも、某サイトで公開されていたCSSデザインを使用させていただいています(笑)

CSSのデザインをHTMLで反映する方法

こちらも基本的には<div style>タグの中にデザインを書き込むかたちになります。


私のブログで言えば、上記の「水色背景・ミシンの縫い目枠」のh2見出し。
こちらをCSSで書くととこんなコードになります。

h2 {
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 1px #96c2fe;
  padding: 0.2em 0.5em;
  color: #454545;
}

青字の部分がデザインコード。
ここをまるっと<div style>タグの中に入れこみます。

そして、その<div style>タグを<h>タグで囲むとこのようにデザインされたh2見出しに♪

<h2><div  style=" background: #dfefff;  box-shadow: 0px 0px 0px 5px #dfefff;  border: dashed 1px #96c2fe;  padding: 0.2em 0.5em;  color: #454545; ">CSSで反映したかったデザインも見事に再現できる!!!</div></h2>
CSSデザインの見出しをHTMLで再現する

いくつかの要素が必要な複雑なCSSを反映するには

吹き出しやリボンなどのデザインは、四角+三画の組み合わせであったり、いくつかの形がくっついてデザインが完成されていますよね。


その分、CSSも「befor」や「after」コードなどを使った、ちょっと複雑で長いコードにする必要があります。


ですが、そんなCSSでも直書きコードの見出しがつくれます!

<span style>タグと組み合わせる

リボン風デザイン
例えばこんなリボン風のデザイン見出し。CSSで書くとこんなコードです。

h2 {
  position: relative;
  padding: 0.5em;
  background: #a6d3c8;
  color: white;
}

h2::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}

複数の図形が合わさったデザインなので、その分、コードも長いですよね。
HTMLで直書きする場合は、「before」部分を<span style>タグで書きます。

<h2><div  style="position: relative; padding: 0.5em; background: #a6d3c8; color: white;">リボン風の見出しデザイン
<span  style="position: absolute;content: ''; top: 100%; left: 0; border: none;border-bottom: solid 15px transparent; border-right: solid 20px rgb(149, 158, 155)">
</span>
</div></h2>
リボン風デザイン

CSSから<div style>に抜き出す部分を青字、<span style>に抜き出す部分をオレンジで記しました。
ふたつのタグで構成することで、ちょっと複雑なデザインのCSSコードも反映できます。

これでライブドアブログでCSSの悩みから解放!

この方法を使えば、ライブドアブログでSP表示でもデザイン性豊かな見出しや枠を使用できます。


実際にライブドアブログの中で活用していくにはどのうように設定していけばいいかは以下の関連記事でご紹介するので、こちらもチェックしてみてくださいね^^

関連記事