ログイン
英会話| 婚活| 北海道専門学校| 東北専門学校| 東海専門学校| 沖縄専門学校| ホームページ制作| 2万円HP制作|

ブログテンプレート制作目録

スクロールボタンの変更と追加

現在の位置:TOP >  Javascript / jQuery

スクロールボタンの変更と追加をしました。

 

スクロールボタン

 

前のボタンはグローバルナビで使ってる背景とテキストでしたが、今度は全部画像。

オンマウスロールオーバーは下記参照。
http://blog.town-nets.com/blogtemplate/entry-1649.html#more

 

ついでにページトップにジャンプするボタンがあるなら、ボトムにジャンプさせるものも追加した方がいいのでは?と思ってボタン追加。

 

ページトップへスクロール OFF時
OFF時
ページボトムへスクロール OFF時
OFF時
ページトップへスクロール ON時
ON時
ページボトムへスクロール ON時
ON時

 

追加はかんたん!

画像追加して<a>タグのidにfooterと入力しただけ。

 

記事URL

トップページとシングル・アーカイブページで差別化

現在の位置:TOP >  Webデザイン

トップページとシングル・アーカイブページで差別化しました。

 

シングル・アーカイブページのヘッダーの高さを150pxくらいにしました。画像だけで350pxもあるので、開いたときの画面上で見えている文章が少ししか見えていないのは、ユーザーに余計なスクロール回数を増やせてしまう事になると思ったのがきっかけです、トップページとシングル・アーカイブで差別化を図ってみました。

 

 

あとCSS3のtext-shadowってプロパティがあるけど、

 

text-shadow

 

IEでは全く反映しねえのよ(IE9は分からんけど)。

 

IE用フィルタのCSS

 

ってことでフィルタを付けてみたんだけど、反映したり、しなかったりするのでフィルタは消しました。これを付けてみた理由はマウスロールオーバーの効果を付けるためです。

 

うやむやなものを付けても意味ないので消しました(-_-;)

 

余談ですが、この画像はWindowsのデフォルトソフトであるペイントで作りました。赤枠線を付けたんですが、アップロードしてみて気づきました。

 

あら、不思議!!(゜Д゜;)

 

赤枠線ワインレッドに見える。。

記事URL

jQueryで「ページトップへスクロール」するボタンを追加 他

現在の位置:TOP >  Javascript / jQuery

jQueryで「ページトップへスクロール」するボタンを追加しました。

 

ぺーじトップへスクロールするボタン

 

各ページの右下に配置してます。

ボタンはグローバルナビで使用した背景画像を流用しています。

 

やっぱね、トップやアーカイブに10記事、20記事載せてるブログって巷でよく見かけるので、一気にページトップまでスクロールできるボタンがあった方がいいんじゃないかな、と思ったので設置しました。

 

<a name="~"></a>ではなく、jQueryでスルスルスル・・ってスクロールするのが面白いですよね(^▽^)

記事URL

グローバルナビ完成

現在の位置:TOP >  Webデザイン

グローバルナビできました。完成!2万円ホームページのリニューアルをCMS使ってやってたら欲しくなったので、このラボログにも付けましたw

 

幅は900pxにして、基本的にテキストリンクで幅・高さを設定してリンクエリアを設けてます。全部画像にしちゃうと面倒なので。修正するときはこっちが簡単です。いちいち画像作ってアップロードしなくて済む。

 

画像

 

Gナビ背景01 Gナビ背景02 Gナビ背景03

 

今回のグローバルナビに使用した画像は左と中央(ポイント時)です。いずれも5px×40pxです。

 

CSS

 

