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

カテゴリ:│├メニュー( 13 )

 

緊急記事 次のページをトップに表示する

はじめに

以前の記事の表示数が変わって、次のページをクリックしないと、全てのタイトルが表示されなくなりました。仕様としてはあまりよろしくないですが、仕方がないので、次のページのリンクをトップに表示し、できるだけまだページがあることをユーザに分かるようにしたいと思います。


a0031863_7445415.jpg


作業内容

HTML編集のメインの部分で、<$post$>の後ろの方にある、<$prepage type=1$>と<$nextpage type=1$>を<$post$>の前にコピーします。
 スキンによって少しづつ違いますが、基本的には<$prepage type=1$>と<$nextpage type=1$>のエキサイト特有のタグを利用します。



HTML編集

 3列スキンを例題にしています。違うものに関しては、参考にいろいろ工夫してみて下さいね。
 HTML編集にて、<$post$>の後ろの<$prepage type=1$>と<$nextpage type=1$>を<$post$>の前にコピーします。この例では、テーブルタグを一緒にコピーしています。

HTML編集

<!- ここから ->
<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
<tr><td align="right" width="48%"><$prepage type=1$></td> 
<td width="4%"></td> 
<td align="left" width="48%"><$nextpage type=1$></td>
</tr>
</table>

<!- ここまで ->

<$post$>

<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
<tr><td align="right" width="48%"><$prepage type=1$></td> 
<td width="4%"></td> 
<td align="left" width="48%"><$nextpage type=1$></td>
</tr>
</table><br/><br/>




解説

<$prepage type=1$>などは、エキサイト特有のタグです。タグに関する説明は以下のサイトをご覧下さい。

スキンタグ集

 前のページ -- <$prepage type=1$>
 次のページ -- <$nextpage type=1$>


最後に

次のページを先頭に持っていただけなので、まだ分かりづらいですが、操作性だけは少し向上します。エキサイトの特有のタグについては裏タグもありますので、いろいろと調べると面白いですよ。でも、裏タグはいつか使えなくなるので、公表されているタグを使った方が安全ですね。


