天人鳥のいる暮らし/(旧) 真・視力回復法

アクセスカウンタ

(本館)スマホ版

<スポンサードリンク>

「新・視力回復法(近視回復・近視改善)」系の記事はFC2HPメインに切り替えました。移行し切れてないけど(^^;)
視力記事のせいか?天人鳥記事も検索落ちが酷くなってる気がしてるのが理由です。
新・視力回復理論|コア・メソッド〜軸性近視からの回復法|視力回復の研究部屋 by やすみん001(二重まぶたになる方法もここ)

zoom RSS CSSの#banner,#subbannerで画像を変えてはいけないデザインテンプレート

<<   作成日時 : 2010/04/18 01:16   >>

ブログ気持玉 0 / トラックバック 2 / コメント 2

CSSの#banner,#subbannerで画像を変えてはいけないデザインテンプレート。

ちょっと経緯含め再整理しました。

【動機】
3カラム、2カラムを変えたり、CSSをいじっては
戻していたら、記事幅だけがちょっと狭いまま戻らなくなり、
レイアウトが汚くなった。

【やろうとしたこと】
どうせならと、ブログ全体の幅を広げることにしました。
この為に、CCS編集で、幅を広げる。
合わせてタイトル画像の幅拡大(置き換え)を行う。
CSSの幅変更についてはCSS(スタイル編)第7回 ブログの幅を広げてみよう♪
を参考にしました。
CSSいじってみようという気になったのは、
きまぐれAWA's Life(ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜)がきっかけです。
詳しくて可愛いページなのでどうぞ。


【うまくいなかない・・・】
どうも参考情報通りにやってもうまくいきません。
納得いかないので、根っこから調べました。


【結論?】
デザインテンプレートによって(少なくとも私の使っているデザイン)は
CSSの#banner,#subbannerで画像を変えてはいけない、ものもある。



一応、割合スマートな方法がわかったので、後の方でお知らせしておきます。



【ご参考〜今回の件の調べた流れ〜】

まず、大元のイメージ定義を探します。

1.トップページでソースを表示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://webryblog.biglobe.ne.jp" />
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="robots" content="index,follow" />
<meta name="robots" content="NOYDIR,NOODP" />
<meta name="description" content="天人鳥のいる暮らし(Powered by BIGLOBEウェブリブログ)。縁あって、天人鳥(てんにんちょう)と暮らしています。このブログでは、この子達の話題(写真・動画含む)を中心にしています。ぼくらが味わっている〜癒し〜のおすそわけです。男の子は、茶を黒にしたスズメです。スズメより体は小柄で..." />
<meta name="keywords" content="ブログ,ブログ 無料" />
<title>天人鳥のいる暮らし/ウェブリブログ</title>
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://yasumin001.at.webry.info/rss/index.rdf">
<link rel="EditURI" type="application/rsd+xml" href="http://yasumin001.at.webry.info/rsd/rsd.xml" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://webryblog.biglobe.ne.jp/wlw/wlwmanifest.xml" />
<script type="text/javascript" src="/bblog.js"></script>
<script type="text/javascript" src="/include_logic.js"></script>
<script type="text/javascript" src="http://yasumin001.at.webry.info/index_css.js"></script>
<script type="text/javascript" src="/footerlink/footerlink.js"></script>
<script type="text/javascript" src="/snsMenu.js"></script>
<link rel="stylesheet" type="text/css" href="/css/articles.new/common.css" />
<link rel="alternate" media="handheld" type="application/xhtml+xml" href="http://m.webry.info/at/yasumin001/index.htm" />
<script type="text/javascript">
<!--
include_design_css("top");
// -->
</script>
</head>

2.include_design_css()定義を探す

とりあえず、あたりを付けて探しました。
http://yasumin001.at.webry.info/index_css.js
先頭付近にありました。

中身は以下

var news_news_disp_num = 5;
var theme_category_disp_num = 20;
var comment_disp_num = 5;
var trackback_disp_num = 5;

