「ほっ」と。キャンペーン
 

カテゴリ:│├投稿欄( 18 )

 

投稿欄などのフレームを丸く表示する方法

はじめに

 私のサイトは投稿欄などのフレームを丸くしています。このフレームは、バックグランドイメージを利用して実現しています。丸いフレームを表示する方法として、エキサイトを例題に説明したいと思います。なお、エキサイトの例題ですが、他のサイトでも利用できますので、いろいろ試して下さいね。

a0031863_1447147.gif


難易度:★★
はじめての方には、ちょっと難しいかもしれないです。できたときには、すごく嬉しいですよ。頑張って下さいね^^


投稿欄などのフレームを丸く表示する方法の詳細>>
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2006-04-22 14:48 | │├投稿欄 | Trackback | Comments(8)
 

投稿欄にNewの表示を パート2

はじめに

記事を投稿したときに新しい記事であることを識別するために「New」と表示されるとなんだかいいですよね。
当サイトでもNewと表示することを行っているのですが、このNewの表示のためにimgタグ内で指定するとなんだか手間ですね。

そこで、今回はスタイルシートの編集(CSS編集)で処理する方法を検討してみました。

a0031863_18312855.gif




HTML編集


投稿欄の先頭に以下のHTMLタグを追加します。Newの表示を消したいときは、<div class=new></div>を削除して下さい。

投稿欄
<div class=new></div>この位置から文章を書き出します。




CSS編集

CSS編集で以下のコードを追加します。素材によって、素材の大きさと表示位置を調整して下さい。


CSS編集

div.new{

background-image:url(イメージURLアドレス);
background-repeat:no-repeat;

/*イメージの大きさ*/
height:21px;/*イメージ高さ*/
width:34px; /*イメージ幅*/

/*イメージ表示位置*/
position: relative;
top: -55px; /*相対位置で上に-55pxずらす*/
left: -30px; /*相対位置で左に-30pxずらす*/

margin:0;
padding:0;

}




  ~参考までに~
position: relative  相対位置
top:         上からの配置位置 
left:         左からの配置位置





位置の調整を簡単にする方法

位置の調整ってプレビューだと大変ですよね。でも、めざせマイスキン を運営されているtomoさんの以下の記事を参考に「Firefox」のプラグインである「Web Developer」を使用すると、調整が簡単に出来ます。よろしかったら、以下のアドレスを参考にして下さい。

CSSを変更しながらブラウザで確認できるツール

a0031863_1839239.gif

CSSをリアルタイムで変更し、様子を見ることができます。
上手くできたら、コピー&ペーストでexciteのスキン編集のCSS編集へ貼り付けて下さいね。


tomoさん忙しいので、質問とかしないで下さいね。よろしくお願いします。


今日のポイント
  • 位置の相対指定を用いて画像を投稿欄のヘッダ部分に表示しています。相対位置の指定は、position: relative  で宣言し、その位置から相対的にtop,left,right位置を指定できます。詳しくは、とほほのWWW入門さんをご覧下さい。分かりやすく丁寧に説明されています。

    とほほのWWW入門
    とほほのWWW入門 スタイルシート position

  • 「Firefox」のプラグインである「Web Developer」を使用すると調整がリアルタイムで出来ます。tomoさんの記事を参考にして下さいね。

    CSSを変更しながらブラウザで確認できるツール


  • Newの画像は小さめの画像を利用するのがポイントです。大き目の画像を利用すると投稿欄の記事の部分にちょっと余分に空白が入ります。みなさんで工夫してみて下さい。

  • 今回は説明のため、自分で素材を作成することにしました。素材を説明のためスクリーンショットを取り込んでブログ等でアップして公開すると、素材の加工とみなされるためです。なお、当サイトは以前からアップしてある説明用画像は素材屋さんに掲載許可を頂いて公開をしています。



ぽっと

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-07-03 16:51 | │├投稿欄 | Trackback | Comments(6)
 

投稿欄のリストをおしゃれに


はじめに

