ブログパーツ

趣味の工房

☆画像や文字位置を調整する方法☆

みなさん、こんばんは♪
メールフォームより、ネタ頂きました(笑)

タイトルにあるとおり、画像や文字の位置を調整する方法です。
…まぁちょっとググればすぐに山のように出てくるネタではありますけども( ̄∇ ̄;)

なかなか「知りたい情報を上手く検索できない!!」って方も多いようですね。
って、ボクも決して上手ではないと思いますが、何とか知りたい情報にはたどり着けることは多いです。



で、タイトルの件ですが…例えば

こうぼう
~趣味の工房~



のように文字や画像をセンタリング(中央寄せ)する方法。
一番簡単なのは、センタリングしたい文字や画像を<center>~</center>で挟む方法です。

※FC2ブログでは、高機能エディタ(記事記入欄の右上の「W」ボタン)を起動すれば、
 センタリング、右寄せもボタンひとつでできます。



じゃ、右寄せは<right>~</right>か!?と思われるかもしれませんが、そうじゃないんですね。
右寄せにも、中央寄せにも対応させる場合は…

<p style="text-align: center;">  </p>



を使っています。(コピペOK)
赤文字の部分を「center」にすれば中央揃え、「right」にすれば右寄せにすることができます。

ボクは以前記事にしたIMEの辞書登録をし、「せんたー」で変換すればこの<p style="text-align:center;">に変換できるようにしています♪



では上下位置も調整してみましょう。
例えば先日の「☆画像リンクを貼る方法☆」のように、リンク先のロゴなどを使用して「リンク先はコチラ」などの記事を書くと…


Cooler Masterホームページはコチラ→cooler-master -small


なんかちょっとバランスが悪く、カッコ悪いですね(; ̄ー ̄A
これは文字と画像が上下位置で言う「下揃え」になってしまっているからです。
これを解消するには先日の「☆画像リンクを貼る方法☆」で説明した画像の表示部分…

<img src="画像のURL" alt="画像の名前" border="境界線の設定(ピクセル値)" width="画像幅(ピクセル値)" height="画像高さ(ピクセル値)" />


に、以下の記述を加えればOKです。

align="middle"


※上揃えは"top"、中央揃えが"middle"。下揃えは記入必要なし。


すると…


Cooler Masterホームページはコチラ→cooler-master -small


バランスがよくなりましたね♪
一応記述部分を晒しておくと…

Cooler Masterホームページはコチラ→<a href="http://www.coolermaster.co.jp/index.php?language=jp" target="_blank"><img src="http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/20100906211651c5bs.jpg" alt="cooler-master -small" border="0" width="119" height="94" align="middle"/></a>



こんな感じです。挿入する場所はココじゃないといけないわけじゃありませんが、間に入れようとするとワケがわからなくなるので。(笑)



ちょっとしたことですが、少し手間をかけてやることで、バランスが整い、見やすくすることができます。
是非活用してみてください♪




では。ヽ(* ̄∀ ̄)**




ランキングに参加しております。クリックにご協力を♪


にほんブログ村 PC家電ブログ 自作PCへ
にほんブログ村


関連記事


    19:25 | Trackback : 0 | Comment : 2 | Top
Comment
2010.09.10 Fri 00:29  |  黒ゴマぷりん #-
こんばんわ、りんくちゅ。パパさんのブログは以前から拝見させていただいてましたがコメントは今回が初になります。
 自分はブログ初心者なのでこういった記事はとても参考になります。 ありがとうございました。
  [URL] [Edit]
2010.09.10 Fri 06:39  |  りくんちゅ。パパ #-
>黒ゴマぷりんさん


おはようございます。
他の方のコメ欄にて、お名前は存じ上げていましたよ♪
お役に立てたのなら幸いです。( ̄∇ ̄)

  [URL] [Edit]









(編集・削除用)


管理者にだけ表示を許可
Trackback
http://rikuntyudady.blog101.fc2.com/tb.php/300-483c960a
プロフィール

りくんちゅ。パパ

Author:りくんちゅ。パパ
初歩的な話からオーバークロックまで、PCに関することやその他趣味に関することを思い付きで書いています。
コメントはお気軽にどぞ。

「rikuntyudady」の名前で出没することもあります(笑)

rikuntyudady01.jpg

このサイトはFirefox,Google Chrome用に最適化されています。
IEでは一部表示が正しく行われない場合があります。
ご了承ください。


アクセスカウンター
signbot_20101017072856.gif
現在の閲覧者数:

galleryロゴ02
cmcrogo2.png
RikuntyudadyのCM690をUP!!
☆ただ今34台展示中☆



みんなのPC♪ギャラリーはコチラ。

Page 1 Page 2


Categories...

クリックで全て開閉↓

openclose


○自作をしてみたい方へ
○オーバークロックについて

「+」はフォルダクリックでOPEN

全ての記事を表示する


見つからない場合はコチラ
(記事内検索)

最新記事
最新コメント
☆MY GEAR☆
カスタマイズ工程はコチラ
画像
画像
画像
画像
画像
画像
画像
ATCS840
COSMOS II
CORE1500
MasterCase5Mod

<製作依頼PC>
画像
Overclock.net work log
MNPCTECH"Case Mod Blog"
画像
画像
【CORSAIR Vengeance® C70】
HAF X MOD

<コラボ企画> 画像
SNIPER
☆おもな活動サイト☆

Cooler Master Forum
CoolerMaster

techPoweUp! Case Mod Gallary-
techPowerUp!

Overclock.net
   -Case Mod Work Logs-
Overclock.net

Case Modding Forum
Case Modding Forum

こだわりの持ち物を登録しよう♪
2010y05m05d_221238218.jpg

Web page translation
THIS IS MY GEAR
2016y03m23d_233159886.png 2016y03m23d_233204419.png
感染者増殖中...
りくんちゅ。パパにメールする







本文:

☆掲示板☆

趣味の工房 ~みんなの休憩室♪~
お気に入りブログ♪
カメラ熱上昇中♪
【Canon】EOS 70D 70D.png ○レンズ
【Canon】
EF-S18-135mm F3.5-5.6 IS STM
EF-S55-250mm F4-5.6 IS STM 【SIGMA】
18-35mm F1.8 DC HSM|Art
APO 50-150mm F2.8 EX DC OS HSM


【Canon】G7 X canon_g7x_20150528010550367.png
☆広告☆
ブロとも申請フォーム
QRコード
QRコード
RSSリンクの表示