異常の元の記事発見

前の記事、プレビューの時は異常なしで、
全体の記事を出してみたら、
またまたレイアウトが崩れてしまいました。
これはもしかしたら、記事のどれかが原因かと
記事一つ一つをチェックしてみたら、
出ましたよ、レイアウトが崩れる記事が。
でも、この記事、アップした時は何の異常も無かったのですが・・・、
「あっ」
問題の記事は、
パソコン落とした後に、漢字変換の間違いを思い出して、
わざわざパソコン立ち上げるのも何なのでと、
携帯から修正した記事でした。
まさか、これが原因だったのでしょうか。

問題の記事を削除したところ、レイアウトの異常は解消されました。
これで、問題は解決、後は削除した記事を書き直して
別記事にしてアップしておきましょう。

それから、５月１４日の２３時頃から１５日の１５時頃までの間に
うちのブログを見に来て下さった方々、
レイアウトが見苦しい状態になってしまっていて済みませんでした。

ブログの記事、ブログの話題

サイドバーが変!!

うちのブログを出してみたら、
レイアウトがおかしな事にっ。
左右のサイドバーが記事の下に回り込んでしまってました。
テンプレートのチェックをしてみたけど、
特には何も気づかないし、（何か見落としてるかもしれないけど）
とりあえず、代わりのテンプレートをと思ったら、
どれもこれも駄目なんです、
どのテンプレでもレイアウトが変になってしまってます。
これはいったい何事？
フォーラムのチェックをしてみたら、
記事かプラグインに原因がとありましたが、
別に何もおかしなモノは入れてない筈ですが。

あれ？今この記事のプレビューを出してみたら、
何の異常もない普通のレイアウトで出てきましたよ。
ちょっとこの記事エントリーして様子をみてみましょうか。

ブログの記事、ブログの話題

カスタマイズその８・タイトル文字サイズ

著作表示ブロックも色換えしておきます。

/* 著作表示ブロック */
div#footer {
background : url(●●) left top no-repeat;を
background : #fffdd1;に書き換え、
no-repeat;も消して、背景色を変更します。

出来上がりを見渡したところ、
記事、プラグインタイトルが見づらいので、
文字サイズを変更、
記事タイトルのfont-size : small;をlarge;と変えます。
html>body div.main_body h2.entry_header {
font-size : small;→font-size : large;となります。

プラグインタイトルのfont-size : small;を
font-size : medium;に書き変えます。
dl.sidemenu_body .plg_title {
font-size : small;→font-size : medium;と変えます。

記事のタイトルとプラグインのタイトル文字が大きくなり
読みやすくなりました。

カスタマイズその７・プラグインタイトル

次にプラグインタイトル画像ですが、

記事タイトル変更の時と同じく、
画像作成ソフトで作成した
プラグインタイトル用の画像をアップロードし、
「この画像で記事を書く」を選択し、
ここで出てきた
a href="http://●●.gif"と、
img src="http://●●.gif" の
ＵＲＬをコピーして、
dl.sidemenu_body .plg_title {
background:url(http://●●) no-repeat left center;の
url(http://●●)をアップロードした
プラグインタイトル画像のＵＲＬを貼り付けます。

それから left centerはいらないので、消しておきます。
background:url(アップロードしたプラグインタイトル画像のＵＲＬ) no-repeat;で、
プラグインタイトルが変更されました。

フッターはこのままでも綺麗なので、画像は貼らずにおきました。
なので、プラグインはこれで変更完了です。

カスタマイズその６・プラグイン背景

プラグインの背景色を変更します。

* サイドメニュー（プラグイン）の設定
/dl.sidemenu_body {
　　　margin-bottom: 20px;
ここの部分にbackground :
#fffdd1;（背景色の設定）を書き加えます。

dl.sidemenu_body {
　　margin-bottom: 20px;
　　background : #fffdd1;

記事部分の下部にもプラグインがあるので、
ここの背景色も変更しておきます。

/* プラグイン3（中央下） */
dl.plugin
　　　margin-bottom: 15px;に
background : #fffdd1;を貼り付けます
/* プラグイン3（中央下） */
dl.plugin {
margin-bottom: 15px;
background : #fffdd1;

これで、プラグイン１、２、３記事の背景に色が付きました。

カスタマイズその５・記事フッダー

記事最後の部分にフッダー画像を貼り付けます。

/* フッター部分（コメントやトラックバックなど） */
div.main_body ul.entry_footerの中の、background:url(http://●●.gif) left bottom no-repeat;を
カスタマイズその４を参考に、
タイトル画像のＵＲＬと同じやり方で調べた
画像データのＵＲＬに書き換え、
left bottom も消します。
background:url(アップロードしたフッダー画像のＵＲＬ)no-repeat;で、
フッダーの背景も変わりました。

これで、記事部分の背景全体が変更されました。

カスタマイズその４・記事タイトル

やっとこさのテンプレートカスタマイズの続きです。

画像作成ソフトで作成した記事タイトル用の画像をアップロードし、
「この画像で記事を書く」を選択します。
ここで出てきた
a href="http://●●.gif"と、
img src="http://●●.gif" の
ＵＲＬをコピーしておき、
/* 記事のタイトル部分 */
div.main_body h2.entry_header の中の、
background:url(http://●●.gif) と差し換えます。
それから、left center no-repeat;、で、
必要なのは no-repeat;、だけなので、
left center は消しておきます。
background:url(アップロードしたタイトル画像のＵＲＬ)no-repeat;で、
タイトルが変わりました。

テンプレート変更

テンプレートの編集がだいたい出来たので、
（細かい事を言うとキリがないのでこの辺で）
プログのテンプレートを変更しました。

まだ報告してないカスタマイズの状況は
ぼちぼちと更新していくつもりですが、
これで一仕事終わりましたか。

その内ボロが出てきてまた修正なんて事になりそうですが。（笑）

　できるホームページスタイルシート入門―Windows対応 (できるシリーズ)
　超図解 HTMLとスタイルシートでつくるホームページ入門 (超図解シリーズ)

忍者ツールズ

忍者ツールズのアクセス解析を導入しました。
アクセス解析が必要な程の
お客さんがいらしてないんですが、
（日々の平均は十人前後ですからね）
まあ、何でもやってみようかという
挑戦みたいなものです。
実は本館の「ずぼらなべ」にも
導入しようかなとか思ってます。
今度の更新の時にでも。

　ＮＩＮＪＡ ＴＯＯＬＳ

サイドバー

左右のプラグインをいじって
アフィリエイトバナーや、
ガイバーＣＤの案内を追加していたら、
思っていたよりも手間暇かかっちゃって、
肝心の記事書く元気が・・・。
（病気持ちゆえの体力不足・・・）
株・ＦＸの帳簿もつけておかないといけないので、
書いておきたいパンジーやらしだれ梅やらの記事は
明日以降になりそうです。orz