› バイクを語るこのブログ2011年08月05日
ブログをカスタマイズしてみた
スポンサードリンク
ブログのテンプレートを変えてみました（・∀・）
どーもお久しぶりです、てるてるです（・A・v
相変わらずダラダラとした日々を過ごしてますが最近どーも更新する気が起きなくて起きなくて、、、
で、只今台風9号の暴風域直撃中です。
んでバイトも昨日から休みだし本当にやることが無くなってしまって気がフレそうになったのでブログのカスタマイズをしてみました（・∀・）
カスタマイズと言ってもテンプレートのHTMLをちょこっと触ったり付け加えたりしただけです
で、やってみた具体的な作業は
・左サイド→右サイドに変更
・カテゴリーを記事一覧表示
・ブログトップの画像加工
・記事下にカテゴリー表示
カテゴリーを記事一覧表示
沖縄からヨッシャー（＝＾＾）９さんのカテゴリーページを記事一覧表示にしてみよう！を参考にしました。
カテゴリー内の記事数が増えてくるとカテゴリー別で見ている時に文字がごちゃごちゃして見づらくなるのでやってみました。
僕のブログの場合、文字がごちゃごちゃしてて読みづらくせっかく検索エンジンで来られた方がすぐ飽きてしまい探している物を探す気にもなれんだろうなぁということで（・∀・）
つまりカテゴリー別でタイトルをさっさと見つけて下さいませということです('A'b
ブログトップの画像加工
エトゥ日記さんのヘッダー画像をランダムで変えようぜ！から頂戴しました（笑
なんともまぁヘッダーの画像がページを移動したりする度に変わるという面白いものが、、、
やり方はリンク先の方法で問題ないです('A'b
が、僕のは画像を少々大き目にしている為、細かい部分だけ変えました。
多分間違いないと思うんですが、大き目の画像をアップロードしてヘッダーに表示させようとしてもサイズが750×200に指定されていて縮小されず全て入りきらずに表示されてしまいます。
その場合はスタイルシートでヘッダーのサイズを指定します。
テンプレート＞カスタマイズ＞スタイルシートで
/* ブログタイトル・概要 */
#banner{
background-color: #ffffff;
height: 390px;
width: 930px;
margin: 0px;
overflow: hidden;
background-image: url(http://img02.ti-da.net/usr/bikeblog/nekohedder.jpg);
素人考えですがこの部分がヘッダーのサイズ等を指定する領域と考えてます（笑）
そしてwidth(幅)とheight(高さ)の部分を画像のサイズに合わせます。
この時に幅を大き目にとるとブログ全体のバランスが崩れてくるので記事やサイドバーの幅も広げると全体的にバランスが取れるはずです。
記事は
/* ブログの配置 */
#content{
float: left;
width: 630px;
padding: 10px;
margin-left: 5px;
}
サイドバーは
/* サイド（左サイド） */
#links{
width: 200px;
margin: 10px 10px 10px auto;
font-size: 85%;
float: right;
overflow: hidden;
}
で、それぞれの幅を広げました。ちなみに記事の所は広げ過ぎるとサイドバーが下に追いやられてしまうので程ほどに（・∀・）
記事下にカテゴリー表示
ビジネスブログの「WEB沖縄 in TI-DA」さんのてぃーだブログのハック(その２)を参考にしてます。
記事下にカテゴリーを持ってくると関連する記事を探しやすくなりますね('A'b
ライブドアブログでよく見かけてたんですが欲しかったんですよね、こーいったものが（笑
ただ、ちょっと修正が必要で＜a href="「＜%EntryCategoryUrl%＞"＞＜%EntryCategory%＞＜/a＞」赤いカッコを移動させます
「＜a href="＜%EntryCategoryUrl%＞"＞＜%EntryCategory%＞＜/a＞」
もうひとつ
var str ="http://blog.ti-da.net/rss_reader.php?n=10&target=f&v=15&rdf=
この赤い部分はビジネスブログの「WEB沖縄 in TI-DA」さんのソースから引っ張ってきたのですが記事中の「target=f&v=10&rdf=」のままだとカテゴリー内の最新記事４件しか表示されませんでした。。。
なので上の赤い部分に変えた方がいいかもしれません。
ちなみに色々試したところ、
n=10：タイトルの表示数で10なら記事10件、30なら30件となり、カテゴリー内のタイトルを全表示させるならそれよりも大きい数字を入れるといいです('A'b
target=f：さっぱりわかりません（笑
v=10：この数字が特に謎です。分かる人教えて下さい（笑
よく分からないけどちょっといじってみたのですがどうも数字で変化するようで
10だと「・ 記事タイトル （日付）」
15だと「・ 記事タイトル」
25だと「・◆ 記事タイトル」
3だと「日付:記事タイトル」
となりました。しかも20とか30だとタイトルが表示されなかったりしてもう僕の力では何がどの様に働きかけているのか
さっぱりワカリマセン（笑
もしかしたらブログによっても変わるかもしれませんし、、、
これ分かる人がいましたら是非教えて下さいませ（・∀・）
今回はこんな感じでブログをカスタマイズしてみました
ちなみにこの記事は僕自身がどの様にブログをいじったかを記録するためでもありもしこの記事を見て「やってみたくなったＺＥ☆」な場合は是非とも自己責任でよろしくお願いします（☆∀☆）
ps：今回の作業でPVかなり増えました！！ヽ(ﾟ∀ﾟ)ﾉﾔｯﾀｰ
まぁなんだ、確認作業で更新ボタンを押しまくってたからね（笑
どーもお久しぶりです、てるてるです（・A・v
相変わらずダラダラとした日々を過ごしてますが最近どーも更新する気が起きなくて起きなくて、、、
で、只今台風9号の暴風域直撃中です。
んでバイトも昨日から休みだし本当にやることが無くなってしまって気がフレそうになったのでブログのカスタマイズをしてみました（・∀・）
カスタマイズと言ってもテンプレートのHTMLをちょこっと触ったり付け加えたりしただけです
で、やってみた具体的な作業は
・左サイド→右サイドに変更
・カテゴリーを記事一覧表示
・ブログトップの画像加工
・記事下にカテゴリー表示
カテゴリーを記事一覧表示
沖縄からヨッシャー（＝＾＾）９さんのカテゴリーページを記事一覧表示にしてみよう！を参考にしました。
カテゴリー内の記事数が増えてくるとカテゴリー別で見ている時に文字がごちゃごちゃして見づらくなるのでやってみました。
僕のブログの場合、文字がごちゃごちゃしてて読みづらくせっかく検索エンジンで来られた方がすぐ飽きてしまい探している物を探す気にもなれんだろうなぁということで（・∀・）
つまりカテゴリー別でタイトルをさっさと見つけて下さいませということです('A'b
ブログトップの画像加工
エトゥ日記さんのヘッダー画像をランダムで変えようぜ！から頂戴しました（笑
なんともまぁヘッダーの画像がページを移動したりする度に変わるという面白いものが、、、
やり方はリンク先の方法で問題ないです('A'b
が、僕のは画像を少々大き目にしている為、細かい部分だけ変えました。
多分間違いないと思うんですが、大き目の画像をアップロードしてヘッダーに表示させようとしてもサイズが750×200に指定されていて縮小されず全て入りきらずに表示されてしまいます。
その場合はスタイルシートでヘッダーのサイズを指定します。
テンプレート＞カスタマイズ＞スタイルシートで
/* ブログタイトル・概要 */
#banner{
background-color: #ffffff;
height: 390px;
width: 930px;
margin: 0px;
overflow: hidden;
background-image: url(http://img02.ti-da.net/usr/bikeblog/nekohedder.jpg);
素人考えですがこの部分がヘッダーのサイズ等を指定する領域と考えてます（笑）
そしてwidth(幅)とheight(高さ)の部分を画像のサイズに合わせます。
この時に幅を大き目にとるとブログ全体のバランスが崩れてくるので記事やサイドバーの幅も広げると全体的にバランスが取れるはずです。
記事は
/* ブログの配置 */
#content{
float: left;
width: 630px;
padding: 10px;
margin-left: 5px;
}
サイドバーは
/* サイド（左サイド） */
#links{
width: 200px;
margin: 10px 10px 10px auto;
font-size: 85%;
float: right;
overflow: hidden;
}
で、それぞれの幅を広げました。ちなみに記事の所は広げ過ぎるとサイドバーが下に追いやられてしまうので程ほどに（・∀・）
記事下にカテゴリー表示
ビジネスブログの「WEB沖縄 in TI-DA」さんのてぃーだブログのハック(その２)を参考にしてます。
記事下にカテゴリーを持ってくると関連する記事を探しやすくなりますね('A'b
ライブドアブログでよく見かけてたんですが欲しかったんですよね、こーいったものが（笑
ただ、ちょっと修正が必要で＜a href="「＜%EntryCategoryUrl%＞"＞＜%EntryCategory%＞＜/a＞」赤いカッコを移動させます
「＜a href="＜%EntryCategoryUrl%＞"＞＜%EntryCategory%＞＜/a＞」
もうひとつ
var str ="http://blog.ti-da.net/rss_reader.php?n=10&target=f&v=15&rdf=
この赤い部分はビジネスブログの「WEB沖縄 in TI-DA」さんのソースから引っ張ってきたのですが記事中の「target=f&v=10&rdf=」のままだとカテゴリー内の最新記事４件しか表示されませんでした。。。
なので上の赤い部分に変えた方がいいかもしれません。
ちなみに色々試したところ、
n=10：タイトルの表示数で10なら記事10件、30なら30件となり、カテゴリー内のタイトルを全表示させるならそれよりも大きい数字を入れるといいです('A'b
target=f：さっぱりわかりません（笑
v=10：この数字が特に謎です。分かる人教えて下さい（笑
よく分からないけどちょっといじってみたのですがどうも数字で変化するようで
10だと「・ 記事タイトル （日付）」
15だと「・ 記事タイトル」
25だと「・◆ 記事タイトル」
3だと「日付:記事タイトル」
となりました。しかも20とか30だとタイトルが表示されなかったりしてもう僕の力では何がどの様に働きかけているのか
さっぱりワカリマセン（笑
もしかしたらブログによっても変わるかもしれませんし、、、
これ分かる人がいましたら是非教えて下さいませ（・∀・）
今回はこんな感じでブログをカスタマイズしてみました
ちなみにこの記事は僕自身がどの様にブログをいじったかを記録するためでもありもしこの記事を見て「やってみたくなったＺＥ☆」な場合は是非とも自己責任でよろしくお願いします（☆∀☆）
☆おまけ☆
ps：今回の作業でPVかなり増えました！！ヽ(ﾟ∀ﾟ)ﾉﾔｯﾀｰ
まぁなんだ、確認作業で更新ボタンを押しまくってたからね（笑
スポンサードリンク
