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

Seesaaブログの記事ページの下には、「前ページ・次ページ案内リンク」が表示されます。
このブログでは、「前ページ・次ページ案内リンク」をボタンで表示するようにカスタマイズして、さらにマウスをボタンに乗せた時に記事のタイトルを表示するように設定しました。






「マウスをボタンに乗せた時に記事のタイトルを表示する」というのは、この画像のような感じになるということです。





でも、もう少しぐらいボタン自体に記事タイトルを表示させてもいいのではないか？と思ったのが、今回の記事を書くきっかけです。


現時点での記事タイトルの文字数は「12バイト」です。
これを例えば「30バイト」に変更すると、ボタンの横幅が広がってしまいます。
ボタンの横幅が広がると、プレビュー（前のページ）とネクスト（次のページ）のそれぞれのボタンの間隔が狭くなってしまって、ちょっとおかしいわけです。
じゃあ、ボタンを2行分、表示できればいいのに‥‥
コレがきっかけなのです。
そして、めちゃくちゃ苦労しました（笑）



ちょっと宣言しておきますが、今回の一連の記事は全部私が考えたコード記述ですので、絶対的に信頼するのはやめてください。ネット上のどなたかのカスタマイズを参考にしたかったけど探せなかったので（笑）自分で考えました。なので、正直不安なのです。
でもちゃんと表示することができるし、ちゃんと動くわけですから、記事にしました。
（このブログは私がやったカスタマイズの備忘録ですので、どんなことでもカスタマイズしたら記事にするのですｗ）

ページ案内リンク「前ページ・次ページ案内リンク」の完成形

まずは、カスタマイズをやるとどうなるのか、完成イメージを提示しておきます。
欠点らしきものもありますので、それを踏まえた上で利用したいと思われるならば、どうぞ。






記事タイトルが1行で済む場合
プレビューとネクスト、両方とも記事タイトルの文字数が少ない場合は、ボタンの高さは1行分で表示されます。こんな感じです。






記事タイトルが2行の場合
プレビューとネクスト、両方とも記事タイトルの文字数が多い場合は、ボタンの高さは2行分で表示されます。HTMLで表示文字数を「24バイト」に設定しますので、どんなに記事タイトルの文字数が多くても24バイト分しか表示されません。なので2行分になります。






記事タイトルが1行と2行の場合
記事タイトルが1行と2行の場合、これが欠点といえば欠点です。
例えばプレビューの記事タイトルの文字数が少なくて、ネクストの文字数が多い場合、こんな感じで見た目がちょっとアレなことになります。





まあ、私は許容範囲内かな？と思っています。
なぜなら、私が書くブログ記事のタイトルは、長いからです！！（ドヤｗｗｗ）
めったに1行になることはないでしょう（笑）



なぜ表示文字数を30バイトとか40バイトにしていないのかというと、こうやって1行の場合と2行の場合があるからです。
もしも文字数を40バイトに設定して、記事タイトルを全部ボタンに表示させようと思った場合、文字数が多いものは3行分とか4行分とか取って、少ないものは1行分になってしまいます。これはさすがにおかしい。
でも24バイトぐらだと、どんなに頑張っても2行分にしかならないわけですね。



「ボタン自体に現時点よりも多くの文字数で記事タイトルを表示させたい」
これが今回のカスタマイズを思いついたきっかけです。
でも、記事タイトルをすべて表示させるというのは、その分スペースを取ってしまうわけです。見た目がおかしいならば、このカスタマイズはやるべきではない。
「現時点よりも多く」という点を重視すると、2行分ぐらいで収めておくのが丁度いいのではないかという判断です。



もう1つ、記事タイトルを2行分の高さにしても大丈夫だろうという判断の根拠にあるのは、前回の記事＜■ページ案内リンク「前ページ・次ページ案内リンク」にマウスを乗せた時に記事タイトルを表示させる＞でボタンの上にマウスを乗せると記事タイトルを表示するように設定したことです。

記事タイトル全部がボタンに表示されていなくても、クリックするためにマウスをボタンに乗せるとちゃんと記事タイトルがわかるので、表示文字数を抑えても問題は無いと考えました。


もしもこの欠点？を気にしないという場合は、記事タイトルの表示文字数を好きなように増やしてかまいません。ちゃんと改行できるように設定していますので、どんだけでもボタン内に文字を表示できます。（私はやりませんけどね！）

使用している矢印の画像について

先に完成形を見せましたが、今回のカスタマイズではしれっと画像を使っています。
デフォルトのテンプレートでは、プレビューもネクストも、三角形のマークが表示されていました。この三角形はCSSで作られていたので、以前の記事で私がページ案内リンクをボタン表示に変更した際にも、そのまま三角形を利用しています。





今回のカスタマイズでは、この三角形がとても、マジで、邪魔でした（笑）
ボタンの枠の外に三角形を表示させようと試行錯誤していたのですが、できなかった。
私には技量がありませんので、どんなに頑張っても無理だったんです。（ネクストの三角形がおかしな位置にきちゃうのよね）
なので、三角形を使うのをあきらめることにしました。（相変わらずさくっと決断するｗ）


でもやっぱり矢印的なものがほしかったので、自分で画像を作りました。
ここで紹介しておきますので、使いたい方はどうぞ、持って行ってください。

私が作った矢印画像

矢印画像を右クリックして「名前を付けて画像を保存」を選択すると、パソコンに画像をダウンロードすることができます。



プレビュー（前のページ）用
「yajirushi_01.png」





ネクスト（次のページ）用
「yajirushi_02.png」




今回のカスタマイズでは、この画像を使用しています。
もしも画像を使用しない場合は、どんなことになるのかわかりません。
脅しているように思われるかもしれませんが、今回のカスタマイズではあくまでも画像を使用することが前提となっています。（そういうコード記述です）
なので、画像を使用しない場合にどうなるのかは、私は知りません。ご自分で色々とカスタマイズしてください。



もちろん私が使用している画像がご自分のブログに似合わない場合もあると思います。
そういう場合は、ネットで検索して画像をダウンロードすればいいですね。
「矢印」「画像」「無料」等のキーワードで検索をすると、フリーの画像を提供してくれるサイトがたくさん出てきます。好きな画像をダウンロードして使えばいいのではないでしょうか。
（私が使用している矢印の画像は、サイズが「32px×32px」ですので、似たようなサイズの画像にすればなお良いかと思われます）




次の記事の紹介

次の記事＜■ページ案内リンク「前ページ・次ページ案内リンク」ボタンの高さを2行にする（2）HTMLの編集＞から編集を始めますが、その前に、準備した矢印画像はブログにアップロードしておいてください。
アップロードしたら、画像をクリックしてURLを確認します。カスタマイズには画像のURLを使うので、パソコンのメモ帳にでもコピペしておけばいいと思います。