@yayoko314よコレを読め。WordPressでCSSをゴニョゴニョする方法

ただ一人のために記事を書く

後日談あります。

っていえばかっこいいけど、もう言いたいだけ。@shintarowfreshです。

たぶん、以下にご紹介する方法が、私がブログの見てくれをアレするときにしていることです。
最終的にCSSを上書きするだけの作業ですが、試行錯誤したり、比べたりする方法も一応書きますので、超絶初心者の方ならなにか参考になるかもしれません。

超基本のCSS入門

色々書きだすと長くなるので画像でCSSの記述の仕方だけ

基本ルールなので、CSSを上書きする場合、上記だけは忘れないようにしてください。

もう一度書くと

a {
color:red;
}

かっこの綴じ忘れや、値の最後の「;」を忘れると正常に表示できないどころかレイアウトが崩れます。
バックアップをとってからゴニョってください。

はい、もう基本的なことはとりあえずすっ飛ばして
ごにょる方法を書きます。

今回私が個人的にアレだと思うのは、PCで観たときのブログの記事のタイトル部分です。クレヨンの背景からはみ出た部分がブログの背景のしろに溶け込んで見えなくなってます。

実際は

こんな感じで文章は続いているんです。

この場合もちろん、タイトルのリンクの色がまずい訳で、改善点はそこらへんかと。

じゃあ行ってみるかの実作業編

CSSをゴニョゴニョするためには、まずは、対象の名前（セレクタ）がわからなければどうしようもありません。

ではセレクタをどうやって調べるのか。たいていのブラウザにはセレクタをまるっと調べる機能が内包されています。ソースを見てもいいのですが、もう少し便利なものがあります。
今回は@yayoko314がmacの人なのであえてのsafariで

リンク部分を右クリックすると、その中に「要素の詳細を表示」があるはずですので、ソレをクリック。つまりはセレクタの属性の値をまるっとお見通しにしてしまう機能です。
するとSafariの便利な「Web Inspector」さんが立ち上がるはずです。

しかも、知りたい対称のセレクタが選択済みのはずです。そうです今回ゴニョゴニョするのは

<h2><a title="やよ日記[44]一風堂にハマった！！＆今日のモレスキン☆" href="http://yayoko314.com/2012/04/09/yayo44/">やよ日記[44]一風堂にハマった！！＆今日のモレスキン☆</a></h2>

この部分なのです。ここで書かれているヘッドライン　つまり見出しの h2 のリンク a の色さえ変えてしまえば問題は解決！セレクタ的には .post h2 a です。

CSSの素敵なところは一回一箇所変更するだけで、未来永劫、そして過去記事全て変更が適用されるところですね！

画像の部分が変更を加えるべきCSSの名前です。詳しくは言いませんけど、CSSファイルの294行目にまず間違いなく明記されている筈の要素です。

試しにブラウザ上で色を変えてみましょう。そうです、そんなことが出来るんですよ。そう「Web Inspector」ならね★

具体的には、「Web Inspector」の変更したいCSSをダブルクリックして選択して、好きなパラメーターに上書き。

ここで注意することは、実際はブログにリンクされているCSSファイルを書き換えて上書きしないと意味はありません。最終目標はそれです。

いまは、どんなふうに見えるかトライアル・アンド・エラーをしているに過ぎないんです。でも便利です。

こんな感じで、変更をプレビューできます。@yayoko314さん好きな色を選ぶがいい。


CSS/HTML色見本

ちなみに色の表記の仕方は16進数です。#000000とか#00ccffとか、もちろんredとかwhiteなど一般的な色は大丈夫。

本来ならばですが、このセレクタ、.postとかの部分（ちなみに.ホニャララは「クラス」という）は、自分で名付けるのですが、WordpressのようにCMSにテーマを当てた場合、もう既に名前がついてしまっている場合がほとんどです。
名前の付け方にはある程度の法則性がありますが、絶対ではないので、毎度名前を確認しなければいけません。名前が間違えていたら目的のタグは見つからないし、間違えてタグを上書きしたら、ブログの構造を壊しかねません。気をつけて！

好きな色を選びましたか？では実際に変更に移りましょう。

WordPressのダッシュボードに行って→「外観」→「テーマ編集」

たいていデフォルトでスタイシートが選択されてます。もし万が一選択されてなければ右端のリストのなかからスタイルシートを選択してください。

自信がなければ、全部をコピーしてテキストファイルなんかにバックアップをとっておきましょう。

CSSをゴニョりそこねるとブログの見た目がぶっ壊れます。なぜならブログのレイアウトもスタイルシートに記述されているからです。気をつけて！

多分デフォルトでスタイルシートがセレクトされていると思います。

スタイルシートにはタグがびっちりと書き込まれています。めまいがしてもあきらめないで！この中から目的のタグを探すのはちとめんどいので、ブラウザの検索機能でサクッと行きましょう。

検索窓に目的のタグを撃ちこめば

今回の場合

.post h2 a

お目当てのタグがハイライトされるはずです。

.post h2 a　{
color:wite;←ここを変更する
}

こんな感じになってるはずなので、

.post h2 a　{
color:好きな色;
}

に変えて「ファイルを更新」ボタンを押すとミッションコンプリート！
色の書き方はコチラを参考に！
「ファイル更新」ボタンを押さないと意味ないので忘れないように！

ちなみにちなみにマウスホバー時のの色を変える場合
.post h2 a:hover　{
color:好きな色;
text-decoration: none;こっちはリンクの下線をnoneで消してるのね
}

を変更するといいよ。

最後に

CSSをちょりっと変更するだけなら上記で問題無いと思います。
何度も書きますが、スタイルシートを変更する場合はバックアップをとってから変更することをお薦めします。
何度も変更してる猛者なら別に大丈夫です。バックアップで上書きすると、全て元に戻ります。

今回の方法は、もしもテーマが更新されたら水の泡ですので、それだけ気をつけてください！

ふう、やってやった、ドヤ！（このドヤ顔を見せてやりたい）

おまけの後日談2012/04/10

気づいたことがあったので書きました。

やつの為に記事を書いて、原点にというか、ブログの原義に気付くという|frasm イケすぎてヤバすぎてヤバい超人力キュレーションメディア

文：シンタロヲフレッシュ

はてブ

pocket

twitter