大型二輪教習日記 手作り生キャラメル ふんどしのススメ
バイク用アイテム
 		長期ツーリングレポ 俺流ブログ改造
所有バイク履歴
 無責任Twitter講座

2010年04月02日

背景画像ランダム表示
ブログの背景画像をランダムに変化するように

カスタマイズしちゃってみました。



記述方法は以下の*****印で表示の内側の部分を

コピーして [自分のブログＩＤ] と [画像ファイル名.gif] の箇所へ

ご自分のブログIDと画像ファイル名を入れればＯＫです。

事前に画像をアップしてから、以下の構文を

ブログ環境設定の カスタムプラグインの所に貼り付けてください。

カスタムプラグインのサイドバー・記事一覧の上部の選択はどれでも構いません。

下の構文は背景のみを制御するだけですので

同じ箇所に記述のあるブログパーツのような表示には影響しません。

　　　　　　　
*******************************************************
<--ブログ背景 body のランダム変更-->
<script language="JavaScript"><!--
wall = new Array();
/* 使用する背景画像を好きなだけ記述 */
wall[0] = "//img02.eshizuoka.jp/usr/自分のブログＩＤ/画像ファイル名.gif";
wall[1] = "//img02.eshizuoka.jp/usr/自分のブログＩＤ/画像ファイル名.jpg";
wall[2] = "//img02.eshizuoka.jp/usr/自分のブログＩＤ/画像ファイル名.gif";
wall[3] = "//img02.eshizuoka.jp/usr/自分のブログＩＤ/画像ファイル名.JPG";
wall[4] = "//img02.eshizuoka.jp/usr/自分のブログＩＤ/画像ファイル名.gif";
r = Math.floor(Math.random()*wall.length);
document.write('<style type="text/css">');
document.write('body { background-image:url("'+wall[r]+'");}');
document.write('</style>');
// --></script>
*****************************************************
<--ブログタイトル画像のランダム変更-->
<script language="JavaScript"><!--
titlebk = new Array();
/* 使用するタイトル画像を好きなだけ記述 */
titlebk[0] = '//img02.eshizuoka.jp/usr/自分のブログＩＤ/画像ファイル名.jpg';
titlebk[1] = '//img02.eshizuoka.jp/usr/自分のブログＩＤ/画像ファイル名.jpg';
titlebk[2] = '//img02.eshizuoka.jp/usr/自分のブログＩＤ/画像ファイル名.JPG';
r = Math.floor(Math.random()*titlebk.length);
document.write('<style type="text/css">');
document.write('#banner,#subbanner{background: url("'+titlebk[r]+'") center no-repeat;}');
document.write('</style>');
//--></script>
*****************************************************



使用する画像の数は増やしたければ

背景画は wall[5]  タイトル画は titlebk[3] として

その行を同じように増やしてください。

減らす場合は行を削除すれば大丈夫です。




但し、テンプレートによっては、スタイルシートでの記述の

「#banner,#subbanner」の箇所が

「#header」になっている場合があります。

テンプレート名 ： Stylish Life　なんかがそうです。

その場合は、上記の記述の箇所も変更してください。







カスタムプラグインの箇所にあまりに多くのブログパーツを

組み入れると閲覧する方々が表示が重くなることもありますので

ご注意くださいって「おまえが言うな」ってお叱りがあるかも・・・。



  続きを読む
タグ ：俺流ブログ改造


Posted by naosuke at 11:53 │こめんと(0) │俺流ブログ改造

2010年03月13日

手抜きファビコンの変更
以前、ファビコンのカスタマイズについて記事アップしました。

ファビコンを制作するのにちょっと躓いた意見を聞きました。icon11

そこでフリーのアイコンにてファビコンの画像を作ってみました。icon22

お好きな画像を選んでお持ち下さい。

画像を右クリックで「名前を付けて画像を保存」で自分のＰＣに保存し

ブログの画像にアップしてお使い下さい。face02



ご自分でファビコンを作りたいよって方は

記事にアップしてあるファビコンのカスタマイズを参考に→こちらへ




ファビコンの登録方法は

テンプレートのカスタマイズにより

トップページの一番上にでも以下の記述のように

構文を記述して下さい。icon09

以下の分をコピー・ペーストして

ブログIDの箇所とアイコン名を変えてご使用しても大丈夫かと。face02



今回画像をＰＮＧ形式に変えました。

一部IEにて表示出来なかったので・・・。