春になってブログを始める方や、ベテランさんなどいろいろな方がいらっしゃると思います。そんなみなさんは、いろいろ工夫してブログライフを楽しんでいるかと思います。今日はそんな方々のために、投稿欄のリストのおしゃれについて記事にしたいと思います。

みなさんは、リストを利用しますか?
私は、要点を箇条書きにする時にリストを使います。
そう、今日のポイントでリストを使っていますね。でもデフォルトだとちょっとおしゃれじゃないですよね。(図1参照)
そこで図2に示すように、ちょっとおしゃれにしました。

ちょっとだけのことなのに、投稿欄が春らしくなりました。

では、始めましょうか。




  • リスト1
  • リスト2
  • リスト3



図1 いつものリスト




  • リスト1
  • リスト2
  • リスト3



図2 リストをおしゃれに


投稿欄の指定

まず投稿欄にリストの指定をします。ulタグの後にクラスをしています。ここで指定したクラスと同じ名前をCSS編集でも使用して下さい。私はクラス名にflower1と付けました。


投稿欄の指定
<ul class=flower1>
<li>リスト1</li><li >リスト2</li><li>リスト3</li>
</ul>


CSS編集

CSS編集部分に投稿欄で指定したクラス名と同じ名前を用いて指定を行います。リストのイメージを指定する方法はいくつかありますが、今回はlist-style-imageを使用しました。


CSS編集

ul.flower1{
list-style-image:url(イメージのURLアドレス);
}


今日のポイント
  • list-style-imageでリストのイメージを指定します。


  • 今回はulに対してlist-style-imageを指定しましたが、liに指定するとリストのイメージをいろいろと変えることが出来ます。

  • 以下のように指定すると、投稿欄のリスト全てに適応が出来ます。


    CSS編集
    .POST_BODY ul{
    list-style-image:url(イメージのURLアドレス);
    }




参考になる記事

初めての方も多いと思いますので、スキン編集の基本的なことが書いてある記事のリンクをアップしておきます。
ブログ作成マニュアル
イメージファイルのアップの方法


難易度:★
ぽっと

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-04-17 11:00 | │├投稿欄 | Trackback(1) | Comments(6)
 

投稿欄のおしゃれ

はじめに


投稿欄の隅にイメージを表示する方法についてです。すでに理解されている方は読み飛ばして下さいね。

投稿欄の右下にCopyrightのイメージファイルを使用した例を図1に示します。
投稿欄のスタイルシートの指定はDIV.POST_BODYの部分です。
この部分の背景のイメージを右下に指定しています。

a0031863_20524032.jpg

図1 投稿欄の右下に表示した例


CSS編集


CSS編集でDIV.POST_BODYを探してください。この部分に以下のコードを追加します。


CSS設置例
DIV.POST_BODY{
/*--- イメージを指定する部分です(追加もしくは変更) ---*/
background-image:url(イメージファイルURL);
background-position:right bottom;
background-repeat:no-repeat;
/*--- ここまでです。 ---*/

}


今日のポイント
  • background-positionでイメージの表示位置を決めています。

    background-position:right bottom;

    background-position:の後に 横方向の位置、そして縦方向の位置をしています。今回の場合は右下を指定しています。このパラメータを%で表現して微調整することも出来ます。



難易度:★


ぽっと

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-03-27 20:48 | │├投稿欄 | Trackback | Comments(14)
 

投稿欄のタイトルのイメージを2つ表示する方法


投稿欄タイトルのバックグランドイメージを指定しているともうイメージを表示できないと思っている方はいないでしょうか。もし、そう思っている方はこの技を試して下さいね。
通常はCSSでバックグランドのイメージを指定していますが、HTML編集でイメージを追加して表示することにより、バックグランドイメージの上にワンポイントとしてプチイメージを表示することが可能です。
今回は私が作った素材で試してみました。

a0031863_16152717.jpg

図1 設置例


HTML編集部分

図2に示すように、HTML編集の本文をクリックして下さい。
この部分は投稿欄などの指定を行うところです。
この部分の<$postsubject$>の前にイメージタグを入れます。


