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

ここまでのカスタマイズで、とりあえずトップページは完成っぽいです。
でもよく見たら、ページの下部にあるページ案内リンク（1ページ目や2ページ目を案内するボタン）の背景色が水色のままです。
水色だと違和感があるので、ボタン部分の背景色などを変更したいと思います。





Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」のCSS（スタイルシート）では、いわゆる「ページ案内リンク」に関する指示がまとめて記述されています。
なのでこのまま、まとめて記述されている「12345ボタン」「続きを読む」「もっと見る」を編集します。
もちろん「もっと見る」なんて現時点では何のことだかわからないと思いますので、画像を入れて説明します。

ページ案内リンク「12345ボタン（pager）」を編集する

まずはページ案内リンク「pager」を編集します。
この案内リンクボタンはページの1ページ目、2ページ目、と案内するボタンなので、とりあえず私は「12345ボタン」と呼んでいます。もちろん正式名称はわかりません。
今後わざわざ「1ページ目、2ページ目」と書くのも面倒なので、以降は「12345ボタン」で統一して表記します。



では、CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「pager」というclassを探します。
12345ボタンは「pager」というclass名で設定されています。


下記に「元コード」と「編集後」のコードを掲載しておきます。
CSSの該当部分に「編集後」のコードをコピペ又は該当箇所を直接変更して「保存」します。
説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。


＜元コード＞


＜編集後＞


●コメントアウトで見出し「ページ案内（12345ボタン・続きを読む・もっと見る）」や「/****** 12345案内ボタン ******/」を付けています。

●「.pager__item a,.pager__item span」では文字色を変更し、「text-decoration: none;」を追加して下線を削除しています。
リンク部分に下線を入れてしまうと「＞」の下にも下線が入ってしまい、まるで「≧」のように見えてしまうからです。（私はあまりこういう表記が好きではないのでｗ）

●あとはカラーコード（色）を変えているだけです。
「.pager__item a:hover」のカラーコードがマウスを乗せた時の色を、「.pager__item.is-active span」のカラーコードがアクティブ時（開いているページ）の色を指定しています。

コード編集後のCSS（pager）

ページ案内リンク「続きを読む」を編集する

Seesaaブログは記事を折りたたむことができ、「続きを読む」というリンク案内があります。





この「続きを読む」も編集してみたいと思います。


と思いましたが、ほとんど編集しませんでした（笑）
私は別に「続きを読む」はそのまま文字表記でいいかなぁと思っていたので、触ったけれども何もしなかった感じです。
一応、どこを編集すればいいのかを示しておきます。



では、CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「read-more」というclassを探します。
「続きを読む」は「read-more」というclass名で設定されています。


下記に「元コード」と「編集後」のコードを掲載しておきます。
CSSの該当部分に「編集後」のコードをコピペ又は該当箇所を直接変更して「保存」します。
説明するために文字色を変更している部分がありますが、気にせずにコピペしてください。


＜元コード＞


＜編集後＞


●コメントアウトで見出し「/****** 続きを読む（外枠） ******/」を付けています。
●「margin-top」を20pxに変更しただけです。

「read-more」で編集できる範囲

「read-more」というclassで編集できるのはこの赤枠の部分です。




編集後のコードにコメントアウトしているように、外枠部分しか編集できません。
もしもボタン風に表示したいからと背景色を付けても、この外枠の全部の背景色が変わるだけです。
ボタンみたいにしたかったら、たぶん「div」でテキスト部分を囲って指定していかないといけないと思います。
HTMLも編集しないといけませんね。
やってやれないことはないけれども、非常に面倒なので私はやりません。

コード編集後のCSS（read-more）

ページ案内リンク「もっと見る」を編集する

ここまでのカスタマイズでは出てきていませんので「もっと見る」はどこで表示されるのか？と思われるかもしれません。
「もっと見る」はタグ一覧ページ（と私は呼んでいます）で表示される案内リンクです。



Seesaaブログでは記事をアップする時に、「タグ」を付けることができます。
「タグ」は共通で設定したものを一覧表示することができます。これがタグ一覧ページです。
タグ一覧ページは現時点ではこのように表示されます。




このように、「もっと見る」がまるで「続きを読む」とそっくりで、間違ってしまいそうです。
（というか、全く目立たなくて何か意味があるんでしょうか？この表記）



今からこの「もっと見る」を編集しますが、「続きを読む」と同じ見た目だとなんだかイヤなので、ボタンに変更してしまいます。


通常時の「もっと見る」



マウスを乗せた時の「もっと見る」




ちなみにこの「もっと見る」という表記ですが、最終的には別の記事の中で『「○○」の記事をすべて見る』という表記に変更します。変更方法を説明した記事はこちらです。

CSSで「もっと見る」を編集する

CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「read-more--bdt」というclassを探します。
もっと見るは「read-more--bdt」というclass名で設定されています。



CSSの該当部分に「編集後」のコードをコピペ、もしくは該当箇所を直接変更してから「保存」します。
今回は「.read-more--bdt a」と「.read-more--bdt a:hover」の2つのコードを追加することになりますので、そのままコピペした方がいいと思います。


＜元コード＞


＜編集後＞


●コメントアウトで見出し「/****** もっと見る ******/」等を付けています。

●「read-more--bdt」と「read-more--mgb-60」の2つしかなかったclassに色々と追加されてコードが膨大になっていますが、気にしないでください。

●「.read-more--bdt」には「border-top: 1px dotted #ccc;」が入っていましたが、そもそもボタン表示しようと考えているのでこの点線はいりません。削除しました。

●ボタン表示したいので、「.read-more--bdt」に「a」の場合と「hover」の場合の設定を追加しました。「a」と「hover」で表示や動きを追加します。

●背景色やマウスをあてた時の変化については「.read-more--bdt a」と「.read-more--bdt a:hover」を編集して調整してください。



●「.read-more--bdt a」の「width:60%;」
「.read-more--bdt a」ではボタンの横幅を「width:60%;」に設定していますが、数値は好きなように変更してください。タグの文字数によると思います。
pxを指定するよりも%で指定していた方が、ブラウザの横幅を狭くした時に都合がいいと思います。
※「px」で固定表示した場合は、ブラウザの横幅を狭くして閲覧した時に下図のようにボタンが飛び出てしまいます。





●「.read-more--mgb-60」について
「.read-more--mgb-60」は、元のコードでも下余白「margin-bottom」しか設定されていません。
これはタグを一覧表示をした時の、下のコンテンツとの間の余白を設定している部分です。

私のブログ編集では最終的に「もっと見る」の下に記事一覧リストを表示させることにしますので、記事タイトルとの間の余白をここで設定します。
※私のブログでは記事タイトル部分に上余白100pxを設定するので「もっと見る」ボタンの下余白は「5px」で大丈夫ですが、私のように設定しない方は、きちんと数値を入れてください。

コード編集後のCSS（read-more--bdt）

次の記事の紹介

次の記事では、Seesaaブログの記事ページを線で囲む方法を説明します。