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

【Seesaaブログ新デザインシステム】ページ案内リンク「前ページ・次ページ案内リンク」ボタンの高さを2行にする(2)HTMLの編集

Seesaaブログの記事ページの前ページ・次ページ案内リンクを編集
■記事ページの前ページ・次ページ案内リンクを編集
■記事タイトルの表示文字数を増やす
■ボタンの記事タイトルを改行して2行にする
■HTMLを編集  

記事ページの下部に表示される「前ページ・次ページ案内リンク」を編集します。
この画像のように、「前ページ・次ページ案内リンク」を2行分の高さがあるボタンで表示するようにカスタマイズします。


前ページ・次ページ案内リンクボタン



とりあえず、関連記事を案内しておきます。






完成イメージと準備しておくものについては、前回の記事<■ページ案内リンク「前ページ・次ページ案内リンク」ボタンの高さを2行にする(1)完成イメージと準備>に掲載しています。
まずは前回の記事に書いたカスタマイズの概要を読んでください。特に、見た目については必ず確認してください。その上で「使ってもいいかな」と思われる場合のみ、下記の通りにHTMLを編集してください。
矢印画像も忘れずに準備しておいてくださいね。



HTMLについては、ここまで色々とカスタマイズしたせいでデフォルトのテンプレートとは激しく異なるコード記述になっています。でもよく考えてみれば、このままこの記事で紹介するようにコードを変更すれば(コピペすれば)、Seesaaブログの記事ページの「前ページ・次ページ案内リンク」をボタン表示にできます。


「ボタン表示にできます」というか、勝手にボタン表示になります(笑)
そういう内容のHTMLコードとCSSコードなんですよね。
つまり、私が以前書いた「前ページ・次ページ案内リンク」に関する記事は無意味ってことになっちゃうねw
まあ、仕方ないか。





編集する前に少しだけ説明


HTMLを編集する前に少しだけ説明というか、確認しておくべきことがあります。
まずは前回の記事で書いているように、矢印画像2つをブログにアップロードして、そのURLを確認しておいてください。
パソコンの「メモ帳」ソフトにでもURLをコピペして、すぐに使えるようにしておきます。



この記事ではHTMLを編集します。
管理画面の「HTML編集」画面で「<div class="permalink">」タグを探します。デフォルトのテンプレートでは100行目あたりに、カスタマイズ後の場合は393行目あたりにあります。
「permalink」が、「前ページ・次ページ案内リンク」に対するclassです。


HTML上には「<div class="permalink">」タグが何ヶ所かありますが、他のタグ(過去ログページとかタグ一覧ページとか)は無視してください。「記事ページ」の「前ページ・次ページ案内リンク」だけを編集します。記事タイトルを表示させるような案内リンクを編集しようとしているからです。



393行目の「<div class="permalink">」の下には、プレビュー(前のページ)部分「<% if:previous_article -%>」とネクスト(次のページ)部分「<% if:next_article -%>」に関するコードが記述されています。
上段がプレビュー、下段がネクストです。


前ページ・次ページ案内リンクのHTML


この画像は「前ページ・次ページ案内リンクにマウスを乗せた時に記事タイトルを表示させる」という記事を書いた時に使った画像ですので、まだ記事タイトルを表示させるコードを記述していません。
でも、なんとなく位置はわかると思います。
プレビューとネクストで上下に分けてコード記述されていることを覚えておいてください。



ついでに、この記事内で編集する内容を書き出しておきます。


編集内容■「HTML編集画面」で記事ページの下部に表示される「前ページ・次ページ案内リンク」を編集する
■ボタンに表示する記事タイトルの文字数を「24バイト」にする
■新しくclassを作る
■ページ案内ボタンの横に矢印画像を配置する
■ページ案内ボタンと矢印画像に、ページ案内のリンクを貼る


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


では、HTMLを編集します。
管理画面の「HTML編集」画面で「<div class="permalink">」タグを探します。デフォルトのテンプレートでは100行目あたりに、カスタマイズ後の場合は393行目あたりにあります。


前ページ・次ページ案内リンク部分のHML



HTMLの該当部分に下記「編集後」のコードをコピペするか直接記述します。
ただし、コード内にURLを記述する箇所が2ヶ所ありますので、下記「編集後」に記載したURLは使わずに、ご自分で準備した矢印画像のURLに書き換えてください
掲載しているURLは、「□」を使って潰したURLです。ご自分のパソコンのメモ帳にコピペしておいた画像のURLに書き換えた後、変更内容を「保存」してください。
(詳しいことはコードを紹介した後で、また改めて説明します)


