Home > FC2ブログ > basic_white > basic_whiteテンプレート グリッド・リスト表示をどちらかに固定

basic_whiteテンプレート グリッド・リスト表示をどちらかに固定

 basic_whiteテンプレートのグリッド・リスト表示のボタンを非表示にしてどちらか一方に固定する方法です。

 元に戻す時は追加したコードを削除するだけです。

 特定のカテゴリページでグリッド・リスト表示を固定にすることもできます。

1:HTML

 場所はCtrl+Fキーで『!checkCookieValue』を検索。

if ( !checkCookieValue( layout ) ) {
  layout = DEFAULT_LAYOUT;
}

 「}」の後に「layout = "glid";」(グリッド表示)か「layout = "list";」(リスト表示)のどちらかを追加してください。

//グリッド表示で固定する場合
if ( !checkCookieValue( layout ) ) {
  layout = DEFAULT_LAYOUT;
}layout = "glid";

//リスト表示で固定する場合
if ( !checkCookieValue( layout ) ) {
  layout = DEFAULT_LAYOUT;
}layout = "list";

2:スタイルシート

 スタイルシートに以下のコードを追加してください。

.switch {display: none;}

 以上で完了です。

特定のカテゴリページでグリッド・リスト表示を固定

 場所はCtrl+Fキーで『!checkCookieValue』を検索。

 「}」の後に以下のコードを追加してください。

    if ( !checkCookieValue( layout ) ) {
      layout = DEFAULT_LAYOUT;
    }
<!--category_area-->var cate=',<%cno>';
if(','.indexOf(cate)!==-1){ //グリッド
  layout = "glid";
}else if(','.indexOf(cate)!==-1){ //リスト
  layout = "list";
}<!--/category_area-->

カテゴリの指定方法

 「','」の部分を「',カテゴリ番号'」のように指定します。次のように指定するとカテゴリ番号「0」のページはグリッド表示になります。

if(',0'.indexOf(cate)!==-1){ //グリッド
  layout = "glid";
}else if(','.indexOf(cate)!==-1){ //リスト
  layout = "list";

 カテゴリ番号は管理画面の「カテゴリの編集」ページにある左上の「#」をクリックすると確認できます。またはカテゴリが表示されているページのアドレス(blog-category-番号.html)からも確認できます。

 複数指定する時は「',カテゴリ番号,カテゴリ番号,カテゴリ番号'」のように「,」(半角カンマ)で繋げて指定します。次のように指定するとカテゴリ番号「0」「2」「5」のページはグリッド表示、「1」「3」はリスト表示になります。

if(',0,2,5'.indexOf(cate)!==-1){ //グリッド
  layout = "glid";
}else if(',1,3'.indexOf(cate)!==-1){ //リスト
  layout = "list";

関連記事
スポンサー リンク
コメント
#78 : No title
いつもお世話になってますです。また疑問に思う点が出たので寄らせてもらいました。

この記事とはあまり関係ない質問なんですが、『特定のカテゴリページでグリッド・リスト表示を固定』や「カテゴリの指定方法」みたいな見出し(?)の部分の作り方はどうしたら良いんでしょうか?

今現在は、単に文字を大きくしたり色を変えたり付け焼き刃な対応をしてるんですが、さすがに見栄えがいい加減ブサイクだなーと。だから、そんな風に変えられるといいなーと思いましてm(_ _)m
#79 : No title
あれからいろいろとググって試行錯誤してみた結果、結構あっさり解決しました!

h7{
font-size:135%;
font-weight: bold;
border: double 3px #ffffff;
line-height: 31px;/*hタグの高さ*/
color:#ffffff;
background-color:#191817;
padding-left:6px;
padding-right:8px;
}

このh◯を増やしていけば、結構無限になんでもできそうですね。最初は「箇条書き」で調べててて行き詰まってたんですが、とりあえずなんとかなりました。ただ上のコードだと、mayさんのように黒い部分が端っこまで伸びないのが少し気になりますが(笑)

お世話かけました+コメ汚しスイマセンでしたm(_ _)m
#83 : 記事中の見出しのデザイン
コンニチハ。
遅くなりました。申し訳ございません。
記事表示件数の偶数表示は左右2件ずつ並べるので、奇数だと片側が空いてしまうというだけです。

解決済みかと思いますが、見出しのスタイルは10月31日更新分のスタイルを適用させて以下のコード内の背景や余白、高さなどの指定部分を上書き・追加・変更すればOKです。
.p_area .entry_body h2, .p_area .entry_body h3,
.p_area .entry_body h4, .p_area .entry_body h5 {
background: url(http://blog-imgs-43.fc2.com/t/e/m/templates/content_title.png) no-repeat 5px 5px;
margin: 0 0 10px;
padding: 5px 0 5px 20px;
}
記事には「<h3>記事中の見出し</h3>」などと書きます。
hの段階ごとにデザインを変える時はそれぞれを分けて一つ一つ指定します。
.p_area .entry_body h2 {
background: #eee;
margin: 0 0 10px;
padding: 5px 0 5px 0px;
}
.p_area .entry_body h3 {
background: #eef;
margin: 0 0 10px;
padding: 5px 0 5px 0px;
}
#86 : No title
#83
匿名に戻しました。
しょうもない質問すいませんでした(;´∀`)

詳しくありがとうございます。あのあとmayさんのブログのソースを見たら、<p class="subtitle"></p>みたいなのを発見。それであれこれググって、CSSには「.subtitle{」を指定するようにしました。そしたら、とりあえず端っこまで伸びてくれました。

これと<h3>の方法と比較して、どっちの方がメリットがあるとか、ないとか、ってあるんですかね?
#87 : h3 見出し
コンバンハ。
見栄えという観点でいえばどちらも同じです。
「subtitle」というクラス名についても「taitoru」でも「subject」でも違いはございません。

ただし<h番号>と<p>については異なります。
ざっくりですが、<h>は見出しを意味する要素で、HTMLの構造を読む検索エンジンのロボットに「これは見出しです」とアピールすることに繋がります。
<p>は普通の段落テキストを意味します。
なので見出しとして使う分には<h>を使用した方が適切です。
ただ<h>の番号には使う順序などのルールがあります。
あくまでも巡回するロボットに向けてのルールなので、普通に見る分にはそのルールを破っても問題ありません。
ロボットに対して適切な表示をしたい場合は順守するようにします。
このブログの場合は将来テンプレート構造を変更する可能性があるので、とりあえず<p>で処理している状態です。

basic_whiteはxhtmlで記事タイトルがh2になっているので記事本文にはh3以降の数を使います。同じ階層の見出しなら数を増やさずにh3だけを使い、デザインを変える時はクラス名のみを変更します。

<h3 class="design">見出し3-1</h3>
<h3 class="design2">見出し3-2</h3>
<h3 class="design">見出し3-3</h3>
#main_contents h3.design{
見出し3-1と見出し3-3のデザインを指定
}
#main_contents h3.design2{
見出し3-2のデザインを指定
}

HTMLやクラス、デザインの詳細な指定方法については専門のウェブサイト(「h要素」「HTMLマークアップ」「css クラス名」などのキーワードで検索)にてご確認くださいませ。
#88 : No title
#87
詳しく助かりますですm(_ _)m

いわゆるSEOとか的には<h番号>を使う方が良い(自然)ってことですね。なるほど勉強になりました。さっそくh3に変更させていただきました!ありがとうございました!
#353 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered