はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2ブログカスタマイズ ~記事とサイドバーの大きさを変更~

2008/01/18 Fri [Edit]

当ブログで配布中のテンプレートh007-3middle」をご使用中の方から、下記のご質問を頂きましたのでカスタマイズ方法を解説させて頂きます。

記事内を500までサイドバーを180までに変更したいのですが、どのようにすれば良いのでしょうか?

カスタマイズには HTML の編集を行えるエディタを用意されると、後述するカスタマイズ方法を実践されやすいと思います。ソースの行番号が分かり「EUC-JP」にエンコーディングされたソースコードを扱えるエディタならなんでも OK です。

※当ブログで配布中のデザインテンプレートがカスタマイズの対象となっています。
テンプレートをカスタマイズする前にバックアップ(複製)しておくと安心です。

2008年2月4日修正
他のサイズへ変更されたい方にも今回の記事が参考になるよう図解を使った解説に修正しました。

世間一般人様、お待たせしました。多少は他のサイズへカスタマイズする際に分かりやすくなったと思いますのでご覧ください^^

最初にご理解して頂きたいことは、今回のテンプレートh007-3middle」には CSS(スタイルシート)を2つ適用させています。

  1. FC2 の管理画面で編集できる CSS(以下 style.css とします。)
  2. IE のみに適用させている CSS(以下 hack007.css とします。)

下の図1をご理解ください。

図1

hack007.css に関しては HTML の head 要素内で style.css とは別途に読込んでいるのですが、今回のカスタマイズを行うにはこの hack007.css を1度ローカルにダウンロードして頂く必要があります。

こちらが hack007.css ですので、リンク先のソースを右クリックなどで保存してください。ファイル名は hack007.css のままでも良いですし、ご自身で分かりやすい名前に変更されても良いですが、拡張子の .css を忘れずに付けてください。

また、ファイルを保存する際の文字コードは EUC-JP になります。

ファイルを保存したら、その hack007.css をエディタで開きます。

開いたソースの「24行目」付近の *html div#primary-column の width の値 490px を 520px に置換します。この部分が IE6 用の記事部分のサイズ指定です。

*html div#primary-column { width : 520px;}

何故 500px ではないかをご説明すると IE6 の後方互換モードだと CSS の解釈の違いで、指定した padding の数値がボックスの内側に追加されてしまう為です。

この記事部分のボックスの左右には 10px の余白(padding)が指定されています。左右に 10px なので 10+10=20px なので指定したいサイズ 500px に 20px を足した 520px となります。

また、他のサイズへ変更される方への補足として図2を用意しました。IE6 の後方互換モードとその他(other)のモダンブラウザでの padding の解釈の違いのご理解にお役立てください。

図2

説明が重複してしまう部分もありますが、width とは横幅を指定するプロパティで padding とは要素のまわりに余白を指定するプロパティです。通常 width:500px の padding:10px と指定すると、その要素の横幅は 520px になるのですが、IE6 の後方互換モードでは width の内側に padding の数値が加算されるので、横幅は width の値である 500px のままとなります。

サイズ変更する際に padding の数値を width の数値に足すのは上記のバグの為です。

話を今回のご質問のカスタマイズに戻します。順番が前後してしまいますが「18行目」付近の *html div#container の width の値 880px も変更が必要です。今回、記事部分を 30px 大きくしたいので初期値の 880px に足して 910px とします。

更に、サイドバーも後ほど左右 20px ずつ大きくするので 910px に 40px を足した数値 950px に置換しておきます。ちなみにこの部分はテンプレート内の全ての要素を内包している div の IE6 用の設定です。
※160px から 180px へ大きくするサイドバーが2つあるので 40px の拡張となります。

hack007.css への編集は以上なのでファイルを再度保存し、お使いのブログのサーバーにアップロードしてください。

続いて style.css の編集をします。こちらが IE6 以外の全てのモダンブラウザの設定になります。ソースを全てコピーしエディタで編集すると作業が楽です。

カスタマイズ作業に入る前に下の図3をご覧頂き、div の id の名前と内包する div の関係をご理解頂けると、今回のカスタマイズに限らず、他のサイズへ変更される時に分かりやすくなると思います。

図3

上の図に補足を加えると、赤系統の div は hack007.css にも変更が必要な箇所です。つまり padding の指定がされています。ここ迄の解説を良く見ると図中赤系統の div の id と編集した div の id が同じことに気付かれると思います。*html はスターハックと呼ばれる IE6 にだけ適用させる為のコードです。

それでは話を今回のご質問のカスタマイズに戻します。

255行目」付近の div#container と「266行目」付近の div#branding にある width の値 860px を、今回大きくしたい数値の合計 70px を足した 930px に置換します。
div#container は全ての要素を内包している div です。
div#branding はヘッダー部分の div です。
今回大きくしたい数値 = 記事部分の 30px + 2つのサイドバー 40px になります。

次に「308行目」付近の div#wrapper の width の値 675px も大きくしたい数値 50px を足した 725px に置換します。この div は後述する 左サイドバー記事部分の div 2つを内包しているので 50px 大きくする訳です。

次に「315行目」付近の div#primary-column の width の値 470px を 500px に置換します。この部分が記事部分の div です。

次に「324行目」付近の div#secondary-column左サイドバー)と「332行目」付近の div#extra-column右サイドバー)の width の値 180px を 200px に置換します。この2つの div がサイドバーです。

