ブログカスタマイズの雑談BLOG

突然ですが、ブログの横幅を広げます。
最近のサイトやブログはレスポンシブ対応のものが多くて（Seesaaブログもそうですね）、けっこう横幅を広くして使っている方が多いようです。
私も真似します（笑）



この記事でやろうと思っている内容は以下の通りです。


＜編集手順＞



この記事に書いている内容は過去の記事で説明済みなので、今回の説明は簡単に済ませたいと思います。（ということで、完成図は載せません！）

ブログの横幅を広げる

Seesaaブログのデフォルトのテンプレート「シンプルA. ホワイト 右カラム」の横幅については、以前の記事＜■【Seesaaブログ新デザインシステム】ブログの横幅を変更し、ブログの背景色も変更する＞で変更方法を書いていました。


この時に設定していた横幅「1024px」を「1080px」に変更したいと思います。
それに伴い、メインコンテンツの幅を「740px」に、サイドバーの幅を「330px」にします。
もちろんお好きな数値に変更してかまいません。



ブログの横幅とメインコンテンツ、サイドバーの幅の関係や余白の設定については、下記の関連記事を参考にしてください。（この記事では細かく説明しません）





正直、上記で紹介した過去の記事の繰り返しになるので、改めてこの記事で横幅を広げる方法を説明する必要があるのかわかりません。
とりあえず私はこうしたよ、という意味で画像だけ掲載していきます。

ブログの横幅を変更する

まずは、ブログの横幅を変更します。
横幅を変更するのでCSS（スタイルシート）をいじることになります。



管理画面の「スタイルシート編集」画面で「.l-wrapper」というclassを探します。
テンプレートがデフォルトのままだと377行目ぐらいにあります。
カスタマイズ後の場合は360行目あたりです。
「width: 1024px;」を「width: 1080px;」に変更します。

メインコンテンツとサイドバーの横幅を変更する

次に、メインコンテンツとサイドバーの横幅を変更します。
先ほどと同じく「スタイルシート編集」画面で「.main」を探します。
テンプレートがデフォルトのままだと439行目ぐらいにあります。
カスタマイズ後の場合は437行目あたりです。



「.main」の下には「.side」も記述されていると思います。
両方とも、「width」の値を変更します。
「.main」（メインコンテンツ）は「width: 740px;」に、 「.side」（サイドバー）は「width: 330px;」に変更します。

記事ページの関連記事のサムネイル画像サイズを変更する

今回メインコンテンツの横幅を「730px」から「740px」に広げたので、記事ページの「関連記事」のサムネイル画像の右側に余白10pxが入ることになります。






記事ページの下に表示される関連記事のサムネイル表示について、私は「左端から表示する場合」と「タイトルより内側に表示する場合」の2つのやり方を書いていました。





右側の余白を気にしない場合は何もする必要はありません。
もしも気になるようならば、サムネイル画像のサイズを変更することで対処しておきます。



CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面の「module--category-recent-entry」というclass関連の記述の中に、「width」と「height」の数値が書かれた島が3つあります。


「width」と「height」の数値については、画像を左端から表示する場合は「126px（または127px）」、タイトルより内側に表示する場合は「120px」にしていました。
サムネイル画像のサイズを変更することで余白に対処したいので、数値すべて（6個すべて）をお好きなサイズに変更してください。


私自身は「タイトルより内側に表示する場合」を採用していますので、数値を「124px」に変更しました。

画像詳細ページのサムネイル画像サイズを変更する

メインコンテンツの横幅を「730px」から「740px」に広げたため、画像詳細ページ下部の「関連画像」サムネイルの右側に余白10pxが入ります。






画像詳細ページの関連画像サムネイルについて、私は「1行に6個のサムネイルを表示する場合」と「1行に5個のサムネイルを表示する場合」の2つのやり方を書いていました。
どちらのバージョンを使用していても、今回横幅を広げたことでサムネイルの右端に余白が入っていると思います。上記と同じくサムネイル画像のサイズを変更することで対処します。






CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面の「.upload-detail .upload-list」というclass関連の記述の中に、「width」と「height」の数値が書かれた島が3つあります。


1行に6個表示する場合は「105px」、1行に5個表示する場合は「129px」にしていましたので、数値すべて（6個すべて）を好きなサイズに変更してください。


私自身は「1行に5個表示する場合」を使用していますので、数値を「131px」に変更しました。





ちなみに、この数値を変更すると、画像詳細ページのカレンダー部分の「月」をクリックしたら開くページ（画像一覧ページ）でのサムネイルサイズも変更されます。（画像詳細ページの関連画像と共通設定になっています）

タグ一覧ページのサムネイル画像サイズを変更する

「タグ一覧ページのサムネイル」は、画像にタグを設定している場合にのみ表示されます。
画像にタグを設定していた場合に、そのタグをクリックしたら表示されるページです。
こちらの記事＜■【Seesaaブログ新デザインシステム】タグ一覧ページのサムネイル画像サイズを変更＞を読めば、どんなページなのかはわかると思います。



メインコンテンツの横幅を「730px」から「740px」に広げたため、タグ一覧ページのサムネイルの右側にも余白10pxが入ります。






タグ一覧ページのサムネイルについては、デフォルトの設定から画像サイズを大きくしただけだったので、同じように今回も画像サイズ（数値）を変更します。



CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「tag-photos__item」というclassを探します。この「tag-photos__item」一連が、タグ一覧ページのサムネイル画像部分です。
この中に「width」と「height」の数値が書かれた島が3つあります。


数値すべて（5個すべて）を好きなサイズに変更してください。
私は「160px」にしていたので、数値を「163px」に変更しました。

サイドバー「最近の記事」の記事タイトルの文字数（バイト）を変更する

サイドバーの横幅を「280px」から「330px」に広げたため、コンテンツ「最近の記事」を設定している場合、記事タイトルの文字数（バイト）が少なく感じられます。





これは、以前やったカスタマイズ＜■【Seesaaブログ新デザインシステム】サイドバー「最近の記事」に画像とタイトルだけを表示する（記事冒頭部分は非表示）＞で文字数（バイト）を「70バイト」に設定していたからです。



記事冒頭部分を非表示にしてサムネイル画像と記事タイトルだけを表示させるように設定した場合（つまり、上の画像のような表示の場合）は、文字数を変更した方がいいのではないかと思います。

（記事冒頭部分を非表示にしていない場合は、試していないのでわかりません。文字数を変更しなくても大丈夫かもしれないですね）



コンテンツHTMLを編集します。
管理画面の「コンテンツHTML編集」画面を開き、「<% if:parts_name == 'recent_article' # START parts -%>」を探します。
カスタマイズ後の42行目あたりのコードを編集します。
私は「82バイト」にしました。





私は両方の数値とも「82」にしましたが、これは上段がサムネイル画像がある場合、下段が画像がなくて記事タイトルだけが表示される場合の文字数です。下段（画像がない場合）は文字数をもう少し増やしても大丈夫だと思います。（私は面倒くさいのでどちらも「82」にしてしまいました）




次の記事の紹介

次の記事では、Seesaaブログのソーシャルボタンを非表示にする方法を説明します。