Stinger3 カスタマイズするよ!!デザイン(CSS)編

公開日: : WordPress

雪が凄くて外に出る気にならなかったので、今日は頑張ってデザイン改良に挑戦。

Stinger3というよりCSSのお話に近いですよ!

 

 

 

 

現状確認

この投稿書く前の状態をキャプチャしておきました。

 

スクリーンショット 2014-02-08 16.27.29

 

う〜ん、どことなく素っ気ない感じ。。

これを改良していきますよ!!

とある方に ドン!! って感じが足りないとアドバイスを頂いたので

積極的に文字を大きくしていくスタイルが今回の方針!!

 

流れとしては、

Chromeのデベロッパーツールで色々試して、いい感じのデザインにする

→サーバ上にある style.css を変更して、反映する。

って感じです。

 

 

頼れる仲間 Google Chrome デベロッパー ツール

今回はChromeのデベロッパーツールでCSSを変更して、デザイン案を練っていきます。

Chromeに標準でついてるアレです。Chrome上でCtrl+Alt+JとかF12とか押したら出るやつ。

(うちはMacなのでCommand+Option+Jですが)

 

 

スクリーンショット 2014-02-08 16.59.37

 

 

 

出したらChromeの画面がこんな感じになります。

今回は画面左下に居る虫眼鏡くんを使ってCSS(デザインの設定書くファイル)をいじっちゃいます。

(バージョンによっては虫眼鏡のいる場所違うと思いますが、大体こことかElementタブの中とかにいるんじゃないかなーと思います。もし見つからなかったらググってみましょう!)

 

試しに虫眼鏡を押して、画面上にカーソルを当ててみましょう、なんか要素を選択している感じになるはずです。

スクリーンショット 2014-02-08 17.01.24

 

こんな感じで。

で、そっからもう1クリックすると、下の部分にHTMLと対応するCSSが現れるはずです。

 

スクリーンショット 2014-02-08 17.01.56

 

こんな感じに。うちの場合は左がHTMLで右がCSSです。

で、右のCSS部分にピックアップされて出ているのが、選択された要素に対するCSSです。

こいつが優秀で、CSSの部分クリックして新しいの足したり既存の書き換えたりしたら、リアルタイムで画面上が変更されてくれるんですよね。

例えば、今選んだ記事タイトル部分のCSSを適当にクリックして、font-size:40pxとか追加すると

 

スクリーンショット 2014-02-08 17.14.31

 

こんな感じにタイトルがでかくなります。超かぶったけど。

これを駆使して色々試しながらいい感じのデザインにしていって、

よしOK!!ってなったらサーバ上にある style.css に実際に書き込めば完了です。

あ、ちなみに再読み込みすると元に戻ります!!注意。

 

実際に やってみた

準備が整ったところで色々いじっていきましょう!

方針はタイトル系の文字サイズを大きくするのと、色を変えること。

その1 サイトタイトルの文字を大きくする。

元々大きいけどもう少し大きくしてもいいよね。

てわけでさっきと同じように、虫眼鏡クリック→サイトの文字にカーソル合わせるでCSSを出して、

font-size: 40px

とか適当に追加。

ついでに色も気に入らなかったので変えます。

あ、ちなみに色は、

スクリーンショット 2014-02-08 17.21.13

color: と #xxxxxx の間にある色のところクリックすれば

カラーパレットが出て色々試せるので、

直接数値入れるよりカラーパレットで会う色探すほうがおすすめです。

今回は#34771Aとかにしておきました。

配色のセンスはないので、ほんとに色々な色試してとりあえずこの色にすることに。

 

というわけで、文字大きくして色変えた結果がこちら

 

スクリーンショット 2014-02-08 17.30.17

 

それなりに目立つようになったのかな・・・・?

まあこの調子で色々大きくしていきます。ついでに色も。

 

その2 記事タイトルの文字を大きくする。

記事タイトルは明らか元々小さい!!

さっき40pxにしたらかぶったので、30pxくらいにします。

ついでに色も変えておく。

 

その3 右にある、「NEW ENTRY」とかを大きくする。

ここも小さいので大きくしちゃいましょう。

font-size: 24pxくらいにしました。

 

