きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(小技編) 関連テーマを非表示にする

<<   作成日時 : 2008/04/05 10:23   >>

ブログ気持玉 0 / トラックバック 0 / コメント 12

◆ 解決シリーズ 〜 ウェブリブログ事務局で見かけた要望コメント ◆
記事ページの関連テーマ周辺が仕様変更されたました。

(3/31) テーマページ、テーマレーダーを機能改善しました
(3/28) テーマレーダーの変更について


以前、第6回 記事ページのフォント♪『 関連テーマ 』で書いた内容と
デザインの指定はあまり変わらないようです。


ウェブリブログ事務所のブログへのコメントを見ていると、
関連テーマに表示されるテーマがユーザーの意向に副わないケースもあるようです。
自分でテーマを選べると一番いいのですが…。


今回は関連テーマを非表示にするCSS編集をしてみます。
ただ、『関連テーマ』『設定テーマ』『一覧』はセットになっているので、
個別にデザインの指定は出来ません。
この3点は全て非表示になります。



関連テーマを非表示にする  

デザイン指定の場所は『記事ページ』の『記事フッタ』部分です。

見出しの指定場所は『/* 関連テーマ見出し */ 』 
#blog-foot #theme h2{の後に下の文字列を追加

display:none;


テーマは新規で次の文字列を入力します。

/* 追加 関連テーマ(リンク) */
#blog-foot #theme a{
display:none;
}



【追記 08/05/14】
FireFox で、リストのマーカーが表示されたままなのを確認しました。
マーカーを消すには次の文字列を新規で入力します。

/* 追加 関連テーマ リスト*/
#blog-foot #theme ul{
list-style:none;
}



※ IE では上記の文字列を追加しなくてもリストのマーカーは表示されません。
※ IE、FireFox 以外のブラウザでは確認していません。


  C 『 記事ページ 』   CSS 全体Map 

/*----------------- 記事フッタ -----------------*/

#blog-foot{
}

/* 関連テーマ見出し */
#blog-foot #theme h2{
display:none;
}

/* 追加 関連テーマ (リンク) */
#blog-foot #theme a{
display:none;
}


/* 追加 関連テーマ リスト*/
#blog-foot #theme ul{
list-style:none;
}


/* テーマレーダボタン */
#blog-foot #theme #rader{
}




これで『関連テーマ』『設定テーマ』『一覧』部分は非表示になります。
今回のCSS編集は使い勝手をよく考えて行ってください。




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


|ω・)ノシ See you♪

|彡 サッ






CSS編集や小技でブログをコーディネート♪
デザイン変更のための記事をいろいろまとめたページです。

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

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


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

タイトル
本 文

コメント(12件)

内 容 ニックネーム/日時
はじめまして。 days gone by と申します。

関連テーマを非表示にする方法を読ませていただきました。
早速CSS編集をさせて頂きました。
素晴らしい記事の公開ありがとうございます。m(_ _)m
days gone by
2008/06/05 13:16
days gone by さん、いらっしゃいませ(ん)
はじめまして(ぺこ)


お役にたてたようでなによりです(にこ)


関連テーマについては『非表示にしたい』と言う声を見かけたのでやってみました。
かく言ううちもその一人だったりするんですが(ん)


それでは〜、楽しいブログライフを(にこ)ノ
mairis
2008/06/05 13:47
出来ました〜(拍手)
ありがとう(ぶーん)
後は記事ページ下にある
Ads by Googleの広告を非表示
もしくは文字を小さくしたいのですが
方法は ありますか?
無料会員なので無理かな(むう)
方法あるなら暇な時教えてください(ぺこ) 

ひろたん
2011/02/22 16:43
ひろたんさん、いらっしゃいませ(にこ)
CSSがんばってますね〜(わら)

>Ads by Google
ちょうどコレのCSS編集に頭を悩ましてるトコロだったりします。
ザクッとしたスタイル指定は出来てるんですけど、今はちょっと雑すぎて人様に見せられるものじゃありませんのでもう少しスマートな形のが出来るまでお待ち下さいませ_| ̄|○
mairis
2011/02/23 10:15
お久しぶりです(@ぺこ)

2日間PCから離れられず・・・(@げー)
mairisさんの記事を見ながら始めから作ってましたが
記事ページの
『同じテーマのブログ記事』
とゆう文字がいやに大きいのが、とても気になるのです(@なみだ)
どこを編集したらよいのでしょうか??

あと私の作ったブログは大丈夫なのか出来ればチェックを
お願いしても構わないでしょうか

どうぞヨロシクお願い致します

たむたむ
2011/06/05 19:21
たむたむさん、いらっしゃいませ(にや)
「同じテーマのブログ記事」のトコロはいつのまにかIDがついてますね。
気がついてませんでした(;^_^A アセアセ…

この部分のスタイル指定は新規で以下のような文字列を追記してください。

#blog-foot #related h2{
font-size:13px;
}

とりあえず文字サイズの指定のみ記入してあります。
また折をみてこの領域のCSS編集についての記事を上げたいと思います。
ありがとうございました(にこ)

ブログはすっかりイメージが変わられて可愛いデザインになってますね(わぁ)
細かいトコロまでオリジナル感が出ていい感じですね〜♪
さて、全体的な仕上がりは問題ないようですがCSS編集の方はうっかりポイントがちょっとだけありました。