次にフッター部分の div「340行目」付近の div#siteinfo-legal の width の値 860px にも、今回大きくしたい数値 70px を足し 930px に置換します。

備考)もしもフッター内のボックスもしっかりした数値を指定したい時は「795行目」付近の div#copybox と「818行目」付近の p#top-txt の width の値にも適宜で 70px をどちらかに割当てて追加してください。そのままでも問題ありません。

style.css への編集は取り敢えず以上なので、FC2 ブログの管理画面に全てのソースをコピペ(コピー&ペースト)し更新します。

続いて HTML の編集をします。

</head> の上に以下のソースがありますので見つけます。

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/hack007.css" media="all" />
<![endif]-->

上のソースが見つかりましたら、先ほどアップロードした hack007.css のパス(URL)と上のソースのい部分 href 属性の値である URL を置換し更新してください。

最後に記事部分とサイバーの背景についてですが、もしも背景が下迄行かずに、高さが揃わないでも良いようでしたら、style.css の「274行目」付近から始まる背景に関する設定を削除してください。

今回は上記のカスタマイズ用の背景画像をご用意しておいたので、ローカルに保存し、お使いのブログのサーバーへアップロードしてお使いください。

修正する箇所は style.css の「282行目」付近 div#bg-img の下記のソースです。

background : url("http://blog-imgs-17.fc2.com/h/a/j/hajimedesign/007_bg.gif") center top repeat-y;

上記のソースのい部分 url の値をアップロードした背景画像のパス(URL)と置換し管理画面から更新してください。

以上でカスタマイズ終了です。他のサイズへのカスタマイズも上記の方法をご理解頂ければ行えると思います。

ご質問ありましたらお気軽にどうぞ^^

●補足
背景画像をご自身で作成される場合は下の図をご参考にしてください。

画像作成の参考図

Prev
ページ内リンクをスクロールで魅せる JavaScript
Top
はじめてのブログデザイン
Next
祝!4つ目の FC2 ブログテンプレート承認!

Comments

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

ななしさんおはようございます!

いえいえどういたしまして^^

コメントの件ですが、まず右サイドバーの下にある広告画像は横 200px ある為に、カラム落ちしているようです。

広告を表示させている img タグの width 属性に 180 と指定するか、それが不可能でしたらサイドバーに 200px 入るように再度カスタマイズが必要です。

また、左サイドバーのRSSアイコンも合計で198pxあるので、レイアウトを崩している状態のようです。アイコン2つで改行 br を入れ、テキストは下にするなどの調整をすることで正常な状態になると思います。

もし、カスタマイズを再度行う際は、記事部分の拡張を0と考えて、現在サイドバーの最大が 180px なので、それを 200px にする計算で行ってみてください。

では、また何かありましたらお気軽にどうぞ^^

ブログテンプレートのカスタマイズについて

はじめまして、世間一般人と申します。
数あるテンプレートを探した中で、hajime様のテンプレートがとてもシンプルでありながら、見やすいレイアウトに一目惚れしました。
現在、カスタマイズに挑戦中なのですが、どうしても出来ないことがありまして、大変恐縮でございますが、御質問させていただければと思います。

やりたい事はブログの中央記事幅を広げたいと思っております。
現状は、div#containerと、div#brandingの部分を、860px(初期値)→970px(変更後)にしました。

その他、外部CSSとFC2CSSをを訂正する必要があると思いますが、「記事とサイドバーの大きさを変更」記事を参考に自分なりに試行錯誤してみたのですが、どうやっても中央記事幅が広すぎて右サイドバーが落ちてしまい、いじりすぎて収拾がつかなくなってしまいました。

ですので、現在はdiv#containerと、div#brandingの変更までに留めているのですが、このあとどうやってカスタマイズしたらよろしいでしょうか?

サイドバーの幅は変更無く、記事幅のみ広げたいと考えています。
ですので、div#containerと、div#brandingと110pxずつ広げたので、その分全て記事幅に充当したいのですが、お忙しいところ大変恐れ入りますが、御教示いただけますと幸いでございます。
どうぞ宜しくお願い致します。

世間一般人様はじめまして。

お褒めの言葉ありがとうございます。
そう言って頂けると本当に嬉しい限りです^^

ご質問の件ですが、追記にてもう少し分かりやすくなるようご説明させて頂きますので、今しばらくお待ち頂けると幸いです。

hajime様ありがとうございます。

hajime様へ

迅速なご返答をいただきまして誠にありがとうございます。
hajime様のご好意に、誠に感謝申し上げます。
そしてお忙しい中、本当に申し訳ございません…。
どうか宜しくお願い致します。

実は、先ほどもう1つ気づいた点があるのですが、
左右のサイドバーのうち、左のサイドバーのみリンクの形式が違っているように思います。

当方のページを見ていただきますと分かりやすいと思うのですが、通常ですと、テーブルリンク?のような形でサイドバーの項目がリンクされてると思うのですが、右サイドバーは問題なくテーブルリンクになってますが、左サイドバーは通常のリンク(文字にポイントして指マークが出るリンク)になってしまいます。

現在、左サイドバーには「プラグインカテゴリ1」、
右サイドバーには「プラグインカテゴリ3」を配置しています。
「プラグインカテゴリ2」は使用しておりません。
これは原因となにか関係ありますでしょうか?

