画像を中央揃えにする / カスタマイズ

ブログが作りたい!FC2ブログのカスタマイズ > 画像を中央揃えにする / カスタマイズ

画像を中央揃えにする / カスタマイズ

画像を中央揃えにする / カスタマイズ

カスタマイズ(9)

画像を中央揃え(センタリング)にする方法について書きます。

「何か最近いいことないなぁ・・・。」という人も、画像を中央に揃えて気分転換しましょう。お話は、次の順番で進みます。

小粋空間さんの「CSS でブログ本文の画像だけをセンタリングする」を参考にさせていただきました。ありがとうございました。

▲ページの先頭に戻る

画像を中央揃えにする

1:テンプレート「alice」

(01)

今回は、テンプレート「alice」を使います。共有テンプレート追加からダウンロードして、適用してください。

テンプレート「alice」

▲ページの先頭に戻る

2:中央揃えにする

(02)

テンプレートによりますが、アップした画像をブログで表示してみると、左揃えになっていることが多いように思います。

記事内左揃えの画像

もちろん左揃えでも構いませんが、人それぞれの好みで、中央揃えにしたいこともあるのではないかしら。

サイド左揃えの画像

(03)

画像を中央揃えにする場合は、次のようなコードを書きます。

簡単にご説明いたします。

display: block;

インラインのものをブロックに変更します。

margin-left: auto;
margin-right: auto;

画像を中央揃えします。

text-align: center;

画像を中央揃えします。(IEのバグ用)

marginのautoによる中央揃えは、ブロック要素に対してのものなので、「display: block;」によって、img(インライン要素)をブロック要素に変更しています。

(04)

CSSをあてると、画像が中央揃えになるはずです。しかし、拍手の画像まで中央揃えになっているのは、いかがなものでしょう。

記事内画像が中央揃え

また、サイドの画像も中央揃えになっています。これはこれでいいかな。

サイド画像が中央揃え

▲ページの先頭に戻る

3:拍手は右揃えにする

(05)

拍手の画像は、右揃えにしておこうと思います。

さて、拍手の画像回りのHTMLコードを見てみることにしましょう。ブラウザのソースをチェックしてみてください。

拍手の箇所は、「fc2_footer」付きの<div>タグで囲まれているので、これを利用しようと思います。

探す方法は、記事「カスタマイズの基礎テクニック」でお話した通りです。ブラウザでソースを表示して、探してみてください。

(06)

次のCSSコードを追加します。左は「auto」で、右は「0(ゼロ)」にしています。

左揃えにしたい場合は、逆にしてあげれば宜しいかと思います。

(07)

ブラウザで確認してみます。いかがでしょうか?右揃えになったかしら?

拍手は右揃え

IE6のようなバグの多いブラウザでも、チェックするようにしてくださいね。

▲ページの先頭に戻る

次回予告

次回は、二段組みレイアウトを、三段組みに変更する手順について書く予定です。

▲ページの先頭に戻る

関連記事

カスタマイズに関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2008/06/04 更新日:2008/06/04

« 「背景の画像を変更する」|「二段組レイアウトを三段組にする」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

はじめまして。初心者です;

こちらのサイトで色々と勉強させて頂いております!

試行錯誤してもどうしても出来ないカスタマイズがあります。
教えて頂きたいのですが・・・

『サイト(全体)のセンタリング』をしたいです。

FC2のカスタマイズ方法も見て色々と試してみたのですが無理でした。

※左よりのテンプレートを中央揃えにカスタマイズしたいのですが、どうしても出来ませ。
(左よりのテンプレって多いですね;)
http://happy8style.blog137.fc2.com/

OS:Windows Vista





絶対配置でセンタリング

ユキさん、こんにちは!( ・∀・)ノへろー
コメントありがとうございます。

テンプレートを拝見いたしました。
ただ、なかなかこれはご期待に応えられそうにありません。

と言うのも、ユキさんがお使いになっているテンプレートは、
レイアウトを「position: absolute;」で行っています。

いわゆるひとつの絶対配置というやつです。

このabsoluteの指定のところのleftの値をいじってあげれば、
センタリングらしきことはできますが、なかなか手間です。

それと、右側に影がついていますよね。

これ、bodyに対してbackgroundで指定してしまっているので、
この辺もお直しする必要があります。そこそこ手間です。


また、absoluteは、
ブラウザによって表示ズレが起こりやすい傾向があります。

へたにいじり出すと、信じがたい時間を浪費する可能性があります。

どうしても、「このテンプレートで!」ということでしたら、
作者の東雲(しののめ)さんに問い合わせた方がよさそうです。

作者ですから、このテンプレートを熟知しているはずです。

「センタリングしてくれへん?」とお話すれば、
案外ちゃちゃーっと変更してくれるかもしれません。

お力になれず、残念です。(´・(ェ)・`)もめんね

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

とても納得のいくお返事ありがとうございます。
なるほど~!センタリング難しいデザインってあるのですね!これで、気持ちがスッキリいたしました。
逆に簡単にセンタリング出来るのに、諦めて行わないという事だったらとても悔しく思うので、納得できるお答が頂けて良かったです。
分かりました!
このデザインを取りあえず諦めますね!
1つ勉強になりました。
ほんと感謝いたします。これからブログ作成頑張ります(^^)/~~~

ブログ作り

ユキさん、こんにちは!( ・∀・)ノHappy Sunday
コメントありがとうございます。

そうですかー。
すっきりはできたようで、良かったです。

ブログ作り、がんばってねーん。ヾ(*´∀`*)ノ

承認待ちコメント

このコメントは管理者の承認待ちです

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/349-1b9f84ff
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて