こんにちは。
ライブドアブログは無料ブログの中でもカスタマイズ性が高く、使いやすいブログサービスだと思います。
ですが、ライブドアブログは「スマホ版のCSSが適用されない」という問題点があります。
そこでこの記事では、ライブドアブログでもスマホのCSSをカスタマイズできる裏ワザを紹介していきます。
PCだけでなくスマホのCSSも変更したいと思っている方は、ぜひ参考にしてみてください。
ライブドアブログではスマホ版のCSSが編集できない？
一般的にライブドアブログでは、スマホ版のCSSが編集できないとされています。
このブログを例に見ていきましょう。
まずこれが、PCから見たときの見出しのデザインです。
そしてこれが、スマホから見たときの見出しのデザインです。
パソコンのCSSがスマホでは適用されていないことが分かりますね。
これはライブドアブログの仕様です。
PCのカスタマイズ画面にはCSSの編集項目がありますが、スマホにはありません。
最近だとブログ訪問者の80%ほどがスマートフォンからですし、スマホ版の見た目が質素なのはとても困ります。
そこで、CSSを記事内で直接読み込むことによりこの問題を解決していきます。
スマホ版のCSSをカスタマイズする
今回おこなうのは、スマホ用のCSSファイルをアップロードしてそれを記事内から読み込む方法です。
やり方は次の通りです。順に解説していきます。
- スマホ用のCSSファイルを作る
- CSSファイルをアップロードする
- 記事内でCSSファイルを読み込む
スマホ用のCSSファイルを作る
まずはスマホ用のCSSファイルを作ります。
適当なフォルダに好きな名前でCSSファイルを作成してください。
これをテキストエディタで編集していきます。
今回はVisual Studio Codeを使用しましたが、別にメモ帳でもかまいません。
編集するといっても一からつくるわけではなく、ほとんどはPC版のCSSをコピーするだけなので簡単です。
それでは、ライブドアブログの設定からPCのカスタマイズ画面を開きます。
CSSの編集画面から、スマホ版にも適用したい部分だけをコピーします。
例えば、
- 見出しタグ（h1,h2,h3,h4…）
- リスト（ul,ol）
- 引用（blockquote）
- 表（table）
このあたりですかね。
コピーしたら先ほどのCSSファイルに貼り付けて保存しましょう。
CSSファイルをアップロードする
それでは、完成したCSSファイルをアップロードしていきましょう。
管理画面左のメニューの 画像／ファイル を選択します。
適当な名前（cssなど）のフォルダを作り、その中に先ほど作ったCSSファイルをアップロードします。
（なぜか2つありますが気にしないでください。）
アップロードしたファイル名をクリックすれば、ブラウザ上で中身を確認することができます。
これでCSSファイルのアップロードは完了です！
注意事項：ファイルの上書きについて
CSSを編集したので上書きしたいというケースがあると思います。
ただ、私の環境だと削除ボタンを押してから実際にファイルが削除されるまでかなり時間がかかりました。
まだ完全に削除されていない段階で同じ名前のファイルをアップロードしてしまうと、前のファイルが残ったままになって上書きされないという問題が発生します。
そのため、ファイルを上書きしたい場合はファイル名を前回と違うものにしてアップロードすることをおすすめします。
記事内でCSSファイルを読み込む
最後に、記事内でCSSファイルを読み込んでいきます。
記事編集画面を開き、記事の冒頭などに以下のコードを入力します。
<link href=”★” type=”text/css” rel=”stylesheet”>
★の部分は先ほどアップロードしたCSSファイルのURLに置き換えてください。
さっきのファイル管理画面からファイル名をクリックするとURLを確認することができます。
http://sample.com/css/smartphone.css
こんな感じになっていると思います。
これを、ブログ内の全記事に手作業で入力していきます…しんどいです。
定型文などに保存しておきましょう。
無事成功すると、スマホでもPCのようにCSSが適用されているはずです。
過去の記事を一括で編集
こんな方法もあるみたいです。
私は今回使っていないので解説は割愛します。
スポンサーリンク
メディアクエリを使ってPCとスマホで異なるCSSを適用する
メディアクエリを使って、PCとスマホで異なるCSSを適用することもできます。
いわゆる”レスポンシブデザイン”というやつですね。
- PCとスマホで異なるCSSを適用したい
- PC版のCSSをコピーしたけどスマホ版だと表示がおかしい
こういう方は試してみてください。
1, 個別記事ページのHTMLに以下のコードを入力する。
headタグの最後に、これを貼り付けてください。
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
これでメディアクエリを使う準備は整いました。
2, スマホ版のCSSを編集する。
メディアクエリを書いていきます。
@media (max-width: 700px) {
ここにCSSを書く
}
このように、CSSを挟むように書けばOKです。
画面サイズ（横幅）が700px以下のとき、このCSSを適用しますよ～という意味です。
本当は700pxじゃなくてもっといい数値があるはずですが、めんどくさいので私はこれにしています。
詳しく知りたい方は「メディアクエリ ブレイクポイント」などで検索してみてください。
これで、PCとスマホに別々のCSSを適用することができます。
まとめ
以上、ライブドアブログでスマホ版のCSSをカスタマイズする方法でした。
これからはモバイルファーストの時代なので、スマホのデザインはしっかりカスタマイズしておきましょう！
（いずれ管理画面からスマホのCSSを編集できるようになればいいですね…）
コメント