209行目付近
} が余分に書かれてますので削除

472行目付近、、482行目付近、502行目付近 それぞれURLを指定
background-image: url(画像 4のURL);
background-image: url(画像 5のURL);
background-image: url(画像 6のURL);

修正ポイントは以上です(ん)
mairis
2011/06/05 21:43
mairisさん
ありがとうございます(@ぺこ)

文字は小さくなりました(@わら)
ついでに、そのまま下線を入れてみました(@拍手)
そしたら見た目的に
その下の『前記事 トップ 後記事』と『気持玉』の
部分の下線もmairisさんの用に入れたいのですが・・・
これも、また、どこをイジッてもダメなんです(@だって)

「また折をみてこの領域のCSS編集についての記事を上げたいと思います。」

と書かれてあったので、その時にでもヨロシクお願い致します

CSSのうっかりポイントを修正しました(@わら)
画像のURLの所は画像を使用していなかったので削除致しました。(@ん)

また、何かの時は
ヨロシクお願い致します
たむたむ
2011/06/06 01:17
>> たむたむさん
気持ち玉の見出し部分は以下の文字列を新規追加でデザイン指定を行います。
h2.h2-general{
font-size:13px;
border-bottom: 5px dotted #FF99FF;
}

あと、スタイルシートの記述について気がついた修正ポイントの追記です。
■ 文字列を削除するか、「background-image:none;」に置き換え。
57行目『#banner』、222行目『#subbanner』
background-image:url(画像のURL); ←削除or置き換え

■「font-family」で空白のあるフォント名または全角文字を使用している場合は引用符『"』(半角)で括ります。
110,120,126,134,139,147,154,285,315,361,367,411,419行目付近
× font-family: Meiryo UI ;
○ font-family: "Meiryo UI";

以上かな(ん)
mairis
2011/06/06 12:33
mairisさん(はーと)本当にありがとうございます(@はーと)

さっそく気持玉の所を編集いたしました(@ういんく)
フォントの記述は前にmairisさんの記事で見たように思い探したんですが
分からず・・・(@気まずい)(疲れ果ててとゆうのが・・本音かも・・(@あせ))
フォントサイズをちょっとイジって使用・・(@ひょえ)
自分のPCで見るには成功したので、そのまま使ってしまいましたぁ(@あらやだ)
私はフォントを全部同じに変えたくなる性質なので
CSS編集の時、『全てのフォントを同じに』みたいな所があれば便利なのにぃ(@だって)と、ついつい思ってしまいます(@まじ)

画像の所は置き換えました(@わぁ)
これで、もうミスがないか気にせず寝られますぅ(@ぶーん)

本当に×3ありがとうございました(@ぺこ)
また、何かありましたらヨロシクお願い致します(はーと)(はーと)
たむたむ
2011/06/06 17:29
>> たむたむさん
お疲れさまでした(ん)

フォントを一括変更の指定方法もないこともないです(にや)

div{
font-family: "Meiryo UI";
}

こういう記述をするとほとんどの場所のフォントが変わります。
ただ、想定外の場所が変わってしまったり、フォントサイズは部分的に変更しないといけないというコトを考えると、やっぱり部分的に指定していくのが現実的かもしれないですね(^◇^;)

フォント指定は閲覧しているパソコンに指定したフォントが入ってないと標準のフォントに置き換えられますので扱いには注意したいところです。
XP以前のパソコンだとメイリオが入ってない場合もあります。
でも、たむたむさんところのブログのフォントサイズならメイリオ入ってないパソコンでも崩れて見えないので問題ないと思います。

たむたむさんのブログデザインはうまくまとめられていい感じですね(にこ)
これからも楽しみブログカスタマイズ頑張ってください〜☆
mairis
2011/06/07 10:54
ありがとうございました(@ぺこ)

実を言いますと・・
フォントを変えた時、ちょっとテーマタグの所で2行になるとゆう
トラブルが発生したんですよぉ(@しょぼ)
トップページはOKなのに記事ページになると・・・って事で記事の横幅を
広げる作戦にでました(@やるお)
見事成功(ぴーす)

まだ、もう少し変えたいと欲を出し(@あらやだ)

(ほし)CSS(フォント編)第4回 コンポーネント領域のフォント(@ほし)

のページを見てコンポーネント内のポインタを置いた時の色の変更を
すべてに行ってみましたぁ(@拍手)
あと、色々やってみて・・・・
ブログが・・・めっちゃ汚くなってしまたりとか・・・(@うえ)

適度にイジルのが一番だと悟りました(@あらやだ)

で、今日『これで本当の完成でっっす(@わら)』
気持は毎月トップ画像変更!!!!!なので
楽しみながら頑張りまっっっす(@ぐっど)
たむたむ
2011/06/07 18:06
>> たむたむさん
何はともあれオリジナルデザイン完成おめでとーございます(三角帽子)
あれやこれややってみてオーマイガッ(ぎょ)
…なんて日常茶飯事でゴザイマス(あらやだ)
いろいろチャレンジするのもまたひとつの楽しみ方かと。
それでは楽しいカスタマイズライフを〜(わら)
mairis
2011/06/09 16:06

コメントする help

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

* ぱにゃステ *

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

CSS(小技編) 関連テーマを非表示にする きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる