2006年04月23日

Blogカスタマイズ67〜トップページの記事の上部に文章を設定〜

これは、トップページだけでなく、個別記事やカテゴリーなどにも応用できると思います。

★トップページの記事の上部に文章を設定

「カスタマイズ/管理」→「デザインの設定」→「カスタマイズ」→「トップページ」
太文字部分に文章を書き入れ、保存をし、「再構築(トップの記事)」をして、完了です。

<div class="blog">
<font size="2"><font color="#503900">ここに文章を書き入れます。<br>
改行する場合は、改行タグを入れましょう。</font></font>

<!-- Loop Start -->

※改行する場合は、改行タグの<br>を書き加えて下さい。

最初は文章だけを設定してみて、文字サイズ文字色の変更をしたい場合に、以下のタグを使ってもいいかと思います。
(上の例では取り入れてしまっています)

<font size="2">文章</font>
<font color="#503900">文章</font>

font size="2"…文字の大きさを設定することができます。
font color="#503900"…文字の色を設定することができます。

ちなみに、全部同じ文字サイズ、同じ文字色にする場合は、下記のタグでも設定できます。

文字サイズと文字色をまとめて指定する下記のような方法もありますが、文章の上下のスペースが狭くなってしまうので、
私は上記のタグを使っています。

<span style="color=#503900;font-size=12px">文章</span>

【追記】2006年4月26日
上記の設定より、もっと細かく設定する方法が分かりましたので、下記致します。
これはHTMLとCSSで設定する方法です。

●HTMLを設定

「カスタマイズ/管理」→「デザインの設定」→「カスタマイズ」→「トップページ」
太文字部分を書き加え、保存します。

<div id="blog">
<div class="blog2">ここに文章を書き入れます。<br>
改行する場合は、改行タグを入れましょう。<br>
</div>

<!-- Loop Start -->

●CSSを設定

「カスタマイズ/管理」→「デザインの設定」→「カスタマイズ」→「スタイルシート」
.blogbody{ や .blogbodytop{ などの上に、下記のタグを書き入れて保存し、
「再構築(トップの記事)」と「再構築(CSS)」をして完了です。

※CSSの細かな設定は好きなものを書き入れて下さい。

.blog2{
font-size:12px;
color:#ffffff;
border:1px solid #ffffff;
padding:5px;
}

font-size…文字の大きさを設定することができます。
color…文字の色を設定することができます。
border…枠線の太さ、種類、色を設定することができます。
padding…内側の余白を設定することができます。





 ■【堀江貴文・ホリエモンもオススメ!】 パソコン教室!397時間動画パソコン教室DVD4枚組!
   ホームページ作成、オフィス(ワード、エクセル、パワーポイント、アクセス)2003/2007、Photoshop、Illustrator、Dreamweaverなど
   29ジャンルが自宅で学べます!
 ■離婚大全集〜圧倒的有利に離婚する方法〜
   離婚経験者の専門家が、27冊の書籍やテレビでは語れない裏ワザがここに。
 ■運動なし!代謝を高めて無理なくやせるDLダイエットサポート 太らない身体が目標!
 ■【15秒筋トレ】自宅でお金をかけない肉体改造! 目標はゴリマッチョ?細マッチョ?
 ■1,353人のメガネ使用者がわずか3日で視力が1.0に!!見える!驚異の視力回復法 自宅で簡単に視力アップ!
 ■【ホリエモンブログ】で紹介されました!【せどり】でリッチ☆に!最強せどりツール【せどリッチforCD】
 ■ダウンロード販売と人と人をつなぐコミュニティ・コマースのインフォカート
 ■引っ越しを考えている方必見!すごいっ!
  ・全国賃貸情報【アパマンショップ】

  ・引越し一括見積もりサイトの決定版!【引越大手比較.com】

 ■ロリポップサーバーのドメインが65種類 → 85種類に!!初心者でも安心なサービスがあります♪

 ■ ダイエット商品人気ランキング
  この夏はみんなのオススメダイエットにチャレンジ!
 ■ラブコスメティックすごいっ!
  人に言えない身体の悩みをすっきり解決しましょう♪

よろしければ人気blogランキングにご協力を!

この記事へのトラックバックURL

  迷惑トラックバック対策のため、トラックバックはこちらでチェックした後、アップさせて頂いておりますので、ご了承下さい。

この記事へのコメント
リクエストにお答え頂き感謝です!!
上手く出来ました^^

質問なんですが・・・
このスペースは記事のように
枠の囲みは出来ないですか??
ココだけバックカラーもなく、枠もなくで・・・

って、出来もしないのに質問ばかりでスミマセン^^;;

でも出来たのでとても嬉しいです♪
明日にでも記事にさせて頂きます^^

ありがとうございました。
Posted by 大家族ママ ruru♪ at 2006年04月24日 23:00
> 大家族ママruruさん

設定できたようで、良かったです♪
枠線が入れられるかどうか、また後で試してみますね。
できたら、追記として記事の一番下に書いておきます。
Posted by モダチョキ at 2006年04月25日 02:00
いつもありがとうございます!!
迷惑ばかりかけて・・・^^;;

今日は記事に紹介させて頂きました^^
Posted by 大家族ママ ruru♪ at 2006年04月25日 10:52
> 大家族ママruruさん

枠線をつける方法が分かりましたよ。
後で、追記としてアップしておきますね。
Posted by モダチョキ at 2006年04月26日 01:52
ありがとうございます^^
今日も無事に出来ました・・・
色々なページにも付けたいと思いましたが、内容を変える度に変更は
面倒なので、とりあえず、トップと個別にいれました。
一つ、質問なんですが、サイドバーより高さが飛び出てしまうんですけど・・
引っ込め方教えて下さい^^;;

別の疑問なんですけど、記事の投稿のカテゴリーなんですけど
一度設定すると、削除できないんですか??
カテゴリーの内容を変えようと思ったら削除出来ないんです><
何か方法ありますか??

毎度毎度スミマセン。
Posted by 大家族ママ ruru♪ at 2006年04月26日 13:03
わ〜っ!
恥ずかしい。カテゴリーは分かりました。
スミマセン・・・見つけました!!
Posted by 大家族ママ ruru♪ at 2006年04月26日 23:21
> 大家族ママruruさん

サイドバーの高さに合わせるには、marginを設定してみてはいかがでしょうか。

margin-top:10px;

こんな感じで。
Posted by モダチョキ at 2006年04月27日 02:44
何から何までありがとうございました!!
お陰様で完璧に出来ました^^
いつもいつも、手を煩わせてスミマセン・・・
感謝してます。
ありがとうございました☆
Posted by 大家族ママ ruru♪ at 2006年04月27日 22:20
> 大家族ママruruさん

いえいえ、無事に設定できて良かったです♪
Posted by モダチョキ at 2006年04月28日 00:16
こんばんは。
今日はメニューバー等、色々いじってました。
バーの色はまた変更しようと思ってるんですが・・・
私はIEだけなんですけど・・・
他から見て崩れてないか見て頂きたくてお願いに来ました〜
お暇な時に見て下さい^^;;
お願い致します。
Posted by 大家族ママ ruru♪ at 2006年04月30日 23:20
> 大家族ママruruさん

ネスケ7.1では、メニューが左寄りで、各リンクの内側の枠線は表示されていませんね。
後は、トップページの上段のリンクバナーなどの背景色と枠線が設定されていません。
どちらもそれほど気にならない程度だと思いますが。
Posted by モダチョキ at 2006年05月01日 03:03
本当にいつもありがとうございます!
感謝してます。
モダチョキさんが気にならないというならOKにします^^

いよいよGWですね!!
楽しいGWを過ごして下さい☆
Posted by 大家族ママ ruru♪ at 2006年05月01日 21:41
> 大家族ママruruさん

いえいえ、とんでもないです。(笑)
大家族ママruruさんも良いGWを!
Posted by モダチョキ at 2006年05月02日 02:00
すっかりお世話になってしまっています!
(≧≦U) ゴメンヨー 

お知らせの場所を作りたかったので
さっそくワク♪o(^o^o)(o^o^)oワク♪と
やってみました!
うまくいきました!ありがとうございます♪

ところでこのスペースなのですが
もう少し帯のように細くはできませんでしょうか?

またお時間のあるときにでもご指導頂ければと思います。
。U・ω・)。_ _U.+゚:・*☆よろしくぉ原頁ぃ致します☆*・:゚+.(_ _。(・ω・。
Posted by ちびっこギャングの相棒 at 2006年08月06日 01:18
> ちびっこギャングの相棒さん

HTMLとCSSを設定する方法でカスタマイズされているようなので、
CSS内の、padding の数値を変更してみて下さい。

padding:5px;
  ↓
padding:2px 5px 2px 5px;

(左から、上右下左の余白になります)
Posted by モダチョキ at 2006年08月07日 06:32
モダチョキさん
教えてくれて本当に<(_ _*U>アリガトウゴザイマス♪
さっそくやってみました!
細くなりました〜♪♪
モダチョキさんは本当にスゴイなぁ♪oU^O^Uo~
Posted by ちびっこギャングの相棒 at 2006年08月07日 20:37
> ちびっこギャングの相棒さん

設定できて良かったですね♪
私もブログを始めるまでは、CSSやHTMLはちんぷんかんぷんだったんですよ。
とにかくいじれば分かるようになるので、
ひたすら、いじりまくることですね。(笑)
Posted by モダチョキ at 2006年08月08日 01:12
モダチョキさん お暇なときでいいので
教えていただきたいのですが
日記本文の上に年月日があるでしょう?
その横にある画像を自分の好きなものに変えたいの!
変えたい画像を自分のブログにアップロードまで
したんですが、結局CSSのどこをさわったらいいのかが
わ〜か〜らないの〜〜〜゛ Uノ><)ノ

良かったら教えてくださいnU_ _Unぺこ
Posted by ちびっこギャングの相棒 at 2006年09月07日 23:54
> ちびっこギャングの相棒さん

日付の画像は、以下のCSSの (http:// ) の中のアドレスを、画像のアドレスと変更するだけです。

.date{
background:url(http://parts.blog.livedoor.jp/img/usr/liquid_pearl/center_icon.gif) no-repeat 0% 50%;

CSSの意味ですが、以下のページに書いてありますので、
参考にしていただければ幸いです。
ちょっと古いので、最近のテンプレにだけあるものなんかは書いてないのですが、
基本的な部分はこれで分かるかと思います。
http://blog.livedoor.jp/modacyoki/archives/8732078.html
Posted by モダチョキ at 2006年09月08日 00:55
上手くいきました!!うれし〜♪

モダチョキさんの中にこんないいものがあったなんてヽ(^○^Uノ
教えてくれてありがとう!!
これでずいぶん分かりやすくなりました♪
カスタマイズしたくて色んなところを見せてもらったけど
モダチョキさんほど分かりやすいところはありません!
感謝感謝です<(_ _*U>♪
Posted by ちびっこギャングの相棒 at 2006年09月10日 23:27
> ちびっこギャングの相棒さん

成功して良かったです♪
自分が忘れないためにも、細かく書いておこうと始めたカスタマイズ記なんですよ。
livedoor Blogがリニューアルされてからは、
多少の不足部分やカスタマイズが不可能になってしまったものもありますが、
他のサイトの方がチャレンジされているものもあるので、
私としてもかなり参考にさせて頂いてます。(^ー^)


Posted by モダチョキ at 2006年09月11日 00:40
モダチョキさんいつもいつもスミマセンU〃・ェ・;A アセアセ
実はひとつ教えていただきたいのですが・・
ブログタイトルとその下の説明文の間が開きすぎていて
それをすこしつめたいと何度もチェレンジしたのですができまえんU−−。。

.blogtitle{
font-size:37px;
padding:50px 18px 50px;
}
.description{
font-size:13px;
font-weight:bold;
color:#8b4513;
padding-left:10px;

こうなってますが 下のpadding-left:10px;というのをいじっても
左にずれるだけで上手く上にあがってくれません
どうしたらいいのでしょうか?良かったらまた暇なときにでも
教えていただけませんでしょうか?
ほんといつもU*_ _)人ゴメンナサイ
Posted by ちびっこギャングの相棒 at 2006年11月07日 00:23
> ちびっこギャングの相棒さん

padding(marginも同じ)の仕組みは、4通りあるんですよ。

padding:1px; ←上下左右それぞれに1px
padding:1px 2px;  ←上下=1px、左右=2px
padding:1px 2px 3px; ←上=1px、左右=2px、下=3px
padding:1px 2px 3px 4px; ←上=1px、右=2px、下=3px、左=4px

ちなみに、上下左右どれか一つだけを設定する場合は、以下のようになります。

padding-top:1px; ←上
padding-right:1px; ←右
padding-bottom:1px; ←下
padding-left:1px; ←左

今回の場合は、.blogtitle{ 内の
padding:50px 18px 50px; の一番右側の50pxの数値を小さくしてみて下さい。
タイトルの下側の余白が少なくなると思います。


Posted by モダチョキ at 2006年11月07日 02:41
バタバタしちゃって スゴク遅くなってしまってスミマセン(( . .*Uペコッ
すごく丁寧に教えてくださってありがとう!!
さっそくやってみます♪
Posted by ちびっこギャングの相棒 at 2006年11月19日 23:54
初めまして!くまと言います♪
大家族ママさんのところから来ました。
カスタマイズのことで色々勉強、ご指導いただけたらと思います。(^_^)
宜しくお願いします!

応援ポチ☆
Posted by くまちゃん@くまちゃんのお小遣い作戦! at 2006年11月21日 00:44
> ちびっこギャングの相棒さん

無事に出来ることを祈っています♪


> くまちゃん@くまちゃんのお小遣い作戦!さん

はじめまして!
カスタマイズ、頑張って下さいね♪
Posted by モダチョキ at 2006年11月22日 20:42
(Cookieに投稿者情報を記憶します)
 
コメントをプレビューする
ご利用のブラウザの設定ではご利用になれません。