ライブドアブログでスマホの『見出し』のデザインを変更する方法

変更前と変更後

見出しのデザインを変更する

それではここから具体的に説明していきます。

CSSファイルを制作する

まずはパソコンでメモ帳を開きます。

メモ帳を開いたら、コチラをコピーして貼り付け。

h2.midashi{
margin: 0 0 1.5em;
padding: 0.8em;
background: #87cefa;
color: #fff;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}h3.midashi {
margin: 0 0 1.5em;
padding: 0.3em;
border-left: 7px solid #87cefa;
border-bottom: 2px dashed #87cefa;
}
h4.midashi {
background: linear-gradient(transparent 70%, #87cefa 70%);
}

これをコピーしてそのまま使うと、先程紹介したブルーの見出しと同じデザインにすることができます。

名前は何でもいいのですが、今回は「livedoormidashi.css」という名前にしてみました。

CSSファイルをアップロードする

次に、作った「CSSファイル」をライブドアブログにアップロードします。

もしくは左サイドバーから。

「ファイル管理」画面で、「フォルダを作る」をクリック。

名前を入力して決定のボタンをクリックします。

名前は何でもOKです。今回は「CSS」にしました。

①先ほど制作した「CSS」のフォルダをクリックして、②「アップロード」をクリック。

「アップロード」をクリックしたら、「CSSファイルを制作する」で作った、ファイル(livedoormidashi.css)を選んでアップロードします。

これで「CSSファイル」のアップロードは完了。

アップロードしたCSSを記事本文で使えるようにする

「ファイル管理」の画面で、先ほどアップロードした「CSSファイル」をクリックします。

すると、ブラウザにアップロードされたCSSのコードが表示されます。

これを記事を書く際に、「HTMLタグ編集」で記事本文の一番上に貼り付ければ準備は完了です。

見出しの、h2・h3・h4を挿入する

それでは実際に見出しを記事本文に入れていきましょう。

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

これを記事本文に入れると

便利な使い方

先ほど作った

定型文の登録

こんなふうに入力しておきましょう。

定型文を使うとき

上記画像の赤枠の部分をクリックすると

こんな感じで定型文を呼び出せます。

過去に書いた記事には反映されるの？

残念ながらすでに書いてある記事には反映されません。

見出しデザインの変更まとめ