　　 <link rel="shortcut icon" href="//img02.eshizuoka.jp/usr/［自分のブログID］/アイコン名.png" type="image/vnd.microsoft.icon"> 
 　　<link rel="icon" href="//img02.eshizuoka.jp/usr/［自分のブログID］/アイコン名.png" type="image/vnd.microsoft.icon">

出来たら、個別記事・アーカイブにも同様の記述を

入れた方が良いかと思います。

最初に開いたページにてファビコンが参照されるため

閲覧者が個別記事から開いた場合

ファビコンがトップページにしか登録がないと表示されません。

その為、個別記事やアーカイブにも登録しておいた方がいいかな。



ご使用のブラウザにて表示されない場合があります。

その場合は連絡頂けるとありがたいです。face02

一応、ＩＥ８とＧｏｏｇｌｅＣｈｒｏｍｅ、Ｆｉｒｅｆｏｘにて確認済みです。

各ブラウザともバージョンによっても表示が違う場合があります。face06

不具合がありましたら、連絡頂けると確認して修正したいと思います。

  続きを読む
タグ ：ファビコン俺流ブログ改造


Posted by naosuke at 07:28 │こめんと(6) │俺流ブログ改造

2009年09月03日

地図の貼り付け
今更の紹介ですが

ｅしずおかのブログにはマップ貼り付けの機能があります。

記事投稿の画面で、下の赤丸のマップの文字部分をクリックしてみてください。




新たに下のような窓が開きます。



地図の左側に縮尺や移動ボタンがありますし

マウスで掴んでドラッグすれば地図は移動します。

自分の表示したい場所に赤い十字を合わせ、縮尺が決まったら


地図下にある記事内にミニ地図を挿入って書いてある箇所の

横幅、高さを指示します。face02

ブログ記事内に貼る場合は、そのままの規定数値で大丈夫です。

小さくしたい場合は、数値を小さくすればＯＫです。



▼本文に地図を挿入　▼追記に地図を挿入　のいずれかをクリックすれば

記事に地図が挿入されます。face02

横幅は４８０以下程度にしないと記事の横幅をオーバーしますので

大きい地図を貼り付けたい場合は、調整してみてください。

紹介したいお店の場所を説明するのに便利ですね。face02

  続きを読む
タグ ：俺流ブログ改造


Posted by naosuke at 10:01 │こめんと(5) │俺流ブログ改造

2009年04月17日

Tableによる背景画像のある投稿記述
テーブル(table) による背景画像のある投稿記述

猫壁紙として投稿した記述方法について紹介します。


元になった画像は上の猫画像です。

記述方法は*印内の通りです。face02

投稿記事画面の横幅ですが、このブログのスタイルの最大幅が

502程度なので width="502" としてあります。face02

height="150" は程度にしてみました。

行間は height に対しての均等割りになります。icon23

**************************************************************
<table background="//img02.eshizuoka.jp/usr/naosuke/nekokabegami1.gif" width="502" height="150">
<tbody>
<tr><td>
一行目の文章
</td></tr>
<tr><td>
二行目の文章
</td></tr>
<tr><td>
三行目の文章
</td></tr>
</tbody>
</table>
**************************************************************

以上が　ｔａｂｌｅタグを使用し壁紙を用いた投稿記事の書き方です。

上記の記述で投稿すると、以下のような表示となります。face02

icon12
一行目の文章
二行目の文章
三行目の文章
icon12

行を増やす場合は以下の繰り返し部分を追加すればＯＫです。face02

*************
<tr><td>　　
追加行の文章
</td></tr>　
*************

文中の装飾には、アイコンも入りますし、中央寄せも出来ます。face02

ちょっと上の記述に行を追加して､height="300"に変更し

アイコンや拡大とかしてみました。icon22

**************************************************************


***************************************************************

記述内容は 画像をクリック して拡大して見て下さい。icon22

以下のようになり、記述内容の変更点での変化が解ると思います。face02

icon12
ゼロ行目の文章
一行目の文章face02
二行目の文章
三行目の文章
四行目の文章
五行目の文章
icon12

どうでしょうか？face02

icon12

画像の部分のURLはご自分のブログにアップした画像のものと書き換えて下さい。icon22

icon12


icon12　注意　icon12

背景画像をよくネットで無料画像を頂いてきますが

無料といっても著作権を放棄してる画像はほぼないでしょう。face08

ご自由にお使い商用・個人でお使い下さいってものから

使用するにあたり制作者の許可をもらうものや

リンクを張る制約があったりする場合があります。

著作権のあるもですから使用に於いては

制作者のサイトの使用規約を読んで、ご自身で確認して下さい。

  続きを読む