function include_design_css(page){
document.write("<LINK HREF=\"/css/articles.new/random_eco_n.css\" REL=\"stylesheet\" TYPE=\"text/css\">");
document.write("<script language=\"javascript\" src=\"/articles_jss/blank.js\"></script>");
document.write("<script language=\"javascript\" src=\"http://webryblog.biglobe.ne.jp/affiliate/rakuten/rakuten_sidebar.js\"></script>");
document.write("<LINK HREF=\"http://webryblog.biglobe.ne.jp/affiliate/rakuten/rakuten_sidebar.css\" REL=\"stylesheet\" TYPE=\"text/css\">");

document.write("<LINK HREF=\"/css/articles.new/layout_center3col.new.css\" REL=\"stylesheet\" TYPE=\"text/css\">");

if (page == "top" || page == "friend" || page == "circle"){
document.write("<LINK HREF=\"http://yasumin001.at.webry.info/header_customize.css\" REL=\"stylesheet\" TYPE=\"text/css\">");
}

document.write("<LINK HREF=\"http://yasumin001.at.webry.info/customize.css\" REL=\"stylesheet\" TYPE=\"text/css\">");
document.write("<LINK HREF=\"/css/articles.new/fixed.css\" REL=\"stylesheet\" TYPE=\"text/css\">");

document.write("<style type=\"text/css\">");
document.write("#newcmt{ display: none; }");
document.write("</style>");
document.write("<style type=\"text/css\">");
document.write("#newtbk{ display: none; }");
document.write("</style>");
document.write("<style type=\"text/css\">");
document.write("#albums{ display: none; }");
document.write("</style>");
document.write("<style type=\"text/css\">");
document.write("#webryseal{ display: none; }");
document.write("</style>");
document.write("<style type=\"text/css\">");
document.write(".themetabs{ display: none; }");
document.write("</style>");
if (page == "top" || page == "friend" || page == "circle"){
document.write("<style type=\"text/css\">");
document.write(".articleexcerpt{ display: none; }");
document.write("</style>");
}



3.テンプレートCSSの中身を見る

http://webryblog.biglobe.ne.jp/css/articles.new/random_eco_n.css

中身です。
定義があります。

/*----- common -----*/

body{
color:#596750;
background:#D8E9D6;
}

a, a:link, a:active, a:hover{color:#207313;}
a:visited{ color:#3C9827;}


hr{
height:1px;
border:1px solid #3C9827;
}

/*----- main -----*/

#container{
background:#A6DB6F url(../../images/article/random_eco_main.jpg) no-repeat left 20px;
padding-bottom:1px;
border:1px solid #69A82B;
}

/*----- title banner -----*/
#banner{
height:130px;
}

#subbanner{
height:190px;
}

定義ありました。



な、なんと! コンテナ部でのみタイトルイメージを指定せねば
ならなかった訳です。
おぃおぃ説明くれよぉ。

(どっかにあるのを私が、見落としただけなら、ご容赦ください)



結局、これを見ると、私のデザインテンプレートで、
ブログ幅を広げる簡単な方法は次という事になります。


【 確定した手順 】


1.画像サイズ高さを調べる


http://webryblog.biglobe.ne.jp/../../images/article/random_eco_main.jpg
画像をダウロードしてピクセル単位でWidth,Heightを調べます。

width x height = 800 x 356

合わせたい横幅を決めます。
今回は、

width x height = 980 x 356

にします。


2.画像作成とアップロード

このサイズにタイトル画像を作成します。
画像をアップロードする(手順省略)
みなさん書いてるので省略


3.CSSを編集

設定幅は、

#container幅 : 980px
#contents 幅 : 620 = #container幅 - 360
#blog幅: 600 = #contents 幅 - 20

にしています。



/*----------------------------------------------*/
/* 共通スタイル */
/* (トップ、月別、テーマ別、記事ページ共通) */
/*----------------------------------------------*/
body{
}

/* コンテナ(広告・フッタを除くメイン領域) */
#container{
width:980px; /*追加*/
background-image:url(http://userdisk.webry.biglobe.ne.jp/008/922/78/N000/000/000/127148614475116223620_random_eco_main980w.jpg); /*追加*/
}

/*------------------ 新着記事 ------------------*/
#contents{
width:620px; /*追加*/
}

/*-- ブログ(記事+トラックバック+コメント) --*/
#blog{
width:600px; /*追加*/



まだ他に変な所が出てくるかもしれませんが、
ひとまず大丈夫なようです。





marisさんの記事にコメントして回答貰いました(せっかくなので、記録記録っと)

