マンゴスチンw風テンプレート

FC2BLOGシンプルテンプレート公開と更新と編集

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

テンプレート更新8

mango3_1aa_eb_new.JPG テンプレート名:mango3_1aa_eb

アスキーアート(AA)対応テンプレートの上部を改造しました。

テンプレートを再ダウンロードしていただく場合は「ダウンロード済み」となっているかと思います。
テンプレート管理→[ mango3_1aa_eb ] のテンプレート名変更で適当に変更→更新ボタンを押すと再ダウンロードが可能になります。

最上部に画像を設置できるように改造しました。
ブログのブログタイトルのところから紹介文のところにかけて画像を表示できるように設定を変更しました。
背景画像というよりも、画像の上にタイトルや紹介文を乗せる形にしました。
よって、小さめのトップ絵を並べたり、トップ絵を枠線で囲むなどといった編集も可能になります。
サンプル画像を差し込んでありますので、お好きな画像に変更してください。

デザインの都合上、中央にあったリンクボタンはブログ紹介文の下部へ移動させました。

必要に応じてHTMLとスタイルシートの両方を編集してください。



HTML編集 -------------------------

mango3_1aa_eb のHTML編集で、少しだけスクロールすると

<!--▼トップ画像はここへ▼-->

<img src="http://blog-imgs-45.fc2.com/m/a/n/mangosteen112/head_1.jpg" width="780" height="150" alt="" />

<!--▲トップ画像はここへ▲-->

と出てきますので、貼り付ける画像のものに書き換えます。

画像URL、横サイズ、縦サイズ、画像名を、各自で書き込んでください。

画像URLは、管理ページ→ツール→ファイルアップロードでアップロードした際に表示される赤字のURLです。
アップロード済ファイルの場合は、ファイル種類の小さい画像をクリックすると原寸表示されるので、画像上で右クリック→プロパティーでURLが表示されます。

横サイズと縦サイズは、width="780" height="200" という具合に、単位のピクセル(px)は要りません。
サイズの数字の比率を変えると拡大および縮小表示になります。
縦長の画像を何枚か横並びに貼り付ける場合は、貼り付ける画像用に編集した

<img src="画像URL" width="横サイズ" height="縦サイズ" alt="画像名" />

を連続して貼り付けてください。

画像名は、画像が表示されない場合などにテキストとして表示される内容です。
何も書かない場合は、alt="" としておきます。


スタイルシート編集 -------------------------

mango3_1aa_eb のスタイルシート編集で、下のほうに見えている部分から続きます。

/* ▼トップ画像とブログタイトル&紹介文の編集ここから▼ */

.head{ /* 画像貼り付け範囲 */
  position: relative;
  margin-top: 0px; /* 画像上部の余白 */
  padding: 0;
  text-align: center; /* 画像表示位置 */
}
.head img{
  border: #666 solid 1px; /* 画像枠ライン色・形状・太さ */
}
.head_1{ /* ブログタイトル位置 */
  position: absolute;
  margin: 0;
  padding: 5px 24px 0;
  top: 10%; /* 上からの文字表示位置によって要変更☆☆☆ */
  left: 1%; /* 左からの文字表示位置によって要変更☆☆☆ */
  width: 40%; /* 文字表示幅につき文字数によって要変更☆☆☆ */
  text-align: left; /* 文字表示位置 */
}
h1{
  font-size: 180%; /* ブログタイトル文字大きさ */
  line-height: 105%;
}
h1 a:link,h1 a:visited{
  color: #000; /* ブログタイトル文字色(訪問前・後)☆☆☆ */
  text-decoration: none; /* ブログタイトルリンク下線 */
}
h1 a:hover,h1 a:active{
  color: #900; /* ブログタイトル文字色(選択・実行中) */
}
.head_2{ /* ブログ紹介文位置 */
  position: absolute;
  margin: 0;
  padding: 0 24px 0;
  top: 80%; /* 上からの文字表示位置によって要変更☆☆☆ */
  left: 40%; /* 左からの文字表示位置によって要変更☆☆☆ */
  width: 53%; /* 文字表示幅につき文字数によって要変更☆☆☆ */
  text-align: right; /* 文字表示位置 */
}
h2{
  color: #000; /* ブログ紹介文文字色☆☆☆ */
  font-size: 100%; /* ブログ紹介文文字大きさ */
}
/* ▲トップ画像とブログタイトル&紹介文の編集ここまで▲ */

この中で重要なのは☆☆☆がついている「要変更」の部分と「ブログタイトル文字色」と「ブログ紹介文文字色」です。
貼り付ける画像の大きさや絵柄や色などによって、変更する必要がでてくるでしょう。
「要変更」の部分は、プレビューで確認しながら少しずつ数値を変更させてください。

「画像上部の余白」は現在は最上部に隙間なく設置するように「0px」になっているので、隙間を空けたい場合は数字を増やしてください。

「画像枠ライン色・形状・太さ」は現在は「グレー・実線・細い線」となっています。
枠線を表示させない場合は、太さの「1px」を「0px」にしてください。

「文字大きさ」もプレビューで確認しながら数字を変更してください。

管理人のみ閲覧できます 

このコメントは管理人のみ閲覧できます

Re: タイトルなし 

了解しました。
のちほど。

ありがとうございました 

素敵なテンプレートを、ありがとうございました。
写真が映えて、以前より満足しています。

とにかく、知識が無いのでマンゴスチンさんに迷惑おかけしますが
感謝しております。

これからも、よろしくお願いします。

Re: ありがとうございました 

おいやんさん、こんばんは。
ご丁寧にありがとうございます。

こちらも勉強になり感謝しています。
また素敵なお写真を見せてもらいに行きますね~。

コメント投稿

  • URL
  • コメント
  • パスワード
  • 管理者にだけ表示を許可する

トラックバックURL

http://mangosteen112.blog112.fc2.com/tb.php/29-ce2761f5
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。