Posted by naosuke at 21:51 │こめんと(0) │俺流ブログ改造

2009年04月17日

またまた猫壁紙
またまた猫壁紙でーす。face08
GIFアニメで、ちょっとしっぽをフリフリさせてみました。face03
元の作者に断りしてないよぉ。icon12 怒られるかなicon11
改造加えちゃったけど許してぇ。face05
でも可愛いと思いますicon10
  
タグ ：猫壁紙


Posted by naosuke at 13:11 │こめんと(4) │俺流ブログ改造

2009年04月16日

猫壁紙
テーブルタグを使ってface08
テーブル内に壁紙を貼り付けface03
記事を書いてみた。icon12
なかなか可愛い出来具合かも。face05
でも少し記述が面倒かなぁ。icon10
  
タグ ：猫壁紙


Posted by naosuke at 12:14 │こめんと(4) │俺流ブログ改造

2009年04月13日

投稿記事タイトル両横に画像
投稿記事のタイトルの両横に画像を表示

このブログでは記事タイトルの横にバイクやピースサイン、ペンギンなどが・・・。

今回も現在使用中のテンプレートで直接書き替えして失敗しちゃうと大変なので

最初は別のテンプレートを新規に追加選択して実際に試してから

現在のテンプレートで実践したほうがよいかと思います。face02

今回も自分が使用している元のテンプレート「ブルー空」で説明します。

タイトル片側に画像を貼り付ける方法は既存のテンプレートでもあり

画像を変更すれば出来る方法があります。

今回カスタマイズするのはタイトルの両側に画像を表示させます。

以前は別の記述方法でブログアップしてましたけど

この記述の方が何となくいい感じです。face02

icon12

テンプレートのカスタマイズから

トップページのちょうど真ん中あたりに

<!-- Loop Start -->
<IndexEntrysLoop>

<%TrackBackAutoDiscovery%>
<IfDateChanged><h2 class="date"><%EntryDate%></h2></IfDateChanged>

<div class="blogbody">
<a name="<%EntryId%>"></a>
<h3 class="title"><%EntryTitle%></h3>
<div class="main">

こんな記述があるとおもいます。

<div class="blogbody">
<a name="<%EntryId%>"></a>
<h3 class="title"><%EntryTitle%></h3>
<div class="main">

ここの部分の記述を以下のように変更

<div class="blogbody">
<table>
<tr>
<td><img src="//img02.eshizuoka.jp/usr/naosuke/gs12-mini.GIF" alt=""></td>
<td><a name="<%EntryId%>"></a>
<h3 class="title"><%EntryTitle%></h3></td>
<td><img src="//img02.eshizuoka.jp/usr/naosuke/ピースmini.jpg" alt=""></td>
</tr>
</table>
<div class="main">

今回どんな記述を加えたかといいますと テーブル<table> というタグを使いました。

ここにブログのタイトルが入ります

こんな感じにタイトル部分を変えました。ラインを入れる命令はしてないので

上の記述では実際にはラインは入りません。

icon12

多少段落は実際のテンプレートの記述とずれている場合もあるかと思います。

他のテンプレートでは多少記述の方法が違うと思いますが、使用しているテンプレートが

わかれば変更点をお教えします。face02

icon12

トップページ以外の個別記事やアーカイブについても

タイトル部分の範囲がわかれば、その部分を　<td>　</td>　で

囲えば難なく出来ると思います。

icon12

記述してある画像のＵＲＬは、このブログのものをそのまま表示してあるので

実際ご自分でする時には画像のURL部分は

ご自分のアップした画像に変えてください。

画像の大きさはピースサインのタイプで１８×２５ぐらいです。

どうでしょうか？興味のある方は、試してみて下さい。　


この テーブル<table> のタグは普通の投稿でも効果があり

写真など沢山掲載したい時など整理して掲載出来ます。

  続きを読む
タグ ：俺流ブログ改造


Posted by naosuke at 14:15 │こめんと(0) │俺流ブログ改造

2009年04月10日

カーソル変えちゃう？
ちょっとお遊びで、ブログ上でのマウスカーソルを変えちゃいました。

　　　　　　　　

通常の選択　　　　　　リンクの選択

それぞれを画像をネット上から頂いてきました。

頂いてきた画像は、cur の拡張子。

cur 拡張子は eしずおかでは、ファイルのアップデートは出来ません。

cur1.ｃｕｒ　 cur2.cur などの拡張子は GIF に置き換えてファイルアップ。

何とかなるもんですね。。。

icon12

テンプレートのカスタマイズより

スタイルシートに以下の二行を書き加えて完了。

