引用部分を飾ろう！

テンプレ製作が行き詰ってるUraraでございます；；
なので、どーでもいいようなカスタマイズをエントリーしちゃったりして・・(T_T)ｱﾊﾊ

引用部分に枠(ライン)を付けるだけでは、味気ない方に。
背景に画像を付けてみてはどうですか？

blockquote {
margin:2px 5px; */引用部分の外側の空白/*
padding:3px; */引用部分の内側の空白/*
overflow:auto; */横に長い分を自動的に折り返す/*
color:#333; */文字の色/*
font-size:10px; */文字サイズ/*
line-height:20px; */文字の行間/*
background:
url('http://blog.cnobi.jp/v1/blog/user/b21aa2883785b34cc888eebc1f7d988d/1151238944') #FFFFFF; */背景の色・画像/*
border-width : 1px 1px 1px 15px; */ラインの太さ/*
border-style : solid; */ラインの種類/*
border-color : #660033; */ラインの色/*
}

blockquote {
margin:2px 5px; */引用部分の外側の空白/*
padding:3px 3px 3px 35px; */引用部分の内側の空白/*
overflow:auto; */横に長い分を自動的に折り返す/*
color:#333; */文字の色/*
font-size:10px; */文字サイズ/*
line-height:140%; */文字の行間/*
background:
url('http://blog.cnobi.jp/v1/blog/user/b21aa2883785b34cc888eebc1f7d988d/1153455424') repeat-y #FFFFFF; */背景の色・画像/*
border-width : 1px 1px 1px 0px; */ラインの太さ/*
border-style : solid; */ラインの種類/*
border-color : #EEEEEE; */ラインの色/*
}

blockquote {
margin:2px 5px; */引用部分の外側の空白/*
padding:10px 3px 5px 5px; */引用部分の内側の空白/*
overflow:auto; */横に長い分を自動的に折り返す/*
color:#333; */文字の色/*
font-size:10px; */文字サイズ/*
line-height:140%; */文字の行間/*
background:
url('http://blog.cnobi.jp/v1/blog/user/b21aa2883785b34cc888eebc1f7d988d/1151491678') repeat-x #FFFFFF; */背景の色・画像/*
border-width : 1px; */ラインの太さ/*
border-style : solid; */ラインの種類/*
border-color : #CCCCCC; */ラインの色/*
}

こんな風に画像を使って個性的な引用部分を作ってみましょう♪
他にも、右下や左下に画像を固定してみてもイイかもですね＾＾

... Close

ラインの付け方 || 一口メモ

カスタマズと言うよりも小技？

エントリータイトルやブロック周りなどのラインを付けるのにちょっとした、手間を省こう！と言う記事です(笑)

例えば、実線で1pxの黒を付けたい場合。
border:solid 1px #000000; とこんな感じでやってますよね？
では、左右は点線の1px青・上下は実線の2pxの黒と付けたい場合は？
(こんなラインを付ける人はいないと思いますが・・例として)

border-top:solid 2px #000000;
border-bottom:solid 2px #000000;
border-right:dotted 1px #0000FF;
border-left:dotted 1px #0000FF;

↑こんな風にやってますよね？

それを、ひとまとめ？にした方法。

border-width : 2px 1px 2px 1px;
border-style : solid dotted solid dotted;
border-color : #000000 #000000 #000000 #000000;

上・右・下・左の順番となってます。
border-width ←ラインの太さ
border-style ←ラインの種類
border-color ←ラインの色

エントリータイトル

border-width : 0px 0px 1px 7px;
border-style : solid;
border-color : #990000;

エントリータイトル

border-width : 1px;
border-style : solid;
border-color : #FFFFFF #555555 #555555 #FFFFFF;
background:#C1BFBF;
(ちょっと影があるように見える風)

エントリータイトル

border-width : 0px 20px 1px 0px;
border-style : none solid dashed none;
border-color : #660033;
background:#EEEEEE;

こんな感じで色々と組み合わせれば個性的なラインも作れちゃいます＾＾
色々と楽しんでみて下さいネ♪

... Close

トップタイトルを画像に。

わざわざ、記事にする必要性はあるのか悩んでしまいましたが・・一応。

ブログのタイトルを画像に変えてみました。
前々から画像にしようと思っていたんですが、いつも他の事に気を取られ忘れていました。
オシャレなフォントを使うと、それだけでブログの見栄えが違いますよね＾＾

方法はとっても簡単でございます。

画像制作ソフトなどで、タイトル画像を用意します。
画像をアップロードします。
HTMLを編集します。
本来のHTMLタグ

<div id="TopTitle">
<a href="<!--$g_url-->"><span class="TopTitleFont"><!--$g_title--></span></a>
</div>

変更後のHTMLタグ

<div id="TopTitle">
<a href="<!--$g_url-->"><img src="画像のアドレス" border="0" alt="(ブログのタイトル)"></a>
</div>

赤文字部分を削除し追加したタグになります。

これで、タイトルを画像に出来ました！
ねっ！簡単でしょ？記事にするほどの事じゃなかったかしら・・(＞▽＜;;

*注意*
万が一、訪問者の方が「画像非表示」にしているといけないので、alt属性はタイトルにしておく事をオススメします。

お勧めフリーフォントサイト様
・=FUKUTAYO=様　当ブログのタイトルフォントに使わせて頂いてます。
・04様　カッコイイフォントがあります。
・マニアッカーズ デザイン様　可愛い系など多数のフォントがあります。
・アバウトフォント様　種類別に分類してあり見やすいです。

他にも、ステキなフリーフォントが多数あります。
お気に入りのフォントでブログを飾りましょう♪

... Close

フッターテンプレートの使用例

果報は寝て待て(-_☆)さんの記事で
「フッターテンプレートを使ってみる②」
を見て、私もそろそろフッターテンプレート触ってみようかなぁーと思った訳です。
ここでの、アマゾンなどのアフェリエイトはあまり使う事がないからなぁーと後回し状態でした(笑)

だけど「ただ、アフィリエイトリンクの為でなくても使い道ができた時知っておくと便利だなぁ」と言うPavさんの言葉でピンッときたんです(笑)
（Pavさんありがとう♪）

そうなのよ！そうなのよ！毎回、貼り付けたい事でもいいんじゃない！
なんで、こんな事に今まで気が付かなかったのさぁー！

って事で、私はトラックバックピープルのバナーやリンクを貼ってみました。
ちなみに、このトラックバックピープルは私が作ったので、利用して頂けると嬉しいデス♪
他にも、ブログランキングのバナーでも良いかと。

ただ、追記リンク経由ってのがイマイチですな・・・汗

... Close

コメントレスのリンク

コメント表示部分からのレスはやっぱり便利♪
って事で、取り付け！

管理ページでのコメントレスをする時のように、小窓開きにしてみました。

<a href="javascript:void(0);" onclick="window.open('/hoge/EditCommentResForm//','chip',
'width=650,height=550,resizable=no,menubar=no,
status=no,location=no,scrollbars=yes,toolbar=no,');">RES</a>

これでＯＫです。
あまり、需要性はありませんけどね・・・(笑)

＊このタグは、HP作成支援サイトのCHIPSさんでお借りしました。