きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(小技編) プロフィール領域のブログ名を見えなくしてスッキリ♪

<<   作成日時 : 2008/06/24 19:11   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 2 / トラックバック 3 / コメント 10

◆ 解決シリーズ 〜 ウェブリブログ事務局で見かけた要望コメント ◆
トップページにあるプロフィールのところ。
ここには『ブログ名』と『ブログ紹介』が表示されています。
タイトルの所にブログ名が表示されていますが、プロフィールの所にもまたブログ名が(だって)
『プロフィール領域で表示する必要はないんじゃない?』
と、このように感じる方もいるようです。
今回はプロフィール領域のブログ名を見えなくするCSS編集をしてみます。
それに合わせて題名(ブログ名とブログ紹介)も非表示にしてみますね。


画像




※まず初めに確認を。
『ブログ名が表示されている部分の背景色が単色か?』
この点に注意してください。
今回はブログ名の文字を背景と同色にして見えなくしようと思います。
背景が写真やイラスト、または模様などの場合は思い通りの効果を得られません。
選択しているテンプレートによってはうまくいかない場合もあるので、
この点を十分に理解・確認をしてからデザインの指定にかかるようにしてください。








 ブログ名を見えなくしてプロフィール領域をスッキリする♪ 



プロフィール領域のCSS編集をする場合、

◆ 題名 : 【 ブログ名 】【 ブログ紹介 】と書いてある部分のセット
◆ 本文 : 【 自分のブログの名前 】と【 ブログ紹介文 】のセット


このように、それぞれセットでしかデザイン指定ができません。

もしセルひとつひとつをクラス分けしてあるなら、
必要なものは表示、後は非表示とできるのですが…。
しかし出来ないことを現状で言ってもしょうがないので、
そのあたりは工夫することでなんとかやってみましょう(ん)




 まずは題名部分から♪ 

まず題名ですが、これは非表示にしても問題はないと思います。

デザインの指定場所は『/* ラベル(「ブログ名」「自己紹介」) */』 
#profile dt{の後に下の文字列を追加

display:none;



これで題名は非表示になります。

もし『プロフィールの題名は残したい』という場合には、
プロフィールの始めを『ブログ紹介』という文字から書き始めればオーケーでしょう。
プロフィールの題名はお好みで(にや)



 ブログ名とプロフィール本文♪ 

さて、問題はブログ名とプロフィール本文です。
この二つはセットになっているので個別でデザイン指定をすることは出来ません。
なので『ブログの名前』は非表示にするのではなく、見えなくする方法で対処してみようと思います。


ブログ名の表示されている部分の背景色のカラーコードを確認します。
背景色のカラーコードはペイントソフトなどを利用すれば確認できるでしょう。

※Windowsのペイントではカラーコードの確認はできません。
フリーのペイントソフトでもこのような機能を持ったものがあるのでそちらを利用します。
うちの場合は『Pixia』というソフトを使用しています。




確認が出来たら、ブログ名の文字の色を背景と同色にします。
うちのブログの場合(08/06/17現在)は背景色が白だったのでカラーコードは【#FFFFFF】でした。


デザインの指定場所は『/* プロフィールテキスト */』 
#profile dd{の後に下の文字列を追加

color:#FFFFFF;

※ブログ名部分の背景色にあわせて【#FFFFFF】のカラーコードを置き換えてください。



以上2点のCSS編集はこちら

 B 『 トップ、月別、テーマ別ページ 』   CSS 全体Map 

/*---------------- プロフィール ----------------*/
#profile{
}

/* ラベル(「ブログ名」「自己紹介」) */
#profile dt{
display:none;
}

/* プロフィールテキスト */
#profile dd{
color:#FFFFFF;

}




これで題名は非表示に、ブログ名は見えないようになりました(にこ)




このままではプロフィール本文の文字が見えない、または見えにくい状態です。
そこでプロフィール本文の文字に色をつけます。
文字に色をつける方法ですが、これはCSS編集ではなくタグを使用します。
これは記事作成の際に文字を装飾するやり方と同じです。

管理ページからブログ >設定 >基本表示設定(ブログ紹介編集・デザイン)と進みます。


画像




プロフィールの本文を編集するときに、文字に色の指定をします。
文字に色をつける場合は下のようなタグを利用します。

【例 文字色赤】
<span style=color:#FF0000>この部分の色が変わります</span>

文字色は『#FF0000』の部分、カラーコードを置き換えて色の指定をします。
カラーコードはこちらを参考にしてもオーケーです。

Webセーフカラーチャート


本文に色指定をしたら [ 設定 ] ボタンを押して設定完了です。


画像



このようになりました(にこ)



今回のデザイン指定は背景部分に少し制約がかかりますが、
上手に応用をすることでなんとか狙った効果を得ることが出来そうですね(ん)







 ブログ名は見えないだけ 

このCSS編集でブログ名が見えなくなくなってスッキリしました。
何度か触れていますがブログ名は見えないだけです。
ブログ名のところでカーソルをドラッグさせると、このように文字は反転表示されます。


画像



今回のCSS編集は効果をよく理解したうえでやってみてくださいね。







 プロフィール領域は要らない? 


プロフィールは書かないし、いっそのことプロフィール領域自体を消してしまいたい。
こんな場合は次のようにCSS編集を行います。

 B 『 トップ、月別、テーマ別ページ 』   CSS 全体Map 


/*---------------- プロフィール ----------------*/
#profile{
background-image: none;
}

/* ラベル(「ブログ名」「自己紹介」) */
#profile dt{
display:none;
}

/* プロフィールテキスト */
#profile dd{
display:none;

}





加えて、管理ページからブログ >設定 >基本表示設定(ブログ紹介編集・デザイン)と進み、
ブログ紹介画像を削除します。 (※元から表示させていない場合はそのままでかまいません)
この設定でプロフィール領域は表示されないようになります。

※ここで注意すること(ん)b
パソコンでブログを見る場合はサイドバーなどが表示されます。
ケータイ版ウェブリブログでブログを閲覧する場合には、
サイドバーの情報までは見る事ができないので注意が必要です。
また、ケータイ版の【ブログ紹介】はこちらの情報が表示されますので、
パソコンでは見れないとしてもブログ紹介だけ書き込んでおいた方がいいと思います。






それでは、今回はこのくらいで(にこ)

|ω・)ノシ See you♪

|彡 サッ



【関連記事】
背景に左右されない方法を記事にしました(にこ)b
CSS(小技編)プロフィール領域のブログ名を見えなくしてスッキリ♪ 【その2】


■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■






テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 2
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)

トラックバック(3件)

タイトル (本文) ブログ名/日時
「夜空」テンプレートのカスタマイズ(4)・・・プロフィール欄をスッキリ
プロフィール欄には「ブログ名」と「自己紹介」を表示できますが、「ブログ名」はすぐ上のタイトルに出ているので、「プロフィール欄」には不要であろうと思うのです。 ...続きを見る
オペラ対訳プロジェクト<業務連絡>
2008/10/31 00:38
トップページから「ブログ名」や「ブログ紹介」やその内容を消す方法
ウェブリ広場でよく見かける質問ですが、消したい部分ごとにまとめてみました。 ...続きを見る
KaRaKuRy
2008/12/09 11:11
CSS(小技編)プロフィール領域のブログ名を見えなくしてスッキリ♪ 【その2】
プロフィール領域の『ブログ名』と『ブログ紹介』を非表示にするCSS編集です。 非表示にする方法は以前にも書いたのですが、背景色に左右される方法でした。 今回は背景色に左右されない方法を書きますね(にこ) ...続きを見る
きまぐれAWA's Life
2010/03/28 22:26

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(10件)

内 容 ニックネーム/日時
φ(◎。◎‐)フムフムフム ・・・・
ウェブリブログ使いさんにとって、ありがたい情報ですね(ぐっど)
松下禅尼
URL
2008/06/25 11:43
松下さん、いらっしゃい(ん)

ウェブリブログ事務局のブログを見てると要望コメントを見かけます。
これはそのうちの1つでした。
要望コメでシリーズ化でもしてみよっかななんて思ったり(ぐらさん)σ
とは言ってもまだ3記事とかしょぼい数やけど…(^◇^;)
mairis
2008/06/25 12:46
はじめまして。CSS編集で検索して
こちらにたどり着きました。
今までタイトル画像とか、適当に自分で
いろいろといじってみていましたが、
レイアウトの変更などはやり方が分からず、
こちらを見てとても参考になりました。
いろいろ見させてもらって、徐々に
いじっていこうと思います。
ありがとうございました。
NORI
URL
2008/08/03 12:41
NORIさん、いらっしゃいませ(にや)
はじめまして、こんばんは(ぺこ)

初歩的なことしか書けていませんが、
すこしでもお役に立てたようでなによりです(ん)
自分の思い通りのデザインにするのは手間がかかるかもしれませんがCSS編集頑張ってください(にこ)ノ
mairis
2008/08/04 01:07
はじめまして。検索していてたどり着きました。
うちではvisibility:visibleで小細工してますよ。
(ブログ紹介欄にタグを入れなきゃならないのが難ですが。)
よろしかったら見てやってください。
CSS編集の小技紹介、これからもがんばってください〜。
ゆき
URL
2008/12/09 11:19
ゆきさん、いらっしゃいませ(ん)
はじめまして♪

>visibility:visible
なるほど、そういう手もあるのですね(にこ)

ゆきさんのブログを拝見させて頂きました。
いろいろ興味深い内容の記事ばかりですね。
またゆっくり見させてもらって勉強します(ぺこ)

>これからも〜
最近はぜんぜんアイデアが出てこなかったり(気まずい)
というか、まだまだ勉強不足なのです。
もっといろんなことを覚えたいと思ってます(ん)
mairis
2008/12/09 21:53
こんにちは〜。以前助けていただいた物です。
またお邪魔いたします(@ぺこ)

「プロフィール領域」そのもの全部を消す方法を探していてこちらにたどり着いたのですが、書かれているように、二カ所に「display:none;」を書き加えたところ、文字は全て消えましたが、四角い囲みだけは1センチ幅くらいに縮まって残ってしまいました。

これはもう、どうしようもない事ですか?(@うえ)
それとも私のやり方が間違っているのか。。。

もしお時間ありましたら、教えて頂けると有り難いです。(ぺこ)
クローバーフィールド
2011/06/28 19:20
クローバーフィールドさん、いらっしゃいませ(にこ)
その節はどうもでした(ん)

プロフィール領域をごっそり見えなくする場合は以下のように(にや)
/*---------------- プロフィール ----------------*/
#profile{
display:none;
}

これで領域全部を非表示にできます(にこ)b
mairis
2011/06/29 10:35
かさねがさね、ありがとうございました(@わーん)

いろいろ勉強になりますm(_ _)m

本当に助かりました!(@こなた)
クローバーフィールド
2011/06/29 14:47
>> クローバーフィールドさん
おつかれさまでした〜(たいよう)
mairis
2011/06/30 12:31

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

CSS(小技編) プロフィール領域のブログ名を見えなくしてスッキリ♪ きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる