2010年3月4日木曜日

BloggerのヘッダーHeaderを移動させる。

テンプレートでDotsを選ぶと…ヘッダー(タイトル)が左サイドバーに表示されます。


これを普通の?ブログタイトルみたいにブログの上辺(横長)に変えたい。そこで[レイアウト]から[ページ要素]を見てみると…


こんな感じ。(Header)部分は固定されていて移動できない。ちなみにねずみ色?部分の読者、ブログ アーカイブ、自己紹介の要素(ガジェット)は、ドラッグ&ドロップで位置を変えることが可能。

↓↓↓

そこでHTML編集。


"Ctrlキー" を押しながら "Fキー" を押すと画面下部に検索窓が出てきます。検索窓にlockedと入れて検索。画像をクリックすると大きく表示されます。

↓↓↓

<div id='sidebar-wrapper'>というのがサイドバーの設定みたい。ドラッグ&ドロップで動かせない要素はlocked=trueとなっていて、自己紹介のように動かせる要素はlocked=falseとなってます。これを変更すれば良さそう。


青くしてあるtrueの下の方がヘッダーについての記述なので、これをfalseに変更し、右下のオレンジ色ボタン[テンプレートを保存]します。


ここで[レイアウト]から[ページ要素]を見てみると…ヘッダー(Header)がねずみ色になっていて、動かせるようになりました。


あとはこれをドラッグ&ドロップして、上にもっていけばOK。


これを保存して…


おしまいかと思いきや…ブログを表示してみるとまだ左サイドにヘッダーが残ってる;。


移動してなくなったはずのサイドバー部分にまた(Header)が復活してました;。編集をクリックして…


削除をクリックします(ちなみにlocked=trueの時には編集をクリックしても削除ボタンはありません)。


これでめでたく終了♪と思いきや…また復活してる…結局テンプレートのHTMLを削除することにしました。再び[レイアウト]から[HTMLの編集]。さっき変更したはずのlocked=falseがtrueになってるの見えます?画像をクリックすると大きく表示されます。

↓↓↓

選択部分を切り取りor削除して…[テンプレートを保存]をクリックすると…こんな警告画面が出ました。ここで[ウィジットを削除]します。
↓↓↓

めでたくサイドバーのタイトルが消えました♪良かった良かった♪


…結局ヘッダーを動かしたあと、再びHTML編集でテンプレートのサイドバーヘッダーHTMLを削除すれば良いと言うことでした。

は~。ぼつぼつBloggerの編集にも慣れてきました。画像が簡単にアップできるのは良いんですが…[作成]画面で画像をドラッグ&ドロップしたりしてレイアウト変更すると…文字が移動してしまったり、消えてしまったり、面倒くさい;。HTMLの編集で見てみると…やたらいろんなタグがついてます;。

あと[作成]画面だとテキストのコピー&ペーストが使えないのはなにゆえ?画像は[作成]画面で、文字はHTMLでとか編集画面の切り替えが必要なときもありますね~。しかしなかなか楽しそう?なブログです。まだまだ研究が必要かも~。

さて、今回の変更で…どっかおかしくなってしまったらすみません~;。自己責任でお願いしますm(_ _)m。他にももっと簡単な方法があるかもしれません…コメント欄にてお知らせいただければ幸いです;。

今回のBloggerカスタマイズ…Chocoさんの●Bloggerのページ要素に[ガジェットを追加]リンク(Add a Page Element)を導入する方法 Bloggerカスタマイズ情報ブログを参考にさせていただきました。ChocoさんのBloggerカスタマイズ情報ブログでまずはお勉強~♪このあと読破?してきます~Chocoさんに感謝。

…以上スージー別ブログ“スージーの口コミブログ”2月24日●Bloggerのヘッダーを移動させる方法のほとんどコピーでした;。ではまた~(^^)/。

追記(2010.3.8)
結局ヘッダーを動かしてみたものの…タイトル(ヘッダー)と日々のブログエントリー部分に微妙なスペースができているので、また元に戻しました;。HTMLのスタイルシート部分を変更すればいいと思うのですが…めんどくさかったので;。はは;。

あと、上のブログ記事を書いた時点では検索窓が画面下部に出てきてたのですが、本日"Ctrlキー" を押しながら "Fキー" を押したら以下の画像のように画面上部に検索窓が出てきました。


以上ご報告まで♪

1 件のコメント:

  1. このやり方で無事ヘッダーを動かせる事が出来ました。
    出来なくて困っていたので本当に助かりました!
    有難うございます。

    返信削除