シーサーブログの幅を広くする方法 後編
今日は昨日の続きで、シーサーブログの幅を広くする方法の後編です。
昨日はブログの幅を広げるところまで説明しました。
まだ昨日の記事を読んでいない方は下のリンクから、読んでみて下さいね。
シーサーブログの幅を広くする方法 前編
それでは昨日の続きです。
今日はブログ幅にあったヘッダーの画像を変更し、
記事の部分の幅の変更、そうして今回の目的のサイドバーの幅を変更していきます。
それではヘッダー画像の変更方法です。
ヘッダー画像は今回はあらかじめ用意し、
シーサーブログにアップロードしてあります。
まずはデザイン設定のCSSのコードを変更していきます。
ここはヘッダー画像の設定コードですので、
ここの部分を変更していきます。
今回用意した画像は横900px縦380pxです。
まずはこのサイズに合わせて縦のサイズ変更と
画像のURLを変更していきます。
昨日も書いた通り、前のコードを消してしまうと、
面倒なことになりますので、昨日と同じで/**/を使って無効にして下さい。
まずは、26番の高さを無効にして、height:380px;にコードを書き換えます。
次に31番の画像のURLを無効にして、今回アップロードしている画像のURLを、
新たに追加します。
プレビューをみてみると、
このように画像を変更する事ができました。
次に1の記事の部分と2のサイドバーの部分を変更していきます。
まずは記事の横幅を変更していきます。
83番の幅を変更していきます。
83番を無効にして、width:550px;のコードを書き加えます。
この状態をプレビューで見てみると、
このように記事の部分が広がりました。
最後にサイドバーの幅を広げていきます。
ここの部分を書き換えていきます。
幅とマージンを変更していきます。
125番と129番のコードを無効にします。
次にwidth:300px;とmargin-left:10px;、
padding-left:40px;のコードを追加します。
プレビューで見てみると、
このようにブログの幅を変更する事ができました。
シーサーブログはコードを変更しても、
元に戻す機能がついています。
でも、戻すときは全てのコードがデフォルトに戻ってしまうので、
部分的に戻す事はできません。
そこで、先ほども書いた通り、コードを消すのではなく、
コードを無効にする方法を取っています。
こうしておくと、部分的に戻したりする事ができますので、
コードは消さずに無効にする方法を取って下さい。
今回説明したシーサーブログのテンプレートは、
若草を使用しています。
他のテンプレートでは、コードの順番が違いますので、
コードの番号を見るのではなく、コードの内容を見て変更して下さい。
もし、失敗してもコードを消していませんので、
簡単に元に戻す事ができます。
こうする事で、サイドバーの幅が広がりますので、
アドセンスを表示する場合もゆったりと表示する事ができます。
是非、試してみて下さいね。
Googleアドセンスで
月に3万円稼げるようになりました。
Googleアドセンスで
月に3万円稼いだ方法は
下のバナーをクリックして読んで下さい。