2ch まとめブログデザインガイド
デザインカスタマイズマニュアル
２ちゃんまとめブログに
は じ め に
このマニュアルは、２ ch まとめブログに色々なパーツを盛り込み、魅力的なデザインにするための、 マニュアルです。 「2 ちゃんまとめブログに相互 RSS を入れたい・・・」 「2ch キャラクターのアニメーション画像を入れたい・・・」 という方のために、このマニュアルを用意させていただきました！ 魅力的なデザインのブログを作るための第１歩です！！ ※2ch まとめブログの作成には、一番人気の高い『ライブドア』ブログをお勧めしています。 本マニュアルも基本的にはライブドアブログを想定して解説しています。目 次
1. 相互 RSS を設置しよう 2. お気に入りボタンを設置しよう 3. ２ｃｈキャラのアニメーション画像を設置しよう 4. ソーシャルブックマークボタンを設置しよう 5. ブログのヘッダー画像を作ろう1 . 相 互 R S S を 設 置 し よ う
本章では、ライブドア相互 RSS の設定と、ブログへの導入方法を説明します。■相互 RSS とは！？
好きなブログやウェブサイトの更新情報を、ブログに素早く表示させることができる 無料のサービスです。 ブログ同士で活用すれば、互いのブログの間で閲覧者の回遊を生むことができます。 ブログのアクセスアップにとても有効なツールです。■ライブドア相互 RSS を設定する
以下の手順でライブドア相互 RSS の設定を行いましょう。 1.以下のサイトにアクセスします URL：http://blogroll.livedoor.com/
2.「いますぐ使ってみる」をクリックします。3.チャンネル名を入力し、「作成する」をクリックします。
4.「フィード追加」を選択し、RSS を取得したいサイトの URL を入力した後、「追加 する」ボタンをクリックします。
6.相互 RSS の貼り付けコードが生成されるので、「通常版」の方のコードをコピーし て利用します。 ■ライブドア相互 RSS をブログに導入する 設定したライブドア相互 RSS をライブドアブログに導入してみましょう。 ※2ch まとめビルダー 2 内臓の 3 カラムテンプレートを適用したライブドアブログへ の設定を例にします。 ※CSS や HTML はお好みに修正してください。 1.ライブドアブログの管理画面にて、ブログ設定を選択後、PC アイコンをクリックし、 カスタマイズを選択します。
2.トップページを選択します。 3.相互 RSS の貼り付けコードに以下の要領でコードを追加し、貼り付けます。 ※<div id="contents">の直下に貼り付けます。 3.1.以下のコードをコピーする。 <h2 class="headline-title">テスト速報ヘッドライン</h2> <div class="blogroll_wrapper" > <div class="blogroll_innner"> ここに貼り付け </div> </div> 3.2.相互 RSS 貼り付けコードを 2.1.のコードの「ここに貼り付け」に貼り付けま
3.3.以下のように出来上がる。 ※緑枠の欄は、相互 RSS 欄のヘッダーになるため、お好みに変更してください。 3.4.個別記事ページ、カテゴリアーカイブ、月別アーカイブを選択し、同様に貼 り付けを行う。 4.CSS を選択し、末尾に付属のテキストファイル「BlogRollCss.txt」の内容をコピー し、貼り付けます。
5.CSS を選択し、#contents h2 { の margin を以下のように 0 に変更します。
6.「保存する」ボタンをクリックします。
■ライブドア相互 RSS を２チャンネル分（２列）表示する ライブドア相互 RSS について、２チャンネル分を２列で表示してみましょう。 基本的には前述の「■ライブドア相互 RSS をブログに導入する」と同様ですが、 チャンネルを２つ設定し、貼り付けコードを２つ用意します。 手順 3.1.にてコピーするコードが以下のようになります。 <h2 class="headline-title">テスト速報ヘッドライン</h2> <div class="blogroll_wrapper" > <div class="blogroll_innner"> チャンネル 1 をここに貼り付け </div> <div class="blogroll_innner"> チャンネル 2 をここに貼り付け </div> </div> チャンネル１の貼り付けコードを「チャンネル 1 をここに貼り付け」に、チャンネル ２の貼り付けコードを「チャンネル 2 をここに貼り付け」にそれぞれ貼り付けます。 出来上がったコードをトップページ、個別記事ページ、カテゴリアーカイブ、月別 アーカイブのそれぞれについて、<div id="contents">直下に貼り付けます。
「保存する」ボタンをクリックし、ページを確認すると以下のように相互 RSS が２列 で表示されます。
2 . お 気 に 入 り ボ タ ン を 設 置 し よ う
「お気に入りに追加」ボタンを設置することで、ユーザーが自分のブログをお気に入りに 追加してくれるかもしれません。もちろん、標準のブラウザ機能でできますが、「お気に 入り」ボタンを設置することで、「お気に入り」という文字がユーザーの目にとまり、お 気に入りに追加する可能性が高くなるとされています。 1.ライブドアブログの管理画面にて、画像/ファイルのファイル管理を選択します。 2.アップロードをクリックし、付属のファイル「customUtil4.js」をアップロードし ます。3.アップロードしたファイル名上で右クリックし、「リンクアドレスをコピー」をク リックします。
4.ライブドアブログの管理画面にて、ブログ設定を選択後、PC アイコンをクリックし、 カスタマイズを選択します。
5.トップページを選択します。
6.以下のコードを</head>の直前に貼り付けます
<script type="text/javascript" src="※1."></script> ※1. 「リンクアドレスをコピー」でコピーしたファイルパス
7.ボタンを設置する
以下のコードがお気に入りボタンのタグとなるため、これを任意の位置に入れる。 <input type="button" value="お気に入りに追加"
onClick="toFavorite(location.href,document.title);" > 今回は、相互 RSS のヘッダ欄に配置してみます。
「保存する」をクリックし、ページを確認してみましょう。 ※トップページと同様に、個別記事ページ、カテゴリアーカイブ、月別アーカイブに も設定してください。 今回はボタンを設置しましたが、画像に対しても設定できるため、以下のようにお好 みの画像に設定してもよいかもしれません。 <img src="画像パス" onClick="toFavorite(location.href,document.title);">
3 . ２ ｃ ｈ キ ャ ラ の ア ニ メ ー シ ョ ン 画 像 を
設 置 し よ う
２ｃｈキャラクターのアニメーション画像配布サイトをご紹介します。 （´・ω・｀）gif 屋 ■URL：http://syobogif.seesaa.net/article/11867811.html matsucon ■URL：http://matsucon.net/material/mona/icon04.html 使い方としては、画像アップロードで Gif ファイルをアップロードし、「リンクアドレ スをコピー」でファイルパスをコピーします。 コピーしたアドレスを img タグなどに設定し、お好みの箇所に配置します。 <img src="Gif ファイルのパス" > また、画像をスクロールさせたい場合は marquee タグで img タグを囲むことで、画面■２ｃｈキャラクターのアニメーション画像を使ったサイト
以下のように、動くアニメーションキャラクターの設置も、Gif 画像と marquee タグ を使うことで簡単に実装できます
4 . ソ ー シ ャ ル ブ ッ ク マ ー ク ボ タ ン を 設 置
し よ う
本章では、ソーシャルブックマークボタンの設置方法をご紹介します。4.1.ソーシャルブックマークボタンのコードを取得する。
4.1.1.まず、下記のサイトにアクセスします。 URL：http://www.addclips.org/ 4.1.2.「AddClips ボタンをつくる」をクリックします。 4.1.3.ソーシャルブックマークボタンの種類とデザインを選びます。 ドロップダウンから、任意のデザインを選びましょう。4.1.4.ソーシャルブックマークボタンにつける機能を選びます。 ここでは両方チェックしておきます。 4.1.5.サイトの種類を選びます。 ここではブログを選択します。 4.1.6.ブログを選択した場合、使用しているブログの種類を選びます。 ご利用のブログ種類を選択しましょう。 ※ご利用のブログが無ければ、その他を選択します。 4.1.7.ソーシャルブックマークボタンを押したときの動きと、マウスオーバーを選択 した場合はポップアップの色を選びます。
4.1.8.統計情報を利用するか否かを選びます。 「はい」を選ぶと、ログインが必要になります。
4.1.9.利用規約を確認し、「AppClips ボタンをつくる」をクリックします。
4.1.10.ソーシャルブックマークボタンのコードが生成されるので、コピーしておき ます。
4.2.ソーシャルブックマークボタンを設置する。
ブログの管理ページを開き、コピーしたソーシャルブックマークボタンのコードをブ ログ内の設置したい位置に貼り付けます。
ソーシャルブックマークボタンはこのように表示されます。
5 . ブ ロ グ の ヘ ッ ダ ー 画 像 を 作 ろ う
本章では、ブログのヘッダー画像の作り方をご紹介します。 ブログの看板となるヘッダー画像は是非とも魅力的なデザインにしていただきたいです。5.1.タイトル画像の作成
まず、以下のサイトにアクセスし、ブログのタイトル画像を作成してみます。 URL：http://lightbox.on.coocan.jp/html/fontImage.php 任意のフォント名(アームド・バナナ)を選択し、任意の表示テキスト(テスト速報)を 入力し、「セッション保存」ボタンをクリックします。 作成したフォントをダウンロードします。5.2.キャラクター画像を盛り込む
お好みでキャラクター画像を盛り込んでもよいかもしれません。 キャラクター画像は色々なサイトに散らばっていますが、今回は以下のサイトから ダウンロードしました。 URL：http://www.ac-illust.com/main/search_result.php?search_word= %E3%82%AD%E3%83%A3%E3%83%A9%E3%82%AF%E3%82%BF %E3%83%BC5.3.フリーソフト「GIMP」を使って編集する
タイトル画像とキャラクター画像がそろいましたね。 早速これらを編集してヘッダー画像を作りましょう。 5.3.1.フリーソフト「GIMP」をダウンロードする 以下のサイトにアクセスし、GIMP をダウンロード・インストールします。 URL：http://www.geocities.jp/gimproject2/download/gimp-download.html 5.3.2.GIMP を起動します。 「ファイル」から「新しい画像」をクリックし、幅を 1178、高さを 95 に設定し、 OK ボタンをクリックします。 3 カラムの場合：1178×95 ピクセル 2 カラムの場合：978×95 ピクセル5.3.3.ヘッダー画像の背景色を決めます 以下、色の例です。 ■背景色コードの例 ピンク：#ffe7e7 水色：#e4f0ff 黒：#f0f0f0 黄色：#fffcde GIMP のツールボックスで、赤枠の部分をクリックします。 色を選択するか、HTML 表記の欄に色コードを入力しましょう（今回はピンク）。
ツールボックスで、塗りつぶしアイコンを選択し、新しい画像をクリックします。
色がピンク色になりました。
5.3.4.タイトル画像を設定
タイトル画像をドロップします。
タイトル画像を選択し、右クリックで赤枠のように選択します。
タイトル画像の上で DELETE キーを押すと、透過します。
後は、ファイルを JPEG 等で保存すれば完了です。 出来上がりはこんな感じです。
