月別アーカイブ: 2013年11月

LINE：「LINEで送る」ボタンの設置方法

Posted on by
返信

私の周りでは友達と連絡をとる時にLINEを使用することが多くなっています。

また、LINEでURLを送信したりなど情報共有することがよくあります。

WEBページに「LINEで送る」ボタンがあれば、簡単に周りと情報共有することができるので、スマホのページに「LINEで送る」を設置しました。

「LINEで送る」ボタンを設置した時の方法をメモします。

line_send1

今はスマホを持っている人が多いので、ブログやホームページ等に設置するとユーザにとって情報共有しやすいし、サイトへの集客にもなるのでいいと思います。

■ 「LINEで送る」ボタンの設置方法

下記のURLにアクセスします。

http://media.line.naver.jp/howto/ja/

ボタンのタイプを選択、送るテキストを選択するとHTMLのソースに貼り付けるコードが表示されます。

<span>
<script type="text/javascript" src="//media.line.naver.jp/js/line-button.js?v=20131101" ></script>
<script type="text/javascript">
new jp.naver.line.media.LineButton({"pc":false,"lang":"ja","type":"a"});
</script>
</span>

表示されたコードをコピーして、設置したい場所に貼り付けるだけで、設定することができます。

また、最初の設定ではPCでは表示しない設定になっています。
PCで「LINEで送る」ボタンを表示させたい場合は、「”pc”:false」の箇所を「”pc”:true」にします。

new jp.naver.line.media.LineButton({"pc":false,"lang":"ja","type":"a"});

↓

new jp.naver.line.media.LineButton({"pc":true,"lang":"ja","type":"a"});

ただ、PCで「LINEで送る」ボタンをクリックすると公式サイトに遷移してしまうので、PCでは非表示でもいいのかなって思っています。

とても簡単に設置することができるのでブログなどをしている方におすすめです。

jQuery：「jquery.tile.js」を使用してカラムの高さを揃える

Posted on by
返信

jQueryの「jquery.tile.js」プラグインを使用して、カラムの高さを揃える方法をメモします。

「jQueryAutoHeight.js」プラグインでも良いのですが、こちらも使用しやすいです。

「jquery.tile.js」は一行の要素数を数字で指定するだけなので、とても簡単です。

下記のサイトよりダウンロードできます。

http://urin.github.io/jquery.tile.js/

横に並べて表示するカラムなどは高さが揃っていた方がきれいに見えると思うのおすすめです。

下記にjQueryの「jquery.tile.js」プラグインを使った時の使用方法を記載します。

■ jquery.tile.jsの使用方法

・全てのカラムの高さを揃える

【js】

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tile.js"></script>
<script type="application/javascript">
$(function(){
    $('.box').tile();
});
</script>

【css】

<style type="text/css">
    #main {
        width: 500px;
        margin: 0 auto;
    }
    .box {
        width: 80px;
        padding: 10px;
        border: 1px dashed #5BAEC0;
        margin: 5px;
        float: left;
        display: block;
    }
</style>

【html】

<div id="main">
    <div class="box">test</div>
    <div class="box">test<br>test<br>test<br>test<br>test</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">test</div>
</div>

【表示例】

jquery_tile1

・一行ごとの高さで揃える

【js】

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tile.js"></script>
<script type="application/javascript">
$(function(){
    $('.box').tile(4);
});
</script>

【html】

<div id="main">
    <div class="box">test</div>
    <div class="box">サンプル<br>サンプル<br>サンプル<br>サンプル<br>サンプル</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">あいうえおかきくけこさしすせそたちつてと</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">test</div>
</div>

【表示例】

jquery_tile2

※画像を出力する際は、画像を読み込む前にJSが動いてしまうので下記のようにを記述します。

$(window).load(function(){
	$('.box').tile();
});

CSS：cssでマウスカーソルを指マークにする

Posted on by
返信

テキストにマウスを置いた時のマウスカーソルは通常下記のような表示になります。

mouse_cursor1

リンクにマウスを置いた時のように、マウスカーソルを指マークにしたい時があります。

テキストにマウスを置いた時にマウスカーソルを指マークで表示する場合は、下記のように設定します。

■ CSSでマウスカーソルを指マークに設定

設定する箇所に下記のスタイルを追加します。

【CSS】

cursor: pointer;
cursor: hand;

※IE6に対応させる為、「cursor: hand;」も記述します。

【HTML】

<span style="cursor: hand; cursor:pointer;">テキスト</span>

【設定例】

テキスト

cursorプロパティには他にも色々なものがあるので、その時に応じて変更するといいと思います。

jQuery：「jQueryAutoHeight.js」を使用してカラムの高さを揃える

Posted on by
返信

jQueryのjQueryAutoHeight.jsプラグインを使用してカラムの高さを揃えた時の方法をメモします。

WEBページを作成している時に、ボックスごとに高さを揃えて表示したい場合があります。
データベースより値を出力する場合など、データによっては小さいものや大きいものなどが混雑していると出力時にレイアウトが崩れてしまいます。

高さが決まっている場合は設定する必要はないのですが、高さが決まっていない場合など「jQueryAutoHeight.js」を使用すると簡単にカラムの高さを揃えることができます。

下記のサイトよりダウンロードできます。

jQueryAutoHeight.js – 複数のカラムの高さを最大値にそろえるjQueryプラグイン

使用方法が簡単でとても使いやすいです。

■ jQueryAutoHeight.jsの使用方法

上記リンクから「jQueryAutoHeight.js」をダウンロードします。
jQueryとjQueryAutoHeight.jsを読み込み使用します。

○指定した全てのカラムの高さを揃える場合

【js】

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jQueryAutoHeight.js"></script>
<script type="application/javascript">
$(function(){
    $('.box').autoHeight();
});
</script>

【css】

<style type="text/css">
#main {
    width: 500px;
    margin: 0 auto;
}
.box {
    width: 80px;
    padding: 10px;
    border: 1px dashed #0000FF;
    margin: 5px;
    float: left;
    display: block;
}
</style>

【html】

<div id="main">
    <div class="box">test</div>
    <div class="box">test<br>test<br>test<br>test<br>test</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">test</div>
</div>

【表示例】

・使用前

jQueryAutoHeight1

・使用後

jQueryAutoHeight2

指定した要素の高さを全て同じ高さで揃えて表示されます。

○一行ごとの高さで揃える場合

【js】

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jQueryAutoHeight.js"></script>
<script type="application/javascript">
$(function(){
    $('.box').autoHeight({column:4, clear:1});
});
</script>

【html】

<div id="main">
    <div class="box">test</div>
    <div class="box">サンプル<br>サンプル<br>サンプル<br>サンプル<br>サンプル</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">あいうえおかきくけこさしすせそたちつてと</div>
    <div class="box">test</div>
    <div class="box">test</div>
    <div class="box">test</div>
</div>

【表示例】

・使用前

jQueryAutoHeight3

・使用後

jQueryAutoHeight4

高さを一行ごとに揃えて表示されます。