Top > CMS・ブログ > livedoorブログ > 2006年9月
2006年9月10日

livedoor テンプレート修正(リキッドレイアウトの不具合を解消する)

現在公開中の livedoor ブログテンプレートのリキッドレイアウトに不具合がありました。

具体的には、表示された画面をスクロールアップしてタイトルバナーを見えない状態にして、スクロールダウンしてタイトルバナーを表示するとタイトルバナー上部が真っ白になる、というものです(下)。

スクロールによる不具合

原因は、タイトルバナー上に設定されている livedoor ブログの table 要素が影響しているようです。

この不具合を解消するにはスタイルシートのバナー用の設定箇所に width プロパティ(青色)を追加します。

       :
/* タイトルバナー */
.layout-three-column-liquid #banner,
.layout-two-column-liquid-left #banner,
.layout-two-column-liquid-right #banner {
    _width: 100%;
}
#banner {
    padding: 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background: #8fabbe;
       :

前述の問題は IE のみ発生し、Mozzila 系ブラウザでは正常に表示されます。逆に width プロパティを Mozzila に適用すると横スクロール常に表示されてしまうという不具合が発生するため、アンダースコアハックで IE のみに適用しています。

なおダウンロードアーカイブは修正済です。
この修正を行うことで下記のようにスクロールによる影響は解消されます。

スクロールによる不具合

Comments [0] | Trackbacks [0]
2006年9月 4日

livedoor ブログ設定方法

September 4,2006 12:35 AM
Tag:[, ]
Permalink

当サイトで配布している livedoor ブログテンプレートの設定方法です。クリックおよび操作する部分をスクリーンショット内の青枠で示しています。
なお、livedoor IDに登録し、ブログが作成済であることを前提に説明していますので予めご了承ください。

livedoorブログトップページとりあえずログインからスタートします。livedoorブログトップページから右上の「ブログを作成/管理ページにログイン」をクリック。
ログイン画面livedoor ID とパスワードを入力してログインをクリック。
ブログ管理ページこれでブログ管理ページにログインしましたので、上部メニューの「カスタマイズ/管理」をクリック。
ブログの設定画面次ページで左メニューの「デザインの設定」をクリック。
「デザインの設定」画面次ページでページ右下にある「カスタマイズ」または「CUSTOM」の画像をクリック。
「デザインの設定(スタイルシート)」画面1これでスタイルシート編集ページが表示されますので、テキストエリアの内容を消去します。スクリーンショットは既に新しいテンプレートに入れ替えた後の内容になってますのが予めご了承ください。
「デザインの設定(スタイルシート)」画面2Windows でテキストエリアの内容をまとめて削除するには、テキストエリアの任意の位置をクリックし、その状態で Ctrl+a をタイプ入力するか、マウスを右クリックして「すべてを選択」を選択します。選択できるとテキストが反転した状態になりますので、Delete キーを入力してください。
「デザインの設定(スタイルシート)」画面3削除すると、このようにテキストエリアに何もない状態になります。この状態のまま、次の作業に進んでください。
スタイルシート予めダウンロードしたテンプレートアーカイブを解凍し、その中にある「スタイルシート.txt」をダブルクリックするとメモ帳が開きますので、ここに表示されている内容を全て選択状態にします(メニューの[編集]-[すべて選択]で全てが選択されます)。選択状態になったら、Ctrl+c または[編集]-[コピー]を選択します。これで新しいテンプレートがメモリに記憶された状態になりました。
「デザインの設定(スタイルシート)」画面4livedoor ブログの編集画面を開いているブラウザに戻り、先ほど空にしたテキストエリアのどこかをクリックして、Ctrl+v または 右クリックで「貼り付け」を選択します。これで先ほどコピーされた新しいテンプレートがテキストエリアに設定されます。その後、下にある「この内容で保存する」をクリックし、変更したテンプレートを保存します。
「デザインの設定(その他)」画面テキストエリア上部に表示されている「メインページ/個別記事ページ/カテゴリーアーカイブ/月別アーカイブ」のリンクをクリックし、他のテンプレートについてもスタイルシートと同様の手順で入れ替えてください。テキストエリアに設定するテンプレートを間違えないように気をつけてください。
「ブログに設定を反映(再構築)」画面全てのテンプレートの入れ替えが終わったら、左上の「ブログに設定を反映(再構築)」をクリックします。クリックすると左のような画面が表示されますので、プルダウンメニューから「全てのページ」を選択して、その下の「再構築」をクリックします。
ブログの再構築画面「サイトの再構築が完了しました」というメッセージが表示されたら、左上にある「このブログについて」欄にあるブログ名のリンクをクリックし、ブログの表示を確認してください。
Comments [10] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3