[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2007-06-27 00:03 | │├メニュー | Trackback | Comments(0)
 

以前の記事のリンクの整理方法の一例

はじめに

ブログを開設してだいぶ経つと「以前の記事」のリンクが図1に示すようにちょっと増えてきて、コンパクトにまとめたくなりました。
「以前の記事」のソースを取り出して整理する方法もあるのですが、毎回取り出すのも面倒なので自分のためのプログラムを作ってみました。
今日空いた時間にちょこちょこって感じで作ったので、まだバグとかあるかもしれないけど、使えるからいいかなって感じでアップしました。
exciteブログ、以前の記事リンク生成プログラム

a0031863_19123134.gif

図1 まとめる前


生成プログラム

生成プログラムは以下のアドレスから利用できます。生成したい年月の範囲を入力し、サイトのトップアドレスを入力します。
そして、プルダウンリンク生成か、リンク生成ボタンを押すと、HTMLタグが生成されます。
生成されたHTMLタグをコピー&ペーストして利用すると図2のような以前の記事のリンクが出来ます。

例:http://potto.exblog.jp/

a0031863_20413276.gif

図2 集約後


注意:単純に範囲の年月に対してのリンクを生成しているだけです。従って、記事を書いていない月のリンクも生成されます。そのリンクは手作業で削除などして下さい。

exciteブログ、以前の記事リンク生成プログラム


「以前の記事」のソースを見てみる

まずはじめに「以前の記事」のソースを見てみると、以下のようなアンカータグで構成されていることがわかります。

<A href="http://potto.exblog.jp/m2005-07-01/">2005年 07月</A><BR><A href="http://potto.exblog.jp/m2005-06-01/">2005年 06月</A><BR><A href="http://potto.exblog.jp/m2005-05-01/">2005年 05月</A><BR>



この、アンカータグのリンクを見てみると、サイトURLに続いて、/m年-月-01/と構成されていることが分かります。(月は1桁の場合は先頭に0が入る)

 http://サイトURL//m年-月-01/


 http://potto.exblog.jp/m2005-07-01/

したがって、このルールでリンクを生成すると良さそうです。



プルダウンリンク

プルダウンリンクは以下のHTMLで作ることが出来ます。


プルダウンリンク設置コードの一例

<select onchange="location.href = this.options[selectedIndex].value" style="width:150px;" >
<option value="">タイトル </option>
<option value="URL">サイト名</option>
<option value="URL">サイト名</option>
</select>




使用上のご注意

プまだテスト段階です。エラー処理もしていません^^;不具合があるかもしれません。あらかじめご了承下さい。なお、このプログラムで生じた損害については当方では責任を負いかねますのでご了承ください。

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-07-16 19:13 | │├メニュー | Trackback(1) | Comments(8)
 

プルダウンリンクメニューの記事をHPにアップしました






exciteで設置可能なプルダウンリンクメニューと、exciteでは設置できないのですが、別窓を開く方法についての記事をHPにアップしました。
何かの参考になれば、幸いです。

以下のリンクからご覧下さい。



プルダウンリンクメニュー >>

ぽっとの陽だまり研究所>>



[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-05-21 14:03 | │├メニュー | Trackback(1) | Comments(2)
 

プルダウンリンクメニューの拡張

はじめに

excite でもプルダウンリンクメニュー利用できることを発見し、公開してからいろいろな方に利用していただいています。
このプルダウンリンクメニューをもっと使いやすくする方法を考えて見たいと思います。

まず、プルダウンメニューの項目が多くなるとメニューを選ぶ方が分かりづらくなります。
そこで、図1に示すoptgroupタグを用いてオプションをグループとして分ける方法が考えられます。
このプルダウンリンクメニューはHTML部分でoptgroupタグを用いてグループを分けています。そして、CSS編集でグループのタイトルのバックグランドカラーを指定しています。


a0031863_2014552.jpg

図1 設置の一例


実際に触ってみよう!

では、実際に触って見てください。感触が掴めたでしょうか。これからのレッスンはこのプルダウンリンクメニューの作り方を説明します。ちょっと難しいと感じられる方もいらっしゃるかもしれませんが、ゆっくり試して下さいね。






HTML編集

投稿欄やスキン編集部分に以下のHTMLタグを入れます。optgroupタグで、optionを囲んでいるのが分かるでしょうか。
これだけでも、機能します。



HTML編集


<select onchange="location.href = this.options[selectedIndex].value" >
<option>リンク集</option>

<optgroup label="グループタイトル1">
<option value="URLアドレス" >サイトタイトル</option>
<option value="URLアドレス" >サイトタイトル</option>
<option value="URLアドレス" >サイトタイトル</option>
<option value="URLアドレス" >サイトタイトル</option>
</optgroup>

<optgroup label="グループタイトル2">
<option value="URLアドレス" >サイトタイトル5</option>
<option value="URLアドレス" >サイトタイトル6</option>
<option value="URLアドレス" >サイトタイトル7</option>
<option value="URLアドレス" >サイトタイトル8</option>
</optgroup>

</select>




CSS編集

続いて、外観を変えたいと思います。CSS編集に以下のコードを追加して下さい。ちょっとだけ見やすくなったでしょうか。この部分は皆さんがいろいろ工夫してくださいね。きっと、利用しやすいプルダウンリンクメニューができると思いますよ。



CSS編集

optgroup{background-color:#ccccff;}
option{background-color:#ffffff;}



実際の設置タグの一例

実際に設置しているタグの一例です。分からない方は、このタグをコピーして変更しながら試して下さいね。



設置タグの一例


<select onchange="location.href = this.options[selectedIndex].value">
<option>リンク集</option>
<optgroup label="HTML&CSS関連">
<option value="http://www.tohoho-web.com/www.htm" >とほほのWWW入門</option>
<option value="http://www.htmq.com/style/index.shtml">HTMLクイックリファレンス</option>
<option value="http://www.cybergarden.net/">CYBER@GARDEN</option>
<option value="http://326style.com/">1からわかるおもしろ日記書き方講座</option></optgroup>

<optgroup label="素材屋さん">
<option value="http://www.geocities.jp/eko6262/">Eko's Taste</option>
<option value="http://www.grn.mmtr.or.jp/~ka-mu/">イラそよ</option>
<option value="http://www.shineblue.com/">アトリエ フリー</option>
<option value="http://homepage3.nifty.com/bevel/">★フリー素材BEVEL★</option>
<option value="http://maro.fun.cx/">Green Gables*まろのアトリエ</option>
<option value="http://www.pikoland.net/">ぴこらんど</option>
<option value="http://www010.upp.so-net.ne.jp/satochareds/">SkyLine -空の素材-」</option>
</optgroup>
</select>



今日のポイント
  • optgroupでグループ分けが可能です。

  • excite以外でも利用できるので活用範囲が広がりますね。

  • JavaScriptがONになっていないと機能しません。




難易度:★★
HTML編集がちょっと難しいかもしれませんね。でも、がんばって下さいね。
ぽっと

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-04-30 12:05 | │├メニュー | Trackback(1) | Comments(8)
 

記事の紹介:ナビゲーションバーをCSSで装飾


今日はAll Aboutの記事の紹介です。
よくホームページの上の方にナビゲーションバーがありますよね。
そのナビゲーションバーの一例が分かりやすく説明されています。
よろしかったらご覧下さい。

ボリュームがあります。急いでる方は最後の項目をチェックして下さい。



注意:当サイトのナビゲーションバーとは違いますのであらかじめご注意下さい。




[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-02-04 19:58 | │├メニュー | Trackback | Comments(2)
 

”次のページへ”のおしゃれ方法について


記事の前と次のページへのリンクにのおしゃれ方法です。ブログの記事の下の方に<前のページへ  と  次のページへ>のリンクを見つけることができると思います。この部分をおしゃれしてみたいと思います。

まず,完成図を頭の中でイメージしましょう。
完成図は図1に示すように,<前のページへ  と  次のページへ>がボタンの素材に置き換わって,マウスを上に載せると説明が表示されます。

a0031863_22582878.jpg

図1 設置の一例


では、実際にやってみましょう!


HTML編集


1.HTML編集で$prepageと$nextpage の部分を探して下さい。
2.この部分に対応するTDのタグに以下のようにclass指定(青字の部分)を追加します。
3.次にtitle指定でマウスを乗せたときのメッセージを書き込みます。
4.各TDのWIDTH=○○%(赤字の部分)を修正します。トータル100%になるように指定して下さい。中央のHOME部分の指定が少ないので量を増やしました。




HTML編集

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR>
<TD ALIGN=RIGHT WIDTH=45% class=MV_L title="前のページへ"><$prepage type=1$></TD>

<TD WIDTH=10% ALIGN=center class=MV_TOP title="ホームへ"><a href="自分のブログのURL">Top</a></TD>

<TD ALIGN=LEFT WIDTH=45% class=MV_R title="次のページへ"><$nextpage type=1$></TD>

</TR></TABLE>





CSS編集



1.以下のコードを追加します。
2.画像に合わせてheight,width,paddingで調整をします。
この際にpaddingの指定をしっかり行わないとMozilla Firefoxなどのブラウザでは表示が上手く出来ないことがあります。

3.colorで文字の色をボタンの背景と同色にしています。
ボタンの素材にあわせて色を各自で変更して下さい。

注意:MV_R,.MV_L,.MV_TOPの部分はボタン画像ではなく、ボタンが表示されない場合の対策なので、背景と同じ色を指定して下さい。




CSS編集


/*ボタンが表示されないときの対策用*/
.MV_R,.MV_L,.MV_TOP{
color:#ffffff; /*背景と同じ色*/
height:20px;
padding:20px;
}



/*次のページへ*/
.MV_R a,.MV_R A:link,.MV_R A:visited, .MV_R A:active,.MV_R A:hover{
font-size: 0%;
color:#ffffff;/*ボタンの素材と同色*/
background: url(次のページへの画像URL) no-repeat center;
height:50px;
width:100px; /*余裕も持たすために大目の値を入れています*/
padding:20px;
}

/*前のページへ*/
.MV_L a, .MV_L A:link, .MV_L A:visited, .MV_L A:active, .MV_L A:hover{
font-size: 0%;
color:#ffffff;/*ボタンの素材と同色*/
background: url(前のページへの画像のURL) no-repeat center;
height:50px;
width:100px;
padding:20px;
}

/*HOME*/
.MV_TOP a,.MV_TOP A:link ,.MV_TOP A:visited ,.MV_TOP A:active,.MV_TOP A:hover{
font-size: 0%;
color:ffffff;/*ボタンの素材と同色*/
background: url(HOMEへの画像のURL) no-repeat center;
height:50px;
width:50px;
padding:20px;

}




今日のポイント
  •  font-size: 0%で文字を小さくしています。

  • a のアンカータグの背景にイメージを表示させるためにpaddingで余白を入れてボタンを表示するようにしています。






注意:リンクをボタンのように押し下げるTipを使用している場合は解除して下さい。調整が難しいので^^;


【解除前】
A:HOVER {

COLOR: #813888;
TEXT-DECORATION: UNDERLINE;

/*---- 以下の部分を削除 -----*/
 position: relative;
top: 1px;
left: 1px;
/*---- ここまでを削除 -----*/


}

【解除後】
A:HOVER {

COLOR: #813888;
TEXT-DECORATION: UNDERLINE;

}



難易度:★★★
イメージにあわせてpaddingなどで調整が必要のため、難しく感じられるかも知れません。
みなさん、がんばって挑戦して下さいね。

ぽっと



KLMtoday さんのサイトでも別の手法による説明がされています。
よろしかったらご覧下さい。
ページ送り(前のページ/次のページ)をiconに変える
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-01-01 03:00 | │├メニュー | Trackback(5) | Comments(18)
 

プルダウンリンクメニューの設置方法


プルダウンリンクメニューの設置方法です。リンクが多くなってくると整理に困るのでプルダウンリンクメニューを設置しました。
次のタグを追加するだけで簡単に設置が可能です。なお、JavaScriptを使用しています。禁止タグでは無いので公開しました。エキサイトさんがこのような機能を残しておいて頂いたことに感謝します。


※.JavaScriptを使用しているため(裏技ではありません、たぶん^^;)、JavaScriptをOFFにしている方は機能しません。テキストのリンク集をどこかに設置しておくと、そのような方のためにも役立ちますよ。




図1 プルダウンリンクメニューの一例


設置方法


HTML編集部分か、メモ編集に追加することにより、機能します。


<select onchange="location.href = this.options[selectedIndex].value" style="width:150px;" >
<option value="">タイトル </option>

<option value="URL">サイト名</option>

<option value="URL">サイト名</option>

</select>

図2 設置タグ



今日のポイント
  • selectタグにスタイルを指定することにより、幅を固定することが可能です。150px程度がよろしいかと思います。

  • リンクを追加するには、以下の通り設置をお願いします。

    <option value="URL">サイト名</option>

    参考サイト:とほほのWWW入門

    ぽっと

    CopyRight(C) 2004 All rights reserved by potto37



    2004年12月19日追記

    設置例のコードです、よろしかったらこのコードをコピー&ペーストして試して下さいね。


    設置例

    <select onchange="location.href = this.options[selectedIndex].value" style="width:150px;" >

    <option value="">HTML&CSS関連 </option>
    <option value="http://tohoho.wakusei.ne.jp/www.htm">とほほのWWW入門</option>
    <option value="http://www.htmq.com/style/index.shtml">HTMLクイックリファレンス</option>
    <option value="http://www.cybergarden.net/">CYBER@GARDEN</option>
    <option value="http://326style.com/">1からわかるおもしろ日記書き方講座

    </option>
    </select>


    [PR]
    記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-08-20 06:20 | │├メニュー | Trackback(6) | Comments(36)
 

私が利用しているリンクメニューの設置方法



私が利用しているリンクメニューですが、以前説明した小窓の応用です。

この小窓は他のメニューに影響しないため、設置が簡単で初心者に向いています。
よろしかったらご利用下さい。スクロールバーの色も各小窓にあわせて設定が可能です。

※左右どちらでも設置が可能で、他のメニューに影響しません。




設置方法 HTML編集


<div CLASS="winodw" style="scrollbar-face-color:#C6D3FF;
">
Link<BR>
│ <BR>
├HTML&CSS関連<BR>
│├<a href="URL">サイト名</a><BR>
│├<a href="URL">サイト名</a><BR>
│├<a href="URL">サイト名</a><BR>
│└<a href="URL">サイト名</a><BR>
└<a href="URL">サイト名</a><BR>
</div>




設置方法 CSS編集


/*小窓*/
.windows{
overflow:scroll;
height:20em;
width:150px;
text-overflow:ellipsis;
word-break:keep-all;
white-space:nowrap;
background-color:#FFFFFF;
border:1px solid #CCC;
text-align:left;
scrollbar-face-color:#FFE8F7;
line-height:93%
}


ポイント
  • スクロールバーの色を変えるには、scrollbar-face-colorで指定します。デフォルトで色を指定して有りますが、各小窓ごとに色を変えるには、style="scrollbar-face-color:#C6D3FF;"を追加することにより可能です。
  • height:20em;で、行数を指定しています。20行以上で小窓が出現しますので、内容が少ない場合は、数字を小さくしてくださいね。2004.8.14追記


追記
私はの設置場所は、<$menuleft$>の前に設置しています。


ぽっと

CopyRight(C) 2004 All rights reserved by potto37




2004年9月18日
soliloquyさんのところで、メモ欄増設について の記事を紹介されています、よろしかったらご覧下さい。
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-07-24 10:45 | │├メニュー | Trackback(8) | Comments(51)
 

カテゴリーメニューをトップに表示


今日は、ご質問のあったセンターメニューについてお話します。
画面トップ中央にカテゴリのメニューを配置していますが、これはカテゴリーメニューを横に表示しているのではなく、カテゴリーのリンクを貼り付けています。
貼り付け方法ですが、リンクをテーブルで横に均等に並べています。



HTML編集


<!- センターメニュー ->
<TABLE><TR>
<TD>
<a href="http://potto.exblog.jp/i0"><DIV class="boxmae">全 体</DIV>
</a>
</TD>

<TD>
<a href="http://potto.exblog.jp/i2"><Div class="boxmae">スキン</DIV></a>
</TD>

<TD>
<a href="http://potto.exblog.jp/i3"><DIV class="boxmae">ソ フ ト</DIV>
</a>
</TD>

<TD>
<a href="http://potto.exblog.jp/i5"><DIV class="boxmae">おまけ</div></a>
</TD>

<TD>
<a href="http://potto.exblog.jp/i1"><DIV class="boxmae">未分類</div></a>
</TD>
</TR></TABLE>
<!- センターメニュー ->



CSS編集



CSS編集にて項目を追加しました。バックグランドのイメージでボタンを表示しています。



.boxmae{
FONT-WEIGHT: bold;
text-align: center;
padding: 3px;
position: relative;
width: 69px; /*画像の横幅に必ず合わすこと*/
height: 10px;
z-index: 1;
background-image:url(画像ファイル);
background-repeat:no-repeat;
background-position:center center;

}



ポイント
  • カテゴリーのリンクの取得方法
    カテゴリを表示しておき、マウスの右ボタンをクリックしてショートカットのコピーを選択します。続いてリンクのところにペーストします。
  • バックグランドのイメージの横幅とCSS編集のwidthと同じ大きさにしてください。
    イメージアップロードで、保存されたイメージリストにてアップロードした画像をクリックし、イメージURL の下にWIDTH=69 HEIGHT=19などと表示されます。その値を使用すればOKです。


この説明で分かりづらいと思いますので、似たような記事を探しました。私の方法とちょっと違いますが参考になると思います。

ページ作成TIPS [3] 読込画像1つで複数ボタンを作る

追記:

HTML追加位置


<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=800>
<TR><TD HEIGHT=30></TD></TR>
<TR><TD VALIGN=TOP>
<a href="http://potto.exblog.jp/"><DIV CLASS=HEADER></a></div>
<DIV CLASS=URL><$blogurl$></DIV>
<DIV CLASS=USERMENU><$adminmenu type=3$></DIV>
</TD></TR>
<TR><TD HEIGHT=10></TD></TR>
</TABLE>


この部分に追加しています。ちょうど、</TABLE>が終わっているところなので大丈夫かと思います^^






ぽっと

CopyRight(C) 2004 All rights reserved by potto37
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-07-23 22:39 | │├メニュー | Trackback | Comments(9)
 

■メニューボタンをつけました

やっとのことで、メニューボタンを作りました。
まだ、納得できないのですが、何とか利用できます。

これで、操作性が良くなればいいなぁって思っています。

みんと♪

# by minto7mimi | 2004-07-01 00:26 | スキン編集
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-07-13 10:18 | │├メニュー | Trackback | Comments(0)
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。