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

ライブドアブログは無料で使えて始めるのも簡単なので、利用している方も多いかと思います。

しかし、PCページは自由にデザインをカスタマイズしやすいのですが、スマホページは自由度が少ない！

その中でも、今回はPCページとスマホページ両方に反映される見出しデザインの変更の仕方をご説明します。

変更前と変更後
見出しのデザインを変更する
便利な使い方
1. 定型文の登録
2. 定型文を使うとき
過去に書いた記事には反映されるの？
見出しデザインの変更まとめ

変更前と変更後

変更するとどうなるかというと、

これがデザイン変更前のスマホページの見出しです。

文字が太く、大きくなるだけで、イマイチ……下手したら見出しって気づいてもらえないかも。

これがこうなります。

どうでしょう？だいぶ見栄えがよくなったんじゃないでしょうか。

ブログが見やすくなってカッコもよくなって、これはやるしかないｗ

あまり「CSS」などをいじったこと無い方は難しく感じるかもしれませんが、やることはそれほど難しくはないので、がんばってチャレンジしてみましょう。

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

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

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

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%);
}

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

もし、すでにパソコンサイトのほうで見出しデザインを変更している方は、それを流用していただいてOKです。

その場合「.article-body-inner h2. {」このように表記されてるかと思うので、これを「h2.midashi{」と変更しましょう。

メモ帳に上記のコードを貼り付けたら、上書き保存してファイル名を変更。

名前は何でもいいですが、拡張子も変更しましょう。

「〇〇〇.txt」の「.txt」の部分が拡張子です。

もし拡張子が表示されない場合は、パソコンの設定を変えます。

windowsだと「スタート」→「コントロールパネル」→「フォルダーオプション」→「表示」と開いて、下のほうにある「登録されている拡張子は表示しない」のチェックボックスをはずして「OK」をクリックすれば拡張子が表示されます。

※windowsのバージョンでやり方が若干違うかもしれません。

拡張子を表示できたら、「.txt」を「.css」に変更してください。

そうするとこんなファイルが出来上がります。

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

これで「CSSファイル」は完成です。

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

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

まず、ライブドアブログにログインして、メニューの中から「画像/ファイル」をクリック。

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

「画像管理」の画面が開いたら、「ファイル管理」のタブをクリック。

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

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

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

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

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

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

このような作業に慣れてない方は大変かと思いますが、もうちょっとです。がんばってください！

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

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

上の画像だと「livedoormidashi.css」。

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

この時のアドレス(赤枠の部分)をコピーして

上記のコードの「コピーしたアドレス」のところに貼り付けます。

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

少し面倒ですが、新しい記事を書くときは毎回これを貼り付けましょう。

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

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

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

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

こんな感じになります。

これで見出しデザインの変更は完了です。お疲れ様でした！

便利な使い方

先ほど作った

<link  rel="stylesheet" type="text/css" href="コピーしたアドレス">
<h2 class = "midashi">タイトル</h2>
<h3 class = "midashi">タイトル</h3>
<h4 class = "midashi">タイトル</h4>

これを「定型文」に登録しておくと、凄く使い勝手がよくなります。