クロの日記的ななにか

日常の出来事や気になったニュースなどを調べて感想を交えて書いています。

トップページ ブログカスタマイズ> スマホのブログの見出しデザイン変更方法 [ライブドアブログ]

このエントリーをはてなブックマークに追加

<スポンサーリンク>


忘備録的な記事です。

スマホで見出しデザインが反映されない問題の解決方法を記載します。

最近までスマホでの表示画面を確認していなかったので、まったく気づいていませんでした(^^;)

以前、見出しデザインの変更方法を紹介しました。

ブログの見出しデザイン変更方法 [ライブドアブログ]

上記をクリックして本来ならどのように表示されるのかを確認してみてください。

しかし、上記の記事のまま見出しデザインを設定するとスマホでこのように表示されます。
Screenshot_20170920-200828

反映されていませんね(^^;)

解決方法

解決にはまずCSSファイルというものを作成する必要があります。ライブドアブログにはCSSファイルのアップロード機能が存在するため、今回はそれを使って解決していきます。

CSSファイルの作成

すでに自分なりの見出しデザインを作っていることを前提とし、細かい理屈は抜きにして単純に問題を解決する方法だけを記載します。

見出しデザイン自体の作成方法はこちらで確認してください。

ブログの見出しデザイン変更方法 [ライブドアブログ]

CSSではここの(中略)の部分を変更しましたね。
.article-body-inner h2 {
(中略)
}

.article-body-inner h3 {
(中略)
}

.article-body-inner h4 {
(中略)
}

まずCSSからこの部分をコピーしてきてください。

これをメモ帳にでも張り付け、名前を「midashi1.txt」とでもつけておいてください。ここの名前はなんでもいいです。

この「midashi1.txt」に変更を行っていきます。

.article-body-inner h2.midashi {
margin: 0 0 1.5em; 
padding: 0.3em;
background: #4169e1;
color: #fff;
}
.article-body-inner h3 {
margin: 0 0 1.5em;
padding: 0.3em;
border-left: 7px solid #4169e1;
border-bottom: 2px solid #78A839;
}

.article-body-inner h
4 {
margin: 0 0 1.5em;
padding: 0.3em;
border-bottom: 2px dashed#78A839
}

上記は私の見出しデザインです。

赤文字の部分を削除して、青文字の部分を追加してください。

h2だけクラスを設定する必要がありますが理由は省略します。

青文字midashiがクラス名ですね。

最後に「midashi1.txt」の名前を「midashi1.css」に変更するとCSSファイルの完成です。

CSSファイルのアップロード

ライブドアブログの機能として存在するのでここでアップロードしてください。
スマホ用見出しデザイン


CSSファイルの使い方

アップロードした「midashi1.css」をクリックするとブラウザで展開されるのでこのアドレスをコピして下記の青文字の部分に張り付けてください。

<link  rel="stylesheet" type="text/css" href="コピーしたアドレス">

これを記事の本文中(先頭)に設置すればスマホ画面でも見出しデザインが反映されるようになります。

上記のアドレスを張り付けた物は定型文に設定しておくことをオススメします。


注意点

スマホに対応するための注意点が2つあります。

<h2>の見出しデザインの扱い

今回<h2>にはクラス(midashi)というものを追加しています。

それにともない、過去の記事本文中の<h2>も変更をする必要が出てきました。

具体的に記載するとこのようになります。

<h2>タイトル</h2>
 ⇩
<h2 class = "midashi">タイトル</h2>

<h3>以降は変更しなくてもスマホに反映されますが、<h2>は反映されないので面倒ですがすべて変更してあげてください。

CSSファイルを毎回必ず使うこと

記事を書く時、毎回毎回下記を入力しておく必要があります。

<link  rel="stylesheet" type="text/css" href="コピーしたアドレス">

これを記載していない場合、スマホ閲覧時には見出しデザインは反映されないので気を付けてください。

気になること

なぜか『カテゴリの最新記事』の欄まで変わってしまいました(^^;)

同じ『h3』だからかなぁ・・・

まあ、私はそこは別に気にならないんでいいんですが(笑)

まあ、時間ができたら戻せるなら何とか戻したいですね。

ブログランキングに参加しています!
気まぐれでポチってね!


人気ブログランキング
にほんブログ村 サラリーマン日記ブログへ
にほんブログ村

<スポンサーリンク>

このエントリーをはてなブックマークに追加

コメント

コメントフォーム
評価する
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット

↑このページのトップヘ