賢威6.1~ブログ説明文の文字色を変えたい(ついでに編集もしたい)

keni617

ヘッダー画像に入るブログ説明文の文字色変更とテキスト編集。

最初の状態はこれ。

keni618

あ~~テキストの色が合ってないし、
お姉さんの画像に被っちゃってるね。

まずは、テキストの文字色変更から。

keni613

「外観」⇒「テーマ編集」⇒「design.css」と進み、
以下の記述を探します。

/*——————————————————–
ヘッダー
——————————————————–*/

この中の、

/*●ヘッダーテキスト・右上の文章*/
#header-in #header-text{
float: right;
margin-top:25px;
width: 40%; /*・1行の幅はwidthの値を変更*/
color: #000;
}

この部分を変更します。

「#000」で黒、「#fff」で白。
他にも、カラーコードで自由に設定できるので、
作ったヘッダー画像に合わせて色を変えてみてくださいね。

ついで、あのテキストを編集。
あそこに入れる文字の編集ですね。

コイツは簡単。

keni619

ワードプレスの設定で変更可能です。

ただし、今までの賢威5.0とかだったら、
phpの記述の中に直接テキストを書き込んでいたので、
「改行」が使えたし、リンクなども使えましたが、
ワードプレスのキャッチコピーを直接持って来るので改行などのタグは使えません!

賢威6.1~ヘッダー画像の上下幅を変えたい

賢威6.1マネー版で、ヘッダーに画像を設定した場合、

keni615

このヘッダーは半分くらい真っ白なので見えにくいかもだけど、
ヘッダー画像の上部、と、ヘッダー画像とグローバルメニューの間、
要は、ヘッダー画像を挟んで上下のスキマが広いので、
細めのヘッダー画像を作っても、ちょっとヘッダーが大きくなりすぎな気がします。

まぁ、ヘッダーを目立たせて出オチを狙うってのもありかもですが、
そういうのはランディングページの役目であって、
コンテンツ重視のメインブログのヘッダーが異常に派手なのはいけすかない・・・

サイトが立ち上がった瞬間、読者さんの受ける印象として、
ヘッダー「だけ」ってのもねぇ。。。Σ( ̄Д ̄;)

ここにさらにイメージ画像を入れてしまうと、
サイトが立ち上がったとき、まるっきりコンテンツ部分が見えなくなってしまうでしょ?

それではメインブログとしてちょっと・・・

あと、PRIDEみたいにアドセンスを利用する場合、
ヘッダーが勝ちすぎて、ヘッダーとアドセンスしか見えない状態だと、
アドセンスの警告対象にもなってしまうので注意です。

ま、最初に見たとき、PCの画面半分くらいがヘッダーで埋め尽くされてて、
「あぁ、こりゃしつこいわ・・・」と思ったのがきっかけで、
ヘッダー画像を細く作り直したり、いろいろしたんだけど、

根本的にヘッダー画像の上下の余白が大きすぎるんだ!
という責任転嫁で自分を納得させ、じゃぁ、あの幅を縮めよう!
ってなことでやってみました。

「外観」⇒「テーマ編集」から、「design.css」へ進みます。

keni613

その中から、下記のような記述を探します。

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
background: url(./images/common/bg-header.png) center bottom repeat-x #ffffff;
font-size: 1.2em;
}

* html #header{ background: #ffffff; } /*IE6*/

#header-in{ padding: -1em 0; } ← ここがヘッダー画像のすぐ上の幅

/*●ヘッダーロゴ(メインタイトル)*/
#header #header-title{
float: left;
width: 59.5%; /*ロゴ(メインタイトル)下の

の1行の幅はこちらのwidthの値を変更*/
}

#header .header-logo{
margin-bottom: 0.2em; ← ここがヘッダー画像のすぐ下の幅
font-size: 2.167em;
}

私はヘッダー画像のすぐ上の幅を「-1」にして、
ヘッダー画像のすぐ下の幅を「0.2」にしています。

keni616

なんか、すっきりした感じ♪

SIRIUSで簡単ホームページ~ヘッダーを作ってみよう

ここでは、SIRIUS(シリウス)を使って、
ヘッダー画像を極めるためのあれこれを解説します。

  • ヘッダータイトルや説明文を編集する
  • ヘッダー作成機能を使ってロゴや画像を入れる
  • オリジナル画像を使ってヘッダーを作成する

この3段階でお話をすすめます。

step1 ヘッダータイトルや説明文を編集する

まずはこの部分。ヘッダーのタイトルや説明文を、
ロゴ機能を使わず、シリウスのデフォルト設定で使用する場合。

  • ヘッダータイトルや説明文の仕組み
  • 色やフォント、サイズを変更する方法

step2 ヘッダー作成機能を使ってロゴや画像を入れる

  • シリウスであらかじめ用意されているヘッダー画像を編集し、
    オリジナルロゴや画像を入れる方法
  • ヘッダーのロゴを使うためにデフォルトのサイトタイトルや
    説明文を非表示にする方法

こんな感じのヘッダー画像を作成していく方法です。
詳しくは動画にしています。

※(追記)作ったオリジナルヘッダー画像をシリウスで使用するときは、
必ず、「header」という文字を頭に入れてください。
頭に「header」という文字が無いと、
シリウスでヘッダー画像であると認識しませんのでご注意。
header1」「headersakana」など、最初に「header」さえあればあとは自由です。

step3 オリジナル画像を使ってヘッダーを作成する

いよいよ、オリジナルヘッダーの作成法。

この機能を操れば、自在にかっこいいヘッダー画像が作れます。

やり方は動画にしています。

今回は、あくまでもデモサイトで解説したのですが、
サイトのヘッダーに入れるキャッチコピーは、
サイトの命そのものです。

しっかり練って、言葉を選んで、
そのキャッチコピーを思いっきり際立たせる画像を使い、
デザインを組み立てましょう。

賢威でWordPress~サイズの違うヘッダー画像を入れ替えて全体を修正する

賢威のヘッダー画像は、一番最初に賢威のユーザーサイトにある、
テンプレートメーカーで作成するときに、
「これを使いたい!」っていうのをあらかじめ設定できます。

ヘッダー画像は、後から変更することもできますし、
最初はテキスト文字だったのを画像に変えることもできます。
※ テキストから画像に変える場合はこちらをごらんください。

続きを読む

賢威でWordPress~ブログのヘッダーを画像にする

賢威5.0テンプレート」は、最初にテンプレートメーカーで、
ブログのタイトルを「テキスト」にするか、「画像」にするかを選べます。

けれど、後からやっぱり…ってとき、
また、テンプレートを作り直して、テーマ編集をやり直し…なんてしなくても、
簡単に差し替えることができます。

続きを読む