よく見かける「LINEで送る」ボタンの作り方です。昨日、営業を通してクライアントよりスマートフォン版HPに付けたい、という事で実装する事になりました。

この記事で書くのはボタンの作り方は、ワンクリックでアプリが起動するテキストリンクを指していますので、それ以外をお求めの方はLINEの設置方法をご覧ください。

続きを読む...

ホームページを作ってると「テンプレにリンクが少ない」と指摘を受け、サイトのフッターによくメニューリンクを設置することがあります。
ネットサーフィンなんかでもよく見かけるサイト最下部のサイトマップのようなものです。
これを又もや実験で設置いたしました。

スクロールが面倒くさいと思う方へ

左側の「▼」ボタンでページ下部へスクロールします。

続きを読む...

サイトマップのカラーを変更しました。

背景：青に黒文字、リンク色：アクアはいかん！視認性が悪いので変更。

サイトマップってあったんですか!??って思われがちですが、あるんですよね(￣∀￣)

CSS

▼サイトマップを見る

http://blog.town-nets.com/blogtemplate/sitemap.html

ここ最近、悩んでたのがコメント送信エラーの続出。

名前とコメント入力欄にいつも半角小文字で'test'と表記してましたが、それじゃ送信できないようですね。

システム側のコメント送信エラーかと思ったけど、あっさり解決しました(ﾟ∀ﾟ)

要はシステムで決まってるわけですね。

『コメント入力欄に日本語が最低でも一文字は必要』ってことが。

それだけが原因で、このブログテンプレートのリリースが遅れてたけど、これなら明日には管理側に装填できそうです。

・・・でも<img>のURLや背景のURLを書き換えるのが面倒なんだよね。あと投稿ボタンも変更しとこうかと。ブログテンプレートの「シンプルUSブルー」からソースを引っ張ってきてるから、同じボタンだと詰まらんと思ったので。

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

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

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

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

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

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

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

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

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

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

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

画像

今回のグローバルナビに使用した画像は左と中央(ポイント時)です。いずれも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の独自タグはタウンネットブログ以外では無効です。

続きを読む...

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

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

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

ブログテンプレート「BOX001」にpushの追加をしてみました。

追加はしたけど、絶対配置のボックスに対しては、押し上げる事は無効のようですね(´Д｀;)

キャッチとうまくバランスが取れないです。

「SEAGAL」のイーグルをメインに据えてヘッダー背景のデザインをしてみました。

あのテンプレではアクロバット飛行しているシーンをチョイスしましたが、今回は実戦シーン。雪景色の山地上空で戦略レーザーを回避するイーグルです。

素材をいろいろ組み合わせて作ってみました。

Photoshop使用

眩しいレーザーはブラシで線を引いただけで、バウンディングボックスを使って遠近感を出している、ただそれだけ。あとはレイヤー効果です。ついでに発射元に逆光を加えています。

ACE COMBATシリーズやりすぎなのかな？それとも、最近そのサイドストーリー（同人系？）を読みまくってるからなのか、こういった空戦シーンを想像するのが容易くなってきました。

発射元はFALKENか、ナイトレーベンか、はたまたジオペリアかもな(苦笑)・・・さすがにエクスキャリバーは無いかもしれないけど、「無い」とは言い切れないんだよな。

ちなみにbodyの背景にカラーハーフトーンのイーグル貼ったけど、「どこのテーブルクロスだろう？」というざらざらした印象を受けます。