試しに、全てのプラグインを左サイドバーに配置してみましたら、テーブルリンクの仕様に全て戻りました。
しかし、左右サイドバーに振り分けるとまた、左サイドバーのみテーブルリンクになりません。

もう一度、テンプレートをダウンロードし直してみたのですが、それでもやはり左サイドバーのリンクはテーブルリンクになってませんでした。

この現象は、IE6で起こる現象のようで、FireFox2.0.0.1.1と、Opera9.25では正常でした。

無知な私で大変御迷惑をおかけしまして、申し訳ございません。
重ね重ねで大変恐縮でございますが、御教示いただけますと幸いでございます。
どうぞ宜しくお願い致します。

いえいえどういたしまして^^

世間一般人様、お待たせしました!
記事に図解を入れ説明を修正しておきました。どうぞ、そちらをご覧頂きながら再度カスタマイズにご挑戦ください^^

サイドバーのリンク部分の件に関しては、IE のみで発生し、テンプレートを再度ダウンロードして頂けたとなると原因は hack007.css にあるのかも知れませんが、おそらくカスタマイズを無事成功させると改善されると思います。
と言いますのもサイドバーのリンク部分の指定は style.css にて全てのブラウザに対して使用しています。

以下、念の為世間一般人様の実現されたいカスタマイズで変更する箇所を列挙しておきます。

□hack007.css
*html div#primary-column
*html div#container

□style.css
div#container
div#branding
div#wrapper
div#primary-column
div#siteinfo-legal

以下は適宜で
□style.css
div#copybox
p#top-txt

以下背景画像をご用意される場合
□style.css
div#bg-img

以上です。
またご質問ありましたらどうぞお気遣いなくお尋ねください^^

hajime様ありがとうございました!

大変御親切にありがとうございました。
hajime様のおかげで、無事に出来ました。
あとは細かい点を自分なりに勉強しながらカスタマイズしてみたいと思います。

どうしても壁にぶつかってしまった時は、恐縮ですがまた御質問させてください^^;

テーブルリンク?(と呼んでいいものか分かりませんが…)の件は、改善に至りませんでしたが、他にもFC2ブログを持っているので、試しにそちらでテンプレートを適用してみましたら、テーブルリンクが改善されました。

もう1つのブログは、記事を結構書いているので、もしかしたら記事の多さとかに関係するのかな…?とか。。。
それはありえないと思うのですが…^^;

色々とありがとうございました。
これからも素敵なテンプレートを作成してください。
応援しております!

世間一般人様こんばんは☆

いえいえお役に立てたようで嬉しいです^^
応援も嬉しい限りです♪♪

テーブルリンクと呼ぶのかは私も分かりません^^
私は心の中でブロックリンクとかボタンリンクなんて勝手に呼んでいます^^
それはともかく、世間一般人様のブログの HTML と CSS の中身をちょこっと確認させて頂いたところ、気になる点が幾つかありました。

1つは HTML 内に li 要素を持たない ul 要素が存在することです。「最近のコメント」や「最近のトラックバック」部分がそれにあたります。
もしこれが原因でしたらコメントとトラックバックを受けることで ul 要素の中に li 要素が FC2 の変数により自動的に作成され改善されると思います。
私が思うに、これが1番怪しい感じです。

2つ目は、style.css 内 381行目付近 h2.entry-header セレクタのプロパティに list-style-position がカスタマイズの際に混入してしまっているようです。
多少怪しいので削除された方が良いと思います。

3つ目は、style.css 内278行目付近 div#bg-img セレクタのプロパティ background の url の値が空なのも・・・
関係ないとは思いますが、背景をご用意されないようでしたらセレクタ毎削除された方が良いかも知れません。
使うかも知れないセレクタは CSS のコメント /**/ で囲んで置くと良いですよ。

でも、右側のサイドバーは問題ないようなので、やはり1つ目の理由が1番怪しい感じです。

それではまたカスタマイズ楽しんでください♪
私で分かる範囲でしたら喜んでお答えさせて頂きますので、お気遣い無くどうぞ!

hajime様、ご指摘ありがとうございます!

hajime様、気になる点のご指摘ありがとうございます。
381行目付近の、list-style-positionと、
278行目付近の、div#bg-img関連部分削除しました。

それと試しに、自分でコメント書いてみたり、自分へトラックバック送ってみたりして、テーブルリンクの状況確認してみたのですが、自分でやってもダメみたいですね。。。
変化がないみたいです^^;

でもおそらく記事をこれから書いていって、コメントやトラックバックがついていけば、自然と解消されていくように思うので、そんなに気にならなくなりました。
ありがとうございます!


これとは別件で、実は1つ気になる点があるのですが、
私のページの右サイドバー一番下に「テスト用プラグイン」という項目を設けたのですが、この中の5項目のうち、「100人のブログライターが・・・」という項目は、マウスでポイントした時のテーブルリンクが、下側1/4ぐらい空いてしまいます。
これはIE、FireFoxで現象が確認できます。Operaは正常でした。

そして、「ブロゲットのクチコミで・・・」項目は、IEのみで同じく下側1/4ぐらい空いてしまいます。

その他3項目は、どのブラウザでも正常にテーブルリンクが表示されます。

