mixiチェック
BlogPeopleを使った相互リンクの設置方法です。
ホームページやブログを見ていると、BlogPeopleのパーツを利用して相互リンクを設置されている方が多くいます。
しかも、スクロールバーを付けてサイズを変更したり、新着順に並び替える等、色々とカスタマイズされています。
そこで、BlogPeopleを使った相互リンクの設置方法を紹介します。
無事設定出来たら、濱口優(よゐこ)のマネをしながら「出来たど～!!」と一言コメント下さい。
設置方法(新着順に並び替え)
「BlogPeople」に無料会員登録し、ログインします。
＜設置方法の手順一覧＞
表示形式の設定
↓
基本設定
・リンクの表示順、最新
・更新マーク表示時間、時間を設定
・リンクサイト名の前に表示するグラフィック、画像を選択
↓
詳細設定
・リンクの出力形式、タグ形式
・クリック後の表示先の指定 ⇒ 表示先を指定「_blank」を入力
・リンクリストの出力形式と文字コード、出力形式 「JavaScript」
・リンクリストの出力形式と文字コード、文字コードを選択(環境により異なります。)
↓
「コードの作成・更新」ボタンクリックしてコード生成します。
↓
表示されたスクリプトをホームページやブログに貼り付けます。
文字コードを選択は、環境により選択する項目が変わります。
実際に設置して、文字化けしたり、上手く表示出来ていない場合はここを変更して再チャレンジとなります。
設置方法(ホームページ、ブログ)
ホームページやブログに、先程のスクリプトを貼り付けます。
「
<div class="scroll">
ここに生成したコードを入力します。
<div>
」
divのタグも必ず忘れずに入力して下さい。
サイズ変更、スクロールバーの表示
次に、スタイルシートを設定します。
スタイルシートの一番最後に下記のタグを追加します。
スタイルシートを利用する事で、色々とカスタマイズする事が可能となるというメリットがあります。
「
/* =============================================== */
/** BlogPeople相互リンク(追記) */
/* =============================================== */
.scroll {
overflow:auto;
width:100%;
height:200px;
text-align:left;
border: 1px #67CB66 dotted;
}
」
heightは高さを意味しています。
なので、height:200px;をheight:250px;の様に自由に書き換えて構いません。
borderは枠を意味しています。
#67CB66は、色を意味しています。
#67CB66は、16進法(0123456789ABCDEF)の範囲で書き換えても構いません。(色が変わるだけです。)
borderの一行を消しても構いません。
完成表示
「
」
こんな感じで、相互リンクのツールが表示されます。
無事、設置完了したでしょうか？
簡単な変更方法を紹介しただけなので、スタイルシートに詳しい方は色々とカスタマイズを楽しんで下さい。