<元コード>
<!-- 前ページ・次ページ案内 -->
<div class="permalink">
<% if:previous_article -%>
<a href="<% previous_article.page_url -%>" class="prev" title="<% previous_article.subject -%>"><% previous_article.subject | tag_break | text_summary(12) -%></a>
<% /if -%>
<% if:next_article -%>
<a href="<% next_article.page_url -%>" class="next" title="<% next_article.subject -%>"><% next_article.subject | tag_break | text_summary(12) -%></a>
<% /if -%>
</div>
<!-- /前ページ・次ページ案内 終わり -->


<編集後>
<!-- 前ページ・次ページ案内 -->
<div class="permalink2">
<% if:previous_article -%>
<div class="permalinkprev">
<p class="prev-mark"><a href="<% previous_article.page_url -%>" title="<% previous_article.subject -%>"><img src="http://□□□.up.seesaa.net/image/yajirushi_01.png"></a></p>
<p class="prev"><a href="<% previous_article.page_url -%>" title="<% previous_article.subject -%>"><% previous_article.subject | tag_break | text_summary(24) -%></a></p>
</div>
<% /if -%>
<% if:next_article -%>
<div class="permalinknext">
<p class="next-mark"><a href="<% next_article.page_url -%>" title="<% next_article.subject -%>"><img src="http://□□□.up.seesaa.net/image/yajirushi_02.png"></a></p>
<p class="next"><a href="<% next_article.page_url -%>" title="<% next_article.subject -%>"><% next_article.subject | tag_break | text_summary(24) -%></a></p>
</div>
<% /if -%>
</div>
<!-- /前ページ・次ページ案内 終わり -->


編集後のHTMLコード



コード内容の説明(文字数を増やす)


元コードで説明します。


<元コード>
<!-- 前ページ・次ページ案内 -->
<div class="permalink">
<% if:previous_article -%>
<a href="<% previous_article.page_url -%>" class="prev" title="<% previous_article.subject -%>"><% previous_article.subject | tag_break | text_summary(12) -%></a>
<% /if -%>
<% if:next_article -%>
<a href="<% next_article.page_url -%>" class="next" title="<% next_article.subject -%>"><% next_article.subject | tag_break | text_summary(12) -%></a>
<% /if -%>
</div>
<!-- /前ページ・次ページ案内 終わり -->


●数値の部分(このコードの場合は「12」)を「24」に変更しました
数値は「文字数」ではなく「バイト数」です。
デフォルトのテンプレートでは「15」だったはずですが、私は以前やったカスタマイズで「12」にしていたので、今回「24」に変更しました。
数値はお好きなように変更してかまいません。「26」とか「28」とか、適当にどうぞ。



コード内容の説明(新しくclassを作る)


編集後のコードで説明します。


<編集後>
<!-- 前ページ・次ページ案内 -->
<div class="permalink2">
<% if:previous_article -%>
<div class="permalinkprev">
<p class="prev-mark"><a href="<% previous_article.page_url -%>" title="<% previous_article.subject -%>"><img src="http://□□□.up.seesaa.net/image/yajirushi_01.png"></a></p>
<p class="prev"><a href="<% previous_article.page_url -%>" title="<% previous_article.subject -%>"><% previous_article.subject | tag_break | text_summary(24) -%></a></p>
</div>
<% /if -%>
<% if:next_article -%>
<div class="permalinknext">
<p class="next-mark"><a href="<% next_article.page_url -%>" title="<% next_article.subject -%>"><img src="http://□□□.up.seesaa.net/image/yajirushi_02.png"></a></p>
<p class="next"><a href="<% next_article.page_url -%>" title="<% next_article.subject -%>"><% next_article.subject | tag_break | text_summary(24) -%></a></p>
</div>
<% /if -%>
</div>
<!-- /前ページ・次ページ案内 終わり -->


●「<div class="permalink2">」
元コードでは「<div class="permalink">」というclass名でしたが、新しくclass「<div class="permalink2">」を作りました。(面倒くさいので「2」を足しただけです)
矢印画像を挿入するための枠(空間)を新しく作る必要があるため、過去ログページやタグ一覧ページの「<div class="permalink">」とは区別しなければいけないわけです。「2」を足しただけのclass名が気に入らない場合はもちろん、お好きなclass名に変更してください。
この「<div class="permalink2">」は、記事ページの「前ページ・次ページ案内リンク」部分全体を指します。(外枠だと思っておけばいいです)



●「<div class="permalinkprev">」と「<div class="permalinknext">」
「<div class="permalink2">」が「前ページ・次ページ案内リンク」部分全体の枠ですから、その中にはプレビュー部分とネクスト部分の枠を作っておきます。
プレビュー(前のページ)部分が「<div class="permalinkprev">」、ネクスト(次のページ)部分が「<div class="permalinknext">」です。



●「<p class="prev-mark">」と「<p class="prev">」
プレビュー部分「<div class="permalinkprev">」の枠内には、矢印画像とリンクテキスト(ボタン)が入ります。それぞれにclass名を付けて区別します。
<p class="prev-mark">」が矢印画像、「<p class="prev">」がテキスト(ボタン)部分です。
「prev」というclassは元のコードでは「a」タグに付けられていました。今回「p」タグを使用するので「p」タグにclassを移動させました。なので「a」タグにはclassがありません。