/*------グローバルナビ------*/
#gnavi{
    margin:0 auto;
    padding:0;
    width:900px;

    background:url(画像URL) center top repeat-x;
    color:white;
}
#gnavi ul.nl{
    margin:0;
    padding:0;
}
#gnavi ul.nl li{
    display:block;
    float:left;
    font-size:12px;
    list-style-type:none;
    text-align:center;
}
#gnavi ul.nl li a{
    display:block;
    padding-top:10px;
    width:179px;
    height:30px;
    background:url(画像URL) repeat-x center top;
    color:white;
    text-decoration:none;
    text-shadow:-1px -1px 0px black; /* IEは多分ver9から */
    font-weight:bold;
    border-left:1px solid aqua;
}
#gnavi ul.nl li.first a{
    border:none;
    width:180px;
}
#gnavi ul.nl li a:hover{
    background:url(画像URL) repeat-x center top;
    text-shadow:0px 0px 12px #65ffcc;
}
/*    background:url(画像URL) repeat-x center top; AQUA*/

 

HTML

 

<div id="gnavi">
    <ul class="nl">
        <li class="first"><a href="<$blog_url>" title="<$blog_name>">TOP</a></li>
        <li><a href="リンクアドレス" title="ブログテンプレートデザイン">テキストリンク</a></li>
        <li><a href="リンクアドレス" title="Webデザイン">テキストリンク</a></li>
        <li><a href="リンクアドレス" title="プログラム">テキストリンク</a></li>
        <li><a href="リンクアドレス" title="追加CSS">テキストリンク</a></li>
    </ul>
</div>

 

注意事項

画像の使用は直リンク禁止です。ダウンロードしてからお使い下さい。

※CSSの画像URLを再入力して下さい。

※HTMLのソースでTOP以外のテキストリンクは名前・リンクアドレス・タイトルを変更して下さい。

※タウンネットブログ以外で使用する場合、TOPの名前・リンクアドレス・タイトルも変更して下さい。TOPの独自タグはタウンネットブログ以外では無効です。

続きを読む...

記事URL

jQuery news ticker ヘッダーで実験

現在の位置:TOP >  Javascript / jQuery

オープンソースがwebにゴロゴロあったので、2万円ホームページの別バージョンのjQuery news tickerをヘッダーで実験してみました。もちろん実験台はこのラボログです。

 

限定してトップページのヘッダーのみでやってます。jQueryのソースコードが長すぎるので。

ソースの確認は右クリックからお願いしますm(_ _)m

 

一応動きは良好です。ただスタイルが妙でして、フェードイン部分が見えてるという結果になりました。

記事URL

カレンダーのthタグにクラスを付けて貰いました

現在の位置:TOP >  Webデザイン

カレンダーの<th>にクラスを付けて貰いました。

 

カレンダー背景_スクリーンショット

 

こんな感じが見やすいんでは?と思ったので付けました。

でも、まだブログテンプレートとしてリリースしてません。まだデザインが出来上がってないので。

 

■<th>のクラス

.calendar_body table th.sun{ background:url(/blog/blogtemplate/file/35da98a338.jpg) repeat-x; }

.calendar_body table th.sat{ background:url(/blog/blogtemplate/file/58556a5317.jpg) repeat-x; }

.calendar_body table th.mon,

.calendar_body table th.tue,

.calendar_body table th.wed,

.calendar_body table th.thu,

.calendar_body table th.fri{ background:url(/blog/blogtemplate/file/541269d4ba.jpg) repeat-x; }

 

 

 
記事URL
1 |2 |3 |4 |次へ>> 最後

ページトップへ ページトップへ
ページボトムへ

制作してる人

profile
プロフィールは個別に作りたいと思うのは自分だけでしょうか?上の画像は訓練校に居た頃制作。デッサンしたことあるけど、これはただのラクガキです。ちょっとレイヤー効果追加。

ブログテンプレート量産中!・・・でも今はPHPとjQueryで遊んでるラボの人です。

最近はラボよりもWordPressやタウンネットブログのエンジンを使ってサイト制作(仕事)をやってます。

QRコード

ブログテンプレート制作目録

RSS

RSS1.0 RSS2.0