月は魚に日は乙女タイトル画像

スマホで表示される見出しを作りたい。[livedoorブログ初心者]

livedoorブログ作業のアイキャッチ画像

livedoorブログで記事に見出しを作っても、PCではアンダーラインなどが入って見出し表示になっているけど、スマホだとそれが表示されずに全然見出しっぽくない。

有名ブログさんの所では、スマホで見ても装飾された見出しが表示されてたから、何か手があるはずと思ってた。

ああいう風に作りたいと思って調べた結果、おしゃれには出来なかったけど見出しは作れたので、そのやり方を書いてみる。

livedoorブログのテンプレートはPCは「法人用02」スマホは「法人用」を使用。

ここで作る見出しのデザイン

スマホから見た見出し

スマホの見出し表示画像

PCから見た見出し

PCでの見出し表示画像

作業の流れ

  1. スマホの見出し表示用のCSSを作る
  2. livedoorブログにCSSをアップロードする
  3. 記事に入れる見出し用の記事内コードを作る
  4. 記事内コードを定型文に登録する(毎回コピーする手間を省く為)
  5. 記事内コードを記事に入れる
  6. 見出しタグを使う

記事内に入れるコードは、毎回同じで記事ごとに入れないといけないので、定型文にしておくと効率的。

  • スマホの見出し表示のデザインを指示する「CSS」
  • そのCSSを適用するように指示する「記事内コード」
  • 見出しタグ

この3つがセットでスマホの見出し表示ができる。

CSSファイルを作る

  1. CSSコードをテキストにコピーして保存する
    ※テキストのファイル名は英字表記(midashiとか)

    ※文字コードをUnicodeで保存する

 

【CSSコード コピペOK】

h2 {
margin: 0 0 1.5em;
padding: 0.3em;
border-top: solid 3px #7f7f7f;
border-bottom: solid 3px #7f7f7f;
}

h3 {
margin: 0 0 1.5em;
padding: 0.3em;
border-bottom: solid 3px #7f7f7f;
}

h4 {
margin: 0 0 1.5em;
padding: 0.3em;
border-bottom: 2px dashed #7f7f7f;
}

 

【テキストの保存の仕方】

テキストで保存する時の図解

自分の作ったCSSでは”h2からh4までの見出し”しか設定していない。

理由は見出しの下に階層が増えると読みにくくなるので、最高でもh4までと決めているから。

まだ下の階層が必要な人はh4の次にh5を作ってコードを増やせばいい。

※以下のサイトにコードが沢山あるので、ここからコピーさせて貰った。

「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」サルワカ

上手く表示できなかったものもある

見出しを作るコードを他にも試したけど、元々の法人02テンプレートのデザインの上にさらにデザインを重ねるたみたいになって上手く表示ができないものもあった。

自分の知識では解決方法が分からなかったので、「適用→表示おかしい→別のにする」を繰り返す力技で乗り切って作ったのが今のCSS

表示が変な時に、何がどう影響してそうなっているかの解明と解決は、やっぱり専門知識がないと難しいね。

元々のテンプレートのCSSはいじらない

以下のブログ記事にあったけど、livedoorブログの設定の中にあるCSSをいじっても、記事のスマホ表示は変わらないそう。

「社内SEという仕事と俺」※最下段の余談の所

そもそもコード等に詳しくない人(自分もそう)が大元のCSSをいじると、意図せずデザインを崩してしまったりするので(経験有り)、あまりお勧めできない。

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

livedoorブログの[画像/ファイルの所のファイル]から[ファイル管理]タブを選び、アップロードする。

アップロードは1回でいい。

ファイル名横の[名前の編集]をクリックして、末尾.txtの所を.cssに変えて決定

拡張子をtxtからcssへ変える図解

CSSファイルのアドレスを調べる

  1. ファイル名のをクリックする
  2. 新しいタブが開くのでアドレスバーにCSSファイルのアドレスが出る
    ※記事内コードにアドレスをコピーするのでタブはそのままにしておく

独自ドメインにしてると多少違ってくるけど、多分こんな風なアドレスになってると思う。

http://blog.livedoor.jp/ブログアドレス/CSSのファイル名.css

記事内に入れるコードを作る

<link rel=”stylesheet” type=”text/css” href=”ここへコピーしたアドレスを入れる“>

※コピペOK

CSSのタブに出ているアドレスをコピーしてlink href=の次に入れる。

このコードは毎回入れないといけないので、定型文にしておくと作業が早い。

記事内コードを定型文に登録する

定型文の登録の仕方は以前の記事で書いるので、こちらをどうぞ。

livedoorブログ作業のアイキャッチ画像
ライブドアブログのツールにある[定型文]機能。 定型"文"じゃなくて"コード"でもいいので ブログでよく使うコードを登録して ...

※定型文登録が難しいなら、結局はコードを記事内にコピーすればいい事なので、手作業でコードをコピーして張り付けをすればいい。

記事内コードを記事に入れる

  1. 記事画面で[HTMLタグ編集]に切り替える
  2. 定型文機能を使って「記事内コード」を記事へ入れる

※定型文登録をしていないなら、「記事内コード」をコピーして記事内に張り付ける。

お勧めの入れ場所は記事の頭

  • 最初に入れると決めていれば使い忘れが減る。

自分も記事を書くときに忘れがちだったから、タイトルしか決まってないような下書きの時に、先にコードを入れておいた。

余談だけど自分がWordプレスに引っ越した時、記事内に入れたコードを削除する事になったから、入れ場所を固定してると見つけやすくていい。

記事に見出しタグを使う

[HTMLタグ編集]画面で、見出し文の最初と最後に入れる。

<h2>見出し</h2>

<h3>見出しの下</h3>

<h4>見出しの下の下</h4>

以上を記事の見出し毎に、使っていく。

大きい見出しのh2だけを何回も使って、記事を書いても大丈夫。

見出しタグの種類

見出しタグはh1~h6まであるけど、h1はページ内に1つだけで主にタイトル等に使用するので、記事内の見出しはh2~h6を使うことになる。

詳しくは以下のサイトに図解で説明されていて、読むと理解しながら使えるのでお勧め。

「【HTML】見出しタグの使い方:h1〜h6はどう使い分ける?」サルワカ

 

【結論】見出しがあると見やすい

手間はかかるけど、やっぱり見出しがあると見やすくていいね。

当時は、ネットで見かけたカッコいいブログと同じデザインのものを作りたいって、四苦八苦してたな。

色々な点(主に知識)で出来ない事がほとんどだったけど。

思い起こせば、遠くに来たもんだ。

まあ、ブログ書けるまでの道のりが超難関だったけどね、Wordプレス。