はたしてどこに原因があるのか私のバカな頭では検討がつかず、大変申し訳ないのですが、アドバイスいただけますと幸いでございます。

念の為、「テスト用プラグイン」のソースを記述したいのですが、文字数がオーバーしてしまうようなので、後ほど追記致します。

先ほどの追記です。

すいません、先ほどの追記なのですが、
どうやら、ソースを記述すると書き込めないみたいなので、自分のブログにソースを、txt で貼り付けました。
ご参考にお願い致します。

ほんとに、いつもすいません…。

あと先日、記事幅を広げる際のカスタマイズで、
適宜で下記のソースに変更を加えるということでしたが、試しにやってみると、特にレイアウト的には変化がないように思いますが、下記を変更する事によって、どのような変化があるのでしょうか?
また、変更を加えるのはどちらかでいいという事だそうですが、両方でもいいということでしょうか?
style.css
div#copybox
p#top-txt


細かい事だと思うのですが、それでも気になってしまう私のA型の性格が…、ほんとに厚かましくて申し訳ございません…。
何卒宜しくお願い申し上げます…。

世間一般人様、お晩です☆

いえいえどういたしまして^^
って解決に至らなかったようで面目ないです。
テーブルリンクの件に関しては今、少しだけソースを確認したのですが、なかなか手強そうなので、少々お時間ください。幾つか解決策となり得そうなアイデアも浮かんでいるのですが、私用がちょっとあるので、それが落ち着き次第じっくり確認してみます。

プラグイン1/4の件は私も以前のテンプートの時に経験済みなので、解決策は知っているのですが・・・
それを実行されるか他の解決策を探すかの判断は世間一般人様に委ねます。
原因はプラグイン部分の ul 要素内の a 要素に display:block を指定して a 要素が1つのブロックとなっている為です。1/4空く部分の HTML を良く見ると img 要素が a 要素の外側にあります。
なので a 要素のブロックの下に img 要素だけが配置された段落が発生している状態です。
この img は広告の表示回数を ASP 側がカウントする為の img だと記憶しています。

私はその img 要素を a 要素の内側に入れ解決しました。おそらくですが、問題ないだろうと言う判断です。(※ASPに確認はしていません。)
ASP 管理画面でも正常に広告の表示回数をカウントされているようです。

しかし、広告のタグはたしか基本的には変更禁止されているように記憶しています。私は何の確認もせず、自己の判断で結構タグの修正をしてしまいます。
実際、広告のタグは汚い(不要な半角スペースなどのゴミ)ことが多いです。
もし ASP に怒られた時は謝れば良いかな?なんて具合です^^

「div#copybox」と「p#top-txt」の件は、もし 100px フッター部分の 「div#siteinfo-legal」を拡張したら、その 100px を振り分けてくださいと言う意味です。両方に振り分けても結構ですが、その時は 50px ずつとか、振り分けた数値の合計が 100px の範囲を超えてはいけません。
何故そのようなことを記述したかと言いますと、フッターの中は2つのブロックに分かれています。
今回世間一般人様がカスタマイズされたテンプレートの「記事部分」と「左サイドバー」部分を内包していた div#wrapper と同じ構造がフッターの中にもあります。見た目に変化は確認できませんが、「div#copybox」と「p#top-txt」のどちらかにバナーやアイコンなどを入れる可能性があるのなら、一緒に変更しておいた方が良いのかな?なんて判断です^^
見た目で確認したい時は「div#copybox」と「p#top-txt」のセレクタの中に background-color プロパティで一時的に色を付けると分かりやすくなると思いますよ。

また何かありましたらお気遣いなくどうぞ^^

世間一般人様へ追記

あああ!それと。
分からない事は決してバカじゃないですよ^^
私はたまたま仕事で必要な知識なので知ってるだけで、世間一般人様はその必要がないから知らないだけです。

それに質問されてはじめて気付くことや、考えさせられ私自身の成長に繋がっていることも多々ありますので、返答が遅くなったり、解決に至らない場合もあるとは思いますが、お気軽にご質問ください^^

hajime様へ

お返事が遅くなりまして申し訳ございませんでした!

プラグイン1/4の空白の件は、大変分かりやすく御説明いただきましてありがとうございます!
img 要素を a 要素の内側に入れる事で解決致しました。

素晴らしい知識の広さをお持ちでいらっしゃるのがとても羨ましいです(>_<)

フッターの件も分かりました。
少しずつ手探りでカスタマイズを進めてるところですが、いずれフッターも調整してみます。

あとすいません…、カスタマイズはやればやるほど疑問が出てきてしまうのですが、もう少しだけ御質問させて下さい(>_<)

2点あるのですが、
1点目は、コメント投稿欄などにある、「SUBMIT」「DELETE」などの画像ボタンなのですが、通常のボタンにしたいと思っておりまして、例えば、

<FORM><INPUT type="submit" value="コメントを送信する"></FORM>

というようなボタンにしたいのですが、このソースをそのままHTMLに記述してみると、ボタンとしての役割は果たしてるようなのですが、背景などが真っ白で文字だけが見えるようになるので、普通のテキストのように見えてしまいます。

標準のボタンデザインに戻すには、CSSを直す必要があると思うのですが、
例えば私が試した方法は、HTML145行目付近を下記のように置き換えました
<input type="image" src="http://blog-imgs-17.fc2.com/h/a/j/hajimedesign/007_submit_btn.gif" width="90" height="22" alt="Submit" />
 ↓↓↓↓↓
