本サイトはプロモーションが含まれています。

初心者にも使いやすいツールランキング
1位 第一位はバナープラスです。 なんといっても使いやすい。難しい操作は一切なし。 あらかじめ用意されたパーツを組み合わせるだけなので、 初心者の方でも簡単にそして綺麗にバナーやヘッダー画像が作れます。 これを持っておくとオリジナルのものが作れるのでサイト作成の幅が広がりますよ。 ちなみにこのサイトのバナーは全てバナープラスで作っています。
2位 第二位はシリウスです。 シリウスには初心者の方でも簡単に使えるように初心者モードというものがあります。 それにHTMLやCSSの知識がなくても誰にでも簡単に綺麗なHTMLサイトが作れます。 SIRIUS上位版を購入すればスマホサイトも自動で作ってくれます。 手軽さ使い勝手を考えるとバランスの良いツールだと言えます。
3位 第三位は賢威です。 賢威はSEOマニュアルが付いていたり、上位表示されやすいというメリットがあります。 でも、初心者の方が簡単に使えるのかというと、そうではありません。 賢威を使うためには、やはり最低限のHTMLやCSSの知識が必要となります。 今回のランキングは初心者の方にも使いやすいのかというテーマなので、 どうしてもこの順位になってしまいます。でも、賢威は良いツールですよ。

賢威のカスタマイズ|h2要素の色を変える方法

今日は賢威6.2のワードプレス用テンプレートの、

h2の色を変える方法を書いてみたいと思います。


今回カスタマイズするテンプレートは、

賢威6.2コーポレート版ですので、

他のテンプレートではCSSの記述や位置が違う場合がありますので、

ご注意下さい。


まず賢威6.2のワードプレス用テンプレートを表示させると、

こんな感じになっています。


kenih24

H2要素がグレーの背景で文字は深いグレー、そして上の線は黒色になっています。

これではなんとなく暗いイメージがします。


私の賢威のフッターの色はダークグリーンに設定しています。

そこで私のブログのフッターの色と同じ、

ダークグリーンに変えてみたいと思います。


kenih25

まずはダッシュボードをクリックします。


kenih26

左のメニューから外観⇒テーマの編集を順に選んでいきます。

するとテーマの編集画面になります。


kenih27

右のメニューの下の方にあるdesign.cssをクリックします。


kenih21

design.cssは賢威のデザインに関する設定が書いてあるCSSです。

design.cssの編集画面になりますので、

今回変更するh2要素の部分を探します。

上の画像がh2の設定です。


青で囲ってあるのがh2要素の上にある黒い線の部分です。

赤で囲ってあるのがh2要素の背景の色です。

これを書きかえていきます。


kenih28

この前の記事でも書きましたが、

コードを消してしまうと部分的に戻すのが面倒になりますので、

前回同様/* */(半角)で無効にしていきます。


コードを残すと重くなるという方がいますが、

これくらいではさほど問題になりませんので、

部分的に戻す事を考えるとこの無効にする方法が良いと思います。

もちろんコードを消しても構いません。

ここでは無効にする方法でやっていきたいと思います。


今までのコードを/* */(半角)で無効にして、

赤で囲ったコードを追加していきます。

一番上はh2要素の黒だった部分を、

ワンポイントの深めの赤に変えています。


次はh2要素の背景をフッターと同じダークグリーンに変え、

先ほどと同じワンポイントを左の線に適用しています。

そして次はh2要素の文字の色を変えていきます。

デフォルトのグレーの濃い文字の色では、

背景がダークグリーンの場合見づらくなりますので、

文字の色は白に設定します。

最後はファイルを更新をクリックします。


kenih29

するとこのようにh2の背景をダークグリーンに。

そして文字の色を白、ワンポイントのアクセントに深い赤を設定することができました。

でも、このままでは記事の続きを読むをクリックすると、


kenih210

このようにグレーになっています。

これはこの部分のh2が全体設定の影響を受けているからです。


賢威6.2コーポレート版は文字の色などの全体設定がグレーになっています。

記事の文字がグレーではぼけた感じになりますので、

ついでにこの部分も変えたいと思います。

先ほどの要領でダッシュボード⇒外観⇒テーマの編集⇒design.cssの順に選んでいきます。


kenih22

この赤で囲った部分が全体をグレーにしている設定です。

記事の文字の色は黒がいいので黒に変更します。


kenih211

先ほどの要領で無効にして、

赤で囲ったコードを追加します。

追加が終わったらファイルを更新をクリックします。

表示させてみるとこうなっています。


kenih212

文字の色が黒に変わりました。

記事の本文は見やすくなりましたが、

h2の文字が黒では背景がダークグリーンなのでやはり見づらいですね。

それに他のページのh2の文字の色とも変わってしまいます。


そこでこのh2の文字の色を変えていきます。

このページのh2はクラス設定でPOSTというクラスに設定されています。

そしてこのPOSTに対する文字の色の指定がないので、

全体設定が適用されるのです。


そこでPOSTのh2の文字の色を指定していきます。

先ほどと同じ要領で、

ダッシュボード⇒外観⇒テーマの編集⇒design.cssの順に選んでいきます。


kenih213

そしてdesign.cssの編集画面の最後に赤で囲ったコードを追加します。

追加が終わったらファイルを更新をクリックします。


kenih214

画面を表示させてみると、このように設定することが出来ました。

これで全てのh2要素の背景をダークグリーンに、

そして文字の色を白色に、

ワンポイントに深い赤を設定することができました。


でも、これではサイドバーにある見出しと整合性が取れません。

そこで次回はサイドバーの見出しを同じように設定する方法を書いてみたいと思います。


私も使っている賢威の販売ページはこちらからどうぞ。

kennihanbotan



ブログランキングに参加しています。

このブログの気になるランキングは下のバナーをクリックすると確認できますよ。

結構いいところにいます。

宜しければ応援お願いします。

にほんブログ村 小遣いブログ アフィリエイトへ
にほんブログ村

Googleアドセンスで

月に3万円稼げるようになりました。

Googleアドセンスで

月に3万円稼いだ方法は

下のバナーをクリックして読んで下さい。




コメントを残す

CAPTCHA


にほんブログ村 小遣いブログ アフィリエイトへ
にほんブログ村

このページの先頭へ