Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】ページ案内リンク「前ページ・次ペー…

【Seesaaブログ新デザインシステム】ページ案内リンク「前ページ・次ページ案内リンク」をボタンにする

Seesaaブログ新デザインシステムのページ案内リンク「前ページ・次ページ案内リンク」をボタンにする
■記事ページの下にある「前ページ・次ページ案内リンク」をボタンにする
■CSSの「permalink」を編集
■表示させる文字数の設定
■消えてしまったclass「.permalink--bdt」について  

Seesaaブログには、いわゆる「ページ案内リンク」が何種類かあります。
以前の記事<■【Seesaaブログ新デザインシステム】ページ案内リンク(「12345ボタン(pager)」「続きを読む」「もっと見る」)を編集する>では、この「ページ案内リンク」を少しだけ編集しました。
私が勝手に名付けた「12345ボタン(pager)」や「続きを読む」「もっと見る」です。



この記事では、以前の記事では手を付けていなかった、記事ページの下の方に表示されるページ案内リンク「前ページ・次ページ案内リンク」を編集したいと思います。
私は勝手に「前ページ・次ページ案内リンク」と呼んでいますが、たぶんこういう名前ではないと思います。便宜上、このブログでは「前ページ・次ページ案内リンク」と呼び続けますのでご了承ください。



ということで、記事ページの下部にある「前ページ・次ページ案内リンク」です。


現時点のテンプレート
ページ案内リンクの画像


文字にリンクが貼ってあるだけなので、簡素ですね。
特に「12345ボタン」みたいに「ボタン表示」に慣れてしまうと、コレはちょっと素朴すぎる。



ということで、「前ページ・次ページ案内リンク」をボタン表示にしたいと思います。
こんな感じにします!


編集後のイメージ
編集後のページ案内リンクの画像


ボタンの左側が通常時、右側がhover時(マウスを乗せた時)の表示です。
案内リンク「12345ボタン」と同じになるように設定しました。





ページ案内リンク「前ページ・次ページ案内リンク」を編集する


CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で「permalink」というclassを探します。
前ページ・次ページ案内リンクは「permalink」というclass名で設定されています。



下記に「元コード」と「編集後」のコードを掲載しておきます。
CSSの該当部分(「.permalink」〜「.permalink .next:hover:after」)に「編集後」のコードをコピペするか、直接変更してください。というか、コピペしてコードを丸ごと入れ替えてください。


元コードには記載されているのに編集後のコードには記載されていないclassもありますが、それはきちんと説明しますので、とりえあえず全部コピペしてから「保存」してください。(コード内の文字色は気にせずにコピペをどうぞ)


<元コード>
.permalink {
text-align: center;
margin-bottom: 80px;
}

.permalink--bdt {
padding-top: 10px;
margin-top: 65px;
border-top: 1px dotted #ccc;
}


.permalink .prev:before,
.permalink .next:after {
content: "";
display: inline-block;
margin: auto;
width: 0px;
height: 0px;
border: 4px solid transparent;
}

.permalink .prev {
float: left;
}

.permalink .prev:before {
border-right: 4px solid #333;
margin-right: 10px;
}

.permalink .prev:hover:before {
border-right: 4px solid #60d3f2;
}

.permalink .next {
float: right;
}

.permalink .next:after {
border-left: 4px solid #333;
margin-left: 10px;
}

.permalink .next:hover:after {
border-left: 4px solid #60d3f2;
}


<編集後>
/*** ページ案内(前のページ・次のページ)
*****************************************************/

/****** ページ案内ボタン(外枠) ******/
.permalink {
text-align: center;
width:70%;
margin:0 auto 40px;
}

/****** ページ案内ボタン ******/
.permalink .prev:before,
.permalink .next:after { /* 三角マーク(基本) */
content: "";
display: inline-block;
margin: auto;
width: 0px;
height: 0px;
border: 6px solid transparent; /* 三角形 */
}

.permalink .prev { /* 前のページ案内ボタン(四角) */
float: left;
border: 1px solid #aaa; /* 外枠 */
padding:3px 10px 3px 0px;
text-decoration:none;
color:#404040;
/* 文字色(少し黒) */
}