<FORM><INPUT type="submit" value="コメントを送信する"></FORM>

その後、style.cssの518行目付近の table#form_h td.btn_h input を、下記のように訂正しました。
(旧)
table#form_h td.btn_h input {
background : none;
border : none;
padding : 0;
margin-right : 0;
}
 ↓↓↓↓↓
(新)
table#form_h td.btn_h input {
}

しかしこれだけではボタンに枠が表示されただけなのでさらに、
hack007.cssも確認したのですが、該当しそうなのは下記の部分ぐらいしか見つけられなかったのですが、どう訂正していいかも分からず、手付かずでした…。
*html table#form_h td.btn_h input {
margin-right : 10px;
}

どのように訂正したらいいでしょうか?
すいません…宜しくお願い致します。


もう1点は、ブログ全体の枠外に上下左右の灰色の余白部分がありますが、上下のみ余白をゼロにしたい場合、どこを訂正したらいいでしょうか?

最初に考えたのは、style.cssの244行目付近のdiv#container 内の、padding : 10px; という所を、
padding: 0px 10px 0px 10px; とやってみたのですが、これだと白い余白スペースが消えてしまい、灰色の余白スペースが残ってしまいます。

出来れば、白い余白スペースは残しておいて、灰色の余白スペースを消したいのですが、どうすればいいでしょうか?

お忙しいところを、ほんとに何度も何度もすいません(>_<)
どうか宜しくお願い申し上げます。

世間一般人様こんにちは!

いえいえ 1/4 の件がご参考になったようで何よりです^^

フッターに関しては何も追加する予定がないようでしたら、そのままでも問題ありませんよ。

input 要素のボタンの件に関しては、検証の必要性がありそうなのと、記事にして解説させて頂いた方が分りやすいカスタマイズだと思いますので、少々お時間ください。

もう1つのご質問、上下の灰色の余白は style.css の 174行目付近にある body セレクタで指定しています。
body セレクタの中のプロパティ

padding : 10px 0; を

padding : 0;

とすれば余白は消えます。

それとお時間頂いていたサイドバーのテーブルリンクの件ですが、結局、原因の究明は果たせなかったのですが、解決策は分りました♪
Web 制作者として興味深い解決策にたどり着きましたので
「display:block した a 要素(リンク)を IE6 でも安定させる方法」
と言うタイトルの記事にまとめてあります。
もし、世間一般人様にとって問題ない解決策でしたらお試しください。

他の人が制作したものを変更する作業は骨の折れることと思いますが、気分転換などしつつ頑張ってください^^

私としてもテンプレートを使用して頂いている方からご質問頂けることにより、成長できる部分がまだまだあると考えていますので、どうぞ遠慮なしでお尋ねください^^

世間一般人様へ

お待たせしました^^
input 要素のボタンの件に関しては、当ブログの記事「FC2ブログカスタマイズ ~コメント送信ボタンをデフォルトに戻す~」を参考にしてみてください!

hajime様へ

お忙しいところを、度重なるご回答誠にありがとうございます!

上下の余白の件解決しました!
まさかbody セレクタだったとは…、ちょっと考えすぎてた感があります^^;
勉強になりました。ありがとうございます!

サイドバーのテーブルリンクにつきましては、色々とご検証いただきまして大変お手数をおかけしまして申し訳ございませんでした…。

これも無事解決致しました!
HTMLやCSSというのは、予期しないトラブルが起きる事も多く、ちょっとでもスペルを間違えると機能しないし、大変ですよね^^;
記事に大きく取り上げていただき、大変分かりやすくほんとにありがとうございました。


そしてそして、input 要素のボタンの件につきましても、記事に取り上げていただき、ほんとに分かりやすかったです!
でもこれだけのカスタマイズが必要だったかと思うと、さすがに私の頭では手に負えないな…としみじみ思いました^^;

実はちょっとここで少し、???と思う点があるのですが、これがまた大変細かい点で、御質問するのも気が引けてしまうのですが…。

実は、コメントの編集画面に出てくるボタンなんですけれども、
私の場合、「コメントを削除する」と「コメント編集後の再送信」というボタン名にしてあるのですが、「コメント編集後の再送信」ボタンのみ、少しボタンの回りが滲んでるような…、太枠線っぽくて線がボヤけてるような感じに見えるのですが、気のせいでしょうか?

すぐとなりの「コメントを削除する」ボタンを見比べても、やはりちょっとデザインが違うような…。

パソコンのディスプレイの関係かと思い、他のパソコンでも確認してみたのですが、やはり同様でした。
hajime様のパソコンでも確認出来ますでしょうか?
それとも当方のディスプレイなどの関係でしょうか…???

とても細かい点で、ほとほと厭きられてしまうと思うのですが、もしアドバイスいただけましたら幸いでございます。


あと、分からない点というほどのことではないのですが、HTML編集の中で、下記のトラックバックの部分に、ヘルプマークの?が付いていたので、通常のテキストにしてみようと思い、下記のようにカスタマイズしてみました。
<!--トラックバックエリアBEGIN-->内の下記の部分
<acronym title="Track Back">TB</acronym> <acronym title="Uniform Resource Locator">URL</acronym>
 ↓↓↓↓↓↓
