amedia-online

自由が丘のカメラ好きな美容師 雨宮(amemiya)の情報発信media

ワードプレスのマテリアル2のスマホ表示カスタマイズ。

calendar

自由が丘美容室エクリュの雨宮です。wordpressのテーマのマテリアル2を使っています。(2017/10/8現在)
こないだまでは Simplicity2をずっと使っていたんですけど最近のお気に入りテーマはマテリアル2

ただSimplicity2の時は利用者がとても多くてCSSで大体やりたことは検索するとコードが出てきたんですけど。マテリアル2はまだそこまでは普及していないのかまだまだ出てきません。

なのでCSSで出来たことを少しずつこの記事に書き溜めていこうかなと思います。

スポンサーリンク

カスタマイズする前に「子テーマ」をダウンロードしましょう

ワードプレスのテーマは更新されるとカスタマイズされたものも初期状態に戻ってしまいます。カスタマイズする場合は子テーマを使いましょう。マテリアル2は公式で子テーマがありますので、下からダウンロードできます。

 

 

マテリアル2のスマホ表示で両脇の余白が広いのを狭めたい。

マテリアル2はPC表示はとても余白がいい感じにとられていて文句なしなんですが。問題はモバイルの場合の記事中本文の両脇が少し余白をとりすぎている印象があったので、どうにかならんかねというわけです。

最終的にできたのはこれ。

.main_inner{
width: 100%; !important
}

クロームの検証で見てみると。余白分とさらにメインの記事のmax幅から96%になっていました。なのでこれで余白はいじらずに。記事の幅を100%にしたという感じです。

子テーマのCSSのスマホ用というところに書き込んでいきます。

うえの図のような感じ。

結構納得行く幅になりました。余白を0だとそれはそれで見ずらそうなので。このくらいがちょうどいいかもと思います。

まとめ

当分はマテリアル2を使っていく予定のでカスタマイズしたら順に追記していこうと思います。

instagramでも繋がってみませんか? followme.
@amemiya_ecru

ブログをメールで購読

SNSをやっていない方はこちらからブログの新着を受け取ることができます。

198人の購読者に加わりましょう

この記事をシェアする

コメント

コメントはありません。

down コメントを残す




CAPTCHA


自己紹介

Amemiya Ryuichi

Amemiya Ryuichi

自由が丘の美容室エクリュでスタイリストをしています。趣味はカメラとブログと家庭菜園他にも色々多趣味で変な美容師。趣味を生かしてWEBの制作依頼から、写真の撮影依頼もこなしています。 もちろん本業が第一です。メンズカットが得意でマニアックな会話から理系男子率高めw [詳細]