　　　　　　　　　　　　　　　　　      body{cursor:url(/usr/naosuke/cur1.gif),auto;}
 　　　　　　　　　　　　　　　　　     a{cursor:url(/usr/naosuke/cur2.gif),auto;}

書き加えた場所は、ブログの背景画像を入れた
 body{　の構文が書かれていいる前に入れちゃいました。

icon12

一部のブラウザ（Opera）では表示されませんでした・・・。

icon12
画像を頂いてくる場合は、著作権等ありますので

利用規約等をよく読んで使用方法をお守り下さい。

  続きを読む
タグ ：カーソル俺流ブログ改造


Posted by naosuke at 21:25 │こめんと(0) │俺流ブログ改造

2009年04月09日

ファビコンのカスタマイズ
ファビコンとはブラウザのURLの前にあるアイコンのこと。face02
自分のブログにはこんな 　　赤いバイクが見えてますか？icon10
それがファビコンです。変更前はｅしずおかのマークですよ。

ブックマークするとマークも人の物は違っていいかも。

まずは難しく考えずやってみましょう。face02

icon12

どの画像をファビコンにしたいか、あまりゴチャゴチャした画像は小さくした時に潰れて

何の画像か解らなくなっても意味ないですから。icon10

画像が決まったら以下のサイトで画像をコンバートします。face02

Favicon.icoを作ろう！
http://ao-system.net/favicon/index.php

コンバート出来る画像は PNG,GIF,JPG,JPEGタイプで200KB以下のものに限ります。

コンバートする大きさは32×32で大丈夫だと思いますので

サイトにある32×32の中画像のボタンをクリックして下さい。

そうするとご自分のコンバートしたい画像を開くように求められます。

画像を選択して、favicon.ico 作成のボタンをクリックすると

右側に作成された favicon.ico 画像が表示されます。

ダウンロードボタンをクリックして自分のＰＣへ保存。

icon12

ｅしずおかで画像アップロード出来るタイプの中に

拡張子 ico　は含まれていません。

別にHPとか持たれているかたは、HPの方に ico ファイルをアップして

ファビコンを表示されているようです。

icon12

そこで、俺流としてはムチャを試しました。

favicon.ico のファイル名を favicon.gif というように gif に拡張子名を変更して

それだけでファイルをアップロードしました。

いろいろ試したてみたが、ブラウザや元ファイルでダメだった場合はありましたけど・・・。

自分の場合は、favicon.gif は gs12.gif と名前を変えてアップロードしてありますけど。
 
意味はあまりないですけど・・・。　前準備はこれで完了です。

icon12

　　　　　　　　　　　　　　　さて次はテンプレートへの記述方法です。face02

　　　　　　　　　　　　　　　テンプレートのカスタマイズから

                              トップページの以下の場所に☆マークの所に記述してください。



                                ☆☆☆☆☆の場所に スペースを広げちゃって

                                以下の２行を記述します。



                                  以下のような感じになります


　
　　　　　　　　　　　　　　　　　　無理に行を詰める必要はないんですけどね。

                                   どうでしょうか？変わりましたか？　face02

icon12

一応、記述場所は指定しましたが

記述の整理上、同じような構文をまとめた方がいいかなって程度でicon10

一番上の行に記述する２行を入れても問題ないと思います。face03

それからトップページ以外の個別記事・アーカイブにも同様の記述をしておくと

直接先に個別記事を開く方にもファビコンが表示されます。

別のファビコンをセットすることも出来ますね。

icon12

変則的には、ブログ環境設定の中のカスタムプラグインの中に

同じように記述しても表示はされると思います。

そうすればトップページ・個別記事にそれぞれ記述する必要はないですね。

icon12

ファビコンを作ろうのサイトでコンバートしなくても

32×32サイズの gif ､ png 形式での画像をそのままアップしても出来たりします。

またサイトにはファビコン用のアイコンもあります、その場合はコンバート必要無いですね。

また gif 等の画像の場合、記述は別の記述とのご指摘もあるかもしれませんが

ico ファイルをアップするため便宜上 gif ファイルに変えたのでこのように記述しました。

type="image/gif" 　type="image/png"  等の記述ですが

type="image/vnd.microsoft.icon"  あえてこのままにしました。

ブラウザによって対応せず表示がされない場合があるかと思います。

IEが一番表示が良くなかったです。

ｃｈｒｏｍｅ FireFox safari  などのブラウザの方が反応いいって感じですね。

IEはファビコンを変更しても画像切替が遅いというか

気まぐれで変更するような感じがありました。どの設定でか不明なんですけど。

ＩＥ７とＩＥ８でも変更ありなしがあったり・・・。

icon12

今回は記述を追加するだけですが

失敗したり、他の記述を間違って消したりなんて場合の為に

最初は練習で新しいテンプレートで実践してみてください。

icon12

元の大きい画像を、ファビコンを作ろうのサイトで32×32サイズにコンバートして

アップロードしたけど失敗、画像が表示されないって場合がface07

元の大きい画像を別のソフトで32×32サイズに変更してから

ファビコンを作ろうのサイトで変更してアップロードしたら成功した。face08

原因解明してない・・・、まだまだ自分も勉強しなくちゃなぁ。face07

元の画像でどうしたら完全に大丈夫かという方法が

自分の中で定まっていません。まだまだ試行錯誤状態。

表示されたらラッキーって感じでやってますんで・・・。スミマセン。icon10

icon12

ネット上のイラストには著作権等がありますので

頂いてくる場合は、必ず使用規約等を理解した上でお願いします。

icon12

上手く出来ないとか、ありましたらメールでもして下さい。

解る範囲で、試行錯誤あれこれ方法を検討して

出来るだけ改善策を頑張ってみますよ。face02

  続きを読む
タグ ：俺流ブログ改造ファビコン


Posted by naosuke at 12:07 │こめんと(10) │俺流ブログ改造

2009年04月08日

ブログ冒頭画像カスタマイズ
ブログ冒頭のタイトル部分の画像カスタマイズ

ブログの設定のテンプレートからカスタマイズでスタイルシートの編集画面で編集します。

いきなり現在使用中のテンプレートをカスタマイズして失敗してしまうと恐いのでicon10

新たにテンプレートの追加をクリックして、新しいテンプレートでまずは編集することを勧めます。face02

ここの部分の画像が一番カスタマイズしたい部分じゃないでしょうか。face02

テンプレートも種類がいろいろあり、全て説明するのは記述に違い大変なので

自分の元のテンプレート「ブルー空」で説明したいと思います。face06

この空の画像を他の画像に貼り替えます。


icon12

テンプレートのカスタマイズで スタイルシートより以下の記述を探して下さい。face08

         #banner,#subbanner{
                    background :#00145d url(/_img/ay_sora1/head.jpg) left bottom;
                    height: 247px; }

