きまぐれAWA's Life

アクセスカウンタ

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

<<   作成日時 : 2010/03/28 22:22   >>

ナイス ブログ気持玉 6 / トラックバック 2 / コメント 13

プロフィール領域の『ブログ名』と『ブログ紹介』を非表示にするCSS編集です。
非表示にする方法は以前にも書いたのですが、背景色に左右される方法でした。
今回は背景色に左右されない方法を書きますね(にこ)



画像



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


まずは題名の部分、「ブログ名」「自己紹介」です。
こちらは #profile dt{} のところに「display:none;」を書き込み非表示にします。

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




そして次が今回のポイント、ブログの名前の表示の部分です。
ここを消すためにCSS編集に加えて、ブログ紹介文でタグを書き込みます。

ではまずCSS編集から(ん)
新規で次の文字列を書き込みます。

#profile dl{ visibility:hidden; }



CSS編集はコレだけです。
上記スタイル指定を反映させるとプロフィール領域の文字が全て消えます(@びっくり)!?
ですが、これで正常な動きですので気にせず次のステップに移ります。
※ プロフィール領域の文字が消えていない場合は記述ミスの可能性アリです。


次にプロフィールの紹介文を下記のようにタグで括ります。

<div style="visibility:visible;">ここにブログ紹介文をかきます。</div>



タグを書き入れたブログ紹介文を設定反映すると消えていたブログ紹介文が表示されます。

※ ここでさらに(まじ)
上記タグに『margin-top:-1.3em"』を書き加えるとブログ紹介文上部の余白がなくなります。
例えばこのブログではこんな風に書き込みをしています。(画像タグは省略)

<div style="visibility:visible; margin-top:-1.3em" >Beer 飲みながら わいわいパンヤ
AWA's Life へようこそ♪
−−−−−−−−後略−−−−−−−−</div>



画像








おさらい


■ CSS編集 ■
CSS編集では以下の2つのスタイル指定をおこないます。

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

/* ブログ名とブログ紹介文 */
#profile dl{ visibility:hidden; } /* ブログ名とブログ紹介文を非表示 */




■ ブログ紹介文にタグを挿入 ■
ブログ紹介文を以下のようにタグで括ります。
※ 上部余白を消すバージョン

<div style="visibility:visible; margin-top:-1.3em" >ここにブログ紹介文をかきます。</div>



以上です(ん)
お疲れ様でした(にこ)

※今回のCSS編集はこちらの記事を参考にさせていただいています。




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

|ω・)ノシ See you♪

|彡 サッ



【関連記事】
CSS(小技編)プロフィール領域のブログ名を見えなくしてスッキリ♪


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


テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

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

トラックバック(2件)

タイトル (本文) ブログ名/日時
CSS(小技編) プロフィール領域のブログ名を見えなくしてスッキリ♪
◆ 解決シリーズ 〜 ウェブリブログ事務局で見かけた要望コメント ◆ トップページにあるプロフィールのところ。 ここには『ブログ名』と『ブログ紹介』が表示されています。 タイトルの所にブログ名が表示されていますが、プロフィールの所にもまたブログ名が(だって) 『プロフィール領域で表示する必要はないんじゃない?』 と、このように感じる方もいるようです。 今回はプロフィール領域のブログ名を見えなくするCSS編集をしてみます。 それに合わせて題名(ブログ名とブログ紹介)も非表示にし... ...続きを見る
きまぐれAWA's Life
2010/03/28 22:31
【 CSS編集 】 ウェブリブログ ・ カスタマイズ 
  ...続きを見る
〜 さら さら さらり 〜
2014/10/19 00:17

トラックバック用URL help


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

タイトル
本 文

コメント(13件)

内 容 ニックネーム/日時
mairisさん、はじめまして♪

mairisさんのブログは、いろんなところが可愛く作られていて
拝見していてと〜っても楽しいブログですねっ(^_^)

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
えと・・・、ちょっと質問、いいでしょうか?

「次にプロフィールの紹介文を下記のようにタグで括ります。」
・・・という文の直下なのですけれど、

「div style="visibility:visible;」のすぐ後ろに、
「"」は無くてもいいのでしょうか?

あ、いえ、なんとなくそう思っただけですので・・・、
「無いのが普通みたいだよ〜♪」ということでしたら
どうか気になさらないでくださいネ。(汗)
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

こちらはCSSのお話の他に、パンヤのお話などもあったりして、

面白い記事や勉強になる記事が
宝島の財宝みたいにいっぱい埋まっていそう(笑)なので、
またお邪魔させていただきますねっ♪