<title="トラックバック用アドレス">トラックバック用アドレス</title>

これって、かなり無理やりのような気がするのですが^^;

これははたして通常の自然なやり方と言えますでしょうか?
"トラックバック用アドレス" のテキスト自体が少しサイズ大きくなってしまったように思いまして、無理やりのやり方だったのかと思い、少し気になっています。

ほんとにあつかましいのですが、こちらももしアドバイスいただけましたら幸いでございます。

ほんとにいつもすいません!!
お詫びの言葉も見つからないくらいです…。

世間一般人様おはようございます!

いえいえ^^
お役に立てているようで嬉しい限りです。

世間一般人様が仰られる通り、HTML と CSS はちょっとしたスペルの間違いで機能しなくなったり、また、他の人が作ったソースと言うのは分り辛いことと思います。

私も CSS を覚え始めた頃には様々な問題にぶつかり、それを解決するには多くの時間を要しました。それが IE のバグであったり、タグの閉じ忘れであったり、コピペの際に紛れたゴミであったり・・・
もう、それはそそっかしい私のことなので、その苦労は嫌ーー!ってほど存じているつもりです^^

でも、そうした苦労があったからこそ、覚えたことや、身に付いたことも沢山あるので、世間一般人様も大変だとは思いますが、こうして出会ったのも何かのご縁だと思います。1こ1こクリアしていきましょう^^

まず、input 要素の滲みの件ですが、私の Windows の IE でも確認できました。ちなみに私が自身のブログでボタンのデフォルト化を実践した時は滲みは確認できませんでした。

つまり、この問題も一筋縄では行かない可能性が高いです。
取り敢えず試して頂きたいのが、「type="submit"」と「value="コメントを送信する"」の間に半角スペースを挿入することです。
HTML の属性は半角で区切って指定しないと、たまに予期せぬ表示結果になりますのでお試しを。

それで解決されないようでしたら少々お時間が必要かも知れません。

次に、「トラックバック用アドレス」の件ですが、title タグは head タグ内でページのタイトルを表示させる為のタグですので title タグで囲むのは止めた方が良いです。
テキスト「トラックバック用アドレス」を囲むタグを消去するのが、今回の場合得策に思えます。
もしも、トラックバックの input 要素と関連付けたいようでしたら、HTML の label タグについてお調べになると、もしかしたら世間一般人様の実現されたい状況になるのかも知れません。

では、また何かありましたらお気遣いなくどうぞ^^

世間一般人様へお詫び

すいませんでしたーーーm(__)m

「FC2ブログカスタマイズ ~コメント送信ボタンをデフォルトに戻す~」の記事のサンプルソースを確認したところ、属性と属性の間に半角スペースが抜けていました。

つまり上のコメント
>>HTML の属性は半角で区切って指定しないと、たまに予期せぬ表示結果になります

は、私自身に向けたコメントと言えます^^;
おそらくサンプルソースからのコピペで半角スペースが抜けてしまっている状況です。記事のサンプルソース修正しておきました。

それで解決されない場合は上のコメントと以下同文です^^

hajime様、いつもお世話になっております。

hajime様がお手を差し伸べてくださったおかげで、だいぶカスタマイズも終盤になってきました。

ほんとに感謝しております…。
私一人ではここまでくるのに到底無理でした。

私も半年ぐらい前まではスタイルシートの、"ス" の字も分かりませんでした^^;
HTMLは、足の親指突っ込んだぐらいの程度で…。

でもブログを始めてから、色々とカスタマイズしたい意欲が沸いてきて、テンプレートの作成者様には申し訳なかったのですが、最初はとにかくイジクり倒して、少しずつ覚えるというより、少しずつ慣れていくという感じでした^^;

自分でカスタマイズを成功させた時の快感がたまんなくて、イジりイジりしてたようなものです。

でもやっぱり私が一番難しいと感じるのは、デザインというか"色"です。
私は昔からデザインセンスがないもので、とにかく色をなに使えば綺麗に見えるとか、全然ダメなんです^^;

こればかりは質問できるようなことではないので、かなり苦しんでます^^;
基本的には黒と白が好きなので、全体像はこれ以上変えないと思うのですが、リンクなどの色は他のテキストと区別が付きやすいようにしたかったので、少し明るめの色とか…。
テキストも見やすくしたかったので、濃く大きくしたりとか…。

なんかセンスが変ですよね^^;

あとはコメント欄のフォームなどを見ていただくと分かると思いますが、私は英語があまり好きではないので、出来る限り日本語にしてます。
英語は学生時代、大の苦手で赤点の常習犯だったので拒絶感があるのかも^^;

それなもので、コメントのボタンの件でも大変御迷惑をおかけ致しました…。


あっ!、コメントのボタンの件で思い出しました!
余計な話しをダラダラとしてしまいまして、申し訳ございませんでした(>_<)

コメントのボタンは、結論から申し上げますと、直りました!
ありがとうございました!

ただ、ご指摘いただきました半角スペース挿入を試してみたのですが、残念ながらこれでは直らなかったんです…。

そこで新たに気付いたのですが、FireFoxでは正常なボタンの形だったので、hack007.cssに原因があるのかと思い、下記のように試してみました。
hack007.css
*html table#form_h td.btn_h input {
margin-right : 10px;
}
 ↓↓↓↓↓↓
