<   2004年 11月 ( 8 )   > この月の画像一覧

 

メニュー:リストを用いたメニュー


以前、テーブルを使用したメニューを紹介させて頂きました。
今回は図1に示すようなリストを用いたメニューです。
設置場所については好きなところに設置して下さいね。





図1 設置例



HTML編集


以下のタグを任意の場所に入れます。



HTML編集
<ul class="menunavi">
<li ><a href="URLを指定">メニューのタイトル</a></li>
<li ><a href="URLを指定">メニューのタイトル</a></li>
<li ><a href="URLを指定">メニューのタイトル</a></li>
<li ><a href="URLを指定">メニューのタイトル</a></li>
<li ><a href="URLを指定">メニューのタイトル</a></li>
</ul>
<br style="clear: both;">



CSS編集部分

CSS編集部分に以下のコードを追加します。
各自の画像に合わせた設定に変更する必要があります。



CSS編集


ul.menunavi li{

list-style-type: none;
display:inline;
padding:0;
margin: 0;
}

ul.menunavi li a, ul.menunavi a:visited{

color: #000000;
font-size: 10px; /*フォントのサイズ*/
font-weight: bold; /*フォントを太字*/
text-align:center; /*文字の中央揃え*/

margin: 0;
padding: 0;
padding-top:0px; /*上の空白の調整用*/
line-height: 20px;

text-decoration: none;
display:inline;

position:relative;
left:0px; /*表示位置補正用です。この数値を大きくすると表示位置を変えられます。*/

float: left;

background-image:url(イメージファイルURL);
background-repeat:no-repeat;
background-position:center;
width:100px; /*イメージファイルの幅*/
height:20px; /*イメージファイルの高さ*/
}






今日のポイント
  • display:inline;で横方向に表示するようにしています。

  • left:0px;の部分の数値を入れることにより表示位置をずらすことが可能です。




難易度:★★
なお、ボタンの素材はGIMPで作りました。

ぽっと

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-11-27 11: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 | │├投稿欄
 

メンテナンスのお知らせ:11月24日 午前3:00~6:00


いつも遊びに来て頂いてありがとうございます。
11月24日は以下の通りサーバメンテナンスのためご利用できません。
あらかじめご了承下さい。



期日:2004年11月24日(水曜)

時間:午前3:00~6:00(最長3時間)

内容:サーバーメンテナンス



詳細:エキサイトブログからのお知らせ
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-11-22 18:28 | ├お知らせ
 

クリスマス仕様にしました

えこちんていすとを運営しているekoさんから素材をお借りして、クリスマス仕様にしました。
背景の雪と、コメント欄の背景の雪の結晶を利用させて頂きました。
ekoさんありがとうございます。

ekoさんの素材に温かみを感じますね。
雪の結晶がとても気に入りました^^
もしよろしかったら、ekoさんのところに遊びに行ってくださいね。


素材リンク先

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-11-17 18:31 | ├素材
 

しし座流星群忘れてました


流れ星の散歩道(^_-)-☆を運営している、 hikkoroさんから流れ星の情報を頂きました。
hikkoroさんのところで、19日まで星空のスキンが見れますよ。
よろしかったら、遊びに行って下さい。

今日、しし座流星群だったんですね。忘れていました^^;
友人には今日見れるよって言ってあったのに、完璧に忘れていました。(笑)

でも、こうやってブログ間で情報の発信が出来るのはいいですね。
何を願い事しようかなぁ。

みなさんの、願い事が叶いますように。

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-11-17 18:27 | ├ひとりごと
 

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




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


黒板の作り方


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

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



黒板の設置タグ

<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 | │├投稿欄
 

background-imageのURL記述の変更のお願いについて



追記情報 2004年11月10日


親切な方から新たな情報を頂きました。MacNSやMacMozillaにも対応した方法を
Access Granted Ⅱを運営しているa_Neo-team714 さんが公開しています。
よろしかったら、こちらの記事を参考にして下さい。よろしくお願いします。
なお、この情報はMac中田のipod氏(Groove Cafe)さんの協力により作成されたそうです。

背景画像表示対策 for MacIE(Access Granted Ⅱ)

貴重な情報をありがとうございます。MAC環境を持ち合わせていないので、このような情報をいただけるとありがたいです。
また、何かありましたら教えて下さい。よろしくお願いします。







MACユーザの方からMAC+IE 5.0でイメージが表示されないとの情報を頂きました。
そこで、いろいろと調べた結果、MAC+IE 5.0ではCSS(スタイルシート)のバックグランドイメージを表示するbackground-imageにて、url()記述を使用する際に、シングルコーテーション ' を用いると画像が表示されないことが判りました。

当サイトの記事にURL(’イメージファイルURL’)との記述がありますが、今後はこのシングルコーテーションを取り除いたURL指定で行うと、MAC+IE 5.0でもイメージファイルを表示できそうです。

MAC+IE 5.0でイメージが表示されないとの貴重な情報をありがとうございました。
これからも、修正の必要な項目については修正をさせていただきますので、ご指導のほどよろしくお願いします。


変更箇所




変更前
URL(イメージファイルURL

変更後
URL(イメージファイルURL)



当サイトの記事の修正については少しづつ修正をしていきます。新たにスキン編集される方は、置き換えてご利用下さい。よろしくお願いします。


[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-11-09 18:51
 

裏技でメモ編集が使えなくなったら・・・


エキサイトのブログのメモ編集の保存ボタンが消えることがあります。タグを閉じるのを忘れたり、裏技を試そうとすると発生することがあります。もし、そんなことに遭遇したらここに書いてある方法が役にたつかも知れません。



対処方法>>
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-11-04 22:48 | │├トラブル脱出
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。