a0031863_22215924.jpg

図2 HTML編集 本文



HTML本文編集

<DIV CLASS=POST>
<DIV CLASS=POST_HEAD>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR><TD WIDTH=80%><img src="イメージURL" ><$postsubject$></TD>
<TD WIDTH=20% ALIGN=RIGHT><$postadmin type=1$></TD></TR>
</TABLE>


イメージの位置をずらすには、以下のように位置の相対指定を利用されると良いですよ。



HTML本文編集 イメージの位置をずらすには

<DIV CLASS=POST>
<DIV CLASS=POST_HEAD>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR><TD WIDTH=80%><img src="イメージURL" style="position: relative; top: 0px; left: 10px;" ><$postsubject$></TD>
<TD WIDTH=20% ALIGN=RIGHT><$postadmin type=1$></TD></TR>
</TABLE>



position: relative; 相対位置指定
top:0px;現在の位置から上にずらす量
left:10px;現在の位置から左にずらす量


CSS編集部分


すでに設置されている方は不要です。



CSS編集部分

DIV.POST_HEAD {

/*------------------ ここから追加 ---------------*/
background-image:url(イメージURLアドレス);
background-position:left; /*イメージ配置位置*/
background-repeat:repeat-y;/*イメージの繰り返し*/
/*------------------ ここまで --------------------*/
}




今日のポイント
  • CSS編集で投稿欄のヘッダのイメージを設置し、HTMLでワンポイントのイメージを設置することが可能です。

  • 画像の位置は相対指定を行うことによりずらすことが可能です。こちらの記事を参考にされると良いと思います
    ■新しい投稿にはNewの表示を・・・




難易度:★

ぽっと

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-12-11 08:45 | │├投稿欄 | Trackback | Comments(16)
 

一部の投稿欄に背景を表示してみました



えこちんていすとを運営しているekoさんの素材がとっても気に入ったので、投稿欄に表示してみました。


一部の記事の背景を指定する方法



この記事の背景タグ
<div style=" background-image:url(イメージファイルURL);background-repeat:repeat-y;background-position:left;padding:0%; margin:0%;width:400px;">

ここに本文を書いています。

</div>





今日のポイント
  • 一部の記事の背景を変えたい場合は、記事の中にdivタグなどを入れて背景を指定することで出来ます。

  • width:400px;で投稿欄の大きさに合わせています。皆さんの設定はもう少し小さいかもしれません。


  • 私は投稿欄にpaddingを指定しているので、marginの値に負の値を入れて綺麗に表示できるようにしています。


  • background-repeat:repeat-y;でY軸(縦)方向の繰り返し表示をしていますが、素材に応じて変更して下さい。



素材
素材は、えこちんていすとを運営しているekoさんからお借りしています。
当サイトは再配布を行っていません。
えこちんていすとさんのところからダウンロードをお願いします。



難易度:★

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-11-26 20:55 | │├投稿欄 | Trackback(1) | Comments(4)
 

いつも遊びに来て頂いている方々へ・・・




みなさん,いつも遊びに来ていただいてありがとうございます。
私のサイトは”ブログスキン編集を皆さんと楽しみたい”をコンセプトに色々なアイディアの掲載をさせて頂いています。
スキン編集の楽しさが少しでも伝われば嬉しいです。
これからも、よろしくお願いします。


黒板の作り方


上記黒板のタグは次の通りです。よろしかったらいろいろと工夫して下さいね。

コピペするだけで楽しめます。



黒板の設置タグ

<div style="background-color:#144600;padding:1em 1em 1em 1em; margin:0px 0px 0px 0px; border-width:0px; text-align:left; width:250px; color:#ffffff;font-weight:bold;">

この部分に文章を入れます。

</div><div style="background-color:#993402;border-width:0px;padding:0px 1em 0px 1em;margin:0px 0px 0px 0px; width:250px; height:15px;"></div>





今日のポイント
  • width:250pxで黒板の幅を指定しています。ご自分のサイトに合わせたサイズをご利用下さい。


