【ライブドアブログ】スマホ版のCSSをカスタマイズする方法

ブログ

こんにちは。

ライブドアブログは無料ブログの中でもカスタマイズ性が高く、使いやすいブログサービスだと思います。

ですが、ライブドアブログは「スマホ版のCSSが適用されない」という問題点があります。

そこでこの記事では、ライブドアブログでもスマホのCSSをカスタマイズできる裏ワザを紹介していきます。

PCだけでなくスマホのCSSも変更したいと思っている方は、ぜひ参考にしてみてください。

スポンサーリンク

ライブドアブログではスマホ版のCSSが編集できない?

despaired-2261021_1280

一般的にライブドアブログでは、スマホ版のCSSが編集できないとされています。

このブログを例に見ていきましょう。

まずこれが、PCから見たときの見出しのデザインです。

bandicam 2020-03-19 15-30-32-159

そしてこれが、スマホから見たときの見出しのデザインです。

bandicam 2020-03-19 16-51-06-407

パソコンのCSSがスマホでは適用されていないことが分かりますね。

これはライブドアブログの仕様です。
PCのカスタマイズ画面にはCSSの編集項目がありますが、スマホにはありません。

最近だとブログ訪問者の80%ほどがスマートフォンからですし、スマホ版の見た目が質素なのはとても困ります。

そこで、CSSを記事内で直接読み込むことによりこの問題を解決していきます。



スマホ版のCSSをカスタマイズする

bandicam 2020-03-19 17-45-00-544

今回おこなうのは、スマホ用のCSSファイルをアップロードしてそれを記事内から読み込む方法です。

やり方は次の通りです。順に解説していきます。

  1. スマホ用のCSSファイルを作る
  2. CSSファイルをアップロードする
  3. 記事内でCSSファイルを読み込む

スマホ用のCSSファイルを作る

まずはスマホ用のCSSファイルを作ります。

適当なフォルダに好きな名前でCSSファイルを作成してください。

bandicam 2020-03-19 15-37-54-288

これをテキストエディタで編集していきます。
今回はVisual Studio Codeを使用しましたが、別にメモ帳でもかまいません。

編集するといっても一からつくるわけではなく、ほとんどはPC版のCSSをコピーするだけなので簡単です。

それでは、ライブドアブログの設定からPCのカスタマイズ画面を開きます。

bandicam 2020-03-19 15-23-43-958

CSSの編集画面から、スマホ版にも適用したい部分だけをコピーします。

bandicam 2020-03-19 15-24-14-461

例えば、

  • 見出しタグ(h1,h2,h3,h4…)
  • リスト(ul,ol)
  • 引用(blockquote)
  • 表(table)

このあたりですかね。

コピーしたら先ほどのCSSファイルに貼り付けて保存しましょう。

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

それでは、完成したCSSファイルをアップロードしていきましょう。

管理画面左のメニューの 画像/ファイル を選択します。

適当な名前(cssなど)のフォルダを作り、その中に先ほど作ったCSSファイルをアップロードします。

(なぜか2つありますが気にしないでください。)

bandicam 2020-03-19 15-37-37-910

アップロードしたファイル名をクリックすれば、ブラウザ上で中身を確認することができます。

これでCSSファイルのアップロードは完了です!

注意事項:ファイルの上書きについて

CSSを編集したので上書きしたいというケースがあると思います。

ただ、私の環境だと削除ボタンを押してから実際にファイルが削除されるまでかなり時間がかかりました。
まだ完全に削除されていない段階で同じ名前のファイルをアップロードしてしまうと、前のファイルが残ったままになって上書きされないという問題が発生します。

そのため、ファイルを上書きしたい場合はファイル名を前回と違うものにしてアップロードすることをおすすめします。

記事内でCSSファイルを読み込む

最後に、記事内でCSSファイルを読み込んでいきます。

記事編集画面を開き、記事の冒頭などに以下のコードを入力します。

<link href=”★” type=”text/css” rel=”stylesheet”>

★の部分は先ほどアップロードしたCSSファイルのURLに置き換えてください。

さっきのファイル管理画面からファイル名をクリックするとURLを確認することができます。

http://sample.com/css/smartphone.css

こんな感じになっていると思います。

これを、ブログ内の全記事に手作業で入力していきます…しんどいです。

定型文などに保存しておきましょう。

無事成功すると、スマホでもPCのようにCSSが適用されているはずです。

bandicam 2020-03-19 16-51-27-081

過去の記事を一括で編集

こんな方法もあるみたいです。
私は今回使っていないので解説は割愛します。

過去の記事内容を一括編集 : ライブドアブログのヘルプ(PC向け)
インポート/エクスポート機能をお使いいただくと、過去の記事内容を一括で編集することができます。便利な使い方エクスポート機能で書き出されるファイルはMT(MovableType)形式のテキストファイルになります。テキストエディタによる一括編集が可能です。外部参照しているフ

スポンサーリンク



メディアクエリを使ってPCとスマホで異なるCSSを適用する

ron-mcclenny-0AY15U_H-3U-unsplash

メディアクエリを使って、PCとスマホで異なるCSSを適用することもできます。

いわゆる”レスポンシブデザイン”というやつですね。

  • PCとスマホで異なるCSSを適用したい
  • PC版のCSSをコピーしたけどスマホ版だと表示がおかしい

こういう方は試してみてください。

1, 個別記事ページのHTMLに以下のコードを入力する。

headタグの最後に、これを貼り付けてください。

<meta name=”viewport” content=”width=device-width,initial-scale=1″>

bandicam 2020-03-19 15-49-06-880

これでメディアクエリを使う準備は整いました。

2, スマホ版のCSSを編集する。

メディアクエリを書いていきます。

@media (max-width: 700px) {

ここにCSSを書く

}

このように、CSSを挟むように書けばOKです。

画面サイズ(横幅)が700px以下のとき、このCSSを適用しますよ~という意味です。

本当は700pxじゃなくてもっといい数値があるはずですが、めんどくさいので私はこれにしています。

詳しく知りたい方は「メディアクエリ ブレイクポイント」などで検索してみてください。

これで、PCとスマホに別々のCSSを適用することができます。



まとめ

以上、ライブドアブログでスマホ版のCSSをカスタマイズする方法でした。

これからはモバイルファーストの時代なので、スマホのデザインはしっかりカスタマイズしておきましょう!

(いずれ管理画面からスマホのCSSを編集できるようになればいいですね…)

コメント

タイトルとURLをコピーしました