.permalink .prev:hover { /* 前のページ案内ボタン(四角)(hover時) */
border: 1px solid #4E667D; /* 外枠 */
background: #4E667D; /* ボタン全体背景色 */
color:#fff; /* 文字色(白) */
}

.permalink .prev:before { /* 前のページ案内の三角形マーク */
border-right: 6px solid #333; /* 三角形(黒) */
margin-right: 10px; /*テキストとの距離*/
}

.permalink .prev:hover:before { /* 前のページ案内の三角形マーク(hover時) */
border-right: 6px solid #60d3f2; /* 三角形(水色) */
}

.permalink .next { /* 次のページ案内ボタン(四角) */
float: right;
border: 1px solid #aaa; /* 外枠 */
padding:3px 0px 3px 10px;
text-decoration:none;
color:#404040;
/* 文字色(少し黒) */
}

.permalink .next:hover { /* 次のページ案内ボタン(四角)(hover時) */
border: 1px solid #4E667D; /* 外枠 */
background: #4E667D; /* ボタン全体背景色 */
color:#fff; /* 文字色(白) */
}

.permalink .next:after { /* 次のページ案内の三角形マーク */
border-left: 6px solid #333; /* 三角形(黒) */
margin-left: 10px; /*テキストとの距離*/
}

.permalink .next:hover:after { /* 次のページ案内の三角形マーク(hover時) */
border-left: 6px solid #60d3f2; /* 三角形(水色) */
}


●コメントアウトしている部分に説明を書いていますが、もうまさしくその通りなので(笑)今更「コレはここの部分についてのコードだ」等の説明はやめます。どの部分に関する記述なのかはコメントアウトを見ればわかると思います。

●「permalink」関連のコードは全部このコードに書き換えてください。(丸ごとコピペ推奨)

●「.permalink」の「width」を70%にしていますが、この数字を変更するとページ案内ボタンの配置を変更することができます。例えば90%にするともう少し外側にボタンを配置することができますので、ご自分で試しながら数値を変更してください。


●class「.permalink--bdt」について
元コードに記載されていた「.permalink--bdt」ですが、入れ替え後のコードでは削除しています。
もともとこの「.permalink--bdt」が使用されているのは、タグ一覧ページで「もっと見る」ボタンをクリックして開いたページです。(タグ一覧ページではなく、その先のページです)
説明はこの記事の最後にしますので、とりあえずここではスルーしてください。
先に文字数の設定をします。



ページ案内リンク「前ページ・次ページ案内リンク」の表示文字数


「前ページ・次ページ案内リンク」には記事タイトルが表示されますが、文字数を変更することができます。CSSを編集後、ボタンの文字数が気になるようでしたら以下のやり方を試してみてください。



HTMLを編集します。
管理画面の「HTML編集」画面で「<div class="permalink">」タグを探します。カスタマイズ後の場合は、おそらく105行目あたりにあります。


編集するHTML部分


「<div class="permalink">」以下のコードで数字「15」の部分が2ヶ所あると思いますが、これが文字数(バイト)です。
最初の島がプレビュー(前ページ)、次の島がネクスト(次ページ)です。
この「15」という数字を変更すれば、ボタンに表示させる文字数を変えることができます。
私のブログでは、両方とも「12」にしています。


ちなみに私は、「前ページ・次ページ案内リンク」の部分に見出しを付けています。
「<div class="permalink">」〜「</div>」の上下にコメントアウトで「<!-- 前ページ・次ページ案内 開始 -->」「<!-- /前ページ・次ページ案内 終わり -->」という見出しを入れて、コード上で何が書いてあるのかをわかりやすくしました。(この画像は見出しを付ける前の画像ですので見出しはありません)



消えてしまったclass「.permalink--bdt」について


CSSの編集の際に、元コードに記載してあった「.permalink--bdt」を削除しました。
とりあえず元のコードをもう一度記載しておきます。


<元コード「.permalink--bdt」>
.permalink--bdt {
padding-top: 10px;
margin-top: 65px;
border-top: 1px dotted #ccc;
}



