ココログ・ブログのデザイン・テーマの変更 ブログ幅、本文幅の拡張について

スポンサードリンク

---

先日から、当ブログのデザイン変更に取り組んでいますが、今回は変更の最大の目的であるブログ幅、具体的には本文スペースの拡張について述べます。

なお、こういう作業の場合は、失敗して元に戻せなくなれば最悪ですから、できるだけ今の設定を保存しておいて、復旧できるようにしておくのは常識です。

前回の記事では、3カラムから2カラムに変更し、左右サイドバーから右サイドバーだけのブログのスタイルにしました。

その時は、2カラムにはできたのですが、肝心の本文の幅は500pxlと全く幅が増えませんでした。

これでは、３カラムから２カラムにした意味がありませんので、本文の幅スペースの拡張に取り組みました。

なお、この記事は、これからココログのカラム数、サイドバーの左右位置、ブログ幅、本文幅などの変更希望する方のためと私の備忘録として書いています。

ココログの管理画面からの２カラム化

まず、２カラム化は、ココログの管理画面から「新規テンプレートの作成」をひらくと、「ブログのレイアウトを以下から選択してください。」とあり、自分の希望するレイアウトを選択してください。

以降、「表示項目の選択」、「表示項目の並べ方」とすすみます。

次に、「テーマ」の画面に行きますが、ここでは「テーマの種類」から、自分の好みのデザインを選ぶことになります。

私は、タイトル背景画面に私所有の写真を貼りこむことにしていましたので、「ココログ基本テーマ」をえらびました。

最後に、自分の選んでデザインの名前（任意）と説明を書いて、「このテンプレート」を保存して適用にすれば、自分の好みのデザインとカラム数、サイドバーの位置でココログ・ブログが出来上がります。

私の場合も、めでたく右サイドバーの２カラムとなりましたが、本文スペースが前の500pxlの幅のままでした。

というのも、この作業の中で「ページ全般の設定」で記事表示列の中央列、つまり本文幅のことですが、そこで選べる本文幅は、「300ピクセル」、「400ピクセル」、「500ピクセル」、「可変」しかありません。

「可変」はややこしいので、結局、最大幅は「500ピクセル」までしか拡張できないことになります。「

ココログの無料版を使っている方は、ここまでしか500ピクセルまでしか幅を拡張できません。

しかし、500ピクセルの幅というのは、ディスプレイが大きなくなっている現在、小さいと感じるのが普通です。

ココログ「プロ」の上級テンプレート（HTMLカスタマイズ）により本文幅をピクセルまで拡張

有料プランの「ココログ・プロ」に加入していると本文幅のカスタム化が可能となります。

ちなみに「プロ」は月額950円でこれに消費税が加算されます。

私は、以前から「プロ」に加入していたので、今回、本文幅750ピクセル、右サイドバー200ピクセル、ブログ幅950ピクセルの今、ご覧になっているブログサイズにカスタム化しました。

上級テンプレートによるカスタマイズ

「プロ」でカスタマイズするには、「上級テンプレート」を使う必要があります。

上級テンプレートでカスタマイズするには、基本的なHTMLやスタイルシートの知識が不可欠です。

これらの知識・経験がない方は、残念ですがカスタマイズしないほうが良いと思います。

さて、「上級テンプレート」の作り方ですが、管理画面の「デザイン」、「テンプレートの管理」画面に入ると、現在使用中のテンプレート名が表示されていると思います。

これにチェックを入れて「上級テンプレートへ変換」をクリックすると「タイトル名」（上級）のテンプレートが作成されます。

この上級テンプレートを適用し、反映するとこれ以降あなたのブログは上級テンプレートで制御されるようになります。

この上級テンプレートにカーソルを当て、「テンプレートを編集」をクリックすると「上級者向けテンプレート」のタイトル下にさまざまなファイル群が表示されます。

これらのファイルの内、本文幅を拡張するのに必要なファイルは、「Stylesheet」です。

当ブログのようにブログの全体幅を950ピクセル、本文幅を750ピクセル、右サイドバーを200ピクセルに変更するには、次のコードを書き換えます。

#container { line-height: 140%; margin-right: auto; margin-left: auto; text-align: left; padding: 0px; width: 950px;

上記のWidth: ***pxを950pxに書き換えます。これでブログ全体の幅が950ピクセルになります。

#center { float: left; width: 750px; overflow: hidden;

ここが、本文幅を決めているコードで、width: ***px;に750を記入します

#right { float: left; width: 200px; background-color: #FFFFFF; border: 0; overflow: hidden; }

ここが、右サイドバーの制御をしている場所で、width: ***pxにサイドバー幅の200を入れます。

つまり、ブログ最大幅の数値＝本文幅の数値＋サイドバー幅の数値の関係さえ保てば、自由にブログ幅、本文幅、サイドバー幅の長さを任意に設定できます。

現在は、900ピクセルから1000ピクセルが、ブログの最大幅として適当だと思いますので、私は最大幅を950ピクセルに設定し、本文幅を750ピクセル、サイドバー幅を200ピクセルにしています。

この時、タイトルの背景に写真・画像を使用する時は、その写真・画像の幅を最大幅と合わせておいたほうがいいと思います。

私のタイトル背景画像のサイズは、950ピクセル✕180ピクセルにしています。

ツイート

スポンサードリンク