|
昨晩の遅くにＦＣ２ブログの、
タイトル部分（ヘッダー）に入れた、
画像の調整を行ないました。
ヘッダーの背景画像の入れ方は、
すでに記事にされている方も、
数名いらしたので、それを参考に、
数日前から入れていたのですが、
昨日友人に、Windows10だと、
画像と文字にズレがあると、
指摘されたので、その修正です。
ＯＳの差と言うよりは、ディスプレイの、
幅の違いが問題だった様です。
私はＸＰの横長になる前のヤツを、
使って調整したので、
今では普通の横長タイプで、
画像の幅が足りなかった様です。
で、この修正で気付いた事を、
いくつか書いておきます。
ヘッダーの背景画像の入れ方は、
ＨＴＭＬではなく、ＣＳＳと言う言語で、
スタイルシートと言われる物を、
修正する作業になります。
スタイルシートはその名の通り、
文字や画像を表示する、
場所やサイズを規定するもので、
背景の色や画像も含まれます。
Ｙａｈｏｏでは意識されませんが、
おそらく全てのブログで、
使用されている物です。
（もちろんホームページでも…。）
ＦＣ２の場合、テンプレート修正画面では、
上側がＨＴＭＬで下に在るのがＣＳＳです。
私の使っている”basic_white”の場合、
コメントが有るので直に見付かりましたが、
テンプレートによっては難しい場合も、
考えられます。
/* ============================================
Header
============================================ */
#header {
background: #FFFFFF url(https://blog-imgs-43.fc2.com/t/e/m/
templates/header_background.png) repeat-x bottom; /* ヘッダー背景 */
border-bottom: 1px solid #cfcfcf;
-webkit-box-shadow: 0px 1px 1px 0px #CCC;
-moz-box-shadow: 0px 1px 1px 0px #CCC;
box-shadow: 0px 1px 1px 0px #CCC;
}
この”ｕｒｌ（）”の内部のＵＲＬを変更すれば、
ダミーの背景を指定した画像と、
入れ替えられる訳ですが、
その後に有る”repeat-x”や”bottom”が、
配置の仕方になります。
”repeat-x”は不足する場合に、
Ｘ方向に繰り返しして表示する事を示し、
”bottom”が下辺（画像の一番下）を、
基準に表示すると言う意味ですね。
”bottom”の他に”top”や”center;”、
”right”と”left”も指定出来る様です。
タイトルの文字列の位置調整には、
Ｈ１の部分の修正が必要な様です。
#header h1 {
margin-bottom: 20px;
padding-left: 15px;
background: url(https://blog-imgs-43.fc2.com/t/e/m/
templates/blog_name.png) no-repeat left center;
/* ブログタイトル前のアイコン */
}
この中の”margin”や”padding”が、
位置をズラすのに使えます。
”margin-top:”や”margin-bottom:”に、
移動量を指定すれば、
上下に余白が作成されるので、
文字を動かす事が可能です。
おそらく”margin-right:”や、
”margin-left:”も可能だと思いますが、
試してはいません。
”padding-left:”は単純なズラしです。
これも試してはいませんが、
”padding-right:”位は可能だと思います。
ちなみに私はこう改造しました。
#header h1 {
margin-top: 24px;
margin-bottom: 12px;
padding-left: 48px;
}
特に問題は無いようです。
何かのお役に立ちますかね？
|
無題
転載元: 「無題」書庫の記事一覧
コメント（0）
コメント（0）
