stingerの記事一覧を色々と見直しています。
Stinger8にしてからゆっくりではあるのですが、ブログのレイアウトを見直しています。
ヘッダーの画像をPhotoshopで修正して、ランダムに表示をさせてみたり記事一覧の間にGoogle Adsenseを設置したりとちょっとずつ一つずつ、できることから実施をしています。
今回は僕のブログをトップページである記事一覧の見え方について、2つのカスタマイズをご紹介したいと思います。
2つとも大して難しいカスタマイズではありませんので、ぜひお試しください。
そのほかにもカスタマイズを細々としています。
記事一覧に「続きを読む」ボタンを作る
ノンカスタマイズした画面
Stinger8の記事一覧は以下のような見え方をしていますね。これだと、どこから記事の詳細に進んで行くのかわかりにくいと思いました。基本的にはタイトルをクリックすれば記事の詳細にに進むことができますが、サムネイルの画像をクリックしても記事の詳細に進むことができます。
タイトルクリックかサムネイルクリックのどちらも記事の詳細に進むことができるのですが、それがわかりやすく表示されているわけではないので、やはり親切にここをクリックすれば続きが読めるよというボタンはあった方がいいかと思いました。
サイトを見るというリンクを貼りました
で、まずはボタンではなくリンクを作りました。それがこちらです。
リンクを張ったようになっていますね。これで、ここをクリックすれば記事の詳細に進むことができるようになりました。初心者はサイトを初めて見にこられた方もこれならば迷うことはないですね。
ボタン風にレイアウト、あと右寄せ
もう少しわかりやすくしたいので、ボタンにしました。昔はwebサイトでボタンというと、画像イメージにリンクを埋め込むというやり方がありましたが、今はCSSで枠線を入れたりしてボタン風にします。
あと、ボタンを右に寄せました。これもCSSでデザインをしました。
その時の、ソースはgistで以下に表示をします。実はしょうもない話ですが、僕は少しつまづいてしまったところがあるので、その辺もご紹介します。
CSSのちょっとした違い
今回CSSでボタンを右寄せするということと、枠線をつけるということをしましたが、そのCSSでちょっとの違いに気づかずになかなか先に進めないという現象に陥ってしまいました。その辺をお伝えしたいと思います。
僕は、ボタンの右寄せのcssを記載するときに、クラスを「.readme_right a」と記載をしていて、一向にボタンが右寄せされないことに疑問をずっと感じていました。
でも、よく考えたら違います。クラスが「.readme_right a」と記載されているということは、readme_rightというセレクタのaタグの部分についてのみに適用されるという書き方なんでね。今回僕はreadme_rightというクラス全体に対して右寄せをしないといけないわけですから、クラスの書き方は「.readme_right」で十分ということになります。
この違い結構難しいですというか、わかりにくいです。
記事一覧のタイトル下の抜粋文字の文字数を変更する
概要文章ボタンにゆとりがない
ここで、ちょっとレイアウト上でなるところが出てしまいました。具体的には、タイトル名「FTR223を手放す。軽自動車届出済証を取得する」という記事の下ですが、記事タイトル下の抜粋文字の最後とサイトを見るボタンがより過ぎていてなんか違和感を感じます。
そもそも抜粋文字はそんなにたくさん文章がなくてもいいかなと思っていますので、文字数を減らして、抜粋部分とボタンに空きを作りたいと思いました。
functions.phpで修正
具体的には、functions.phpを編集します。もちろん子テーマを使用しましょう。
だいたい102行あたりに、このようなソースコードがあります。
この数字の部分（デフォルトは100ですが、僕は直接親テーマを編集していました。その時は60文字）を編集すればOKです。僕は、40文字にしました。
あとは見た目で微調整でしょうか。本当は、このボタンの位置の微調整をすれば良いのでしょうが、僕にはまだそのスキルがありませんので、いずれ勉強してから対応をしようと思います。
コメント