●「<p class="next-mark">」と「<p class="next">」
考え方はプレビュー部分と同じです。
ネクスト部分「<div class="permalinknext">」の枠内にも矢印画像とリンクテキスト(ボタン)が入りますので、それぞれにclass名を付けます。
<p class="next-mark">」が矢印画像、「<p class="next">」がテキスト部分です。「a」タグにあったclassを「p」タグに移動させたのもプレビューと同じです。


イメージ図
0602.jpg



コード内容の説明(矢印画像を配置)


編集後のコードで説明します。


<編集後>
<!-- 前ページ・次ページ案内 -->
<div class="permalink2">
<% if:previous_article -%>
<div class="permalinkprev">
<p class="prev-mark"><a href="<% previous_article.page_url -%>" title="<% previous_article.subject -%>"><img src="http://□□□.up.seesaa.net/image/yajirushi_01.png"></a></p>
<p class="prev"><a href="<% previous_article.page_url -%>" title="<% previous_article.subject -%>"><% previous_article.subject | tag_break | text_summary(24) -%></a></p>
</div>
<% /if -%>
<% if:next_article -%>
<div class="permalinknext">
<p class="next-mark"><a href="<% next_article.page_url -%>" title="<% next_article.subject -%>"><img src="http://□□□.seesaa.net/image/yajirushi_02.png"></a></p>
<p class="next"><a href="<% next_article.page_url -%>" title="<% next_article.subject -%>"><% next_article.subject | tag_break | text_summary(24) -%></a></p>
</div>
<% /if -%>
</div>
<!-- /前ページ・次ページ案内 終わり -->


●上段にプレビュー、下段にネクストのコードが記述されています。準備した矢印画像のURL(プレビュー用とネクスト用)を、それぞれのURL部分にコピペしてください
とりあえずわかりやすいように、私のブログにアップした矢印画像のURLを赤色で記述して、「□」で潰しています。この部分にご自分で準備した画像のURLを入れてください。



コード内容の説明(リンクの設定)


編集後のコードで説明します。


<編集後>
<!-- 前ページ・次ページ案内 -->
<div class="permalink2">
<% if:previous_article -%>
<div class="permalinkprev">
<p class="prev-mark"><a href="<% previous_article.page_url -%>" title="<% previous_article.subject -%>"><img src="http://□□□.up.seesaa.net/image/yajirushi_01.png"></a></p>
<p class="prev"><a href="<% previous_article.page_url -%>" title="<% previous_article.subject -%>"><% previous_article.subject | tag_break | text_summary(24) -%></a></p>
</div>
<% /if -%>
<% if:next_article -%>
<div class="permalinknext">
<p class="next-mark"><a href="<% next_article.page_url -%>" title="<% next_article.subject -%>"><img src="http://□□□.up.seesaa.net/image/yajirushi_02.png"></a></p>
<p class="next"><a href="<% next_article.page_url -%>" title="<% next_article.subject -%>"><% next_article.subject | tag_break | text_summary(24) -%></a></p>
</div>
<% /if -%>
</div>
<!-- /前ページ・次ページ案内 終わり -->


●ページ案内ボタンと矢印画像、どちらかをクリックしたらプレビューページやネクストページに飛ぶようにリンクを設定しています。つまり、ページ案内ボタンにリンクを設定し、さらに矢印画像にもリンクを設定しているわけです。
リンクタグは「a」です。開始タグ「<a>」と終了タグ「</a>」で挟まれた部分にリンクが設定されます。
本当は、ページ案内ボタンと矢印画像をまとめて「a」タグで挟みたかったのですが、それぞれを「p」タグで切り分けているので無理でした。(切り分けてclassを区別しないと矢印画像を配置できませんでした)
このHTMLコードは少し複雑に見えるかもしれませんが、同じリンクタグで画像とテキストを別々に挟んでいるので文字数が多くなっただけです。構成自体は非常に単純だと思います。




次の記事の紹介

ということで、HTMLのコード内容について説明しました。
HTMLを編集しただけでは、実際のページに変化はありません。スタイルを設定していないからです。
次の記事でCSSを編集します。
CSSの編集が終わると、記事ページの「前ページ・次ページ案内リンク」はきちんと稼働すると思います。たぶんw


【Seesaaブログ新デザインシステム】ページ案内リンク「前ページ・次ページ案内リンク」ボタンの高さを2行にする(3)CSSの編集
前回の記事でHTMLを編集した時に、新しいclassを設定しました。前ページ・次ページ案内リンク全体の枠として「permalink2」を作成し、プレビュー(前のページ)部分には「permalinkprev」「prev-mark」‥‥






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

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