*html table#form_h td.btn_h input {
border : solid 1px #ccc;
margin-right : 10px;
}

上記だと、滲みは取れましたが、背景が灰色になって、ボタン特有の立体感みたいなものも無くなり、ただのテキストボックスのような感じになりました。失敗です…。


次に試したのが、ボタン名の訂正です。
「コメント編集後の再送信」という言葉が長いのかと思い、「コメントの再送信」という言葉に変えましたところ、なんと!! 滲みの問題がウソのように解消されたのです!

ボタン名の長さが問題だったようです。
これは私自身も、すごく勉強になりました!


あと、「トラックバック用アドレス」につきましても、下記の様に訂正しました。
<label for="tburl">トラックバック用アドレス</label>
ご指摘いただき、ありがとうございます!!


あと、またまたすいません(>_<)
新たな問題が出てきてしまいまして…。

実はコメントの表示欄(入力フォーム欄ではなく、書き込まれたコメントを閲覧する画面の事です)のレイアウトをカスタマイズしたいと思いまして、
例えば
・コメントタイトルと<HR>の間の余白部分を1行分ほど縮める。
・コメント本文を、コメントタイトルより1文字分ほど字下げする。
・コメント本文の文字色を、#2a2a2a にする。

といった事をやりたかったのですが、そんなに難しくないと思っていたのですが、これがなぜか全然反応が無く出来ませんでした。

私が試した部分は、
/* コメントのタイトル */
p.comment-header {
color : #ff0080; →カスタマイズ済み
font-weight : bold;
padding : 1em 0;
}

/* コメント本文 */
div.comment-body {
overflow : hidden; /* for Mac */
padding-bottom : 1em;
}

上記の部分を、下記のように訂正してみました。
/* コメントのタイトル */
p.comment-header {
color : #ff0080;
font-weight : bold;
padding : 5px 5px 2px 5px;
}

/* コメント本文 */
div.comment-body {
overflow : hidden; /* for Mac */
padding : 3px 5px 2px 15px;
color : #2a2a2a;
}


padding の数値については様子見ながらだったので、特にこだわりはないです。

これではほとんど変化がありませんでした。
数値が小さいのかと思い、試しに、
div.comment-body 内の、padding : 3px 5px 2px 15px; を、
 ↓↓↓↓↓
padding : 3px 5px 2px 150px;

とかもしてみたのですが、これでも変化がありません。

margin でもやってみたのですが、変化なしです。

なにか私のやり方がおかしいでしょうか??
これぐらいのことは、普段の私でも出来ていたはずなのですが。。。

アドバイスいただけましたら幸いでございます。
どうぞ宜しくお願い致します。


追伸:
コメントのボタンの件で半角スペース挿入のことなのですが、
「FC2ブログカスタマイズ ~コメント送信ボタンをデフォルトに戻す~」
をご確認致しましたところ、サンプルソース内の下記の部分ですが、
<!-- 置換後のソース▼▼▼-->
<input type="submit" name="edit[delete]" value="Delete" id="btn_r2" /><input type="submit"value="Submit" />

↓↓↓ここもvalueの前に半角スペース抜けてるみたいです^^
<input type="submit"value="Submit" />


すいません、余計な事を失礼致しました。。。

世間一般人様、こんばんは!

世間一般人様、こんばんは☆

いえいえ、こちらこそ色々ご意見ご質問して頂き感謝しています^^

>>覚えるというより、少しずつ慣れていく

は同感です。私もはじめて HTML ソースを見た時は、どこかの学者が辞書を片手に「フムフム」なんて調子で書いているものだとばかり思っていました。
でも実際は覚える時間より、慣れる時間の方が多いように思えます。

「色」に関しては、私もいつも頭を悩ませています。
でも世間一般人様のカラー計画は1つ1つに理由があるので、しっかりとしていると思いますよ。
後はコンテンツの内容との著しい違和感や読み辛さが発生しなければ OK ではないでしょうか。
主観ですが、個人のブログと言う事を考慮すると、違和感も個性と成り得るので、多少目を引くような箇所を作っても良いのかな?なんて考えています^^
実は、私が配布しているテンプレートは目を引くような部分を敢えてあまり与えないように制作しています。
つまり、カスタマイズを楽しんで頂くことが前提としてあるので、世間一般人様のように「イジりイジり」して頂けると、私としては嬉しい限りです♪

コメント欄の英語は、根本的には私も同意見です^^
日本人なのだから英語を使う必要性がなければ使わない方が良いと思います。でも、英語はデザイン要素として扱いやすくも思え、簡単に納まり良く見えるので使っている感じです。

「コメントのボタン」の件、解決されたようで何よりです♪
また、半角スペースのご指摘もありがとうございます。幼少の頃からウッカリし、ウッカリとした思春期を過ごし、社会へとウッカリと羽ばたき、ウッカリしていたらおっさんなので、本当に助かります^^

解決されたようなので、ほじくり返すのも何ですが
もしも「コメント編集後の再送信」を文言としてお使いしたい場合は、問題の input 要素に class 属性を与え、IE6 だけに font-size を適用させると解決できそうですよ。一応、サンプルソースを下に書いておきますので、もしもの時はお試しください。

HTML サンプル
<input type="submit" value="ボタン文言" class="btn_com" />

CSS サンプル(hack007.css)
*html input.btn_com {/* for IE6 */
font-size : 12px;
}

