WordPressの続きを読む部分をボタンっぽくしたときのログ

2013/11/15

今回書くのは、WordPressの「続きを読む」部分を、ボタンのごとく見えるようにしたときの覚書である。

なんで、今更、その部分のデザインを変えようと思ったのかというと、スマートフォン対策である。

当ブログは、現状ではスマートフォンにあまり優しくない設計である。タブレットならまだしも、横幅が5cmぐらいの画面を通して見た場合、かなりきつい感じになっている。

さらにいうと、リンクは小さくて押しにくい状態だ。TOPページの下の方にある、過去のページに行き来するボタンも、拡大しないとなかなかつらいことになるだろう。

世の中がスマホ・タブレットに支配される可能性を考慮すると、ちょっとずつ、そっち向けの表示を身におかないと、時代に取り残される可能性をちょっとだけ感じ始めたわけだ。

その手始めとして、まずは「続きを読む」部分のデザインを変えていこうと決意したのだ。

ってことで、覚書は続き部分で。

なお、直接、このページにやってきている人は、直下のボタンっぽいものは表示されていないけれど、そうじゃない人の場合は、2013年11月15日現在、ピンク色のボタンっぽいものが表示されていると思うので、こんな感じに作りましたということで、よろしくね。

1.
縦長ディスプレイの時代に期待するの巻において、iPad（第4世代）で見た当ブログは、多少不満はあるけれども、まだ見られた。でも、iPod touch（第4世代）で見た当ブログは、何もかもが小さすぎた。拡大？何それ？美味しいの？

2.
そういえば、当ブログは、最近、スマホ経由で来ている人が多い。今後、スマホ系統に手を出していなかった層が、スマホに移行してくる前に、当ブログのその対応をしておかないと、ただの見づらいアレなブログとして捨てられたときには、目も当てられない。

3.
ちょっとずつ、当ブログもスマホ対応になった方がいいということで、その手始めに、「続きを読む」の部分を指で押しやすい状態にしてみようと思い立ったのだった。

4.
WordPress Codex 日本語版：「続きを読む」のカスタマイズを見ながら、テーマ内にある、the_content() タグを以下のように弄った。

<?php the_content('<div class="moretext">続きを読む</div>'); ?>

WordPress Codexでは、spanタグを使っていたけれど、なんとなくdivタグにした。

ちなみに、上記の表示のために、HTMLタグリファレンス：PREタグを用いている。

5.
詳しいことは知らないが、どうもスマホのボタンは44pxが最小サイズみたいな説があるらしいので、スマホ画面で縮小表示されているであろうことを加味して、だいたいその倍の縦90pxぐらいの大きさがあればいいのかなと勝手に解釈して、以下をstyle.cssに書き込み。

25egg：cssでつくるボタンデザインと、スタイルシートリファレンス：line-heightを参考にした。というのは、paddingやmarginを使おうとしても、ぜーんぜん思った感じにいかなかったからだ。

.moretext{
background-color:#F18D99; /* ローズピンク */
border-radius:5px; /* 小粋な曲線 */
width:300px;
text-align:center;
font-size:44px;
line-height:90px; /* 行の高さ */
}
.moretext a{
color:#ffffff;
text-decoration:none;
}
.moretext a:hover{
color:red;
text-decoration:none;
}

6.
リンクをボタン風に見せるのはうまくいったけれど、この記事で、ボタンを作った証拠を表現するには、画面をコピーして貼り付けないといけない。今、これを書いているPCはWindows7のPC。ってことで、ソニー：Print Screen（プリントスクリーン）の方法が知りたい（画面をコピーしたり、印刷をする方法）を見て、Altを押しながらPrint Screenキーを押して、Firefox25に映し出されている当該画面をゲット。

7.
JTrimを開いて、編集・貼り付け。一旦、BMP形式で保存・終了後、再度開いて縮小して、gif形式で保存。これを下に貼りつけた。

ボタン風にカスタマイズ
こんな感じ。もちろん、画像を縮小しているので、ここに表示されているボタンは実際のものよりは小さくなっている。