その4 おまけに、記事の区切り部分を大きくする。

前回、記事と記事の間を区切るようにしましたが、

この点線を大きくします。

border-bottom: 10px dotted  #EFA510;

って感じで。

 

その5 もっとおまけに、記事のイメージ画像のところを囲う。

No Imageなのも気になりますが、

なんとなく点線で囲っておきます。

border-style: dashed;
border-color: #849A7B;
border-width: 1px;

とか足せばいいかな。分からないけど。

 

結果

とりあえず、ここらで元と比較してみます。

 

スクリーンショット 2014-02-08 16.27.29

 

スクリーンショット 2014-02-08 17.51.27

 

な ん だ こ の 差 は 

 

予想以上に見栄えよくなりました・・・・

ドン!! って感じ大事ですね!!! 後、黒字にちゃんと色つけてあげるのも。

 

変更内容をサーバ上のCSSファイルに書き込む

さて、色々試して良くなりましたが、

Chrome上で書き加えたことをサーバ上のCSSに書き込んであげないと設定が反映されません。

サクっと書き込んじゃいましょう!!

 

うちの環境だと、

wp-content/themes/stinger3ver20140124/

の中に、

style.css

というファイルがあります。(stinger3ver20140124のあたりが、バージョンとかによって変わると思います)

このファイル内に、先ほど書き込んだ内容を直接反映しましょう!!

 

スクリーンショット 2014-02-08 17.58.51

 

うちの場合は、虫眼鏡で要素クリックした時に出てくるCSSのここらへんをviで検索→該当行に書き込みって感じで足しました。

vi style.css

/.kizi .entry .entry-content .entry-title-ac

って感じで。

 

記事タイトル部分はfont-size: 30pxだけ追加したので、それを実際に書き込めばOKっと。

スクリーンショット 2014-02-08 18.17.56

 

こんな感じに。

この作業を、足したり変更した場所の分やりましょう!

 

感想

いやあ、文字大きくしただけでもだいぶ印象が変わりますねえ…

この記事ではTOPページの色とフォントサイズだけ変えましたが、

他にもカスタマイズしたい!って人は、

スタイルシートリファレンス(目的別) – HTMLクイックリファレンス

とかでCSSを検索しながら、デベロッパーツールで実際に試してみましょう!!

 

デベロッパーツールで要素確認→CSSを足りたり変更したり→サーバ上のstyle.cssを変える

の流れさえ覚えておけば、TOPページ以外の画面も変えれちゃいますよ〜!

 

あ、ちなみにですが、スマホサイトのCSSは別に用意されています。

(うちの環境だとsmart.css)

スマホサイトにもCSSを反映させたいという人はこちらも変えましょう!

 

というわけで1日潰せました。

やる気あれば記事ページとかも変えてみようかな〜。

関連記事

no image

Stinger3 カスタマイズするよ!!プチ挑戦編

デザインは一旦諦めて、簡単に出来そうなところからブログをカスタマイズしていきます。 ちなみに前

記事を読む

no image

データベース接続確立エラーと出た。

久々にブログ更新しようと思ったら、「データベース接続確立エラー」と出て何も見れない状態になってました

記事を読む

no image

ブログ、カスタマイズちゅう。

WordPress凄いとはいえ、 ちょっとはオリジナリティを出そうと色々試行錯誤していますこん

記事を読む

no image

WordPress初投稿、404 Not Foundに潰されるのであった。

昨夜 意気揚々と初投稿で満足し 投稿したページを見てみると 404 Not Found え

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

no image
学生時代に1ミリも知らなかったJavaの開発風景

※この記事は、苫小牧高専 Advent Calendar 2016 -

no image
gitbucketで再起動に失敗してDBエラーが起きた話

とあるAdvent calendarを書くことになったのですが、そもそ

no image
機械学習について簡単におさらいした

機械学習について、実際あんまりよくわかってなくね?ってなったので

no image
svnを使っている作業場でgitを普及させるためにやったこと

今回は、ある作業場でgitを普及させたい!という思いから、私が個人的に

no image
jenkinsのジョブでIllegalArgumentExceptionが起きた

Jenkinsのジョブで、 java.lang.IllegalArgu

→もっと見る

PAGE TOP ↑