icon12

括弧内の部分を、画像等のファイル一覧にアップしてある画像のURLと入れ替えれば完了です。

例えば  //img02.eshizuoka.jp/usr/naosuke/head-d.jpg 　こんな感じ。

意外とそれだけなので簡単なんですよ。face02

画像のアドレスがよく判らない場合は

ファイル一覧の画面で、実際の画像が表示されている部分をクリックすると

画像とURLのアドレスがブラウザのアドレスに表示されます。

アドレスを入れ替えたら、プレビューボタンをクリックしてみてください。

画像が切り替わっていると思います。

icon12

height: 247px;　の表示は表示する高さを指定してます。

最初に空の画像は 751×264 ピクセルの大きさの画像ですから

高さが少し削られて表示されていたことになります。

#00145d  は画像の下地色ですので枠全体に画像が貼られている場合は

特に変更することはないですが、コードを変えれば色は変わります。

icon12

貼付るだけなら、あまりにも簡単すぎちゃうのですがicon10

貼り付けた画像が小さい場合には、繰り返しで画像が貼り付けられますので

自分の思い通りの貼付に指定したいと思います。face02

その場合の設定が left bottom の所を指定されます。face03

水平方向の指定で left 左基準 right 右基準で center 中心基準（指定無しは center ）

垂直方向の指定で　bottom は下基準 top 上基準 指定無しで真ん中。

枠より画像が小さいと写真を繰り返して貼り付けた形になりますが

no-repeat 繰り返しなし

　　repeat-x 横にだけ繰り返し

　　repeat-y 縦にだけ繰り返し

指定することで繰り返しを制御することが出来ます。face02

left bottom; の記述部分を

right top no-repeat; と書き換え記述すれば

右下基準で繰り返し無しで写真が貼り付けられます。face06

写真を表示するベースの枠を広げたい場合は

height: 247px の数値を変えれば、高くも低くも変わります。face08

icon12

テンプレートによっては記述方法が違ってわからないって場合は

使用しているテンプレート名を教えて頂ければ、解る範囲で説明します。face02

  続きを読む


Posted by naosuke at 13:17 │こめんと(2) │俺流ブログ改造
[前のページ][次のページ]
このページの上へ▲