不器用さんの5限目は図工

不器用でもいろいろ、つくりたい。

無料のはてなブログでスマホデザインを変更する方法

ども!部屋のクーラーの温度は31度です、あきあです!
汗をかきますが我慢できる温度ですw

 

さて、またカスタマイズをやってみました!

前回はPC表示のカテゴリを追加しました。


今回はスマホの表示を変更してみます!

何故スマホが重要か

何故スマホ表示を変更してみようと思ったのかというと、スマホのアクセスの方が多いという話を聞いたからなのです。

まずは私のブログがどこからのアクセスが多いか見てみます。

f:id:akia7:20150801221900p:plain

Macintosh!?

マジかwww まさかの結果である…@@

まぁまだ母数が少ないのでなんとも言えないのですが、面白い結果でしたw

とはいえ、iOSAndroidを足すとやはり一番ですね。

やっぱりスマホは重要なようです!

 

無料のスマホデザインカスタマイズ

カスタマイズですが、はてなProであればPCの変更と同じです。

ですがまだ稼げない状態ですし、まずは無料でどうにかしたい!

 

そんな時の解決方法は「レスポンシブ」!

私のサイトを ぎゅーーん!と縮めてもらうと表示が変わると思います。
これがレスポンシブデザインです。

 

レスポンシブデザインの適用は簡単です。

f:id:akia7:20150801221205p:plain

この詳細設定の「レスポンシブデザイン」にチェックを入れるだけ!

かんたん★

 

問題はそのやり方ですね。

CSSはPCと同じ箇所に書きます。

f:id:akia7:20150801223531p:plain

↑この「デザインCSS」の場所です。

 

レスポンシブのCSSの書き方はこちらを参考にしました。

レスポンシブウェブデザインを作るときのMedia Queries(メディアクエリ)の一般的な書き方2パターン | delaymania

 

◆こんなかんじです 

/* =============================================
 通常時
============================================= */
.pc{
  display: block;
}
.sp{
  display:none;
}

/* =============================================
 スマホ表示
============================================= */
@media screen and (max-width: 479px) {
  .pc{
    display: none;
  }
  .sp{
    display:block;
  }
}

{}かっこでCSSを囲みます。

この例では、
PCの時はクラス「pc」を表示、 クラス「sp」を非表示
SPの時はクラス「pc」を非表示、クラス「sp」を表示
にしています。

これでメニューをPC用とSP用で分けています。

 

おおまかに言うとこんなかんじ!

あとはスマホ用に要らないものを非表示(display:none)したり。

 

おかげでヘッダーに画像を出すことができましたーやったー!

 

f:id:akia7:20150801230146p:plain

↓開くと

f:id:akia7:20150801230238p:plain

 

満足♪

表示がおかしいところを見つけた方はご一報くださいまし ><

 

自分でCSS書くのが難しいという方へ

私は自分なりに変更したかったのとクレジット表示が面倒だったので自分で書きましたが、 イチから書くのは難しい!という方はそれ用のテンプレートを探しましょう!

テンプレートストアで色々なレスポンシブデザインのテンプレートが置いてあります(*´ω`*)

ありがたいですね!

 

 

よろしければポチよろしくお願いします~

にほんブログ村 ハンドメイドブログ 手づくり工作へ

Twitterやってます!

今日のうさぎ

f:id:akia7:20150801233452p:plain

▲TOP
当ブログで使用されている文章、画像、情報など全ての無断転載・複製を固く禁じます。