サイドバーの見出しの装飾について

[玄女]

以前から気になっていたこのテーマを最近時間をかけてお化粧していこうと試みているのですが、サイドバーの見出しの部分「コメントとか人気記事とかとか」をCSSで装飾したいのですが、どこをいじればいいのか知識がないのでわかりません。先生、教えてください。

[hidekichi]

Google ChromeやFirefox等ではブラウザにスタイルシートを一時的に編集できるweb開発環境が入っています。
IEでもそういうアドオンみたいなものはあるかも知れませんが、簡単に探すなら前者がオススメです。

方法的にはF12か該当部分を右クリックして「要素を検証」を選択します。
chromeである場合は、Elementsに該当ページのHTMLが表示され、右側にスタイルシートの要素が表示されます。また該当要素のセレクタの右側にどのファイルの何行目に書かれているかも表示されるのでとても便利です。
左側には選択した要素のHTMLがハイライト表示されているので該当部分を探しやすくなっています。
Firefoxでも同じような感じです。

こうして、該当部分が選択されているようであれば、チェックするのは開発環境左側のidやclassの部分となります。それらを右側から選んでお試しをしたり実際に変更されるかを確かめたりと色々するわけです。

仮に、

<div id='new-entries' class='widget widget_new_popular'>
<h4>新着記事</h4>
<ul class='new-entrys'>

こういうのがあった場合(またエンティティされて読みにくくなっているかも知れませんけれど)、divのidもしくはclassを調べます。

idは慣例としてそのページに各々1種類しかおかず、同じような要素がいくつもある場合はclassを使います。
上記の例であれば、

• idのnew-entriesを選択
• classのwidgetあるいはwidget_new_popularを選択
• ページ内のh4(見出しレベル4)を全て選びたい場合はh4を選択

等と知ることができますが、この「新着記事」と言うh4の部分は#sidebarに囲まれていることが開発環境の左側のカラムからわかります(chromeやFirefoxの場合)。ということは、見出しを個別に選ばずサイドバー内のh4を選択変更したいと考えれば、

#sidebar h4{
 /*何かしらの処理*/
}

と書けると思います。もしフッターの見出しなら、

#footer h4{
 /*何かしらの処理*/
}

と書けます。上記はすべてWidgetの見出しで、サイドバーかフッターかを選んでいるだけなので、

#widget h4{
/*何かしらの処理*/
}

としても大丈夫かと思います。どこをどのようにスタイルするかはブラウザ上で試せるので、下記リンクを参考にchromeやFirefoxでお試ししてから実際のCSSを変更するのが良いですね。
windowsならNOTEPAD++などのテキストエディターにFTPプラグインを入れれば保存したら即アップロードできて便利です。

chrome web開発解説サイト
notepad++ official(英語)

またSimplicityは子テーマがあり、基本的に子テーマを適用させているのであれば、子テーマのstyle.cssにclassなりidなりを追記していけばそれが適用されます。
親テーマはバージョンアップされていきますが子テーマはそのまま使えると思います。親テーマのidやclass等が仕様変更してしまった場合は子テーマも変更させないとダメですが、基本子テーマのstyle.cssをいじれば良いと思います。

例)親テーマのヘッダー設定(style.css)
h1, h2, h3, h4, h5, h6 {
line-height: 130%;
color: #333;
}

子テーマ(simplicity-child/style.css)で、
h1,h2 {
line-height: 130%;
color: #333;
}
h3,h4,h5 {
line-height: 100%;
color: #666;
}

こうすれば親テーマの設定があっても子テーマの設定が優先されて表示される・・・はずです。

[hidekichi]

あ、リンクは2つまでなのかな。
Notepad++のプラグインNppFTPを利用してサーバー上のファイルを書き換える為にFTP接続する設定手順

[玄女]

ありがとうございます。明日さっそくやってみます。またお化粧の仕方がわからない事増えるかもしれません。時々教えてください。難しいけどゆっくり仕上げてみます。

[わいひら]

windowsならNOTEPAD++などのテキストエディターにFTPプラグインを入れれば保存したら即アップロードできて便利です。

こんなのがあるんですね。
僕も勉強になります。

＞＞#21546
この説明が、とてもわかりやすいので、画像とかを追加して、記事にしちゃって良いでしょうか？

[hidekichi]

>>わいひらさん
どうぞ、記事になり何でもしちゃって下さい(ΦωΦ)

ついでと言ってはアレですが、記事にする時がアレば若干修正・改良をお願いします。
例えば、最後のヘッダーの例など、何がどう変わるのかがわかりにくいかも知れないので、他の例をあげたりしてサンプルとかで説明とか。
また、

#widget h4{
/*何かしらの処理*/
}

この部分がコードタグを入れてないので、良い感じに。いっそのこと内容だけ踏まえて全部新規書き下ろしでも（笑）

◆スレ違いというとそうですがちょっと補足なども少し…
ちなみに、NOTEPAD++を紹介しましたが、他にも Sublime Text でもFTPプラグインがあり同様のことができます。機能的にはどっこいどっこいですが、Sublime Textは少なくとも自分の環境(linux)では日本語入力に難があり、日本語以外の部分でスクリプトを書いたりする時にはSublime Textを利用しているものの、誰かlinuxにnotepad++を移植してくれと常々願っています。
windowsエミュレーションと言うかなんと言うかWineと言うのがありまして、それを介せば動くんですけどね。

Zen-Coding(今は名前が変わってたかな?)はどちらのテキストエディターでもありますが、htmlのリストなど複数行にわたって同時に変更がしたい時(矩形範囲選択あるいは、同単語複数選択同時編集)などはSublime Textが圧倒的に便利です(公式のトップ画像を見てるだけで凄いとわかります)。
エラーチェックなども環境を作らないとダメですができますよ(PHP,Javascript等)

プラグインを導入する際などはnotepad++の方が慣れた操作でやりやすいかも知れません。またどちらもオンラインでプラグインの導入・更新ができるのも良い点ですね。
Sublime Textは基本有料(シェアウェアかな?)のソフトですが、ファイル保存時にたまに出てくるダイアログでキャンセルを押せば永遠に使えます。ただ支払いをしても問題ないぐらいによくできたテキストエディターだと思うので開発に寄与すると考えて購入する方向で考えるだけ考えてみて下さい（笑）

僕はlinux版が日本語入力用のIME(プラグイン)を別途用意しなくてもできるようになったら(デフォルトで利用しているIMEで入力できるようになったら)購入する考えです(爆
ここからもWindows版が日本語入力に関して問題ないかどうかを確認する必要もあるかも知れません。

[わいひら]

ありがとうございます。
時間に余裕のある時に、修正して使わせてもらおうと思います。
全部描き下ろしだと面倒くささが勝って書かないで終わってしまうかも(笑)

僕は、Windowsでサーバー上のファイルを直接編集するときは、Sublime Text3とWinSCPを利用しています。
notepad++はまだ使ったことがないです。
もうSublime Textは、手放せないので、購入して利用させてもらってます。
あれだけの使い勝手で、複数環境で使えて、7000円そこそこは安いなと思いまして。
ただ、Windowsでも日本語入力は、変なダイアログボックスが出て間接的な入力になります。

[投稿者]

投稿