注目タグ

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

トピック詳細

タイトルと記事の画像を中央に表示させたい

ブログのトップに画像を入れられるように編集したいのですができません。
その前に画像をアップしたら偏ってしまってます。

つまり、下記のようにテンプレートを編集したいのです。

・画像を表紙のようにブログのトップに置きたい。
・画像を真中に表示させる。

メカおんちですがデザインには生意気にも凝ってしまいます。
どうぞよろしくお願いいたします。

もう、二日間もボロボロ・・・

2012年02月13日 00:09  by 

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

  • pikaさま
    標野さま
    akiさま

    こんにちは
    ご丁寧なご指導をありがとうございます。

    トライしましたが
    すでにテンプレートがかなりぐちゃぐちゃになっていますので
    リセットしてからもう一度
    これまでいただいたご指導内容を基に組み立てなおしたいと思います。

    それを機に、海外旅行写真はビルダーを使って
    FC2ホームページを利用させていただき
    ブログは猫ちゃん写真と文章にしたほうが
    使いやすいのではないかと考えています。

    一応トライしてみます。
    今後もよろしくご指導をお願いいたします。

    2012年02月15日 14:36 by

  • ブログ全体の幅を広げ、背景画像のサイズを変更しましょう。
    (IEではbackground-sizeが適用されませんので、画像の編集が必要です。)

    .layout_image_top{
    background:url(http://blog-imgs-21.fc2.com/p/o/p/popstyle1/ 750_cream_top01.gif) no-repeat;
    background-size:900px;
    height:55px;
    margin:0;
    padding:0;
    }

    記事の画像を中央に表示させるにはCSSを下記のようにします。
    .entry_body img{
    margin:auto;
    padding:0;
    border:1px dotted #b7b7b7;
    display: block;
    text-align: center;
    }

    .emoji{
    display: inline!important;
    text-align: left!important;
    margin:0!important;
    }

    .fc2_footer img{
    display: inline!important;
    margin:0!important;
    }


    参考
    http://bftfc2.blog60.fc2.com/blog-entry-112.html
    http://bftfc2.blog60.fc2.com/blog-entry-113.html
    http://bftfc2.blog60.fc2.com/blog-entry-114.html

    2012年02月15日 01:51 by pika★フォーラムモデレーター

  • 本文入力補助エディタの中央ぞろえ(センタリング)ボタンは
    <<コレです。

    でももうお一方の回答者さんがおっしゃるように
    センタリングするには記事内の画像は横幅が広すぎるようですね。

    記事枠の表示も崩れているようですし、いじり回したテンプレートを一度リセットして
    トップ画像を表示するためのカスタマイズからやり直した方がよさそうです。
    画像のセンタリングが有効か無効かを確かめるためにももっと小さな画像で試してみられては如何でしょうか。

    また先にプラグインを追加してみられると表示上の問題点がはっきりするかもしれません。

    2012年02月14日 22:14 by 標野ゆき

  • ちょこっと見てきたのですが、このテンプレートは本来
    左側にメニューを表示させる為のスペースが取られています。
    どちらも背景が白なので、その境は目に見えませんが;
    どんなに画像をセンターに寄せる記述をしても、
    右側、つまりは記事を記入するスペースの真ん中に配置されるので
    ブログの右よりになってしまいます。画像がはみ出るのは
    記事分のスペースよりも写真が大きいからですね。
    試しにスタイルシートの以下の部分に赤字を足してください。
    プレビューで見て色の変わった部分がメニュー用の幅です。


    /* サイドバー
    **************************/

    #sidebar{
    float:left;
    width:180px;
    margin:0;
    padding:0 0 80px 0;
    background-color:#e1e1e1;
    }

    またフッター部分がずれていたり、記事が表示される位置が
    おかしいなど、ちょーっと元から崩れてきているようです;
    カレンダーやプロフィールを表示するメニュー欄は欲しいのか
    どうかも合わせて検討されると良いかと思います。
    ちなみにプラグインの項目がメニューに当たります。
    色々追加して試してみてください♪

    猫可愛いですね!ブログも楽しみにしていますので頑張ってください!

    2012年02月14日 18:55 by

  • akiさま

    こんにちは
    コメントをありがとうございます。

    テンプレート名は「popline_cream1 」です。

    HTMLをお勉強しなければいけないのですが
    マニュアルを読むと「めまい」がします。
    すぐに挫折します。
    そのくせデザインには執着しているのですから
    身の程知らずですね。

    HPの作成はビルダーの助けを借りて最低機能だけを使って
    なんとかしのいでいますが
    ブログはサーバーアップでできないので苦慮しています。

    にゃんこはお好きですか?
    お友達のノラちゃんです。

    2012年02月14日 17:53 by

  • 回答になっておらず心苦しいのですが、
    宜しければテンプレート名を教えていただけませんか?
    自分の勉強にもなりそうなので興味があります!

    2012年02月14日 17:20 by

  • 標野さま

    こんにちは
    詳細なご指導をありがとうございます。

    画像のセンタリングは記事編集画面で下記に設定しましたが無効でした。

    <div style="text-align: center;"><img sr c="http://blog-imgs-48.fc2.com/j/a/p/japanyo/esu3.jpg&q uot; alt="esu3.jpg" width="600" height=& quot;419"/></div>

    またWを使う機能にはセンタリングの項目ははありませんでした。

    今は画像のセンタリングにチャレンジで
    ほかの項目には手がつけられない状況です。

    いろいろありがとうございます。
    これに懲りずにg引き続きどうぞよろしくお願いいたします。

    2012年02月14日 15:24 by

  • メニューカラムに
    カレンダーや新着記事一覧などを表示するには
    プラグインを追加する必要があります。

    管理画面の左下のメニュー内にある「プラグインの設定」リンクから
    ジャンプした先でご希望のプラグインを追加してください。
    http://fc2blogmanual.blog60.fc2.com/blog-category-43.html

    管理画面の一番上にある「簡易モード」のON/OFFスイッチがONになっていると標準的な機能が使えない場合があるので、O N/OFFを確認してみてください。
    http://fc2blogmanual.blog60.fc2.com/blog-entry-167.html


    テキストや写真をセンタリングしたいときには
    <div style="text-align: center;">
    表示したい文字や写真(画像表示タグ)
    </div>
    このようなタグを使います。

    <div style="text-align: center;">と</div& gt;で、センタリングしたい文字や 画像を表示するための<img src="画像のURL"&g t; などをサンドイッチして用います。

    簡易モードがOFFのとき、記事本文入力画面の上に表示されるW印を押すと
    いろいろな機能が使えるエディタ画面に切り替わるのですが、その中に便利なワンタッチ・センタリングボタンがあるようです。
    http://fc2blogmanual.blog60.fc2.com/blog-entry-122.html


    なお、下は質問者さんのブログのHTMLですが
    <div class="introduction"><%introduction ><div><BR><BR>
    <img src="http://blog-imgs-48.fc2.com/j/a/p/japanyo /esuto1.jpg" border="0" />&l t;/div>
    赤色の部分>が入っていません。
    不具合の原因になりがちなので、テンプレートの「HTMLの編集」で修正された方がいいです。

    2012年02月14日 10:37 by 標野ゆき

  • ucdさま

    こんばんは
    ご指導ありがとうございます。
    感謝感激です。

    おかげさまでようやく思い通りにトップに表紙としてアップできました。
    とてもうれしく思いました。

    私のブログは他の方のブログのように
    記事やカレンダーなどのメニューが表示されません。
    もう、疲労困憊で自分のイメージするデザインは無理かとがっかりしています。

    世界中を回った旅行写真がたくさんありますので
    数千枚アップしている詳細サイトはあるのですが
    こちらへは選んだものを大判でアップしたいと思っていたのです。

    これもその一枚ですが、お礼のつもりであっぷしました。

    もう少しトライしてそれでもだめならあきらめるつもりです。




    2012年02月13日 22:52 by

  • 記事の上にとにかく画像が入ればいいのであれば、テンプレート管理画面で(ブログ管理画面左側メニューの「環境設定」内「テンプ レートの設定」クリックで出てくる画面です)、適用中のテンプレートのHTMLの初めの方の下記部分に青字タグを挿入し

    <body>
    <div id="headerline">
    <div id="header">
    <h1><a href="<%url>"><%blog_ name></a></h1>
    <div class="introduction"><%introduction ></div>
    <img src="http://blog-imgs-48.fc2.com/j/a /p/japanyo/esuto1.jpg" border="0" />
    </div><!-- END OF header -->
    </div><!-- END OF headerline -->

    スタイルシートの初めの方の下記赤字打ち消し線部分を削除する


    /* ヘッダーエリア タイトル・サブタイトル
    *********************************************************** **********/

    #headerline{
    background:url(http://……/skincolor_top001.gif) repeat-x;
    height:120px;
    margin:0;
    padding:0;
    }


    #header{
    width:750px;
    height:120px;
    text-align:center;
    margin:0 auto;
    padding:0;
    }

    という方法が一番お手軽かと思うのですが、いかがでしょうか。

    2012年02月13日 17:13 by ucd

1 2 > >>