難易度:★
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-11-14 10:01 | │├投稿欄 | Trackback(8) | Comments(29)
 

スタイルシートを用いた2列段組


スタイルシートを用いた2列段組の作り方です。
この技を応用して目次(お勧め記事)を作ってみました。よろしかったらご利用下さい。

※ある方からリクエストがありました。実はこのような目次を作ろうと思っていたのでグットタイミングでした。もうすこし工夫ができそうですが、みなさん工夫してみて下さいね。




人気のお勧め記事


スタイルシートを用いた2列段組
テーブルを使用しないで、おしゃれに2列段組してみませんか。メニューやお勧め記事などに利用できますよ。


鍵コメントを判りやすくする方法
鍵コメントのアイコンが小さくて鍵コメントと判らないときがありませんか。そのな鍵コメントを判断しやすくするために鍵コメントのアイコンを大きくします。

コメント欄の編集のまとめ
見えないところのおしゃれシリーズです。コメント欄を装飾してみませんか。あなただけのオリジナルなコメント欄を装飾してコメントして頂ける方にも楽しんでもらいましょう^^


コメント拒否の文字の消し方
トラックバックとコメントの拒否の文字を消す方法です。この技を応用すると文字の色を変えることもできます。


3列スキンマニュアル
ブログの3列スキンを作成するためのマニュアルです。初心者向けに書かれていますので、マイスキンを作りたいかたはこのマニュアルからスタートすることをお勧めします。






図1 投稿欄に目次として設置した例



CSS設置

CSS編集(スタイルシート)こ以下のコードを追加して下さい。PADDINGやMARGINなど、設定を変えてご自分のスタイルに合わせて下さいね。




P.left{

FLOAT: left;
MARGIN: 0px 0px 0px 10px;
PADDING: 0px 2px 0px 2px;
WIDTH:40%;

}

P.right{

FLOAT:right;/*文字の回りこみ*/
MARGIN: 0px 10px 0px 5px;/*外側余白*/
PADDING: 0px 2px 0px 2px;/*内側余白*/
WIDTH: 40%;/*幅*/

}


/*追記:2004年10月24日 10時   */
/*リンクの下線を表示するようにしました*/
p.left A:VISITED{text-decoration:underline ;}
p.left A:link{text-decoration:underline ;}
p.left A:ACTIVE{text-decoration:underline ;}

p.right A:VISITED{text-decoration:underline ;}
p.right A:link{text-decoration:underline ;}
p.right A:ACTIVE{text-decoration:underline ;}


HTML設置


投稿欄に入れるタグのリストです。今回は投稿欄に入れましたが、HTML編集部分に入れることも可能です。

<P class="left">この部分に左側の目次となる項目を入力して下さい。
</P><P class="right">この部分に右側の目次となる項目を入力して下さい。
</P><br style="clear: both;">


今日のポイント
  • CSS(スタイルシート)でFLOATを用いています。FLOATは文字などの要素の回り込みを指定します。
    回り込みの指定を終了するために以下のコードを入れています。
    <br style="clear: both;">



難易度:★★

素材はとんとん工房さんからお借りしています。リンクウエアなのでご使用の際には、リンクをお願いします。

ぽっと

CopyRight(C) 2004 All rights reserved by potto37

目次に使用したタグのリストです。>>
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-10-23 23:29 | │├投稿欄 | Trackback(2) | Comments(11)
 

投稿欄ヘッダのグラデーション


ブログの玉手箱さんで記事タイトルのグラデーション を説明されています。
私はこのアイディアを参考にIE以外でも表示可能なグラデーションを
説明したいと思います。

a0031863_20395962.jpg

図1 設置例



More
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-09-17 20:39 | │├投稿欄 | Trackback(1) | Comments(10)
 

投稿欄ヘッダ部分にイメージを表示する方法(猫ちゃん)


投稿欄のヘッダ上部に猫ちゃんを表示する方法です。


a0031863_7414085.jpg

図1 設置例


設置方法はこちら>>
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-08-19 07:39 | │├投稿欄 | Trackback | Comments(11)
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。