前後の記事へのリンク
個別ページの最後とかに設置している場合が多いのかな。
タイトルがあった方がわかりやすいし、カテゴリの違う記事も読んでもらうきっかけになるかなと思って、リンクテキストはタイトルにしています。
でもタイトルが長すぎる場合、ウィンドウの幅によっては重なってしまうことがあるんですよね。
タイトル長くしなけりゃいいじゃんって言えばそれまでなんですが、長いタイトルを省略する方法をご紹介します。
マウスオーバーで記事タイトルを浮かび上がらせる
前後の記事リンクにマウスをのせると、リンク先記事のタイトルが浮かび上がるようにします。
single.phpの記述
まずは前の記事へのリンクからカスタマイズ。
投稿の個別ページのテンプレートに以下のように記述します。
まず、関数「get_adjacent_post()」を使用して前の記事の情報を取得します。
この関数は、隣接する記事の情報をオブジェクトで返します。前の記事、次の記事の選択はパラメータで行います。
ここでは、第1引数で「false」（同じカテゴリーに限定しない）、第3引数で「true」（前の記事の情報を調べる）を指定しています。
次に、if式で「$prevpostが存在するならば」という条件を設定し、記事タイトルを取得します。
ここで条件式がないと、前の記事が存在しない場合（＝いちばん古い記事を閲覧しているとき）に、前の記事のリンク表示がおかしくなってしまいます。
いちばん古い記事を見ている場合。本来なら前の記事へのリンクは表示されないはずですが、今見ている記事のタイトルが表示されてしまっています。これを防ぐために条件を指定します。
リンク先記事タイトルを出力する
[html][/html]
実際にリンク先記事タイトルを出力する部分の記述です。
previous_post_link()関数の引数で、前の記事へのリンクとリンクテキストを設定します。
実際には以下のHTMLが出力されます。前の記事のタイトルは、spanタグでマークアップされます。
これを利用して、マウスオーバーでタイトルを浮かび上がらせます。
[html]
« 前の記事 Excelの家計簿で、1日あたりに使える金額を表示する
[/html]これでHTML部分は完了です。
CSSで表示・非表示を設定
長くなってきましたが、次にCSSの記述です。
普段は隠しておいて、マウスオーバーしたときに出力させたいのは、前述したspan要素の中身。prevpageというクラス配下にあるa要素と同じ階層のspan要素に対してスタイルを指定していきます。
[css] /* 親要素にpostion: relativeを指定 */ p.prevpage { position: relative; float: left; } /* position: absoluteを指定 */ .prevpage a + span { position: absolute; top: -100px; left: 0px; width: 200px; height: 80px; padding: 5px; background: #666; color: #fff; opacity: 0; } [/css]最初に、記事タイトルを表示させる場所を指定します。
まず、対象のspanタグの親要素であるp要素のpostionプロパティをrelativeに指定します。
2番めのセレクタで、span要素のpostionプロパティをabsoluteにして、親要素を基準にして位置を決めます。このとき、親要素にはpostionプロパティを「static」以外にしていしなければならないという決まりがあるためです。
また、セレクタを「.prevpage a + span」と兄弟（隣接）セレクタにしています。spanタグをaタグの中に入れてしまうと、リンクテキスト以外の箇所（吹き出しが表示される領域）にカーソルを合わせたときも吹き出しが表示されてしまうからです。
[css] .prevpage a + span:after { content: ""; position: absolute; top: 90px; left: 20px; border: 8px solid transparent; border-top: 8px solid #666; } .prevpage a:hover + span { opacity: 0.8; -moz-transition: all 0.3s ease-in-out; /* Firefox */ -webkit-transition: all 0.3s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.3s ease-in-out; /* Opera */ transition: all 0.3s ease-in-out; /* Browsers that support it */ } [/css]セレクタ「.prevpage a + span:after」が指定しているのは、吹き出しの下の三角の部分です。
この方法は以下のサイトで知りました。わかりやすくてオススメ！
CSSの擬似要素を使った見出しデザイン｜Webpark
セレクタ「.prevpage a:hover + span」セレクタで、マウスオーバーしたときのspan要素の透明度を上げ、吹き出しが表示されるようにします。
透明度や表示速度（transitionプロパティ）はお好みで調整してみてください。
次の記事へのリンクも同じように指定します。セレクタのクラスと、フロート位置を変えるぐらいです。
[css] p.nextpage { position: relative; float: right; } .nextpage a + span { position: absolute; top: -100px; left: 0px; width: 200px; height: 80px; padding: 5px; background: #666; color: #fff; opacity: 0; } .nextpage a + span:after { content: ""; position: absolute; top: 90px; left: 20px; border: 8px solid transparent; border-top: 8px solid #666; } .nextpage a:hover + span { opacity: 0.8; -moz-transition: all 0.3s ease-in-out; /* Firefox */ -webkit-transition: all 0.3s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.3s ease-in-out; /* Opera */ transition: all 0.3s ease-in-out; /* Browsers that support it */ } [/css]参考書籍: positionプロパティについてわかりやすく書かれています。
コメント