 | ブログ簡単パワーアップ Movable Type スーパーカスタマイズテクニック 藤本 壱 (2005/11/08) 技術評論社 価格： ￥ 3,444 (税込み) ※この商品の詳細を見る ■内容紹介 テンプレートの書き換え、JavaScriptの追加、プラグインの導入など、具体的なカスタマイズ手順を解説。Blogを最大限にパワーアップするテクニックを伝授。Movable Type3.1xと最新版の3.2に対応 |
■出版社 / 著者からの内容紹介
本書は、プラグイン等を利用してMTをカスタマイズする書籍です。既刊の「即実践！ブログ徹底カスタマイズ術」と「ブログ自由自在Movable Type上級カスタマイズ術」の中間の層に対して、やや高度な内容のカスタマイズの方法を解説するものです。
 | 自分で作る blog ツール 石川 直人 (2005/03/30) ソフトバンククリエイティブ 価格： ￥ 2,310 (税込み) ※「自分で作るblogツール」の詳細を見る ■内容紹介 人気のライトウェイト言語「PHP」を使った基本的なblogツールの作り方から、Webサイト関連技術に対応した各種機能の実装までを分かりやすく解説。自作ブログツールで差をつけろ! |
■出版社 / 著者からの内容紹介
本書では、TrackBackやRSSといったblog的な機能を、人気のライトウェイトスクリプト言語「PHP」を使って実装してゆく。本書で後半で解説している各種の技術を取り込んで、一味違う個性的なblogツールの開発に挑戦してみるのもいいだろう。
テンプレートによっては、ページタイトル下部に横型のカレンダーが表示されるように設定されていますが、ページタイトル下部のカレンダー表示を削除するには、以下の手順で作業して下さい。
- 管理者ページ＞テンプレートの設定＞テンプレートの一覧より編集画面を表示し、
該当するテンプレートを選択 - <!--calendar-->
<div id="Calendar">
<p style="margin:0px 0px 0px 0px;">
<a href="<%prev_month_link>" title="「<%prev_year>年<%prev_month>月」を表示する"><%prev_year>/<%prev_month></a> ｜
<!--calender2--><span class="day"><%days></span><!--/calender2-->
｜ <a href="<%next_month_link>" title="「<%next_year>/<%next_month>月」を表示する"><%next_year>/<%next_month></a>
</p>
</div>
<!--/calendar-->
の部分を削除する - スタイルシートの編集より、/* 上部カレンダー設定 */ 部分の
- #Calendar {
text-align: center;
font-size: 12px;
color: #997700;
margin-top: 10px;
}
#Calendar .day {
margin-right: 2.5px;
padding-right:3px;
}
#Calendar a {
font-weight: bold;
color: #cc9900; text-decoration : underline;
}
#Calendar a:hover {
color:#ff3300; text-decoration : underline;
}
の部分を削除する
以下のスタイルシート（CSS）の赤字部分を変更してください。
■ ブログタイトル部分の背景色を変更する場合
#headBlock {
background-color : #123456;
}
※参考； HTMLリファレンス - カラー編（RGB）
■ ブログタイトル部分の背景画像を変更する場合
#headBlock {
background : #123456 url("画像へのパス（URL）");
}
※備考； "#123456" は、背景画像が表示されない時に表示する色を指定
▼ 背景画像の位置を指定する場合
#headBlock {
background : #123456 url("画像へのパス（URL）") no-repeat fixed 50% 30%;
}
● 関連する記事 ⇒ ※背景イメージを指定するCSS＆背景画像（フリー素材）
▼ おすすめブログ カスタマイズ関連書籍
さすが!と言わせる FC2ブログ徹底攻略術 ポータル プロバイダ別blogデザインカスタマイズ事典
そこで、記事部分の日付表示をさせないようにする設定方法を説明します。
ここでは、「blog298_10-3」を例に説明します。
（※テンプレートによって記述が違う場合がありますので注意してください）
▼記事の日付を表示しない設定方法
- 管理者ページ＞テンプレートの設定＞テンプレートの一覧より編集画面を表示
- テンプレートの編集画面が開いたら、キーボードの「Ctrl」ボタンと「F」ボタンを同時に押す
- 検索ボックスが出てくるので、「 <a href="<%topentry_link>"><%topentry_year>/<%topentry_month>/<%topentry_day>(<%topentry_wayoubi>)
</a> 」と入力して、エンターキーを押してください - 反転表示された上記の該当部分（赤字）を全て削除して下さい
- 更新ボタンを押して完了です。
部分的に削除したい場合には、下記の該当する部分だけ削除して下さい。
▼各パーツの説明
※ <%topentry_link> ⇒ 記事ページのURL
※ <%topentry_year> ⇒ 投稿した年
※ <%topentry_month> ⇒ 投稿した月
※ <%topentry_day> ⇒ 投稿した日
※ <%topentry_wayoubi> ⇒ 投稿した曜日
苦労して書き上げた文章を、記事引用の表示なく無断で利用されると、あまり気分の良いものではありません。
そこで、コピーされたくない文章を、マウスで選択（ドラッグ）できなくします。（ＩＥのみ有効）
■ ページ全体の文章を、マウスで選択できなくする方法
<body onselectstart="return false">
■ 部分的に文章を、マウスで選択できなくする方法<p onselectstart="return false">P 、DIV などブロック要素に適用<p>
▼ 実際の適用例ドラッグしてみてください！ ⇒ 無料レンタル ブログ比較評価
※ 注意 ； この方法は、ＩＥ でのみ有効です。
※URLを指定するとサイトのサムネイル画像を自動生成し簡単にホームページに組み込めます
▼サンプルサムネイル
■無料ホームページ作成講座ブログ※ホームページ作成で基本となるHTML基礎知識を中心に解説。
アクセスアップの為にHTMLの基礎を身につけSEOに心がけよう
▼「サムネイル生成ツール利用上の注意」より記事抜粋
ソーシャルブックマークや人気サイトランキング、個別テーマのリンク集のような、同じサイトの画像を繰り返し呼び出す場合、過去に生成された画像をキャッシュし再利用しておりますので、スムーズに表示することができます。
一方で、1ページあたりの新規生成サムネイルが5枚を超える場合、ページの表示がもたつくことがございますので、動的に表示される検索結果などに組み込む場合は1ページあたり3〜5枚程度のご利用にとどめてください。
・あなたのブログに最適なRSSアイコンを作成！
・RSS説明ページを自動で生成！
・RSSリーダーへの一発登録ボタンつき！
・利用は無料！
※ＦＣ２ブログ 共有プラグイン登録済み
「反射能力テスト」のミニバージョンです。ブログパーツとしてもご利用できます。
以下のソースをサイドメニューなどに挿入して下さい。
◎ＦＣ２ブログの場合
<iframe src="http://link298.blog2.fc2.com/file/hnt.html" height="190px" width="162px"
scrolling="no" frameborder="0" id="hnt"><a
href="http://weblog29.blog31.fc2.com/">インターネット サービス情報</a></iframe>
◎ＦＣ２ブログ以外の場合
<iframe src="http://www3.ocn.ne.jp/~motiya/game/hnt.html" height="190px" width="162px"
scrolling="no" frameborder="0" id="hnt"><a
href="http://weblog29.blog31.fc2.com/">インターネット サービス情報</a></iframe>
※表示例 ※実際の利用例 ⇒ バックリンク ブログ（右メニュー最下部）
scrolling="no" frameborder="0" id="hnt">href="http://weblog29.blog31.fc2.com/">インターネット サービス情報 ■無料 JavaScript ゲーム
※備考；
※ＦＣ２ブログ 共有プラグイン登録済み
「オセロゲーム 1人プレイ用」のミニバージョンです。ブログパーツとしてもご利用できます。
以下のソースをサイドメニューなどに挿入して下さい。
◎ＦＣ２ブログの場合
scrolling="no" frameborder="0" id="osero"><a
href="http://weblog29.blog31.fc2.com/">インターネット サービス</a></iframe>
◎ＦＣ２ブログ（背景色、黒系統バージョン）
scrolling="no" frameborder="0" id="osero"><a
href="http://weblog29.blog31.fc2.com/">インターネット サービス</a></iframe>
◎ＦＣ２ブログ以外の場合
scrolling="no" frameborder="0" id="osero"><a
href="http://weblog29.blog31.fc2.com/">インターネット サービス</a></iframe>
※表示例
■無料 JavaScript ゲーム
※備考；
◎HTMLソース部分
<!--mainEntryBase--> 〜 <!--/mainEntryBase--> で囲まれている部分がエントリー記事内容部分です緑字の部分は、テンプレートにより異なる場合もありますので注意して下さい
※赤字の部分を挿入したいところに追加して下さい。
<!--mainEntryBase-->
<div class="mainEntryBase">
<div class="EntryBody_cm">
→ ※エントリー記事部分、広告挿入欄のサンプル 上部スペース ←
</div>
<div class="editentry">
<a href="./admin.php?mode=editentry&no=<%topentry_no>" title="記事を編集する">
<%topentry_year>/<%topentry_month>/<%topentry_day>(<%topentry_wayoubi>)</a>
</div>
<div class="mainEntryBody"><%topentry_body></div>
<div class="mainEntryMore">
<!--more_link-->
≫<a href="<%topentry_link>#more">[<%topentry_title>]の続きを読む</a>
<!--/more_link-->
<!--more-->
<a name="more" id="more"></a><%topentry_more>
<!--/more-->
<div class="EntryBody_cm">
<hr />
→ ※エントリー記事部分、広告挿入欄のサンプル 下部スペース ←
<p class="cm_banner">
◎ 広告のサンプル
</p>
</div>
</div>
<div class="mainEntryDate">
<a href="<%topentry_category_link>" title="カテゴリ一分類"><%topentry_category></a> |
<!--allow_tb-->
<a href="<%topentry_link>#trackback">トラックバック：<%topentry_tb_num></a> |
<!--/allow_tb-->
<!--deny_tb-->
<!--/deny_tb-->
<!--allow_comment-->
<a href="<%topentry_link>#comment">コメント：<%topentry_comment_num></a> |
<!--/allow_comment-->
<a href="#page_top" title="ページトップへ"> Page Top↑</a>
<!--deny_comment-->
<!--/deny_comment-->
</div>
</div>
<!--/mainEntryBase-->
◎CSSソース追加部分
.EntryBody_cm {
margin: 10px 0px 10px 0px;
font-size: 14px; color: #6C6C6C;
}
.cm_banner {
text-align: center;
margin: 5px 0px 2px 0px;
}
※margin の左右部分（0pxの部分）をとると記事部分の幅が広くなりレイアウトが崩れます
◎ カテゴリー＆エントリー毎にタイトルを変える
一般的なブログでは、ブログタイトルが全ページに適用される事が多く、カテゴリーページやエントリーページ（記事表示）ごとにタイトルが変化しないものが多いようです。
ＦＣ２ブログでは、ＦＣ２独自タグを使うことで、カテゴリーページやエントリーページ毎にタイトルを変える事ができますが、ここでは、そのために必要なFC2ブログ テンプレート中で使える変数について説明します。
※備考； ＦＣ２ブログ テンプレート中で使える変数一覧
■カテゴリー＆エントリー毎にタイトルを変える為に必要な変数
- <%blog_name>：ブログのタイトルを表示
- <%sub_title>：サブタイトルを表示。エリアによりタイトルが変わる。
※トップページでは表示しない
※カテゴリーページの時は、カテゴリー名を表示
※エントリー記事ページの時は、個別エントリー名を表示
※月別アーカイブページの時は、年・月・日の数字を表示
※検索結果ページの時の時は、検索語句を表示 - <!--index_area--> 〜トップページにのみ表示〜 <!--/index_area>
- <!--category_area--> 〜カテゴリーページにのみ表示〜 <!--/category_area>
- <!--permanent_area--> 〜個別エントリーページにのみ表示〜 <!--/permanent_area>
- <!--date_area--> 〜月別アーカイブページにのみ表示〜 <!--/date_area>
- <!--search_area--> 〜検索結果ページにのみ表示〜 <!--/search_area>
エリアタグは、notをつける事でその「エリア以外」で表示させることもできます。
※例 ： <!--not_index_area--> 〜トップページ以外に表示〜 <!--/not_index_area-->
検索エンジンでキーワードを調べると、そのキーワードの検索エンジンでの現在の順位がわかるわけだが、気になるのは、前後に表示されているサイトとの差ではないだろうか？
「BIGLOBE」でキーワードを調べると、検索結果の URL の左側にオレンジ色の縦棒が表示されるが、このオレンジ色の棒の数は「検索結果の強さ」を現しているようである。
例えば、「無料 ブログ テンプレート」で検索すると、３位以下のサイトとは、かなりの差があるが、「ブログ テンプレート」では、３位以下のサイトとの開きもそれほどではない。
この開きが大きいと、現在のキーワード表示順位を上げるのは大変だが、開きが小さければ、ＳＥＯ対策の強化をすれば、キーワード表示順位を上げるのも、それほど難しくは無いと考えられる。
逆に言うと、差が非常に大きかった場合には、無理に、そのキーワード表示順位を上げる事を考えるよりも、表示されるタイトルなどを再考してみる方が、ＳＥＯ対策としての効率がいいと言えるかもしれない。
※備考；
「BIGLOBE」は Google から検索サービスの提供を受けており、Google の検索結果と同じ順位で同じ結果が表示されます。
バンコムバナー交換は、日本最古の無料バナー交換システムです。
本会独自のバナーの組み合わせ表示システムにより、還元率が８００％にまでなります。
テキスト文交換や、ニュースやおみくじと連動した表示もあります。
無料で自サイトの宣伝ができ、登録する個人情報も非常に少ないです。
▼バナー交換システムとは
バナー交換システムとは、お互いのホームページやブログでバナー広告を交換して宣伝しようというシステムです。
いいかえれば、あなたのホームページやブログに、他人のバナー広告を無料で掲載し宣伝する代わりに、他の人のページに、あなたのバナー広告を掲載し宣伝してもらうものです。
