タイトルと記事の画像を中央に表示させたい
ブログのトップに画像を入れられるように編集したいのですができません。
その前に画像をアップしたら偏ってしまってます。
つまり、下記のようにテンプレートを編集したいのです。
・画像を表紙のようにブログのトップに置きたい。
・画像を真中に表示させる。
メカおんちですがデザインには生意気にも凝ってしまいます。
どうぞよろしくお願いいたします。
もう、二日間もボロボロ・・・
pikaさま
標野さま
akiさま
こんにちは
ご丁寧なご指導をありがとうございます。
トライしましたが
すでにテンプレートがかなりぐちゃぐちゃになっていますので
リセットしてからもう一度
これまでいただいたご指導内容を基に組み立てなおしたいと思います。
それを機に、海外旅行写真はビルダーを使って
FC2ホームページを利用させていただき
ブログは猫ちゃん写真と文章にしたほうが
使いやすいのではないかと考えています。
一応トライしてみます。
今後もよろしくご指導をお願いいたします。
ブログ全体の幅を広げ、背景画像のサイズを変更しましょう。
(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;
}
.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;
}
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;
}
またフッター部分がずれていたり、記事が表示される位置が
おかしいなど、ちょーっと元から崩れてきているようです;
カレンダーやプロフィールを表示するメニュー欄は欲しいのか
どうかも合わせて検討されると良いかと思います。
ちなみにプラグインの項目がメニューに当たります。
色々追加して試してみてください♪
猫可愛いですね!ブログも楽しみにしていますので頑張ってください!
akiさま
こんにちは
コメントをありがとうございます。
テンプレート名は「popline_cream1 」です。
HTMLをお勉強しなければいけないのですが
マニュアルを読むと「めまい」がします。
すぐに挫折します。
そのくせデザインには執着しているのですから
身の程知らずですね。
HPの作成はビルダーの助けを借りて最低機能だけを使って
なんとかしのいでいますが
ブログはサーバーアップでできないので苦慮しています。
にゃんこはお好きですか?
お友達のノラちゃんです。
回答になっておらず心苦しいのですが、
宜しければテンプレート名を教えていただけませんか?
自分の勉強にもなりそうなので興味があります!
標野さま
こんにちは
詳細なご指導をありがとうございます。
画像のセンタリングは記事編集画面で下記に設定しましたが無効でした。
<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引き続きどうぞよろしくお願いいたします。
メニューカラムに
カレンダーや新着記事一覧などを表示するには
プラグインを追加する必要があります。
管理画面の左下のメニュー内にある「プラグインの設定」リンクから
ジャンプした先でご希望のプラグインを追加してください。
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さま
こんばんは
ご指導ありがとうございます。
感謝感激です。
おかげさまでようやく思い通りにトップに表紙としてアップできました。
とてもうれしく思いました。
私のブログは他の方のブログのように
記事やカレンダーなどのメニューが表示されません。
もう、疲労困憊で自分のイメージするデザインは無理かとがっかりしています。
世界中を回った旅行写真がたくさんありますので
数千枚アップしている詳細サイトはあるのですが
こちらへは選んだものを大判でアップしたいと思っていたのです。
これもその一枚ですが、お礼のつもりであっぷしました。
もう少しトライしてそれでもだめならあきらめるつもりです。
記事の上にとにかく画像が入ればいいのであれば、テンプレート管理画面で(ブログ管理画面左側メニューの「環境設定」内「テンプ レートの設定」クリックで出てくる画面です)、適用中のテンプレートの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
Copyright(c)1999 FC2, Inc. All Rights Reserved.
@fc2infoさんをフォロー