今回のご質問の件ですが、世間一般人様にとって参考に成り得そうな記事が当ブログにあります。
「XML宣言でIE6が後方互換モードになるバグ」がその記事です。
おそらくこのバグをご理解されると普段行えるはずの指定が行えないことのヒントとなりそうな気がしました。
このコメントで私がご説明させて頂くよりも、そちらをまず一読された方が分りやすいと思いますので、宜しかったらご覧ください。

もしも、その記事で解決に至らない場合や不明な点ありましたらご質問ください^^

世間一般人様へお詫び

上のコメントで「XML宣言でIE6が後方互換モードになるバグ」の記事が参考になるとおっさんが言っていますが、それは寝言ですのでお聞き流しください(汗)

すいませんでしたーーーm(__)m

div.comment-body



p.comment-body

にされると解決です。配布中のテンプレートも修正しておきました。ご報告感謝です!

hajime様へ

すいません!少々忙しくて御報告遅くなりました!

おかげ様で、コメント欄の件につきましても解決致しました。
これで現段階では思い描いたとおりの形になりました。

これも全てhajime様のおかげでございます。
誠にありがとうございます。
ブログの記事を書くことよりも、カスタマイズの方に夢中になってしまうくらい好きなので、なんか変わってますね^^;

そもそもが、hajime様のテンプレートに出会えたのが、ホームページを作る人のネタ帳様というブログで、hajime様のご紹介がありまして、そこからたどり着いた次第です。

これほどまでに素晴らしいテンプレートを作ってらっしゃる方がいらっしゃるなんて!と惚れ惚れしました^^;
hajime様はもちろんのこと、ホームページを作る人のネタ帳様にも、大変感謝をしております。

今回のカスタマイズで、とても得る物が多く、大変勉強になりました。
これからもカスタマイズはしていきますので、もしまた分からない事がありましたら、すいません…その時はまた御質問させていただくこともあるかもしれませんが、どうぞこれからも宜しくお願い致します。

hajime様の益々のご活躍を心よりお祈りしております!
それでは、失礼致します^^

世間一般人様こんにちは!

コメントの件、解決されたようで何よりです^^
お手数おかけして申し訳ございませんでしたm(__)m

「ホームページを作る人のネタ帳」さんは私も覗かせて頂いています。勉強になったり、刺激を受けたりと楽しんでいます^^
先日は、そんな人気ブログでご紹介して頂き感激でした。
また、そうした事から世間一般人様に当ブログのテンプレートに興味を持って頂けたことを知り、あらためて「ホームページを作る人のネタ帳」さんに感謝です♪

お褒めの言葉ありがとうございます♪
そう言って頂けると本当に嬉しいです。少々照れくさいような、私には勿体ないと思えるお言葉もありますが、ありがとうございます!

こちらこそ、頂いたご意見・ご質問の中から、一人では到底知る事の出来ないような事を勉強させて頂いたと思っています。
FC2 ブログには優れたテンプレートが沢山あり、私のテンプレートはまだまだな部分も沢山ありますが、ご使用頂いている方がテンプレートを変更する時に「あれ?またあのおっさんのテンプレートだ♪」なんて感じになれるよう頑張りたいと思っています^^

まぁ、それは無理だとしても
「あぁ。またあのおっさんのテンプレートか・・・orz」
とか
「あのおっさんのか。チェッ」
なんて舌打ちされないよう精進していきます!

私で分かる範囲でしたら喜んでお答えさせて頂きますので、その時はまた遊びに来て頂けると嬉しいです^^

こちらこそこれからも宜しくお願いします!

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

hajime様、こんにちは!

私の取り留めのないブログにコメントまでいただいてありがとうございました!

私のブログなどたいした影響力もありませんが、少しでも恩返しができればと思った次第です^^

バイクの事もhajime様に背中を押していただいたので、時間の空きを見つけて行ってみようかと、前向きに考えてるところです^^

hajime様もどうぞ安全運転で!
事故やケガのないようにお気をつけて下さい!

ブログカスタマイズについても、ブログタイトルエリアに画像を持ってこようかと計画を練っています。
もしもまた、にっちもさっちもいかなくなった時は、御質問させていただくかもしれませんが、その時はまた宜しくお願い致します!

今後ともどうぞ宜しくお願い致します。

DioZX 様こんばんは☆

いえいえ^^
こちらこそブログをご紹介して頂き感謝の至りです。
時節的なニュースに疎いので、DioZX 様のブログの記事に期待しています!

バイクの免許頑張ってください!
10代で取得しておかないと何かと面倒臭さで腰が重くなったり、忙しさに振り回されなかなか難しいとは思いますが、私の場合は『小さな夢が1つ叶うんだ!』なんて気持ちで楽しんで取得できました^^

>>どうぞ安全運転で!

ありがとうございます!
原付時代ですが、走行中に居眠りしてしまった事があるので、本当に注意したいと思います^^

ブログのタイトルエリア画像化計画頑張ってください!
勿論、私で分かる範囲でしたら喜んでお答えさせて頂きます。
実は私も今抱えている仕事が落ち着いたら画像化してみようかな?なんて考えていたところです。

こちらこそ、今後も宜しくお願いします^^

 
 
 
 
 
 
 
  非公開コメント
 

Track Backs

TB URL 

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。