この「.permalink--bdt」が使用されているのは、タグ一覧ページで「もっと見る」ボタンをクリックして開いたページです。(タグ一覧ページではなく、その先のページです)
現時点での「.permalink--bdt」はこんな感じで表示されます。


タグ一覧ページの先のページの画像


わかりやすくするために、元コードの「.permalink--bdt」の中の「border-top: 1px dotted #ccc;」を5pxにしています。
太い点線から下部分(画像内で赤い矢印で示している部分)が「.permalink--bdt」の範囲です。


タグ一覧ページの、「もっと見る」ボタンをクリックして開いたページにだけ使用されるこのclassは必要ないと思いませんか?


そもそもCSSで設定されているのは、上記画像の赤い矢印で示している範囲なわけです。(リンク案内「次へ」は「.permalink--bdt」で設定されているのではありませんので間違えないでくださいね)
「.permalink--bdt」の中身は内側の上余白(padding-top)、外側の上余白(margin-top)、点線(border-top)だけですから、ただの「範囲」を設定しているclassです。
必要ですかね?



まあ、私は必要ないと思いましたので、さくっと削除しちゃいました。
削除したからといって何も問題は起こりません。
なぜなら、この「permalink--bdt」は、HTML上では別のclass「permalink」と同時に設定されているからです。「permalink--bdt」がなくなっても「permalink」があればいいのです。というか、大丈夫なように上記で設定しました。(コード内容が意味わからなくても、大丈夫なように設定されていますから気にしなくていいです)



タグ一覧ページのHTMLから「permalink--bdt」を削除する


CSS(スタイルシート)では「.permalink--bdt」を削除してしまいましたが、タグ一覧ページのHTML上にも当然のことながら「permalink--bdt」というタグの記載があります。
でも、必要ありません。
「.permalink」で編集した設定をそのまま使用できるので不必要なのです。
タグ一覧ページのHTMLから削除しておきます。



HTMLを編集します。
管理画面の「HTML編集」画面で「permalink--bdt」を探します。1ヶ所しかありませんのですぐに見つかると思います。


HTML編集画面内のpermalink--bdt


このコード記述の中の「permalink--bdt」を削除します。
削除後は「<div class="permalink">」という表記になりますので、そのまま保存します。
しつこいですが、「前ページ・次ページ案内リンク」classは「permalink」だけでやりますので「permalink--bdt」というclassは必要ありません。いらないよ。



コード編集後の実際のページ


編集後のページ案内リンクの画像


コードの編集をした後の「前ページ・次ページ案内リンク」です。
通常は枠線だけが表示され、マウスを乗せるとボタンに背景色が付きます。(右側がマウスを乗せた時)
デフォルトの、ただの文字にリンクが貼ってある状態よりも、主張するようになったと思います。
とりあえず、「前ページ・次ページ案内リンク」のボタン化は終わりです。



ちなみに、このブログでは別の記事で「前ページ・次ページ案内リンク」ボタン表示を色々とカスタマイズしています。このまま「前ページ・次ページ案内リンク」を編集する場合は、こちらの記事をお読みください。


【Seesaaブログ新デザインシステム】ページ案内リンク「前ページ・次ページ案内リンク」にマウスを乗せた時に記事タイトルを表示させる
Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」では、記事ページの下部には「前ページ・次ページ案内リンク」が表示されます。ボタン表示にしたのでクリックしやすくて便利だと思っていましたが、ボタン表示にした‥‥




次の記事の紹介

次の記事では、Seesaaブログの構成を少しだけ変更します。
カテゴリページやタグ一覧ページを開くとタイトル部分がズレて表示されるため、それを編集します。その後で記事ページの「関連記事」部分を編集したいと思います。


【Seesaaブログ新デザインシステム】カテゴリページ・タグ一覧ページのタイトルを記事タイトルと同じ位置に置く・「heading」を編集する
このままカスタマイズを続けるならば、次は記事ページの下部にある「関連する記事」や「この記事へのコメント」部分の編集になりますが、その前に、このブログのカタチをしっかり決めて、「heading」というclassを編集しようと思います。‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。