４コママンガ「悲劇のエレベーター」
今さらですが、あけましておめでとうございます！今年もよろしくお願いします。(^_^;)
マンガの更新が１ヶ月近くもあいてしまいました～。いつもお待たせしてすみませんです～。m(_ _;)m
↓ライブドア 様のＹ－１グランプリ vol.95に投稿したマンガです。(^o^;A)
↑今回、色々と無理矢理な設定のネタです。(^_^;A)
あまり深くつっこまないで、さらりと生暖かい目で見逃してやってくださいませ。m(_ _;)m
それと、↑のおまけコマは、ダンナが言う「少年マンガの最終回によくあるパターン」をまねて描いてみました。(^_^;A)
ヤツが定義するところのラストシーンは
・夕焼けの海岸を仲間と一緒に走る主人公がこっちに向かってジャンプしている
・連載がどんなに短かった（３回くらい）としても、必ず「長い間応援ありがとう！」のセリフがある
・次回掲載予定がなくても、必ず「○○先生の次回作にご期待ください！」の一文がある
だそうです（今回、忠実には再現できませんでしたが…）。(^_^;)
もうひとつ「最終回によくあるパターン」として、戦いに決着がつき、主人公に負けたライバルが負けを認めた上で、
・「本当の戦いはこれから始まるんだ！！」
などのセリフで締めくくっているものもあるそうです…。(-o-;A)
以上、関係ない話を長々と書いてすみませんでした～。m(_ _;)m
ちなみに、「えろびより連載終了！」…というのはウソです。(^_^;A)
ちょっとでもドキッとして頂けたなら、この上ない喜びなのですが…。
次回以降も、しれっと連載続行していますので、どうか見捨てることなくお付き合いくださいますよう、よろしくお願い致します。m(_ _)mm(_ _)mm(_ _)m
ブログヘッダ画像差し替え（マウスが乗ったら動く画像にする）［その３］
６：今回の編集②（ＣＳＳ－paddingの設定－）
５（今回の編集①）の設定をしても、イラストの画像が少しずれてしまいました。↓
↑少し分かりにくいのですが、イラストの上部分と左部分に４－①でセットした過去画像がはみ出して表示されています…。(;_;)
原因は、ＣＳＳソースの中ほどにあるタイトル（h1タグ）の設定にありました。
↓以下が、ＭｙブログのＣＳＳタイトル設定部分（抜粋）です。
（1行目：…という部分は、説明のためにつけた行数なので、実際のソースにはありません！！）
1行目：div#header h1{
2行目：margin:0;
3行目：/*padding:0 5px 8px 5px;*/
4行目：padding:8px 5px 8px 5px;/*20080430追加*/
5行目：font-size:3em;
6行目：font-weight: bold;
7行目：line-height:1.2;
8行目：}
３行目が、元々のＣＳＳ（ベーシックスキンのみの設定？？）で、
４行目が、私が４－②で編集した部分です（３行目をコメント にして無効化してあります）。
paddingというプロパティが、タイトル部分をずらして（正確には膨らませて）いるみたいです。
※２行目のmarginというプロパティも、いじると危険そうなニオイがします…。(^_^;;)
３行目を復活させてもイラストのずれはなおりません。
↓両方ともコメント 化してpadding設定を削除してみます。
3行目：/*padding:0 5px 8px 5px;*/
4行目：/*padding:8px 5px 8px 5px;20080430追加*/
↑これでイラストが正しい位置にセットされました。(*^O^*)/
７：今回の編集③（ＣＳＳ－ヘッダ部分の領域確保－）
私は４－①で同サイズ（幅800×高さ300ピクセル）のヘッダ画像をセットしていたので気づきませんでしたが、ヘッダ画像をセットしていない場合、ヘッダ部分の高さは最高100ピクセルまでしか設定できないみたいです（アメブロ管理画面の「ブログ→デザインの変更→スキンのカスタマイズ」）。
ヘッダ画像を削除してみると、イラストが大きすぎて、ブログの頭部分まではみだしてしまいました！！↓
イラストはタイトル（h1タグ）として表示されているので、タイトルとは別にヘッダ部分の領域（この場合は高さ300ピクセル）を確保しないといけないみたいです…。(;_;)
ＣＳＳはさっぱり分からないので苦労しましたが、↓の記述を追加することで、↑の現象を回避することができました。(^-^;;A)
/*---------- 20090108追加 ----------*/
#header{
height:300px;
}
/*---------------------------------*/
↑をＣＳＳの末尾に追加しました。
これで、何とかヘッダ画像の差し替えが完了しました。(^o^;A)
拙い文章だし、後から説明を追加したりと、非常にわかりにくい記事になってしまい、すみませんでした～。m(_ _;;)m
ブログヘッダ画像差し替え（マウスが乗ったら動く画像にする）［その２］
４：関連記事（前回の編集）
２００８年４月に、初めてブログのヘッダ部分をカスタマイズ（改造）した時の記事を書きました。
↑の画像ですが、
でヘッダ部分に画像をセットし、
②ブログのＣＳＳソースを編集（ヘッダのタイトル・概要部分）［その１］
ブログのＣＳＳソースを編集（ヘッダのタイトル・概要部分）［その２］
でタイトルと概要部分を編集しました。
あまり参考にならないかもしれませんが…。(^o^;A)
５：今回の編集①（ＣＳＳ追加）
前回（４－②）では、ＣＳＳ の記述（ソース）内から<h1><h2>タグを探して、タイトルと概要を設定している箇所を直接編集しました。
今回は、アメブロ向上企画書 様の教えに沿って、ＣＳＳの一番最後に自分の記述したソースを付け加える方法にしました。
このやり方だと、いちいち自分が修正した箇所を探さなくても、ＣＳＳの末尾に付け加えた部分を削除するだけで、ブログを元の状態に戻せるみたいです。(*^_^*)
↓以下が、ＭｙブログのＣＳＳ末尾に追加した記述です。
（アメブロ向上企画書 様の CSS タイトル画像のロールオーバー2 の丸写しです！）
（1行目：…という部分は、説明のためにつけた行数なので、実際のソースにはありません！！）
1行目：/*---------- 20081229追加 ----------*/
2行目：#header h1 a{
3行目：width:800px;
4行目：height:300px;
5行目：display:block;
6行目：position:absolute;
7行目：text-indent:-9000px;
8行目：text-decoration:none;
9行目：background-image: url(http://stat.ameba.jp/user_images/e8/75/10124578527.png);
10行目：background-repeat:no-repeat;
11行目：}
12行目：
13行目：#header h1 a:hover{
14行目：background-position: 0 -300px;
15行目：}
16行目：/*---------------------------------*/
イラストは、連続する２枚の絵を連結させた画像（800×600ピクセル）をアメブロにアップロードしました。↓
上記ＣＳＳ の内容ですが、
（ｈ１タグ）
２行目、１３行目で「h1」の記述があるように、今回の編集は全てタイトル部分（h1タグ）に対して行われています（↑のイラストも）。
４－①でセットした画像や、４－②で編集した概要（h2タグ）はそのままの状態で残されています。
今回の編集で、元々あるヘッダ画像や概要の上に↑のイラストがタイトル（h1）としてかぶさるため、見えなくなるだけです。(^_^;)
（ａタグ）
また２行目、１３行目についてですが、「h1 a」のように記述されています。ａタグはリンク の設定になるので、これはタイトルのリンクに対しての編集をする…という意味になるのでしょうか？？
ＣＳＳの書き方はよく分かりません。(^_^;;A)
ここでａタグが記述されているからなのかどうか分かりませんが、結果として↑のイラスト全体がブログのトップページへリンクしています。
私にとっては、このリンクはありがたい設定です。(*^o^*)
（各プロパティ）
３～４行目：幅と高さを設定して、通常の状態ではイラストの上半分のみ表示するようにしてあります。
５～６行目：ボックスというものに関係した設定のようですが、
さっぱり意味が分かっていません…。f(^_^;;A)
７行目：タイトルのテキスト「えろびブログ～ 素人Inkscapeマンガ～」を
左に9000ピクセルずらして見えなくしてあります。
８行目：タイトルのテキストに下線などの装飾をしないという設定のようです。
９行目：タイトルの背景画像のＵＲＬ （この場合は↑のイラスト）を指定しています。
※画像のＵＲＬ取得方法は、
を参照してください。
※↑のイラストのＵＲＬは
http://stat.ameba.jp/user_images/e8/75/10124578527.png
です（サムネイル表示「_s」ははずしてあります！）。
１０行目：タイトルの背景画像を１回だけ表示（繰り返さない）するという設定です。
１３行目：タイトル（↑のイラスト）部分にマウスが乗った時に、
１４行目：背景画像（↑のイラスト）を上に300ピクセルずらすという設定です。
この時、イラストの下半分が表示されます！(*^o^*)
→その３ に続きます！