2ch まとめブログデザインガイド デザインカスタマイズマニュアル 2 ちゃんまとめブログに 色々なパーツを組み込み 魅力的なデザインに! 1
はじめに このマニュアルは 2 ch まとめブログに色々なパーツを盛り込み 魅力的なデザインにするための マニュアルです 2 ちゃんまとめブログに相互 RSS を入れたい 2ch キャラクターのアニメーション画像を入れたい という方のために このマニュアルを用意させていただきました! 魅力的なデザインのブログを作るための第 1 歩です!! 2ch まとめブログの作成には 一番人気の高い ライブドア ブログをお勧めしています 本マニュアルも基本的にはライブドアブログを想定して解説しています 目次 1. 相互 RSS を設置しよう 2. お気に入りボタンを設置しよう 3. 2chキャラのアニメーション画像を設置しよう 4. ソーシャルブックマークボタンを設置しよう 5. ブログのヘッダー画像を作ろう 2
1. 相互 R S S を設置しよう 本章では ライブドア相互 RSS の設定と ブログへの導入方法を説明します 相互 RSS とは!? 好きなブログやウェブサイトの更新情報を ブログに素早く表示させることができる無料のサービスです ブログ同士で活用すれば 互いのブログの間で閲覧者の回遊を生むことができます ブログのアクセスアップにとても有効なツールです ライブドア相互 RSS を設定する 以下の手順でライブドア相互 RSS の設定を行いましょう 1. 以下のサイトにアクセスします URL:http://blogroll.livedoor.com/ 2. いますぐ使ってみる をクリックします 3
3. チャンネル名を入力し 作成する をクリックします 4. フィード追加 を選択し RSS を取得したいサイトの URL を入力した後 追加 する ボタンをクリックします 5. 決定する をクリックします 4
6. 相互 RSS の貼り付けコードが生成されるので 通常版 の方のコードをコピーし て利用します ライブドア相互 RSS をブログに導入する設定したライブドア相互 RSS をライブドアブログに導入してみましょう 2ch まとめビルダー 2 内臓の 3 カラムテンプレートを適用したライブドアブログへの設定を例にします CSS や HTML はお好みに修正してください 1. ライブドアブログの管理画面にて ブログ設定を選択後 PC アイコンをクリックし カスタマイズを選択します 5
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. のコードの ここに貼り付け に貼り付けま す 6
3.3. 以下のように出来上がる 緑枠の欄は 相互 RSS 欄のヘッダーになるため お好みに変更してください 3.4. 個別記事ページ カテゴリアーカイブ 月別アーカイブを選択し 同様に貼 り付けを行う 4.CSS を選択し 末尾に付属のテキストファイル BlogRollCss.txt の内容をコピー し 貼り付けます 7
5.CSS を選択し #contents h2 { の margin を以下のように 0 に変更します 6. 保存する ボタンをクリックします 7. ブログを確認します 8
ライブドア相互 RSS を 2 チャンネル分 (2 列 ) 表示する ライブドア相互 RSS について 2 チャンネル分を 2 列で表示してみましょう 基本的には前述の ライブドア相互 RSS をブログに導入する と同様ですが チャンネルを 2 つ設定し 貼り付けコードを 2 つ用意します 手順 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 の貼り付けコードを チャンネル 1 をここに貼り付け に チャンネル 2 の貼り付けコードを チャンネル 2 をここに貼り付け にそれぞれ貼り付けます 出来上がったコードをトップページ 個別記事ページ カテゴリアーカイブ 月別 アーカイブのそれぞれについて <div id="contents"> 直下に貼り付けます 9
保存する ボタンをクリックし ページを確認すると以下のように相互 RSS が 2 列 で表示されます 10
2. お気に入りボタンを設置しよう お気に入りに追加 ボタンを設置することで ユーザーが自分のブログをお気に入りに追加してくれるかもしれません もちろん 標準のブラウザ機能でできますが お気に入り ボタンを設置することで お気に入り という文字がユーザーの目にとまり お気に入りに追加する可能性が高くなるとされています 1. ライブドアブログの管理画面にて 画像 / ファイルのファイル管理を選択します 2. アップロードをクリックし 付属のファイル customutil4.js をアップロードし ます 11
3. アップロードしたファイル名上で右クリックし リンクアドレスをコピー をク リックします 4. ライブドアブログの管理画面にて ブログ設定を選択後 PC アイコンをクリックし カスタマイズを選択します 12
5. トップページを選択します 6. 以下のコードを </head> の直前に貼り付けます <script type="text/javascript" src=" 1."></script> 1. リンクアドレスをコピー でコピーしたファイルパス 7. ボタンを設置する 以下のコードがお気に入りボタンのタグとなるため これを任意の位置に入れる <input type="button" value=" お気に入りに追加 " onclick="tofavorite(location.href,document.title);" > 今回は 相互 RSS のヘッダ欄に配置してみます value= ここに任意のボタン名を設定する onclick= tofavorite(location.href,document.title); の部分が 先ほどアップロードした customutil4.js ファイルに書かれており ボタンを押したときの処理となっています 13
保存する をクリックし ページを確認してみましょう トップページと同様に 個別記事ページ カテゴリアーカイブ 月別アーカイブに も設定してください 今回はボタンを設置しましたが 画像に対しても設定できるため 以下のようにお好 みの画像に設定してもよいかもしれません <img src=" 画像パス " onclick="tofavorite(location.href,document.title);"> 14
3. 2 c h キャラのアニメーション画像を 設置しよう 2ch キャラクターのアニメーション画像配布サイトをご紹介します ( ω `)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 タグを囲むことで 画面上をキャラクターが移動しているような効果が出せます <marquee direction="right" scrollamount="12" behavior="scroll" style="width:600px;padding-left:30px;"> <img src="gif ファイルのパス " > </marquee> 参考 :http://www.htmq.com/html/marquee.shtml 15
2ch キャラクターのアニメーション画像を使ったサイト 以下のように 動くアニメーションキャラクターの設置も Gif 画像と marquee タグ を使うことで簡単に実装できます 16
4. ソーシャルブックマークボタンを設置 しよう 本章では ソーシャルブックマークボタンの設置方法をご紹介します 4.1. ソーシャルブックマークボタンのコードを取得する 4.1.1. まず 下記のサイトにアクセスします URL:http://www.addclips.org/ 4.1.2. AddClips ボタンをつくる をクリックします 4.1.3. ソーシャルブックマークボタンの種類とデザインを選びます ドロップダウンから 任意のデザインを選びましょう 17
4.1.4. ソーシャルブックマークボタンにつける機能を選びます ここでは両方チェックしておきます 4.1.5. サイトの種類を選びます ここではブログを選択します 4.1.6. ブログを選択した場合 使用しているブログの種類を選びます ご利用のブログ種類を選択しましょう ご利用のブログが無ければ その他を選択します 4.1.7. ソーシャルブックマークボタンを押したときの動きと マウスオーバーを選択 した場合はポップアップの色を選びます 18
4.1.8. 統計情報を利用するか否かを選びます はい を選ぶと ログインが必要になります 4.1.9. 利用規約を確認し AppClips ボタンをつくる をクリックします 4.1.10. ソーシャルブックマークボタンのコードが生成されるので コピーしておき ます 19
4.2. ソーシャルブックマークボタンを設置する ブログの管理ページを開き コピーしたソーシャルブックマークボタンのコードをブ ログ内の設置したい位置に貼り付けます ソーシャルブックマークボタンはこのように表示されます マウスオーバー時のポップアップはこのように表示されます 20
5. ブログのヘッダー画像を作ろう 本章では ブログのヘッダー画像の作り方をご紹介します ブログの看板となるヘッダー画像は是非とも魅力的なデザインにしていただきたいです 5.1. タイトル画像の作成 まず 以下のサイトにアクセスし ブログのタイトル画像を作成してみます URL:http://lightbox.on.coocan.jp/html/fontImage.php 任意のフォント名 ( アームド バナナ ) を選択し 任意の表示テキスト ( テスト速報 ) を 入力し セッション保存 ボタンをクリックします 作成したフォントをダウンロードします 21
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%BC 22
5.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 ピクセル 23
5.3.3. ヘッダー画像の背景色を決めます以下 色の例です 背景色コードの例ピンク :#ffe7e7 水色 :#e4f0ff 黒 :#f0f0f0 黄色 :#fffcde GIMP のツールボックスで 赤枠の部分をクリックします 色を選択するか HTML 表記の欄に色コードを入力しましょう ( 今回はピンク ) 24
ツールボックスで 塗りつぶしアイコンを選択し 新しい画像をクリックします 色がピンク色になりました 5.3.4. タイトル画像を設定 タイトル画像をドロップします ツールボックスで ファジー選択アイコンを選択します 25
タイトル画像を選択し 右クリックで赤枠のように選択します タイトル画像の上で DELETE キーを押すと 透過します 同様に キャラクター画像も透過させましょう 26
後は ファイルを JPEG 等で保存すれば完了です 出来上がりはこんな感じです 27