- ベストアンサー
Bloggerのデザイン・カスタマイズについて
4649pandaの回答
投稿画面のHTML編集のところで <font size="-1">テキスト</font> はできて、 <blockquote><font size="-1">引用文</font></blockquote> ができないということなのでしょうか？ それとも、このblockquoteは記事部分ではなくサイドバー等のガジェット内にあるのでしょうか？ 私もbloggerをやっているのでためしてみましたが、投稿画面のHTML編集内で <blockquote><font size="-1">引用文</font></blockquote> は問題なく反映されました。 あと、相対で指定する場合"1"が最小値なので、すでにblockquoteが"1"のサイズになっている場合は、それ以上小さくは表示できないと思います。 あまりお役に立てなくてすみません。 >上記の「.post-body」がテンプレートにあったものか、私が後から加えたものかはわかりませんが・・・ あったと思いますよ。
関連するQ&A
- 至急 ヤプログ カスタマイズ サイドバーについて
現在サイドバーをカスタマイズしているところなのですが、画像のようにずれてしまい思うようになりません。 (1)サイドバー自体をスペースの空いている左よりにしたい。 (2)PR・プロフィールなどのタイトルもそれに合わせたい。 カスタマイズ初心者なためあまりタグの意味を理解しておらず、どこの数値を変更してよいかわかりません。 タグは以下です。 /*-------------------------------------- クラス ---------------------------------------*/ .side_title { margin-bottom: 0px; padding: 10px 100 10px 10; background: url() no-repeat left; font-size: 15px; text-transform: capitalize; text-align: center; color: #FFF; font-weight: bold; } #conts .title { margin: 0 0 10px 15px; padding: 14px 0 13px 10px; background: url(画像) no-repeat; font-size: 15px; font-weight: bold; color: #662C6B; } /* トラックバック・コメント・検索レイアウト */ #trackbacks, #comments, #comment_input, #comment_pending, #comment_error, #no_search_results, #no_search, #dynamic_pages_error { margin: 0 40px 0; } /* サイドナビ */ .side { margin-bottom: 10px; line-height: 1.2; } /* サイドナビリスト */ .side_text { margin: 0px 0px 0; padding: 3px 230px 15px 20px; } .side_feed { } .sidebox { background: url(画像) repeat-y; } サイドバーのタグはここだと思うのですが、もし違うようでしたらご指摘頂きたいです。
- 締切済み
- ブログ
- CSS backgroundが反映されません
CSS初心者です。 CSSレイアウトで問題にぶつかりました。 下記CSSをIE6で見るとbodyに書いた 「background-image:url(images/flower.png); 」が反映されません。 IE10では反映されました。 いったい何故でしょうか。。。 調べてみたのですがいまいち分かりませんでした。 よろしくお願いいたします。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ * { margin:0; padding:0; } body { background-image:url(images/flower.png); background-repeat:no-repeat; background-position:bottom; background-attachment:fixed; background: rgb(#00000); color: rgb(76, 76, 76); } body{ text-align:center; } div#container { background-image:url(images/sora.jpg); background-repeat:no-repeat; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; } div#container{ width: 770px; margin: 0 auto; text-align: left; border: 3px solid rgb(228, 225, 219); } .photo{ margin: 0px; padding: 0px; left: 600px; top: 970px; width: 141px; position: absolute; } .photo2{ margin: 0px; padding: 0px; left: 400px; top: 970px; width: 141px; position: absolute; } p { line-height: 2em; font-size: 0.8em; } .p1{ font-weight: bold; letter-spacing: 0.1em; } .h1{ text-align: center; } h1 span { display:none; } h2 span { display:none; } h3 { line-height: 1.2em; padding-top: 2.4em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } h3 { background-image:url(images/h3.png); background-repeat:no-repeat; background-position:0px 35px; padding-right: 40px; padding-left: 30px; } h2 { line-height: 1.3em; padding-top: 1em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } a{ color:#0000ff; font-style:normal; text-decoration:underline; } a:link { color: rgb(90, 120, 255); font-style:normal; text-decoration:underline; } a:visited { color: rgb(165, 188, 255); text-decoration:underline; } a:hover { color:#ff0000; font-style:normal; text-decoration:underline; } acronym { border-bottom-color: currentColor; border-bottom-width: medium; border-bottom-style: none; } #intro { padding: 0px 79px 0px 86px; } #participation p { padding-right: 40px; padding-left: 10px; } #intro { padding-top: 50px; } #preamble p { padding-right: 40px; padding-left: 15px; } #explanation p { padding-right: 40px; padding-left: 15px; } #preamble { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #explanation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #participation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #benefits { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #requirements { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #quickSummary p{ padding-right: 40px; padding-left: 10px; } #footer { text-align: center; line-height: 1.5em; padding-top: 10px; padding-bottom: 40px; font-size: 0.9em; } #footer a:link { color: rgb(133, 126, 112); } #footer a:visited { color: rgb(133, 126, 112); } #footer a:hover { color: rgb(133, 126, 112); } #footer a:active { color: rgb(133, 126, 112); }
- ベストアンサー
- CSS
- ホームページビルダーでスタイルシートを使ったのですが？
今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }
- ベストアンサー
- ホームページ作成ソフト
- addressタグを入れると揃わない
かなり簡素なページをデザインしていますが、フッターの画像をaddressタグではさむと、フッター画像だけ20ピクセル程右に寄ってしまい全体が揃いません。addressを除くと揃うのですが。 ページのソースは htmlファイル <div id="wap"> ここにSWFファイル <div id="nav"> <ul> <li>～</li> </ul> </div> <address><img footer.jpg" /></address></div> CSSファイル #wap { width: 800px; height: 570px; text-align: left; margin-right: auto; margin-bottom: 50; margin-left: auto; position:absolute; left:50%; top:50%; margin-top: -285px; margin-left: -400px; } #nav { background-color: #666666; margin-top: 0px; margin-bottom: 0px; font-size: 12px; color: #FFFFFF; float: left; width: 100%; } #nav ul { list-style-type: none; margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 28px; } #nav li { display: inline; padding: 0px; } 全体を#wapに入れて上からSWF、リストタグのナビ、画像のフッターと入った大変簡素なページですが、フッターの画像をadreesタグで挟むとフッター部分だけ左に20ピクセル程ずれて揃わなくなります。 どなたか解消出来る方おられませんでしょうか。
- 締切済み
- HTML
- DreamweaverMXのデザインビューが一部表示されなくなる
DreamweaverMXのデザインビューが一部表示されなくなってしまい困っています。 どうして表示されなくなったのか具体的に言うと、 3カラムのレイアウトをdivを使いCSSで作成していました。firefoxで見るとフッターがメインコンテンツの上部にきてしまっていたので、高さを指定してあった「右メニュー」や「左メニュー」、また「メインコンテンツ」の部分のdivの高さをすべて「auto」にし、フッター部分のCSSに「clear: both;」を記入し、修正を図りました。 これでその問題は解決されましたが、その後、DreamweaverMXのデザインビューの一部（メインコンテンツ、3カラムの真ん中部分です。）が途中から真っ白になってしまっていて、そこに書かれていたテキストや画像等すべて真っ白で、デザインビューで作業できなくなってしまいました。 真っ白でも、その部分に書いたテキストはマウスで反転させたりすると黒くその部分が反転するので、テキスト等はそこにあるようですが、真っ白ですから、作業ができません。 コードビューで作業できますが、それではDreamweaverMXを使う意味がありません。デザインビューで作業できれば、非常にスピーディーに出来るので、こうなってしまい非常に困っています。 「すべてのビジュアルエイドを非表示」にしたら直ったこともあり、そうして見ましたが、今回は駄目です。 CSSコードの書き方に問題があるかもしれません。 以下が、そのCSSコードです。 /* container */ #container { width: 900px; margin-right: auto; margin-left: auto; text-align: left; height: auto; } #incontainer { width: 700px; float: left; height: auto; } /* メイン */ #main { float: right; width: 480px; padding: 10px; height: auto; } /* 左メニュー */ #ml { float: left; width: 200px; height: auto; } #box-ml { padding: 0px 0px 10px; width: 200px; float: left; height: auto; } #ul-ml { margin: 0px; padding: 0px; display: inline; text-indent: 0px; list-style-type: none; text-align: left; } #li-ml-kg { margin: 0px; list-style-type: none; padding: 0px; display: block; line-height: 26px; background-image: none; text-indent: 20px; background-color: #66CC00; border: 1px solid #CCCCCC; color: #FFFFFF; font-size: 13px; } #li-ml a { margin: 0px; list-style-type: none; padding: 0px; display: block; line-height: 25px; background-image: url(buttons/li-bg.gif); text-indent: 20px; font-size: 13px; } #li-ml a:hover { margin: 0px; list-style-type: none; padding: 0px; display: block; line-height: 25px; background-image: url(buttons/li-bg-m.gif); text-indent: 20px; color: #FF0000; font-size: 13px; } /* 右メニュー */ #mr { width: 200px; float: right; text-align: left; height: auto; } #box-pick { width: 180px; padding: 10px; border: 1px solid #CCCCCC; margin: 0px 0px 5px; display: block; float: right; height: auto; } #box-koshin { display: block; width: 180px; padding: 10px; border: 1px solid #CCCCCC; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: right; height: auto; } #box-saishin { display: block; width: 180px; border: 1px solid #CCCCCC; padding: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: right; height: auto; } #box-toiawase { display: block; width: 180px; border: 1px solid #CCCCCC; padding: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: right; height: auto; } #box-counter { display: block; width: 180px; padding: 10px; text-align: center; margin-top: 0px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; float: right; height: auto; } /* フッター */ #footer { background-color: #66CC00; height: 50px; width: 900px; margin-right: auto; margin-left: auto; color: #FFFFFF; padding-top: 18px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; clear: both; } 何が原因なんでしょうか？ 宜しくお願いいたします！
- ベストアンサー
- CSS
- css/上部に移動させたい。参考URLあり。
お世話になります。 http://www.sonzai.net/tama/index.html 下の車と動いているgifネコを地平線部分あたりに 上げたいのですが、css・htmlをどのように改変したら良いでしょうか？ 宜しくお願いします。 【gif猫】 #tama1 { font-size: 11px; color: #FFFFFF; font-weight: normal; text-align: center; padding-bottom: 110px; padding-left: 470px; letter-spacing: 1px; } 【小窓・秘密の応接間】 #window1 { font-size: 11px; color: #FFFFFF; font-weight: normal; padding-top: 53px; padding-left: 370px; letter-spacing: 1px; } 【小窓・リンク】 #window2 { font-size: 11px; color: #FFFFFF; font-weight: normal; padding-top: 6px; padding-left: 298px; letter-spacing: 1px; } 【車】 #kuruma { font-size: 11px; color: #FFFFFF; font-weight: normal; padding-left: 68px; letter-spacing: 1px; }
- ベストアンサー
- HTML
- プログラミングについて勉強してます。このコード意味
AppleIDが更新されましたという詐欺メッセージが届いたのですがそ下にコード書かれてました。どの言語でどんな意味か教えてください font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !important; font-size: 17px; line-height: 25px; font-weight: normal; color: #333 !important; background-color: #ffffff !important; margin: 0 !important; padding: 0 !important; width: 100%/* !important */ ; /* was 685px */ ; } /* same width as body, because Rover adds this div */ body /*, .main*/ {} .main { width: 685px; } #apple-logo-left-margin { width: 538px !important; } #logo-row-box { width: 100% !important; /* text-align:right; */ padding-bottom: 20px !important; } div[dir="rtl"] #logo-row-box { /* text-align:left !important; */ } h1 { font-size: 32px; line-height: 36px; padding-bottom: 10px; border: 0 !important; color: 333 !important; } b { font-weight: 500 !important; } p { margin-top: 0 !important; word-wrap: break-word; color: #333; font-weight: normal; } td.h1-header { padding: 0px 0px 0px !important; } td.signature { padding-right: 0 !important; padding-left: 0 !important; } td.no-padding-bottom { padding-bottom: 0 !important; } #signature { padding-top: 18px !important; /* was 41px */ padding-bottom: 50px !important; } em a { color: #333 !important; } a { color: #0070c9; text-decoration: none; } a:hover, a:focus { text-decoration: underline !important; } span.unlink a, em a, b a, td.unlink a { color: #333 !important; cursor: text; pointer-events: none; padding-top: 0 !important; margin-top: 0 !important; } #main { margin-top: 40px; padding-right: 15px; padding-left: 15px; padding-bottom: 30px; } footer, footer p, footer span.unlink a, footer td.paragraph { font-size: 12px; line-height: 18px; font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; color: #888 !important; } .center-text, footer nav, footer a:hover { text-decoration: underline; } .no-margin-bottom { margin-bottom: 0 !important; } td.spacer-36 { padding-bottom: 36px; } html[dir=rtl] #apple-logo { left: 0; right: 538px; } p#copyright { margin-bottom: 0; } .display-block { display: block; } .nowrap { white-space: nowrap; } #apple-logo-margin-bottom { height: 44px !important; } #left-align-on-reply { /* moved from body */ margin: 0px auto 50px; padding: 0; width: 685px; } #apple-logo-cell { width: 100%; padding-top: 40px; padding-bottom: 44px; } #apple-logo-in-cell { height: 28px !important; width: 24px !important; } #apple-logo-in-row-box-mobile { display: none; height: 20px !important; width: 17px !important; } /* If the email client is reading the style element: */ /* - then we don't need spacer divs */ div.paragraph-spacer { display: none; height: 0px !important; margin-bottom: 0px !important; } /* - and margin-top already is in effect on #main */ #apple-logo-margin-top { height: 0px !important; } #logo-row-box { padding-top: 0 !important; } div[dir="rtl"] #logo-row-box { /* text-align:left !important; */ }
- ベストアンサー
- その他（プログラミング・開発）
- CSSのカスタマイズについて
ライブドアブログを最近始めたのですが、 素人にも関わらずカスタマイズしたいと思っています。 タイトル部分を中央に揃えたいと思っているのですが どのようにしたらいいかさっぱりわかりません。 カスタマイズのページをコピペします。 よろしくお願いします。 /* ブログのヘッダー、タイトル、説明 ----------------------------------------------- */ #blog-header { margin-bottom: 40px; position: relative; } #blog-header-inner {} #blog-header-image { height: 400px; width: 100%; background-color: #287cba; background-image: -webkit-linear-gradient(#57bef5 0%, #287cba 100%); background-image: -moz-linear-gradient(#57bef5 0%, #287cba 100%); background-image: -ms-linear-gradient(#57bef5 0%, #287cba 100%); background-image: -o-linear-gradient(#57bef5 0%, #287cba 100%); background-image: linear-gradient(#57bef5 0%, #287cba 100%); } #blog-title { font-size: 40px; font-weight: bold; line-height: 1.4; margin: 30px 0; } #blog-title a { color: #000; } #blog-description { color: #979797; font-size: 14px; font-weight: normal; line-height: 1.6; margin: 30px 0; } #blog-description a { color: #979797; }
- 締切済み
- SE・インフラ・Webエンジニア
- table cellpadding「有」又は「無し」でCSSの解釈違う？
IE6,７ tableのcellpaddingをcellpadding="0"と表記してスタイルシートでセルのpaddingを指定するのと、cellpadding="0"と表記せずにスタイルシートでセルのpaddingを指定するのとでは、ブラウザーのテールブルの解釈(表示)が違うのですが、スタイルシートでセルのpaddingを指定する場合、HTMLのcellpaddingをcellpadding="0"と表記するべきですか又は表記しないべきですか？ 以下の二つのコードの違いは、<table>タグにcellpadding="0"が「ある」か「ない」かだけですが、例２のコードのテーブルの方が例1のテーブルより全体的な幅が広く表示されます。 <例１：cellpadding="0"あり> <html> <head> <style type="text/css"> .ta { margin-top:20px; margin-bottom:20px; table-layout:fixed; } .ta_ti { padding-top:5px; padding-bottom:5px; text-align:center; font-size:18px; font-weight:900; line-height:180%; } .ta_he { font-size:16px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; font-weight:900; } .ta_da { padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; } </style> </head> <body> <table class="ta" width="550" border="0" cellspacing="1" cellpadding="0"> <colgroup> <col width="200"> <col width="347"> </colgroup> <tr> <td class="ta_ti" colspan="2"> タイトル </td> </tr> <tr> <td class="ta_he"> 見出し </td> <td class="ta_da"> データ </td> </tr> </table> </body> </html> <例2：cellpadding="0"無し> <html> <head> <style type="text/css"> .ta { margin-top:20px; margin-bottom:20px; table-layout:fixed; } .ta_ti { padding-top:5px; padding-bottom:5px; text-align:center; font-size:18px; font-weight:900; line-height:180%; } .ta_he { font-size:16px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; font-weight:900; } .ta_da { padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; } </style> </head> <body> <table class="ta" width="550" border="0" cellspacing="1"> <colgroup> <col width="200"> <col width="347"> </colgroup> <tr> <td class="ta_ti" colspan="2"> タイトル </td> </tr> <tr> <td class="ta_he"> 見出し </td> <td class="ta_da"> データ </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- ボックス間の隙間を埋める方法
私が作ったHPなのですが、 タイトルと文字の間に空白が出来てしまっています。 オレンジの背景をくっつけたいのですがどのようにすればよろしいでしょうか？ 以下の設定をしています。 h1#title{ height: 40px; margin: 0; float:left; font-size: 35px; padding-right: 2px; color: #ffffff; background-color: #ff6600; } h2#renewal_time{ height: 40px; margin: 0; font-size: 18px; text-align: right; padding-top: 20px; padding-bottom: 0px; background-color: #ff6600; }
- ベストアンサー
- CSS
お礼
ご回答ありがとうございます。 確かに投稿画面で「<blockquote><font size="-1">引用文</font></blockquote>」と指定すると反映されました。昨日試みたときは反映されなかったのですが・・・。単に私がHTMLのスペルを間違っていたのでしょうか。申し訳ございません。お騒がせいたしました。