写真フォトブログ/イラストブログ専用 Galleryテンプレート

アルバムタイプの画像一覧表示のグリッドサイズを変更する

2013.10.06.

（アルバムタイプの）画像一覧の部分の枠(グリッド)のサイズを大きくできないかというご質問を頂きました。
アルバムタイプの場合、通常ブログ画面の記事欄で一定幅の背景画像を使っているため、全体のカラムの幅を広げることはできません。

以下は、全体のカラムの幅は同じまま、グリッドサイズを、通常ブログ画面はDL時の四分割から三分割へ
カテゴリ、タグ、月別、検索ページではDL時の六分割から五分割へ変更する場合のカスタマイズです。

カスタマイズ

［菅理画面］⇒［環境設定］⇒【テンプレートの設定】をクリックして
［テンプレートの管理］ページを開く

PCテンプレート [ テンプレート名 ] 適用中
[ テンプレート名 ] のテンプレート名変更
テンプレート名のHTML編集
テンプレート名のスタイルシート編集　　　　　　　　　こんなふうに上から順番に並んでいます。

［ＨＴＭＬ編集］部分をカスタマイズします。
<head>～</head>内の以下個所を探します。

<head>

～　中略　～

<link href="<%css_link>" type="text/css" rel="stylesheet" />
<link href="http://blog-imgs-59.fc2.com/g/a/l/gallerytemplate/gazou_ichiran10.css" type="text/css" rel="stylesheet" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml" />

～　中略　～

<style type="text/css">
#category .container ,#tag .container ,#search .container ,#date .container {
max-width:1280px;_width:1280px;margin:0 auto;}

//////////////この部分を全て差し換え///////////////////

/* ======================================================
(BB-1)以下は特定のカテゴリを表紙メニューで表示させないための設定

～　中略　～

--></style>

～　中略　～

</head>

赤色の部分のファイルアドレスを以下に変更し、

http://blog-imgs-59.fc2.com/g/a/l/gallerytemplate/gazou_ichiran8.css

青色の部分<style type="text/css">～</style>内、
/* ======880px======= */から(BB-1)の直前までのを以下に差し替えます。

.gazou_box{ width: 19%;height: 210px; margin-left:0.5%;}
.gazou_box div.gazou_s,.gazo_navi{height:170px;}

.gazou_box_w{
       width:38%;height:420px;margin:10px 1% 0 0%;float:left;overflow:hidden;
       }
.gazou_box_w .view {width: 100%;height:100%;}
.gazou_box_w div.view img{ width:100%;height:auto;}
.gazou_box_w div.view mask{ width:100%;overflow:auto;}
.gazou_box_w .view .mask{width: 100%;height:100%;overflow:auto;}

#page .gazou_box{ width: 31%;height: 210px;margin-left:1%;}
#page .gazou_box div.gazou_s,#page .gazo_navi{height:170px;}
#page .gazou_box_w{ width: 62%;height: 420px;margin-right:2%;}

/* ======1024px======= */
@media screen and (max-width: 1024px) {
.gazou_box{ width: 24%;}
.gazou_box_w{ width: 48%;}
}
/* ======880px======= */
@media screen and (max-width: 880px) {
.gazou_box{ width: 31%;margin-left:1%;}
.gazou_box div.gazou_s,.gazo_navi{height:170px;}
.gazou_box_w{ width: 62%;height: 420px;margin-right:2%;}
}

/* ======768px======= */
@media screen and (max-width: 768px) {
.gazou_box,#page .gazou_box{ width: 46%; margin-left:2%;}
.gazou_box_w,#page .gazou_box_w{ display:none;}
.index_area_box .plugin_menu{width : 31%;margin:10px 1% 20px;}
#category .main,#tag .main,#date .main,#searach .main {background-image : none;}
}
/* ======640px======= */
@media screen and (max-width: 640px) {
.gazou_box,#page .gazou_box{height: 180px;}
.gazou_box div.gazou_s,.gazo_navi,
#page .gazou_box div.gazou_s,#page .gazo_navi{height: 130px;}
.index_area_box .plugin_menu{width : 47%;}
}
/* ======540px======= */
@media screen and (max-width: 540px) {
.gazou_box,#page .gazou_box{ width: 95%;}
.gazou_box,#page .gazou_box{height: 210px;}
.gazou_box div.gazou_s,.gazo_navi,
#page .gazou_box div.gazou_s,#page .gazo_navi{height: 170px;}
}
 
/* ======420px======= */
@media screen and (max-width: 420px) {
.index_area_box .plugin_menu{width : 95%;float:none;margin:0 auto;}
.main{margin-left:0;}
.sub_block{position:static;height:auto;width:auto;}
.sub_block ul.menu_css3,.layout_side ul.menu_css3{max-width:none;}
.sub_block select,.sub_block input.keyword,.sub_block fieldset,.click{width:auto;}
#page .layout_side {float:none;width:auto;}
#page .layout_main {float:none;margin:0 auto;}
#page .layout_main_in{margin-right:0;}
body > .all { overflow : auto ; }
.main { height:auto; min-height:1px;overflow:hidden; }
ul.menu_sp {display:block;}
.sub_block h2 a{filter:grow(enabled=false);}
}