marisさん、以前は別掲示板で回答頂きありがとうございました。
今回、CSS編集でブログ幅、タイトル画像を変えるにあたり、
ちょっと違うパターンにはまりそれを整理しました。
それで、トラックバックとやらを使ってみようとしたのですが、
何か使い方勘違いしてたみたいです。
変なリクエスト行ってたらご容赦下さい。
それでは失礼致します。
やすみん

2010/04/18 16:42
やすみんさん、いらっしゃいませ
先日はどうもでした

トラバにつきましては以前関係のないものが多くされたコトから一時保留にするようにしたという経緯がありまして
困惑されてたようで申し訳ございません。

それからトラバ先の記事を読まさせていただいてとても参考になりました。
自身ウェブリのテンプレート全てに目を通していませんでしたし、
このケースに当たったことがありませんでした。
これは本格的に記事の見直しをする時期がきたかもしれないですね
ありがとうございました(o*。_。)oペコッ mairis
2010/04/18 21:37

記事内リンク先にトラバ用のアドレスを指定した
状態でトラックバック送信してしまったんですよね(^^;)
そしたら、PING送信エラーとか出て。
その瞬間、使い方の間違いを理解した訳です。
冷静に考えれば、当たり前ですよね。

記事の見直し、期待してます。
こういうのは、やはり一箇所にまとまってた方が便利ですからね。

それでは失礼致します。

やすみん
2010/04/19 23:14

>> やすみんさん
ありがとうございました。
記事の見直しはまたじっくりやっていきたいと思いますにこ

mairis
2010/04/20 08:57







Document.Write (Audiobulb Records (Various Artists))
Audiobulb Records

ユーザレビュー:

amazon.co.jpで買う
Amazonアソシエイト by Document.Write (Audiobulb Records (Various Artists)) の詳しい情報を見る / ウェブリブログ商品ポータル

How To Write a Business Proposal and Other Marketing Documents-【電子書籍】
楽天Kobo電子書籍ストア
Building a small business or establishing yourself

楽天市場 by How To Write a Business Proposal and Other Marketing Documents-【電子書籍】 の詳しい情報を見る / ウェブリブログ商品ポータル

How to Write a Better Thesis
Springer
David Evans

ユーザレビュー:

amazon.co.jpで買う
Amazonアソシエイト by How to Write a Better Thesis の詳しい情報を見る / ウェブリブログ商品ポータル


テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(2件)

タイトル (本文) ブログ名/日時
む、レイアウト変になってた(修正作業いったん妥協)
CSSを使ったブログ幅変更方法確定しました。 http://yasumin001.at.webry.info/201004/article_62.html ...続きを見る
天人鳥のいる暮らし
2014/03/30 12:28
【ウェブリブログ】本番環境でのトライ&エラーを避けてローカルで動作検証する方法
フリースペースにjavascriptのコードやらをゴリゴリ入れてるウェブリブログ・・・ちょっとした構成やプログラムの変更ならいいけど、大きく変えるのには本番環境でトライ&エラーするのは、かなり怖い・・・まずは、ローカルで動作検証したいんだけど・・・ちょっと簡単じゃないよね? ⇒いえ、そんなコトはありません(^^;) ちょっとの手間で安全に出来ます。 自分でやってる方法のメモを整理 ☆ まずは、自分のページを表示する。   トップ・ページ、記事ページ、テーマページ・・・それぞ... ...続きを見る
天人鳥のいる暮らし
2015/03/04 07:27

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(2件)

内 容 ニックネーム/日時
Thanks for all the info, your phorum is extremely helpful. пhttp://hemoroiziforum.ro/discussion/972485/%EF%BB%BFmenotte-il-parvient-a-senfuir-alors-que-son-escorte-est-caillassee
Scotthal
2017/02/02 10:59
Attractive section of content. I just stumbled upon your web site and in accession capital to assert that I get actually enjoyed account your phorum posts. Anyway I’ll be subscribing to your feeds and even I achievement you access consistently quickly. http://vedel13hensley.jigsy.com/entries/general/Che-Cosa-Conta-Nella-Vita
Scotthal
2017/02/04 14:04

コメントする help

ニックネーム
URL(任意)
本 文
CSSの#banner,#subbannerで画像を変えてはいけないデザインテンプレート 天人鳥のいる暮らし/(旧) 真・視力回復法/BIGLOBEウェブリブログ
文字サイズ:       閉じる