どうぞよろしくお願いいたします(^_^)
Aki
2010/04/04 16:53
Akiさん、いらっしゃいませ(ん)
はじめまして、こんにちは(にこ)ノ

ブログをはじめたころからブログカスタマイズに興味があったので、
いろいろとやってきて今に至ります(にや)
お褒め頂いたりすると、ありがたいような恥ずかしいような…です(〃ノノ)
でもでも、そんな風に行ってもらえるととても励みになりますので、
これからも頑張りたいと思います(`・ω・´)ゞ

>ちょっと質問
はい、「"」はいります(はず))
チェックが甘かったようで申し訳ございません(o*。_。)oペコッ
記事のほうも修正いたしました。
ご指摘ありがとうございます〜(*_ _)人
mairis
2010/04/04 18:51
参考になりました。ありがとうございます
A.OHI
URL
2011/01/21 14:14
A.OHIさん、いらっしゃいませ(ん)
お役に立てて何よりです〜♪
mairis
2011/01/21 17:21
(ばら)mairisさん(@ばら)はじめまして…(@ほし)

PC初心者のサラです(@ういんく)
mairisさんに教えていただいたとおり…
トップページのブログ名・紹介文なくしてみました(@三角帽子)

…で、次の紹介文に<div style= 次(@それ)『"』『”』になってしまいます(@わーん)

『チョンチョン』?の付け方…ご指導いただけないでしょうか。
どうぞヨロシクお願いいたします(@しょぼ)

サラ
2011/12/05 11:39
(ばら)mairisさん(@ばら)2回目のコメントさせていただきます…(@ほし)

(にこ)おかげ様で…(ばら)mairisさん(@ばら)のコピペさせていただき
setできました(@にこ)

どぅも…ありがとうございました(@はーと)
これからも…ヨロシクお願いいたします(たいよう)

お礼と感謝の気持ちをこめて…(おくりもの)
サラ
2011/12/05 15:32
サラさん、いらっしゃいませ(ん)
コメント遅くなり申し訳ございませんでした┌◯ ペコッ
なにはともあれ思い通りに出来たようで何よりでした。
また何かありましたらお気軽にご質問くださいね〜(にや)ノ
mairis
2011/12/06 21:58
mairisさん、こんばんは^^

mairisさんのお陰で着々とスタイルの変更が進んでおりますm(__)m
本当に分かり易くて大助かりです^^
ありがとうございます(^^)/
taka_c230
2012/02/01 00:29
taka_c230さん、いらっしゃいませ(にこ)
綺麗に整ってステキな感じのブログですね♪
ブログもCSS編集も頑張って楽しいブログライフを〜デス(ん)人
mairis
2012/02/01 14:02
とっても参考になりました。
ところでhelpアイコンって消せないんでしょうか?
あれって、まったく無意味だと思うのです。
有名人blogでは表示されていないのでなんか方法があるのですかねー。
inam
2012/02/05 22:03
inamさん、いらっしゃいませ(にや)
ご訪問ありがとうございます(わら)

>helpアイコン
たしかにあまり使いませんよね(気まずい)
無理やり見えないようにするのであればCSS編集で…

#contents #postlist h2 a img,
#blog-head h2 a img{
display:none;
}

と書いてしまえば出来ないこともないのですが、これだとRSSのボタンも見えなくなっちゃうからあまり実用的では無いかもしれませんね(;^_^A アセアセ…

有名人のブログというと公式ブログになってると思います。
公式ブログは一般のものと構造が違ってるようです(*・ω・)b ネッ
mairis
2012/02/06 18:21
こんばんわ。mairisさん。

やはりCSS編集だけというところに無理がありそうですねー。
テンプレート自体のカスタマイズもさせてくれればいいのに・・・>webryさん

「head領域の編集はどうすればいいの?」
とサポートに問い合わせてみたら
「できないよ。ごめんね」
と返ってきてしまいました。残念・・・

あ、カスタマイズするときいつでも参照できるようにリンクを貼らせていただきました。
今後ともよろしくお願いします。
inam
2012/02/06 22:15
>inamさん
ウェブリブログは初心者の方でも簡単に始められるように簡素化してあるのがいい所でもあり悪い所でもあり(笑)
カスタマイズにはまりだすと手を加えられる部分が限られていてちょっと物足りない感じですね。
HTMLを書き換えられるともっとカスタマイズの幅が広がるのにな〜と思います。
でも結構いろいろカスタマイズできちゃったりしますので、限られた範囲内で思い存分楽しみたいですね(*・ω・)b ネッ
これからもブログライフ楽しんでくださ〜い(にこ)
mairis
2012/02/07 13:41

コメントする help

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

* ぱにゃステ *

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

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