2011年04月26日 (火) | Edit |
横メニューをタイトルの下に 表示させると 一見 HTML風の
ブログが 完成します。見た目だけでなく、アクセスを集めたいカテゴリーや
ページに誘導することができるので FC2ブログのテンプレートをカスタマイズしてみましょう。
カスタマイズの方法は、意外にも 簡単で、テンプレートのHTML部分と CSS部分に それぞれ 以下のタグを挿入するだけです。 CSS部分は、任意の場所に 挿入します。（私の場合は、一番下部分に挿入しました）
初心者さんや 何が何だか ハテナ？という方は、一番下部分に挿入するのが 安全です。
HTML部分に挿入するタグ。（右クリックで すべて 選択し コピーしてくださいね）
続いて CSS 部分に挿入するタグは、以下になります。
同じように 右クリックでコピー し 貼りつけで完了です。
※ 間違えた時 修正しやすいので コメントアウトのタグ → <!-- -->
とか スタイルシートの 記述されている ▲ */は、そのまま コピー貼ります。
※ スタイルシートの中には、メニューボタンの背景や マウスが乗ったときのリンク色
の記述が あるので 任意で webカラーを 変えていきます。
※ ブラウザによっては、表示が 崩れるので メニューを増やしすぎないように
※ 記事 カテゴリーへの リンク部分は 修正してくださいね。
ちなみに 当ブログの横メニューは 以下のようなリンク先にしました。
記事1 部分には プロフィールを書き プロフィールを書いた個別記事（個別エントリー）
にリンクを張っています。
どうしても 見せたい 決め？ページがある場合は、
blog-entry-△◇◎.htmlに リンクを張ります。
記事が 次々と 更新されていく内容については、
カテゴリーにリンクを張るようにします。
blog-category-▼.html
転載元： fc2ブログテンプレート工房さん カスタマイズby 西ちゃん
ブログが 完成します。見た目だけでなく、アクセスを集めたいカテゴリーや
ページに誘導することができるので FC2ブログのテンプレートをカスタマイズしてみましょう。
カスタマイズの方法は、意外にも 簡単で、テンプレートのHTML部分と CSS部分に それぞれ 以下のタグを挿入するだけです。 CSS部分は、任意の場所に 挿入します。（私の場合は、一番下部分に挿入しました）
初心者さんや 何が何だか ハテナ？という方は、一番下部分に挿入するのが 安全です。
HTML部分に挿入するタグ。（右クリックで すべて 選択し コピーしてくださいね）
続いて CSS 部分に挿入するタグは、以下になります。
同じように 右クリックでコピー し 貼りつけで完了です。
※ 間違えた時 修正しやすいので コメントアウトのタグ → <!-- -->
とか スタイルシートの 記述されている ▲ */は、そのまま コピー貼ります。
※ スタイルシートの中には、メニューボタンの背景や マウスが乗ったときのリンク色
の記述が あるので 任意で webカラーを 変えていきます。
※ ブラウザによっては、表示が 崩れるので メニューを増やしすぎないように
※ 記事 カテゴリーへの リンク部分は 修正してくださいね。
ちなみに 当ブログの横メニューは 以下のようなリンク先にしました。
記事1 部分には プロフィールを書き プロフィールを書いた個別記事（個別エントリー）
にリンクを張っています。
どうしても 見せたい 決め？ページがある場合は、
blog-entry-△◇◎.htmlに リンクを張ります。
記事が 次々と 更新されていく内容については、
カテゴリーにリンクを張るようにします。
blog-category-▼.html
転載元： fc2ブログテンプレート工房さん カスタマイズby 西ちゃん
2007年08月08日 (水) | Edit |
シェアブログbaに投稿
メールでご質問頂きました ブログタイトルを自作画像に変える方法です。
テンプレートによっても いじる部分や いじった事で
修正不能になる場合もあるので 必ず いじる前には 複製（コピー）を とっておいて下さいね。
手順１：ホームページビルダーで
ウエブアートデザイナーを起動させます。
ブログタイトル文字を入れた ロゴを作成します。
画像も 挿入できますので あらかじめ ファイルに
画像も 入れておくと便利です。作り終わったら
gifファイルかjpgファイルで 保存します
ホームページ・ビルダー11 通常版 ガイドブック付(半額キャンペーン) [79280]
↓
手順２：fc2ブログに戻って ファイルのアップロードをします。
普通に 記事を書く要領で ファイルをアップロードすると・・
画像のアドレスが 表示されます。
↓
<a href="http://blog-imgs-18.fc2.com/c/h/o/chokobank/bloglogo.gif" target="_blank"><img src="http://blog-imgs-18.fc2.com/c/h/o/chokobank/bloglogo.gif" alt="★ちょこっとブログ★初心者がアフィリエイトで稼ぐコツ" border="0"></a><br clear="all">
こんな文字列が出ますが
必要なアドレスは
この部分だけです
↓
http://blog-imgs-18.fc2.com/c/h/o/chokobank/bloglogo.gif
手順３：画像ファイルのアドレスを確認して画像のURL部分を挿入するだけです
テンプレートのHTMLで 以下の部分を見つけます。
テンプレートによって 違う書き方かもしれませんが。(^^;
↓
～
<h1><a href="<%url>"><%blog_name></a></h1> ～
↓
これを次のように書き換えます。
～
<h1><a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><img src="画像URL" border="0"></a></h1> ～
これで バッチリOKのはずです
例
～
<h1><a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><img src="http://blog-imgs-18.fc2.com/c/h/o/chokobank/bloglogo.gif" border="0"></a></h1> ～
ただ HTMLと にらめっこして この部分を探し出すのは
大変です
ブログのHTML編集で 検索する方法は・・編集画面で
キーボードの「Ctrl」と「F」キーを同時に 押して 検索ボックスを作ります
検索ボックスが出来たら
冒頭の探したいタグを 挿入してあげれば
一発で探せます。青く反転するはずです。
<h1><a href="<%url>">を
検索すれば 良いという事ですね
ブログの仕様によっては 同じ場所に挿入出来ないかもしれないですし
本当はSEOから すると タイトルはロゴじゃない方が良いんですけどね。(^o^)ゞ
ま！色々いじって 破壊するのも１つの勉強かと思います
頑張って下さいね
メールでご質問頂きました ブログタイトルを自作画像に変える方法です。
テンプレートによっても いじる部分や いじった事で
修正不能になる場合もあるので 必ず いじる前には 複製（コピー）を とっておいて下さいね。
手順１：ホームページビルダーで
ウエブアートデザイナーを起動させます。
ブログタイトル文字を入れた ロゴを作成します。
画像も 挿入できますので あらかじめ ファイルに
画像も 入れておくと便利です。作り終わったら
gifファイルかjpgファイルで 保存します
ホームページ・ビルダー11 通常版 ガイドブック付(半額キャンペーン) [79280]
↓
手順２：fc2ブログに戻って ファイルのアップロードをします。
普通に 記事を書く要領で ファイルをアップロードすると・・
画像のアドレスが 表示されます。
↓
<a href="http://blog-imgs-18.fc2.com/c/h/o/chokobank/bloglogo.gif" target="_blank"><img src="http://blog-imgs-18.fc2.com/c/h/o/chokobank/bloglogo.gif" alt="★ちょこっとブログ★初心者がアフィリエイトで稼ぐコツ" border="0"></a><br clear="all">
こんな文字列が出ますが
必要なアドレスは
この部分だけです
↓
http://blog-imgs-18.fc2.com/c/h/o/chokobank/bloglogo.gif
手順３：画像ファイルのアドレスを確認して画像のURL部分を挿入するだけです
テンプレートのHTMLで 以下の部分を見つけます。
テンプレートによって 違う書き方かもしれませんが。(^^;
↓
～
<h1><a href="<%url>"><%blog_name></a></h1> ～
↓
これを次のように書き換えます。
～
<h1><a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><img src="画像URL" border="0"></a></h1> ～
これで バッチリOKのはずです
例
～
<h1><a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><img src="http://blog-imgs-18.fc2.com/c/h/o/chokobank/bloglogo.gif" border="0"></a></h1> ～
ただ HTMLと にらめっこして この部分を探し出すのは
大変です
ブログのHTML編集で 検索する方法は・・編集画面で
キーボードの「Ctrl」と「F」キーを同時に 押して 検索ボックスを作ります
検索ボックスが出来たら
冒頭の探したいタグを 挿入してあげれば
一発で探せます。青く反転するはずです。
<h1><a href="<%url>">を
検索すれば 良いという事ですね
ブログの仕様によっては 同じ場所に挿入出来ないかもしれないですし
本当はSEOから すると タイトルはロゴじゃない方が良いんですけどね。(^o^)ゞ
ま！色々いじって 破壊するのも１つの勉強かと思います
頑張って下さいね
2007年07月12日 (木) | Edit |
2006年11月12日 (日) | Edit |
シェアブログtaguに投稿
fc2ブログで カテゴリーをツリー化する方法を・・試してみました。
ブログは 過去記事が探しにくいという欠点を補ってくれるものなので
お小遣い系のアフィリエイトや物販系のアフィリエイトにも
役立つのでは無いかと思います。
カテゴリーのツリー化というのは・・・こんな感じになるもの↓
写真
├風景
├人物
├花
└雑貨
少し前から 試したかったのですが どうにも私には理解不能で（笑）
でも この方法なら コピペで すぐ出来たので紹介しますね。
この方法 スクリプトは ワンダと巨像と土と空さまやＪＵＧＥＭカスタマイズスクリプトva2
を参考に記しています。
■■■ 手順１ スクリプトの挿入 ■■■
管理画面に行き テンプレートの設定をクリック→テンプレートの修正をクリックします。
ＨＴＭＬ編集画面とＣＳＳの編集画面があらわれるので
ＨＴＭＬ編集を します。
ＨＴＭＬの ソースを スクロールバーで下に移動させていくと
最後の方に </body> があります。
</body>の すぐ前に以下の スクリプトを書き入れます。書き入れると
行っても コピーペーストで大丈夫です。
（コピペとは？ コピーしたい部分を ドラッグさせておいて青く反転したら 右クリックでコピー
書き入れる場所で 右クリックで貼り付けをクリックする事ですよ(^o^)ゞ）
<!--★ツリー化スクリプト★-->
<script type="text/javascript">
<!--
function makeTreeElements (idName,objList) {
if (!objList.innerHTML) return;
var objLink = objList.getElementsByTagName('a')[0];
var linkUrl = objLink.getAttribute('href');
if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) {
var tmpText = objList.innerHTML.split("⇒");
tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
this.base = Array('<a href="',linkUrl,'">',tmpText[0],'</a>').join('');
this.elem = objLink.innerHTML;
} else if (idName.indexOf('entry') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/\((\d\d\/\d\d)\)/);
this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
} else if (idName.indexOf('link') > -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/\[(.+)\](.+)/) ) {
this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'" target="_blank">',RegExp.$2,'</a>').join('');
}
} else if (idName.indexOf('category') > -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/\[(.+)\](.+)/) ) {
this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$2).join('');
}
} else if (idName.indexOf('archive') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/\((\d+)\)/);
var tmpCnt = Array(' (', RegExp.$1, ')').join('');
tmpText = objLink.innerHTML;
tmpText.match(/(.+) (\d+)/);
this.base = Array('<strong>',RegExp.$2,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$1,'</a>', tmpCnt).join('');
}
return this;
}
function createTreeList(idName,option) { // version 2.2
var objFocus = this.document.getElementById(idName);
if (!objFocus) return;
if (!objFocus.innerHTML) return;
var objLists = objFocus.getElementsByTagName('li');
var linkList = new Array();
var outText = new Array();
if (objLists.length > 0) {
for (i=0;i<objLists.length;i++) {
var chckFlag = true;
var elemText = new makeTreeElements(idName,objLists[i]);
if (!elemText.base || !elemText.elem) return;
for (j=0;j<linkList.length;j++) {
if ( linkList[j].base.indexOf(elemText.base) > -1 ) {
chckFlag = false;
linkList[j][linkList[j].length] = elemText.elem;
}
}
if (chckFlag) {
var tmpNum = linkList.length;
linkList[tmpNum] = new Array();
linkList[tmpNum][0] = elemText.elem;
linkList[tmpNum].base = elemText.base;
}
}
if (linkList.length > 0) {
outText[outText.length] = '<ul>\n';
for (i=0;i<linkList.length;i++) {
outText[outText.length] = Array('<li>',linkList[i].base,option.top).join('');
if (linkList[i].length > 0 && option.sort) linkList[i].reverse();
for (j=0;j<linkList[i].length;j++) {
outText[outText.length] = (j == linkList[i].length - 1) ? option.end : option.list;
outText[outText.length] = Array(linkList[i][j],option.leef).join('');
}
outText[outText.length] = Array(option.btm,'</li>').join('');
}
outText[outText.length] = '</ul>\n';
objFocus.innerHTML = outText.join('');
}
}
}
var gTreeOption = new Array;
gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '├ '; /* ツリー用マーク(通常) */
gTreeOption['end'] = '└ '; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '<br />\n'; /* 各枝の末尾 */
gTreeOption['top'] = '<br />\n'; /* ツリー本体の最初 */
gTreeOption['btm'] = ''; /* ツリー本体の最後 */
createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption); // エントリリストのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
createTreeList('linklist',gTreeOption); // リンクリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化
// -->
</script>
<!--★ツリー化スクリプト★-->
■■■ 手順２ プラグインの設定を修正します ■■■
プラグインの設定をクリックして プラグインの中の カテゴリーを
選びます。こんな部分を見つけてくださいね。
カテゴリー カテゴリーを表示します。 ↑ ↓ | 設定の変更 | HTMLの変更 | 削除
HTMLの変更のクリックします。
すると 下のようなのが書かれてますが 消してしまいます。
<ul>
<!--category-->
<li><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>
あらたに 以下を書き入れます。↓↓
<div id="categorylist">
<ul>
<!--category-->
<li><a href="<%category_link>"><%category_name>(<%category_count>)</a></li>
<!--/category-->
</ul>
</div>
■■■ 手順３カテゴリー部分の編集 ■■■
環境設定の変更 → カテゴリーの編集 をクリックします。
ここまで来たら 後は カテゴリーを分けるだけです。
[大タイトル]サブタイトル
のような感じで 全部の カテゴリを修正していきます。
私の場合は
[アフィリエイト]Ａ８ネット
[アフィリエイト]リンクシェア
と言う風にしていますが 注意としては [未分類]も
半角の [ ] で 大タイトルを囲む事です。
とにかく １つでも[ ]で 囲っていないと 上手く表示されません。
半角の [ ] です。
同じ 要領で リンクもツリー化することができます。
スクリプトは 上のものがある場合新たに
挿入しなくてもＯＫです。リンクのツリー化記事はこちら
fc2ブログで カテゴリーをツリー化する方法を・・試してみました。
ブログは 過去記事が探しにくいという欠点を補ってくれるものなので
お小遣い系のアフィリエイトや物販系のアフィリエイトにも
役立つのでは無いかと思います。
カテゴリーのツリー化というのは・・・こんな感じになるもの↓
写真
├風景
├人物
├花
└雑貨
少し前から 試したかったのですが どうにも私には理解不能で（笑）
でも この方法なら コピペで すぐ出来たので紹介しますね。
この方法 スクリプトは ワンダと巨像と土と空さまやＪＵＧＥＭカスタマイズスクリプトva2
を参考に記しています。
■■■ 手順１ スクリプトの挿入 ■■■
管理画面に行き テンプレートの設定をクリック→テンプレートの修正をクリックします。
ＨＴＭＬ編集画面とＣＳＳの編集画面があらわれるので
ＨＴＭＬ編集を します。
ＨＴＭＬの ソースを スクロールバーで下に移動させていくと
最後の方に </body> があります。
</body>の すぐ前に以下の スクリプトを書き入れます。書き入れると
行っても コピーペーストで大丈夫です。
（コピペとは？ コピーしたい部分を ドラッグさせておいて青く反転したら 右クリックでコピー
書き入れる場所で 右クリックで貼り付けをクリックする事ですよ(^o^)ゞ）
<!--★ツリー化スクリプト★-->
<script type="text/javascript">
<!--
function makeTreeElements (idName,objList) {
if (!objList.innerHTML) return;
var objLink = objList.getElementsByTagName('a')[0];
var linkUrl = objLink.getAttribute('href');
if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) {
var tmpText = objList.innerHTML.split("⇒");
tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
this.base = Array('<a href="',linkUrl,'">',tmpText[0],'</a>').join('');
this.elem = objLink.innerHTML;
} else if (idName.indexOf('entry') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/\((\d\d\/\d\d)\)/);
this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
} else if (idName.indexOf('link') > -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/\[(.+)\](.+)/) ) {
this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'" target="_blank">',RegExp.$2,'</a>').join('');
}
} else if (idName.indexOf('category') > -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/\[(.+)\](.+)/) ) {
this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$2).join('');
}
} else if (idName.indexOf('archive') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/\((\d+)\)/);
var tmpCnt = Array(' (', RegExp.$1, ')').join('');
tmpText = objLink.innerHTML;
tmpText.match(/(.+) (\d+)/);
this.base = Array('<strong>',RegExp.$2,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$1,'</a>', tmpCnt).join('');
}
return this;
}
function createTreeList(idName,option) { // version 2.2
var objFocus = this.document.getElementById(idName);
if (!objFocus) return;
if (!objFocus.innerHTML) return;
var objLists = objFocus.getElementsByTagName('li');
var linkList = new Array();
var outText = new Array();
if (objLists.length > 0) {
for (i=0;i<objLists.length;i++) {
var chckFlag = true;
var elemText = new makeTreeElements(idName,objLists[i]);
if (!elemText.base || !elemText.elem) return;
for (j=0;j<linkList.length;j++) {
if ( linkList[j].base.indexOf(elemText.base) > -1 ) {
chckFlag = false;
linkList[j][linkList[j].length] = elemText.elem;
}
}
if (chckFlag) {
var tmpNum = linkList.length;
linkList[tmpNum] = new Array();
linkList[tmpNum][0] = elemText.elem;
linkList[tmpNum].base = elemText.base;
}
}
if (linkList.length > 0) {
outText[outText.length] = '<ul>\n';
for (i=0;i<linkList.length;i++) {
outText[outText.length] = Array('<li>',linkList[i].base,option.top).join('');
if (linkList[i].length > 0 && option.sort) linkList[i].reverse();
for (j=0;j<linkList[i].length;j++) {
outText[outText.length] = (j == linkList[i].length - 1) ? option.end : option.list;
outText[outText.length] = Array(linkList[i][j],option.leef).join('');
}
outText[outText.length] = Array(option.btm,'</li>').join('');
}
outText[outText.length] = '</ul>\n';
objFocus.innerHTML = outText.join('');
}
}
}
var gTreeOption = new Array;
gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '├ '; /* ツリー用マーク(通常) */
gTreeOption['end'] = '└ '; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '<br />\n'; /* 各枝の末尾 */
gTreeOption['top'] = '<br />\n'; /* ツリー本体の最初 */
gTreeOption['btm'] = ''; /* ツリー本体の最後 */
createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption); // エントリリストのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
createTreeList('linklist',gTreeOption); // リンクリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化
// -->
</script>
<!--★ツリー化スクリプト★-->
■■■ 手順２ プラグインの設定を修正します ■■■
プラグインの設定をクリックして プラグインの中の カテゴリーを
選びます。こんな部分を見つけてくださいね。
カテゴリー カテゴリーを表示します。 ↑ ↓ | 設定の変更 | HTMLの変更 | 削除
HTMLの変更のクリックします。
すると 下のようなのが書かれてますが 消してしまいます。
<ul>
<!--category-->
<li><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>
あらたに 以下を書き入れます。↓↓
<div id="categorylist">
<ul>
<!--category-->
<li><a href="<%category_link>"><%category_name>(<%category_count>)</a></li>
<!--/category-->
</ul>
</div>
■■■ 手順３カテゴリー部分の編集 ■■■
環境設定の変更 → カテゴリーの編集 をクリックします。
ここまで来たら 後は カテゴリーを分けるだけです。
[大タイトル]サブタイトル
のような感じで 全部の カテゴリを修正していきます。
私の場合は
[アフィリエイト]Ａ８ネット
[アフィリエイト]リンクシェア
と言う風にしていますが 注意としては [未分類]も
半角の [ ] で 大タイトルを囲む事です。
とにかく １つでも[ ]で 囲っていないと 上手く表示されません。
半角の [ ] です。
同じ 要領で リンクもツリー化することができます。
スクリプトは 上のものがある場合新たに
挿入しなくてもＯＫです。リンクのツリー化記事はこちら
| ホーム |
