ライブドアブログにお世話になっている当ブログですが、スマホデザインがややもう一つな感じがします。
とくに見出しの<h1><h2><h3>タグとか。
そしてデフォルトのfont-sizeが14pxと少し小さめ。

ということでCSSをいじってみました。



1.CSSの変更方法

こちらの記事を参考にさせて頂きました。

参考記事http://yossharamaru.blog.jp/archives/9170386.html

要は
  1. CSSファイルを作ってアップロードする
  2. HTMLタグ編集で「<link  href="http://kubo-shogun.com/css/sumaho.css" rel="stylesheet" type="text/css">」みたいにCSSを指定する
この2点になります。
いちいちファイルをアップロードするのは面倒ですが、今のところ代替え案はなさげ。
詳細は参考記事をご参照くださいませ。
かなり丁寧に紹介されております。

ファイルアップロードが面倒な方は<style>タグでCSSを囲ってHTMLに埋め込むとデザインが適用されます。
が、あまりお勧めはしないです。
実際やってみると下記の画像のようにトップページとかでコードがそのまま出ちゃいます。
デザイン

いけてねえです。
やめときましょう。

2.参考になるかっちょいいCSS紹介

次はかっちょいいデザインにするためのCSSのご紹介です。
自分は職業柄CSSはよく触るのですが一から作るのが面倒だったので、今回はこちらのサイトを参考にさせて頂きました。

参考記事https://saruwakakun.com/html-css/reference/h-design

見て頂くとわかるのですがキレイですね。
デザイナーさんかな?
設定すると下記のようなデザインになります。

ここにタイトル

ここに文章

test1


test2


test3


きれいっすね~。
このブログが適用しているCSSがデフォルトでアンダーバー付けたりしているのでnoneにしたりはしていますが基本的にそのまま使わせて頂いています。

注意点としてはタグに対してスタイルを当てると、サイト全体に影響するのでclass指定はした方がいいです。
例えば<h1>タグはタイトルとかにも使われているのでそのまま適用するとデザインが崩れます。
cssには「h1.title」のように「.」の後に任意のclass名を付けて、htmlタグには「<h1 class="title">」のようにしましょう。

3.まとめ


ライブドアブログはPCのデザインは自由度が高そうなのにスマホデザインはカスタマイズしにくい仕様になっています。
広告を消されるのを防止しているのでしょうかね。
cssとかJavaScriptをいじると簡単に消せそうなので。

まあ無料ということでお世話になっているのでそこは我慢しますかね~。
でも有料で広告消せるプラン用意してくれた方がありがたいですが。
有料プラン用意するより無料で広告表示させた方が儲かりそうなのでやらないでしょうね。

今回アップしたCSSはデフォルトのフォントサイズも変更しています。

.article-body {
     font-size:17px;
}

ちなみにこれはPC版しか変わらんですたい。スマホは追々調査します。


以上、ライブドアブログのスマホデザインカスタマイズのお話でした!



スポンサーリンク