注目タグ

テンプレート・プラグイン

トピック詳細

テンプレートblueの横幅を広げたいのですが、

テンプレートの横幅を広げることができると知り、色々検索してみたのですが、うまくいきません。
どなたか広げ方をご存じの方、ご指導願います。

2014年11月18日 09:55  by いによこ

コメント一覧 12件中、1~10件表示

  • 標野ゆき様、数日間に渡り丁寧なご指導ありがとうございました。
    おかげ様で当初の目的であった横幅を広げることを達成できました。

    あげてくださった画像は削除していただいて大丈夫です。
    本当に助かりましたi-229

    2014年11月20日 16:19 by いによこ

  • 以下は今現在の質問者さんのスタイルシートですが
    .mainEntryTitle {
    padding: 5px 0px 5px 15px;
    margin: 0px;
    font-family:"\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF&q uot;, "Hiragino Kaku Gothic Pro", "\30D2\30E9 \30AE\30CE\20Pro\20W3", "Osaka";
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
    background-image: url(http://blog-imgs-53.fc2.com/s/h/i/sh imenoyuki/header_01.gif);
    background-repeat: no-repeat;
    }

    背景のリンク先が違っている所為で、記事タイトルの画像が欠けているのだと思います。ここに入る画像名は main_tiba ck.gif です。

    もしもこれ以外の不具合でしたら
    一度PCのキャッシュを削除してから確認してみてください。

    それと、シメノのファイルからのリンクになっているようですので
    一旦3点ともPCにダウンロードしてから、ご自分のファイルにアップロードして
    そちらからのリンクに書き換えてください。

    2014年11月20日 13:52 by 標野ゆき

  • 何度もすいません(汗

    background-image: urlは3か所あるようですが、どこに書き込みしたら良いのでしょうか?

    header_01.gif
    header_02.gif
    main_tiback.gif
    と3つありますので、それぞれに当てはめてみたのですが、
    私のブログをご覧いただけたらわかるかと思いますが、
    ヘッダー部分がおかしいです。

    もう1度最初から設定し直してみます(汗

    2014年11月20日 09:42 by いによこ

  • これら3点の背景は<img>タグを使って表示させているのではなく
    スタイルシート上のbackgroundプロパティを用いて呼び出しているので
    background-image: url(画像アドレス);<<この部分ですね〕
    テンプレートのHTMLの上にはそれらしいものは何も表示されません^^;

    このヘッダー部分のように文字の背景に画像を敷く場合には
    こうしたやり方で表示させているケースが多いようです。

    テンプレート「blue」のフッター部分は
    上にかぶさる文字がないので、HTML上で<img>タグを使って表示させていますが
    どちらかというと併用するケースの方が少ないように思います。

    とりあえず問題の画像は
    前項のリンクからダウンロードしていただけると幸いです。

    2014年11月20日 00:09 by 標野ゆき

  • 標野ゆき様、重ね重ねありがとうございます。

    しかしパソコンの機種のせいか、名前をつけて背景を保存 は出てきませんでした。

    恐らく同じであろう「画像URLをコピー」でURLを出して、
    <div id="footBlock"><img src="  wid th="900" height="36" /></div>/! --width="760" height="30"--/の空白のところに書き込み ましたが上手く表示されません(汗

    私は何か勘違いしてるのでしょうか? 

    2014年11月19日 22:43 by いによこ

  • 「名前をつけて画像を保存する」ではなく
    プレビューページのヘッダー画像の上にマウスポインタを置いて右クリックし
    「名前をつけて背景を保存」を選ぶとうまくいくと思います。

    うまくいかないときは下のリンクからどうぞ。
    <ここに画像へのリンクを張っていましたが既に削除しています>
    末尾のファイル名は同じなので参照してください。

    これらの画像はすでにサイズが変更してあるので
    ダウンロード後にご自分のファイルにアップロードしてURLを書き換えるだけで
    テンプレートに表示されるはずです。

    ちなみにMSペイントはWINDOWSのPCに高確率で格納してあるお絵かきソフトで
    簡単な画像編集もできるので、お持ちの機種にも備えられているようでしたら
    一度使ってみられると役立つかもしれません。

    なお、今回のプレビューは
    解決後には消してしまいますので、悪しからずご了承ください。

    2014年11月19日 17:27 by 標野ゆき

  • 標野ゆき様、丁寧な返信感謝致します。

    仰った通りにスタイルシートを変更したところ、引き伸ばしには成功しました。

    しかし、初歩的なことかもしれませんが、画像のダウンロードの仕方がわかりません…。
    「名前をつけて画像を保存する」を選んだのですが、保存したはずのものをクリックすると
    日本語de遊ぶログのカウンターがおかしなことになってたものでした。

    お手数をかけて大変恐縮ですが、再度ご教授いただけるようお願い申し上げます。
    MSペイントというものはこれから調べてきます。

    2014年11月19日 09:12 by いによこ

  • 元画像をダウンロードして
    MSペイントで横幅だけを900ピクセルに広げてみたら
    自分の場合はうまく表示されました。

    このテンプレートの画像はシュールな印象なので
    一般の写真と違って、引き伸ばしによる荒れがあまり気にならないように思います。

    それでよろしければ
    編集後の画像をご自分のファイルにアップロードしてから
    太字部分のサンプルURLを実際のURLに書き換えてください。

    #headBlock1 {
    height: 90px;
    width: 900px;/**760**/
    background-image: url(http://blog-imgs-数.fc2.com/i/n/i /inisie358/header_01.gif);
    }

    #headBlock2 {
    margin: 0px;
    padding: 0px;
    height: 30px;
    width: 900px;/**760**/
    background-image: url(http://blog-imgs-数.fc2.com/i/n/i /inisie358/header_02.gif);

    .mainEntryTitle {
    padding: 5px 0px 5px 15px;
    margin: 0px;
    font-family:"\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF&q uot;, "Hiragino Kaku Gothic Pro", "\30D2\30E9 \30AE\30CE\20Pro\20W3", "Osaka";
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
    background-image: url(http://blog-imgs-数.fc2.com/i/n/i /inisie358/main_tiback.gif);
    background-repeat: repeat-x;/**no-repeat**/
    }
    赤文字の部分も編集してください。

    2014年11月19日 01:36 by 標野ゆき

  • テンプレートのHTMLも編集する必要があります。
    <div id="footBlock"><img src="http: //templates.blog.fc2.com/template/blue/footer.gif" widt h="900" height="36" /></div>< ;!--width="760" height="30"-->

    現在の画像だとヘッダー、記事タイトルとも画像の横幅が足りず、見苦しくなります。
    幅広の画像を準備してURLを書き換えてください。

    なお、PCの環境や作業の手順等によって
    動作が異なる場合がありますので、その際は悪しからずご了承ください。

    2014年11月19日 00:18 by 標野ゆき

  • 以下はテンプレートのスタイルシートの編集例です。(/*元の値*/)
    ブログ幅を900に、記事カラムを480に、サイドをそれぞれ200に広げた場合です。
    #baseBlock {
    width: 900px;/**760**/
    padding: 0px;
    margin: 0px auto;
    }
    #baseLeft {
    width : 690px;/**570**/
    float : left;
    }

    #headBlock1 {
    height: 90px;
    width: 900px;/**760**/

    #headBlock2 {
    margin: 0px;
    padding: 0px;
    height: 30px;
    width: 900px;/**760**/

    #menu1Block {
    float : left;
    width : 200px;/**160**/
    }
    .menu1BlockBase {
    width : 200px;/**160**/

    .menu1BlockBody {
    /**background-image: url(http://templates.blog.fc2.com/temp late/blue/menu2_back2.gif);を削除**/
    border: 1px solid #014D71;/**border-right**/

    #mainBlock {
    float : right;
    width : 480px;/**400**/

    #menu2Block {
    float : right;
    width : 200px;/**180**/
    }
    .menu2BlockBase {
    width : 200px;/**180**/

    .menu2BlockBody {
        /**background-image: url(http://templates.blog.fc2.com/ template/blue/menu2_back2.gif);を削除**/
    margin: 0px;
    padding: 0px;
    border: 1px solid #014D71;/**一行まるっと追加**/

    2014年11月19日 00:17 by 標野ゆき

1 2 > >>