ニックネーム:   パスワード:
| MyDoblogトップ | Doblogポータル | DoblogMusic | Doblogガイド | ユーザ登録 | 使い方 | よくある質問 | ツールバー | サポート |
どぶさぽちゃんv - どぶちゃん助け合い書き込み寺 -
Blog
[ 総Blog数:210件 ] [ このMyDoblogをブックマークする ] [ RSS0.91   RSS1.0   RSS2.0 ] [ ATOM ]
2005/05/28のBlog
:::::この記事は、
  Doblog卒業なさった のんちぃさんからの置き土産です(^^*
     ありがとうございます♪
     疑問・質問は『どぶさぽちゃんv』へどうぞ。:::::


IE6.0で文字サイズ小にしていると、
「この記事のURL」と「トラックバックURL」が周りの文字に比べて大きいところを見かけます。

Doblog編集部のblog「機能追加に伴うスタイルシートの記述について」にも記載がありますが、
下記追加で直ります。

.blog-linkurl {
font-family : "MS Pゴシック", "Osaka";
font-size : 75% ;
line-height : 125% ;
font-weight : ;
color : ;
padding-left : 5px ;
padding-bottom : 5px ;
text-align : left ;
}

文字の大きさは、「font-size」で調整できます。
うちのblogのように、右寄せにしたい場合はtext-alignを「right」にします。

この部分を線で囲いたい場合は、下記を追加します。
border-style: solid ; (破線にしたい場合はdashed、点線にしたい場合はdotted)
border-color: #000000 ;(色指定)
border-width: 1px; (太さを指定)

ベーシックタイプなど、Doblogで提供されているテンプレートを
かなり長い間使っている方は、
編集部側であちこち変更している点が多いので、
一度選択しなおして設定保存するといいかもしれませんね。
:::::この記事は、
  Doblog卒業なさった のんちぃさんからの置き土産です(^^*
     ありがとうございます♪
     疑問・質問は『どぶさぽちゃんv』へどうぞ。:::::


各記事の画像のフチの線って気になりませんか?

.blog-image img {
border-style : none;
}

この3行を追加すると、ハイ、消えました~。

他にも消す方法があるかもしれません。
:::::この記事は、
  Doblog卒業なさった のんちぃさんからの置き土産です(^^*
     ありがとうございます♪
     疑問・質問は『どぶさぽちゃんv』へどうぞ。:::::


いろいろな方法はあるかと思いますが、
私のいつものやり方でご説明します。

(1)素材サイトで好きな画像をパソコンに保存する。
 IEなら画像の上で右クリックし、「名前をつけて画像を保存」。

(2)「記事の作成」で、背景にしたい画像をアップ。
  (下書き状態でも可。)

(3)「デザインの変更」で、背景画像を使いたい場所によって、
  下記のように設定。
■記事の中のシーンごとに背景を設定する場合
.blog-text {
・・(略)・・
background-color: #ffffff;
background-attachment: fixed;
background-position: 95% 95%;
background-repeat: no-repeat;
background-image: url(http://www.doblog.com/img/u4439/FI225667_0E.jpg) ;
}

このようにblog-textのところで背景について設定を追加します。

background-color:背景色を指定します。
 色番号は、
 白なら#ffffff(whiteでも可)、
 黒なら#000000(blackでも可)、
 赤なら#ff0000(redでも可)など、
 数字とAからFまでの6桁の文字列で記述します。
 『Mariのいろえんぴつ』の「いろずかん」のコーナーが大変参考になります。

background-attachment: 背景画像について固定・移動を指定します。
 fixed:背景画像が固定されて、スクロールしても動かなくなります。
 scroll:スクロールすると、背景画像も一緒に移動します。

background-position: 画像の位置を設定します。
 %値や位置を表すキーワードで指定します。
 左の数字が横方向、右が縦方向です。
 キーワードは横方向がleft、center、right、
 縦方向がtop、center、bottomです。
 それぞれ、0%、50%、100%と指定しているのと同じです。

background-repeat: 繰り返しについて設定します。
 repeat:縦横に背景画像を繰り返して表示します。指定しない場合はこれになります。
 repeat-x:横方向にのみ背景画像を繰り返して表示します。
 repeat-y:縦方向にのみ背景画像を繰り返して表示します。
 no-repeat:背景画像を一回だけ表示します。

background-image: 背景画像
 url( )のかっこの中には、(2)の画像をクリックして、表示された画像ファイルのURLアドレスを記述します。

縦横のサイズが小さめのタイル型の画像の場合は、
background-position・background-repeatの指定は不要です。

縦長の画像の場合は
background-attachment: fixed;
background-repeat: repeat-x;

横長の画像の場合は
background-attachment: fixed;
background-repeat: repeat-y;

大きな1枚画像の場合は
background-attachment: fixed;
background-repeat: no-repeat;
background-positionは、
 左上なら「0% 0%」、中央なら「50% 50%」、右下なら「100% 100%」、右上なら「100% 0%」・・・

という組み合わせがおすすめです。
■1つの記事全体に背景を設定する場合
上の「記事の中のシーンごとに背景を設定する場合」と同様の設定を「.blog-entry」で記述します。
もしも、.blog-text で
背景色の指定(background-color: #ffffff;)がある場合は、
blog-entryで指定した画像が指定した背景色で消されてしまうので、background-colorについては削除してください。
他にも削除が必要になる場所があるかもしれません。
■ホームページ全体の背景画像の場合
上の「記事の中のシーンごとに背景を設定する場合」や
「1つの記事全体に背景を設定する場合」と同様の設定を
body」で記述します。
もしも、.blog-text や.blog-entry で
背景色の指定(background-color: #ffffff;)がある場合は、
bodyで指定した画像が指定した背景色で消されてしまうので、
背景画像を記事内にもそのまま表示させたい場合は、
これらのbackground-colorについては削除してください。

ただし、上部の ログインフォーム部分やMyDoblogトップや
Doblogポータルのリンク部分
(mydoblog-positionやmydoblog-headerで設定する部分)は、
その設定内容によっては重なった部分の背景画像が隠れてしまうので
要注意です。

あと、bodyを変更すると、
ブックマークリストなどのポップアップウィンドウも変更になるので、
「blog-popup」「blog-popup-text」の背景設定も要注意です。

素材をもらったサイトは、
「リンク」のコーナーなどで紹介するといいですね。

リンクをはることを使用条件にしているサイトもありますので、
必ず規約は確認しましょう。
:::::この記事は、
  Doblog卒業なさった のんちぃさんからの置き土産です(^^*
     ありがとうございます♪
     疑問・質問は『どぶさぽちゃんv』へどうぞ。:::::


風街ろまんさんのリクエストにお答えします。

リンクについては、
a:link・a:active・a:visited・a:hover の4箇所を設定します。
それぞれの意味は下記のようになっています。
 a:link リンク先にまだ1回も行ったことがない場合の表示
 a:active リンク先に1度はアクセスしたことがある場合の表示
 a:visited マウスでクリックした瞬間の表示
 a:hover マウスカーソルを当てたときの表示

下線をなくしたい場合は、「text-decoration : none ;」を追加します。
text-decoration で使える値は下記のようになっています。
 none:なんの装飾もなしです。(divやpなどではこちらが初期値)
 underline:下線が付きます。
 overline:上線が付きます。
 line-through:打ち消し線が付きます。
 blink:点滅します。

下線の色を文字の色と違うものにしたい場合や、
下線を破線や点線などにしたい場合は、下記のように記述します。
a:link {
color : #3366ff ; <文字の色
text-decoration : none ;
border-style : dashed ; <直線にしたい場合はsolid、点線ならdotted
border-color : #6699ff ; <線の色
border-left-width : 0px ;
border-top-width : 0px ; <上にも線をつけたい場合は1pxにします。
border-right-width : 0px ;
border-bottom-width : 1px ;
}

マウスを乗せたときに、
文字を白抜き表示させたい場合は下記のように設定します。
a:hover {
color : #ffffff ;
background-color : #3366ff ;
text-decoration : none ;
border-style : none;
}
#fffffは白です。background-color の#3366ff は青の少し薄い色です。お好みの色でどうぞ。

リンクの下線がない方が、すっきりしておしゃれかなと思うのですが、
初めてページを訪れた人が、どこがリンクかわからないといけないので、
a:linkだけは下線をつけるようにしたり、
さらにわかりやすくするために、
a:hover(=マウスを乗せたとき)、反転表示させたり ・・・etc.
リンク部分が分かりやすくなる工夫も大切ですね。
:::::この記事は、
  Doblog卒業なさった のんちぃさんからの置き土産です(^^*
     ありがとうございます♪
     疑問・質問は『どぶさぽちゃんv』へどうぞ。:::::


TOMOMOさんのリクエストにお答えします。

カレンダーに関しては、「.calender」「.calender-focus」で設定します。

.calender」の方は、
 ・現在の表示月(2004年6月)、
 ・曜日(SMT・・)、
 ・記事のない日付(1、3、5・・)、
 ・月移動部分(1月、2月・・)    の部分についての設定です。

.calender-focus」の方は、
 ・記事のある日付(2、4、7・・)と、
 ・月移動のところの現在表示されている月    の部分についての設定です。

少し、上下に隙間が欲しかったので、
私は「.calender」「.calender-focus」に
「padding-top:3px;」「padding-bottom:3px;」を追加しました。
画像のように、記事のある日に背景色をつけたい場合は、
下記のように設定します。

.calender-focus {
padding-top : 3px ;
padding-bottom : 3px ;
padding-left : 0px ;
padding-right : 0px ;
font-family : "MS Pゴシック", "Osaka";
font-size : 12px ;
color : #000000 ; <文字色
background-color : #f0f0ff; <背景色
}

注:「<文字色」というのは説明なので、コピーしないように!(^^;
背景に画像を置く場合の設定は下記のようになります。

.calender-focus {
padding-top : 3px ;
padding-bottom : 3px ;
padding-left : 0px ;
padding-right : 0px ;
font-family : "MS Pゴシック", "Osaka";
font-size : 12px ;
color : #000000 ;
background-attachment: fixed; <位置固定
background-position: 50% 50%; <中央表示
background-repeat: no-repeat; <繰り返しなし
background-image: url(http://www.doblog.com/img/u4439/FI272910_0E.gif) ;
}

backgroundの指定についての詳細は、「背景画像を設置しよう」を参考にしてください。

月表示のところで、ちょうど6月のようになっているのは、
1枚目の画像を見ていただくとわかると思いますが、
各月のエリアの幅がちょうどたとえば「6月」という文字の倍になっていて、
文字がそのエリア内で左寄せになっているからです。

「6月」という文字に重なるように画像を置きたいなら、「background-position: 50% 50%;」の左の数字を小さくするといいと思います。
画像の大きさにも寄ると思うので、いろいろ試して決めてください。

ちなみに、このハートの画像は文字サイズと同じ12×12pxです。
『++ 詰め合わせ ++』でいただきました。
カレンダー部分のリンクの装飾(文字色・ライン)を変更したい場合は、
下記の設定を追加します。
詳細は、「リンクの下線をなくすには」を参考にしてください。

.calender-focus a:link {
color : #000000 ;
text-decoration : none ;
border-style : none;
}
.calender-focus a:active {
color : #000000 ;
text-decoration : none ;
border-style : none;
}
.calender-focus a:visited {
color : #000000 ;
text-decoration : none ;
border-style : none;
}
.calender-focus a:hover {
color : #ffffff ;
background-color : #3366ff ;
text-decoration : none ;
border-style : none;
}

「.calender」も同様に変更ができます。
OperaとMozilla Firefoxでは、この方法では背景画像が出ないようです。
画像が出ないときに文字が見えなくならないように、
calender-focusの文字色を工夫する必要がありますね。
2005/05/24のBlog
「どぶちゃんず助け合い書き込み寺 - Doblogお助け掲示板 -」
コメント欄ハッピーエンドさんから質問が来ました。

Q.私の記事の、共同企画フェロモン委員会…ですが
  皆様から頂いたコメント数が300超えました。
  超えたとたんに、コメントが閲覧できなくなりました。
  何が原因なのでしょう。
  記事にもしてますので、どなたか教えてください。

関連記事 : 「更新:コメントが300超えたら???(どぶさぼちゃんヘルプです)」 By ハッピーエンドさん

A.CSSカスタマイズにより、不具合が生じているようです。
 ハッピーエンドさんの例の場合、CSSカスタマイズで使用していた
 filter: Alpha(opacity=80);部分を削除することにより、コメントが表示されるようになりました
  ↓関連↓
 「コメントが300件越えると表示されないのか?実験終了(ご協力感謝♪)」 By chibisaruさん

  filter: Alpha(opacity=○○);って?
CSSカスタマイズするときに使用できる命令の1つで、指定した場所を透明~半透明にできるものです。
しかし!IE系のブラウザにおいてのみ、指定可能で、ほかのブラウザでは表示に影響がありません。

《 参 考 1 》 
  ・・・以下、コメントを抜粋により、問題解決の経緯を・・・

[CAMUS] [2005/04/25 11:33] [URL]
ブラウザ依存かも…。
手持ちのブラウザで試してみました。
× IE6.0
× Sleipnir1.6.3
○ NN7.1
○ Firefox1.0.2

IE系ダメ、Gekko系OKのような感じがします。
IE系でも、ロード中は表示するのですが、ロードが終わった瞬間コメント表示の部分が消えちゃう感じですね。
なぜだ?(^^;)

※ ほか、多数の皆さんから、IE系では、背景とコメント記入欄のみ表示とのコメントあり。

[CAMUS] [2005/04/25 11:45] [URL]
IE系でも、CSSを切ったら表示ができるので、CSSが悪さをしている可能性がありです。

[ハッピーエンド] [2005/04/25 22:49] [ MyDoblog ]
CAMUSさん
CSSを切る…??。
わ、わかりません。
CSSの変更で直る可能性がある?ってことですね。

[CAMUS] [2005/04/26 11:48] [URL]
うわわ…わかりにくい書き方してスミマセン。(_o_)
CSS無しだとコメントが全て表示できているので、CSSが悪さをしている可能性がある…
ゆえに、CSSをデザインカスタマイズで修正すれば、直る可能性があります。
ただ、コメントに入っているデータとのコラボレーション(^^;)で表示できていない可能性も捨てきれないので、
単純にCSSだけ変えてしまって動くのかどうかはちょっと保障できません。
…ちょっと調べる時間がまとめて取れないので、
あまりお役には立てられる様な情報を差し上げられなくて申し訳ないのですが…(_o_)
 :
 :
chibisaruさんの検証記事  ご協力くださった皆さまへ、大感謝です
 「ポップアップのfilter: Alpha(opacity=80);というIE専用の表示の指定が重たいようには思いました。」

[eastwind] [2005/05/23 20:10] [ MyDoblog ] [削除]
CSSの blog-popup の中にある
filter: Alpha...の行を削除すると問題なく表示できませんかね?
(とりあえず手元では実験しました)
全体のバイト数と絡んでいると思いますが、半透明化が
出来なくなってしまっていると考えます。IEの仕様?

[ハッピーエンド] [2005/05/24 08:03] [ MyDoblog ]
先程、「filter: Alpha(opacity=80);」の部分を削除したら
表示されました。
もうびっくりです。
皆様、有難うございます。    解決

《 参 考 2 》 chibisaruさんの検証記事ご協力者一覧(順不同)
shig_the_builderさんDennisさん、でがしらさん、あきかさんw_interfaceさんshinnさんinwindさんkjさんlone_chuckさんkaresansuiさん、ナージャさん、さみ~@屋久島さん、夢尾買っ太郎さん・・・落としている方があったらごめんなさい。ご協力ありがとうございました。

《 参 考 3 》 Doblogスタッフでないと解決できない不具合の可能性があったので、
  編集部サポートからバグレポートとしての問い合わせをしています。

  '05-04下旬~、お問い合わせ中。回答待ちです。。。
  '05-05-24 対処的に問題解決しましたが、バグである可能性は捨てきれず。。。
      お返事お待ちしていまーす(^◇^)p゛
2005/05/09のBlog
[ 2005/05/02 ] 5/17早朝 回線工事のお知らせ

5/17(火) AM 4:00 - AM 5:00にかけて、Doblog周りのネットワークのメンテナンスを行うそうです。
Doblogが完全にダウンするわけではないのですが、断続的に接続しにくい時間帯がある可能性があります。
5/17(火)の早朝にDoblogを徘徊される方はご注意くださいね。

【ここから引用】-----------------------------------------------------------
Doblog編集部です。

5/17(火) AM 4:00 - AM 5:00 の間、Doblogを収容しているデータセンターのネットワーク機器の更改に伴う工事を行います。

工事の際に、Doblog(www.doblog.com)へのアクセスが断続的に不安定になる可能性がございます。

ユーザーの皆様には大変ご迷惑をおかけ致しますことをお詫び申し上げます。

今後とも Doblog をよろしくお願いします。
【ここまで引用】-----------------------------------------------------------
2005/04/27のBlog
「どぶちゃんず助け合い書き込み寺 - Doblogお助け掲示板 -」
コメント欄野比汰さんから質問が来ました。

Q.10%の確率でボタンまたはリンクのクリック表示ができません。
  ・・・以下、コメントのやりとりを転載します・・・

[野比汰] [2005/04/26 16:59] [ MyDoblog ] [削除]
ボタンやリンクを押した直後、10%くらいの確率でエラーが発生します。
似たような質問が過去にあり、マグさんが回答されてらっしゃるんですが、
doblogを去られた様子。。回答の記事が削除されてしまっています。

解決方法がありましたらどなたか教えてください

[どぶさぽ] [2005/04/26 17:13] [ MyDoblog ] [削除]
どぶさぽちゃんvの皮をかぶったCAMUSです。
野比汰さま、エラーというのは…どれのことだろう???wavererさまの件かな?
だとすると、マグさまの記事では解決していなくて
ひょっとするとブラウザのバージョンのせいかも?という話になっていたかと思います。
その後、ブラウザのバージョンが変わったらwavererさまの現象が出なくなったようです…。
それか、「サーバーが見つかりません」というエラーであれば、
Doblogの問題と思われますので、なんともしようがないです…。(涙)
これらの件と違うようでしたら、ゴメンナサイ。もう少し詳細を書いていただければ…。

[野比汰] [2005/04/26 19:45] [ MyDoblog ] [削除]
ムカついてすぐ消しちゃうんですけど、
確か「表示できません」だったような。

[まるたま。] [2005/04/27 11:37] [URL] [削除]
野比太さん
Doblog内のボタンやリンクを押したときに限り、
行き先がどこであろうと、同じ確率で表示されないのでしょうか?
それとも、行き先がDoblog内の時だけかしら?
ブラウザのお気に入り(ブックマーク)から呼んだときも同様の症状ですか?
また、OSはWindowsですか?Macですか?
ブラウザは、IEでしょうか?それとも?バージョンも教えていただけるとありがたいです。

[朝の光がさしてき] [2005/04/27 12:36] [ MyDoblog ] [削除]
野比太さんの表示されない件ですが、僕もよく似た状況になってます。
MacOSXで、Firefox 1.0.2です。
Doblog内のリンクから新規ウィンドウで開いたときに
真っ白な状態のページが表示されたままステータスバーには「完了」となります。
行き先はDoblog内です。
繰り返しリンクをクリックすると読み込みだすので読めないわけではないのですが、
確かにめんどうですね。
2005/04/26のBlog
DoblogスタッフBlogから、ゴールデンウィーク中のサポート業務についてのお知らせが出ていますので、どぶさぽちゃんvからもお知らせするのです。

 内容:サポート業務のお休み
 期間:ゴールデンウィーク中(4月29日から5月8日)

今年のGWは飛び石なので、ひょっとするとBlogをする方もいらっしゃるかもしれませんが、Doblogに対してのスタッフへのお問合せは控えてあげてくださいね~。
スタッフさん方にもちゃんとお休みをあげましょう~ね。(^^;)

以下、転記しておきますね。
-----------------------------------------------------------
[ 2005/04/26 ] ゴールデンウィーク中のサポートについて

Doblog編集部です。

ゴールデンウィーク中のDoblogへのご質問や、ご要望への対応についてご連絡申し上
げます。
ご迷惑をおかけいたしますがゴールデンウィーク中(4月29日から5月8日)はサポー
ト業務をお休みさせていただきます。

期間中にお送りいただきましたご質問等に関しましては、5月9日に業務を再開した後
に順次回答ご回答申し上げます。(ご返答にお時間がかかる場合がございますがご容
赦下さい)

今後ともDoblogをよろしくお願いします。
-----------------------------------------------------------
「どぶちゃんず助け合い書き込み寺 - Doblogお助け掲示板 -」
コメント欄ポコさんから質問が来ました。

Q.左側にあるメニューを、右側に持ってきたいのですが、
できるものなのでしょうか?

(以下、質問コメント転載。)
初めまして。数日前にDoblog参加したばかりでまだ右も左もわからない状態なのですが、
教えていただきたいことがありまして、こちらに参りました。

現在、温DOWN化計画のテンプレートを使用しておりまして、
そのデザインを変えたいのですが。。。
今、左側にあるメニューを、右側に持ってきたいのですが、できるものなのでしょうか?
できるとすれば、ぜひ方法を教えてくださいませ。どうぞよろしくお願いします。
(質問する場所が違っていたらすみません)

A1.まず、『温DOWN化』テンプレをカスタマイズしてよいか否かが不鮮明だったので
その点を、『温DOWN化』Blogに問い合わせ中。
情報をお持ちの方がおられましたら、お知らせくださいませ。

 → ’05/04/26 温DOWN化 さまより Final Answer!
 【お知らせ】温DOWN化計画テンプレートのカスタマイズについて
  【概要】:温DOWN化計画テンプレートのカスタマイズ…すなわち、配色・配置・画像などの変更は全て不可
     残念ながら、手を入れることが出来ないようです。
     詳しくは、上記リンクをご覧くださいね。

A2.掲示板Q&A記録帳 - メニューを右側(左側)に表示したい -
  一般的なDoblogカスタマイズでメニュー位置を移動する方法はコチラをご覧ください。


※ 一応、この記事も
  温DOWN化計画 身近で感じた温暖化ストーリー(身近で感じた事務局さん)TB差し上げますね。

:::温DOWN化計画 身近で感じた温暖化ストーリー(身近で感じた事務局さん)への質問コメント&回答:::
[まるたま。@『どぶさぽちゃんv』] [2005/04/10 18:56] [URL]
『どぶさぽちゃんv』管理人の1人まるたま。です。
温暖化テンプレについての質問が、『どぶさぽちゃんv』へ来ています。
「このテンプレが気に入ってるので使いたいのだけれど、
メニュー欄を左右入れ替えるにはどうしたらよいか?」
と言ったような内容です。(URL参照。)
そこでお伺いしたいのですが、
1.賛同者でなくても、使用可ですか?
2.このテンプレは、CSSを変更して使用してもかまわないのでしょうか?
 (CSSカスタマイズのページでは、直接変更できない様式になっていますが
 敢えてCSSを呼び出してカスタマイズするのはOKですか?)

[まるたま。@『どぶさぽちゃんv』] [2005/04/10 18:57] [URL]
つづき。(コチラのURLは、『どぶさぽちゃんv』Blogのを貼ってます。)
3.カスタマイズOKとすれば、どの範囲でOKですか?例えば・・・
 1) 色の変更は可能ですか?
 2) 配置や文字サイズなどの変更は?
 3) 画像の加工は?
 (CSSで配置関係を変更するのがOKな場合、
 画像多用されているので加工したくなる場合もあると思うので。)
突然、図々しい質問をして、失礼かと存じますが、お返事いただけるとありがたいです。
よろしくお願いします。

[身近で感じた事務局] [2005/04/10 19:01] [ MyDoblog ]
どぷさぽさま、事務局です。
質問1は全然OKです。賛同者でなくても構いません。
質問2以降は少しお待ちください。

[どぶさぽ] [2005/04/10 19:15] [URL] [ MyDoblog ]
まるたま。です。さっそくのご回答ありがとうございます☆
掲示板への質問まとめ用記事をTB差し上げました。
2以降のお返事をお待ちしています(^^*

[身近で感じた事務局] [2005/04/14 01:04] [ MyDoblog ]
どぷさぽさん、回答遅くてごめんなさい。
いましばらくお待ちください。