テンプレートを自分好みに



先日からブログのテンプレートを変えました。これ、なかなか良かったみたい。以前よりシンプルですっきりなデザインになって、とっても満足しています!

これが変えた当日の画面(スマホ版)です。

20170701120230b71.jpg
201707011202319de.jpg



ふふふ♪
シンプルで、自分でも気に入ってます。



でね、どういうテンプレートなの? っていう質問をいくつかいただきました。なので、素人の私ですが、やったことを少し書いてみますね。


今回の記事は、FC2ブログを使ってる方向けの限定になっちゃうかな?

でも、お役に立てば嬉しいです♪



今回のテンプレートは、FC2ブログ管理画面の「テンプレートの設定」のパソコン用「共有テンプレート追加」一覧で見つけました。

20170701121211ad0.jpg


小さい画像で見えるかな?

で、検索の「レイアウト」のところに「3カラム」(両脇にサイドバーがあるタイプね)と入れて検索。検索結果の中からレスポンシブ対応のものを選びました。


レスポンシブというのは、基本的にパソコンでもスマホでもデザインが同じになるものです。管理するのも一つのテンプレートだけでいいので、楽チンですよ。

しかも見る側の端末によって、画像の大きさなども合わせてくれるらしい。頭がいいテンプレートですねー。


パソコンとスマホとで違ってくるのは、サイドバーの表示のされ方です。スマホ版では、サイドバーが、記事の下に順番に出てきます。



で、私が選んだのは「Basement」という名称のテンプレートです。

作成されたのはたくさんのテンプレートを出しておられるvanillaiceさん。カッコいいテンプレートテンプレートをたーくさん世に送り出しておられます。


ただこのテンプレート、ブログタイトルの背景が黒でした。今まで背景がピンク系だったので、ピンクにしたい!


うー、スタイルシート(CSS)を触らねば!!


FC2のテンプレート編集は、htmlの編集と、スタイルシート(CSS)の編集の2段に分かれています。その下の段のスタイルシートの方を触ります。

スタイルシートというのは、フォントとか色合いとかを決めるシート。一方のhtmlは構造を決めるものと言えばいいのかなぁ?


一番下にあるCSSハイライトをONにすると、色がついて見やすいです。


で、ずっーとみていって、、、


2017070112314236f.jpg

headerとあるところ、#bannerのbackground-color、ここがblackとなっていました。これをrgb(255,216,216)に。


いえ、私もちっとも訳は分からない、、、

けど、このスタイルシートの他の部分をみると、どうやら色はrgbの三原色で書いてあるみたい、、、


で、rgbでググるとすぐ出てくるんですよ、その場で好きな色が作れる。それをコピペしただけです。

20170701124224861.jpg


ついでに文字の色とフォントも変えてみました。

上と同じようにして、文字は濃いグレーを選びました。rgb(90, 90, 90)です。

あとフォントは「メイリオ」が好きなので、それが先頭に来るようにします。よく分からないけど、先頭のものが優先されるみたい。他のフォントの部分と書き方を合わせました。


20170701123143503.jpg



これで、大丈夫だろか?
ドキドキ



いやー、CSSを触ったりするのは、ドキドキしますねー。変に触って、ぐちゃぐちゃになったらどうしよー、って。

そうそう、もし失敗しても大丈夫なように、、、

・最初ダウンロードしたテンプレートを複製して、別名をつけておいて、それに手を加えました
・あといろいろ触って、プレビューして大丈夫だったら、それをまた都度別名で複製もしておきました


ということで、うまくいったみたいで、良かった。

ホッ♪






ランキングに参加しています。お帰りにポチっとしていただけると嬉しいです。いろんな方が書いているお得情報も読めます。

にほんブログ村 小遣いブログ 主婦のお小遣い稼ぎへ にほんブログ村 小遣いブログ お小遣い稼ぎで節約へ



オススメのお小遣い稼ぎはこれ! ٩(๑❛ᴗ❛๑)۶


ちょびリッチ
サイフもココロもハッピーに!ちょびリッチ
全額還元モニター案件がいっぱい!
今一番のお気に入り♪
稼ぎ方はこちら


ポイントタウン
ポイントでお小遣い稼ぎ|ポイントタウン
一番稼げる!
登録しておいて損はないです
稼ぎ方はこちら


CASHb

レシートがお小遣いに変わる!
紹介コード → ABPIV
稼ぎ方はこちら




〈 広告 〉



関連記事

Tag:ブログ テンプレート

3 Comments

もりりんパパ  

新テンプレいいですよね~!
シンプルですっきり!!

でもはてブのアイコンがなくなってしまいましたね(;^ω^)

実ははてブ経由で今までツイッターに拡散応援していたので…僕の見落としかなぁ、みつかりません(;´∀`)

2017/07/03 (Mon) 10:49 | REPLY |   

もりりんパパ  

あ、いやあったwww

一番上にありましたね、よかった(;´∀`)すみませんw

2017/07/03 (Mon) 10:50 | REPLY |   

NickNick  

もりりんパパさん

はてブボタンとか位置変わっちゃいました。いろもグレーだから、分かりにくいかもー。

なんだかいろいろ変えたくて、スタイルシート触りまくりました。

2017/07/04 (Tue) 08:14 | REPLY |   

Post a comment

Designed by Akira.

Copyright © 私でもネットでお小遣い稼ぎできるかな? All Rights Reserved.