きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(小技編) トラックバック領域をすっきり 【その2】

<<   作成日時 : 2009/09/08 17:52   >>

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

トラックバック領域をすっきりさせるCSS編集第二弾です(ん)
前回の記事ではトラックバック領域のフォーム全体を非表示にする設定をしました。
でも、この方法だとちょっと困ったコトが出てきます。

それは『トラックバック用URL』が消えてしまうことです。
ウェブリ同士なら該当記事URLを記事内に書き込むと自動的にトラバが作成されます。
詳しくはよくわかりませんが、他サービスの場合はこの『トラックバック用URL』が必要なのかも?
なくてもOKかもしれませんが、せっかくあるものですので消さずにおけないかと考えてみました。
ということで、今回は『トラックバック用URL』を消さずにすっきりさせてみたいと思います。



画像


『トラックバック用URL』を残してトラックバック領域をすっきり♪


前回は『display:none;』という文字列を使ってフォームフィールド全体を非表示にしました。
この文字列はボックス自体を非表示にするので『トラックバック用URL』部分も消えてしまいます。

今回は『visibility』という文字列を使います。
こちらはボックス内の文字などを表示・非表示にスタイル指定出来ます。
ボックス自体は残るので、表示・非表示の使い分けで特定部分だけを表示することが出来ます。
『visibility』は『visible(表示)』、または『hidden(非表示)』と組み合わせて使います。


それではデザインの指定の仕方です(ん)
以下の文字列をスタイルシートに書き込みします。
追加する場所はどこでもOKですが、『トラックバック、コメント領域』あたりがいいかもです。


/* トラックバック フォームフィールド (非表示設定) */

/* フォームフィールド全体を非表示 */
#trackback_form{ visibility:hidden; }

/* トラックバック用URLを表示 */
#trackback_form .tbkurl{ visibility:visible; }

/* トラックバック記事作成セルを非表示 */
#trackback_form td{ display:none; }



出来上がりはこんな風になりますρ(@にや) ※デザインテンプレートはプレーン>デフォルト

画像





『トラックバック用URL』と『コメント欄』の間にできる余白について


上記のスタイル指定で『トラックバック用URL』を残したまますっきりすることが出来ました。
このスタイル指定でちょっと気になる部分がありまして・・・。
『トラックバック用URL』と『コメント欄』の間に少し余白が出来ています。

この余白が出来る原因は『visibility』の効果のためです。
『visibility』はボックスの表示・非表示の指定をしますが、非表示にしてもボックス自体は残ります。
そのためページレイアウトは変わることはなく余白が出来るというわけです。


画像


『トラックバック記事作成』の見出し部分の処理が個別に出来ないのでこのような設定にしました。
これくらいの余白であれば許容範囲かと思います(気まずい)



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

|ω・)ノシ See you♪

|彡 サッ





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



テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

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

トラックバック(0件)

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

トラックバック用URL help


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

タイトル
本 文

コメント(8件)

内 容 ニックネーム/日時
こんにちは(にこ)
すごいですね
本当、すっきりしますね

でも私には高度すぎてできそうにないです(わーん)

またわからないことあったら教えて下さい(@うる)
kimamamama
2009/09/09 10:40
kimamamamaさん、いらっしゃいませ(にこ)
ご訪問ありがとうございます(ぺこ)

ブログ始めてからいろいろとカスタマイズにも凝ってたりで、
こんな記事も書いてたります(ん)
『いらないものは消しちゃえ〜』ってタイプなので消してみました。
ブログも気持ちもすっきりしました(ひょえ)v

CSS編集はちょっぴり難しそうに思えるかもですけど、
やってみると出来ちゃうものだったりしますよ〜♪

またお役に立てるようなことがあれば何なりとで〜す(わら)
mairis
2009/09/09 11:08
はじめまして〜こんばんは
つい先日ブログなるものを始めて色々調べてたんですけど
中々難しくて。
困ってたら、<del>ココ</del>広場で色々アドバイスしてる方を見つけたんです。

まぁつまり、なんか載ってるかなぁと訪問したら
<span style=font-size:larger>い〜〜〜ぱい</span>載ってるじゃないですか〜

チビチビとCSS編集のとこ参考にしながら、
これから色々試していこうかと思います。

これからも頑張って下さい〜
れき
2009/11/17 00:53
れきさん、いらっしゃいませ(にこ)
はじめまして〜(ん)

稚拙なものですが、少しでもブログカスタマイズの参考になればと思います。
なかなかややこしい部分もあるかと思いますが、
疑問があればお気軽にご相談くださいませ〜。

応援コメントありがとうございました(にこ)
れきさんも頑張ってくださ〜い(わら)
mairis
2009/11/17 08:18
mairisさん

こんにちは!!(にや)

少し教えてください。
ここの画面にPCの画像貼ってありますが
どういう方法でしてあるのでしょう??

Prt Scrをペイントに張り付ける
方法しか知りません。
それですと画像が汚く良く見えないので
よかったら教えてくださいね(@わぁ)

(*^ー^)ノ☆。・:*:.・★,。・:*:.・☆マタネー(@三角帽子)

pinku
2009/11/26 10:45
pinkuさん、いらっしゃいませ(ん)
おひさしぶりです〜(にこ)

PC画面やブラウザの画面のキャプチャ(撮影)にはキャプチャ専用のソフトを使ってます。
使用しているのは「キャプラ」というフリーソフトになります。

このソフトの他に「Sleipnir」というブラウザのプラグインの「SnapCrab」というのも利用しています。
こちらのプラグインはブラウザの見えない部分まで全部キャプチャ出来るので重宝してます♪


あと、キャプチャした画像は画像編集ソフトの「Pixia」で編集しています。
ペイントより多機能な分、慣れは必要ですけどいろいろ出来るので覚えても損はないかな〜って思います。
mairis
2009/11/26 12:21
mairisさん

ありがとう!!

専用のソフトが要るんですね。

なるほど!!これはまた難しそうですね。
他に方法考えてみます。

ありがとうございました。(@ぺこ)

(*^ー^)ノ☆。・:*:.・★,。・:*:.・☆マタネー(@ういんく)

pinku
2009/11/26 16:48
>> pinkuさん
ん〜、難しいですかー(気まずい)
また機会があったらチャレンジしてみてくださいな(ん)

基本的に【Prt Scr】+【ペイント】でも綺麗な画像はできますよ。
あと保存する画像のファイル形式などにも注意したほうがいいかもしれないです。

写真やイラストなど色の多い画像→JPG(拡張子:.jpg)
文字が多いWebページなどの切り抜き→PNG(拡張子:.png)

それから小さい画像などをGIF形式で保存する場合は色数に注意してください。
GIF形式で扱える色数は256色になっていますので、色数の多い場合は画像がとても汚い仕上がりになります(;^_^A アセアセ…
(たぶんこれかな〜なんて思ったり(まじ))

別件です(ん)
ブログの表示がおかしな感じでしたので、スタイルシートをチェックしてみました。
スタイルシート内に以下の文字列は書き込めませんので削除してください。

<HEAD>
<STYLE type="text/css">
<!--
-->
</STYLE>
</HEAD>

※スタイルシートの頭くらいに書き込まれているものです。
mairis
2009/11/26 18:07

コメントする help

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

* ぱにゃステ *

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

CSS(小技編) トラックバック領域をすっきり 【その2】 きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる