2008年07月08日

カテゴリタイトルのデザイン変更

記事タイトルのデザインに合わせて、カテゴリタイトルのデザインも変更してみました。

元の状態はこんな感じです。
カテゴリタイトルカスタマイズ前

変更後のイメージです。
ここでは、このサンプルイメージに合わせて記述しています。
カテゴリタイトルカスタマイズ後


1.スタイルシートの「#categorytitle」部分を変更します。
#categorytitle{
font-size:16px;
font-weight:bold;
margin-bottom:15px;
border-top:2px solid #FFBE33;
border-bottom:2px solid #FFBE33;
background:#FCECBF;
padding:8px 0 5px 8px;

}

赤字の部分を追加してください。
上の2行がラインを表しています。
「2px」はラインの太さを表しているので好きなように調整してください。
「#FFBE33」はラインの色を表しているので、こちらも好きなように調整してください。

3行目の「background」が背景色を表しています。
「#FCECBF」の部分は好きな色に調整可能です。

4行目の「padding」は文字とラインの余白の調整部分です。
最初の「8px」が上余白、その後順番に、右余白、下余白、左余白のサイズを表しています。
こちらも調整可能です。


2.保存して再構築を行います。

ちなみに、この部分を変更すると、月別アーカイブを表示したときの上部の年月表示にも同じデザインが適応されます。



この記事が参考になった方はランキングの応援お願いします!
人気ブログランキングへ
customize_blog at 12:48コメント(6)トラックバック(0)デザインカスタマイズ | Edit 
2008年07月06日

画像の回り込みを解除する

ライブドアブログでは、基本的に画像は左側に回りこむようになっているようです。
(全てのデザインかどうかは分かりませんが・・・。)

回り込みサンプル画像
こんな風になるわけです。
これはこれで便利な時もあるんですよね〜。
(ちなみに全く関係はありませんが、私はミニチュアダックスが大好きです




でも、このブログのように、回り込みにしたくない場合もあります。
その場合は以下のようにしてください。

記事を書くときに、イメージを挿入すると以下のようなソースが挿入されます。
<a href="http://livedoor.blogimg.jp/customize_blog/imgs/5/9/590f1d06.jpg" target="_blank"><img src="http://livedoor.blogimg.jp/customize_blog/imgs/5/9/590f1d06-s.jpg" width="160" height="213" border="0" alt="回り込みサンプル画像" hspace="5" class="pict" align="left" /></a>

この青字の部分を削除してください。

回り込みサンプル画像
すると、このように回り込まなくなります。



この記事が参考になった方はランキングの応援お願いします!
人気ブログランキングへ
customize_blog at 20:01コメント(5)トラックバック(0)デザインカスタマイズ | Edit 

カスタマイズ箇所の探し方

カスタマイズ箇所を探すとき、目で見ながら探すのは非常に大変です。

例えばこのブログでは、よく、「赤字部分を挿入してください」と書いていますが、「どこに挿入するんだよ〜」って時は、その赤字部分の前後の文字を探します。

探し方は、画面上で「Ctrl」ボタンを押しながら「F」ボタンを押します。
すると次のような画面が出てきます。
検索ボックス

この「検索する文字列」のところに探したい文字(サンプルでは「HTML」)を入れて、「次を検索する」ボタンを押していきます。

すると画面上で検索された文字列の色が変わりますので、探しやすくなります。



この記事が参考になった方はランキングの応援お願いします!
人気ブログランキングへ
customize_blog at 19:36コメント(2)トラックバック(0)カスタマイズの超基本知っておくと便利なこと | Edit 

定型文を毎回自動表示する

ランキングの応援クリックのお願いって、よく記事の下の方に書いてあったりしますが、あれを毎回書くのは面倒ですよね。

また、ランキングの応援だけではなく、何かアピールしたいことや、アフィリエイトの宣伝など、毎回記事に書きたいことなどを、自動で毎記事に表示するカスタマイズです。

カスタマイズ後のイメージです。
自動挿入カスタマイズ後
この文章が、毎記事、自動的に挿入されます。
この部分はもちろん画像などでもOKです。


1.HTMLを変更します。
トップページ・カテゴリアーカイブ・月別アーカイブのHTMLを変更します。
<div class="main"><$ArticleBody$><IfArticleBodyMore><a href="<$ArticlePermalink$>" class="continues">続きを読む</a></IfArticleBodyMore><br><br clear="all">この記事が参考になった方はランキングの応援お願いします!<br />
<a href="http://blog.with2.net/link.php?661443" title="人気ブログランキング" target="_blank">人気ブログランキングへ</a>
</div>
<$PortalLinks$>

赤字の部分を挿入します。
もちろん、この部分は自分が毎回表示したい文字や画像に置き換えてください。
同じ人気ブログランキングへのお願いの場合も、このリンク先の最後についている「661443」は人それぞれ違いますので、自分のリンク先を正しく記入してくださいね。
(このまま入れると私のランキング応援をしてしまいますよ(^^;))


2.個別記事のHTMLを変更する。
個別記事だけ少し違うので、以下のように変更してください。
<a name="more"></a>
<IfArticleBodyMore><div class="mainmore"><$ArticleBodyMore$><br><br clear="all"></div></IfArticleBodyMore>
<div class="main">
この記事が参考になった方はランキングの応援お願いします!<br />
<a href="http://blog.with2.net/link.php?661443" title="人気ブログランキング" target="_blank">人気ブログランキングへ</a></div>

<$PortalLinks$>

赤字の部分を追加してください。


3.保存して再構築してください。


この記事が参考になった方はランキングの応援お願いします!
人気ブログランキングへ
customize_blog at 18:14コメント(2)トラックバック(0)機能性カスタマイズ | Edit 

サイドメニューのデザイン変更2

サイドメニュー全体に色をつけてみます。

元の状態はこんな感じです。
サイドメニューカスタマイズ前1


変更後のイメージです。
サイドメニューカスタマイズ後2



1.スタイルシートの「.sidetitle」部分を変更します。

.sidetitle{
background:url(http://parts.blog.livedoor.jp/img/usr/standard_white_2c/side_bg.gif) repeat-x;
border-top:1px solid #FFA07A;
border-right:1px solid #FFA07A;
border-left:1px solid #FFA07A;
background:#FFE9D3;

padding:10px 15px 0;
line-height:100%;
text-align:left;
font-size:12px;
font-weight:bold;
}

青字の部分は削除してください。
現在のグレーのラインを表しています。

赤字の部分は追加してください。
borderの「1px」の部分はラインの太さを表しているので、好きな太さに調整してください。
borderの「#FFA07A」の部分は好きな色に調整してください。
backgroundの「#FFE9D3」もお好みに合わせて調整してください。

2.スタイルシートの「.side」部分を変更します。

.side{
border-bottom:1px solid #FFA07A;
border-right:1px solid #FFA07A;
border-left:1px solid #FFA07A;
background:#FFE9D3;

margin-bottom:25px;
padding:10px 15px 0;
text-align:center;
line-height:135%;
font-size:12px;
}

赤字の部分を追加してください。
ラインの太さや色などは、お好みに合わせて調整してください。

3.カレンダーを使用している場合は、「.calendarhead」と「.calbody」も同じように変更してください。

background:url(http://parts.blog.livedoor.jp/img/usr/standard_white_2c/side_bg.gif) repeat-x;
border-top:1px solid #FFA07A;
border-right:1px solid #FFA07A;
border-left:1px solid #FFA07A;
background:#FFE9D3;

padding:10px 15px 0;
line-height:100%;
text-align:center;
font-size:12px;
font-weight:bold;
}



.calbody{
border-bottom:1px solid #FFA07A;
border-right:1px solid #FFA07A;
border-left:1px solid #FFA07A;
background:#FFE9D3;
margin-bottom:25px;

padding:10px 0;
text-align:center;

}

青字の部分は削除してください。
赤字の部分は追加してください。
カレンダーの変更点にだけ、「margin-bottom」が追加されているので注意してください。
これがないと、下のプラグインとつながってしまいます。
「25px」の部分は調整してください。


4.保存して再構築を行います。


この記事が参考になった方はランキングの応援お願いします!
人気ブログランキングへ
customize_blog at 17:02コメント(0)トラックバック(0)デザインカスタマイズサイドメニューのデザイン変更 | Edit 
記事検索
このブログはリンクフリーです。
以下のテキストエリアの中のHTMLを貼り付けると簡単です♪
Archives
Recent Comments
訪問者数
  • 今日:
  • 昨日:
  • 累計:

TagCloud
QRコード
QRコード
  • ライブドアブログ