ライブドアブログは無料で使えて始めるのも簡単なので、利用している方も多いかと思います。
しかし、PCページは自由にデザインをカスタマイズしやすいのですが、スマホページは自由度が少ない！
その中でも、今回はPCページとスマホページ両方に反映される見出しデザインの変更の仕方をご説明します。
変更前と変更後
変更するとどうなるかというと、
これがデザイン変更前のスマホページの見出しです。文字が太く、大きくなるだけで、イマイチ……下手したら見出しって気づいてもらえないかも。
これがこうなります。
どうでしょう？だいぶ見栄えがよくなったんじゃないでしょうか。
ブログが見やすくなってカッコもよくなって、これはやるしかないｗ
あまり「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のコードが表示されます。
この時のアドレス(赤枠の部分)をコピーして
<link rel=”stylesheet” type=”text/css” href=”コピーしたアドレス”>
上記のコードの「コピーしたアドレス」のところに貼り付けます。
これを記事を書く際に、「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>
これを「定型文」に登録しておくと、凄く使い勝手がよくなります。
定型文の登録
「ブログ設定」→「定型文」→「新しい定型文を作る」で登録できます。
こんなふうに入力しておきましょう。
登録するとこんな感じ。
定型文を使うとき
上記画像の赤枠の部分をクリックすると
こんな感じで定型文を呼び出せます。
使いたい定型分を選んで「ブログに貼る」をクリックすれば、記事本文に挿入されます。
これだと、わざわざ「HTMLタグ編集」を開かなくても見出しなどが挿入できるのでとても便利！
時間効率アップのためにも、ぜひ定型文登録はしておきましょう。
過去に書いた記事には反映されるの？
残念ながらすでに書いてある記事には反映されません。
なので、過去に書いた記事の見出しのデザインを変更するには、すべての記事で先ほどの作業を行わないといけません。
ですので、すでに見出し入りの記事を書いている場合は地道にタグを入力していきましょう。
ぼっちの場合は、すでに150記事くらい書いていたため、この作業が一番大変でした(泣)
見出しデザインの変更まとめ
これまでブログの「CSS」をいじったこと無い方は少し難しかったかもしれませんが、一度やってしまえば後は定型文から選んで入れていくだけなのでとっても便利です。
見出しを変えるだけで、ブログの見栄えがグッとよくなりますし、見に来てくれた読者の方も読みやすくなるので、ぜひやってみてください。
コメント