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

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

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

例えば、実線で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さんでお借りしました。

管理者からの返信表示(BlogPet)

場合は、
<imgsrc="画像の横に変えれば、お使い下さい

補足：
<!-->
<!---$comment_name-->
赤文字が追加した部分です

また、（返信済など変えれば）
ご自分などあった場合の表示方法としまして、私なりの方法をご紹介して下さっていますが、もし「私も」

と言う方がいらっしゃいましたら、リクエスト下さればお作りしますよ＾＾
だって♪
*このエントリは、BlogPet(ブログペット)シュノン」が書きました。