きちんときれいに並んでほしいじゃないですか
======= もくじ =======
Simplicityも自助努力が必要なのです⊂⌒っ `ω、)っ
このサイトはSimplicityというテーマ（テンプレート）を使ってます。
Simplicityは素晴らしい完成度のテーマで、更新がものすごく早く、サポートが行き届いていて、そして無料という、非の打ち所のないテーマです。
ほかのテーマを使ってみようと思ったことは何度かあるんですが、あまりにも使い勝手がよすぎてほかのテーマでは満足のできないカラダになってしまいました。
ただ、不満がまったくないかというと細かい点ではちょこちょこあったりしないではないです。
なんといっても有名かつ高機能かつ無料のテーマなので、使ってる人が多いです。
とくにデフォルトのままで使ってると、もう知ってる人が見るとひと目で「あ、ここSimplicity使ってる」ってなります。
自分でも、自分のブログ並べて見比べて苦笑しちゃったりします。
なので、ちょっとだけちがう表示にしたいなと思って、ここのように3列タイル表示にしたりするわけなんですが。
ふと気がついたらタイル表示が投稿順に並んでませんでしたΣ (ﾟДﾟ;）
なんかね、
ふつうなら3*3の表示って古いほうを1としたら
９ ８ ７
６ ５ ４
３ ２ １
って並んでると思うじゃありませんか。
それが、
９ ８ ７
４ ６ ５
２ ３ １
みたいになってるんですΣ (ﾟДﾟ;）
ちょうど連番のついてるエントリが並んでたから、ものすごいごちゃごちゃ感⊂⌒~⊃｡Д｡）⊃
ショックのあまりスクショは撮り忘れました(o_ _)o
結論：仕様
いろいろ調べたり質問した結果、「仕様です」ということが判明しました。
タイル表示は画像の大きさやタイトル部分の長さ、本文抜粋部分の分量なんかによってタテの長さが変わります。
そして、なるべく全列均等な高さにしようとするので勝手に順序が入れ替わってしまう……のだそうです。
仕様なら仕方ない（・・）
でも、だからといってずれたままにしとくのは、イ・ヤ(・∀・)
ではどうすればいいか。ずれないようにカスタマイズすればいいんだよね？(・∀・)
というわけで、きれいにカスタマイズしました！≧▽≦
記録は大事だよ
じつはここにいきつく前に1段階失敗がありまして。
タイトルの下に、本文の抜粋みたいなのがついてるじゃないですか。
あれって、テキストを上からベタで指定の文字数まで流してるんですね。
なので、前フリ→最初の見出し→本文 とあるのが全部ごちゃっと改行なしに詰め込まれちゃう。
じつはこれが前々から微妙に気に食わなかったんです。
で、これを機に、むしろ抜粋部分は表示しなくていいんじゃね？って思って指定文字数を0にしたんですが。
文字が入るべきスペースがどかんとあいたまんまに⊂⌒っ `ω、)っ
たしかほかのブログでここの空白を詰める設定をしたことがあるようなおぼろな記憶があったんですが、実際そうなってるブログがあったんですが、
どうやってカスタマイズしたのかわかんない⊂⌒~⊃｡Д｡）⊃
あかんすぎます。
どうやらstyle.css以外の、親テーマのファイルのどれかをいじったらしくて、どこをどういうふうにいじったのか記録も、参考にしたサイトのブクマも残ってないんです。
だめすぎだろう⊂⌒~⊃｡Д｡）⊃
というわけで、今回は万一次に別のブログで１年後とかに困った時に見返せるようにエントリに残しておくことにしました。
Simplicityのタイル表示をカスタマイズしてみる
さて本題です。
タイルのタテの長さを揃える
さて、少し上にも書いたように、タイルがずれる原因は「タイトルの文字数によってタイトルの行数が変わるから」です。
こんな感じですね。
つまり、下半分の抜粋部分の文字数同様、ここの高さを揃えてやればいいわけです。
カスタマイズ情報の乗っていたブログを参考に、style.cssに
.entry-card-content h2{
height:48px;
}
を追加しました。
1行24px、私の場合はあんまりタイトルを長くしないようにしてるので基本1行、長くて2行なのでこの数字です。
2行がデフォで3行になることもある場合は72pxにするといいようです。
更新どーん
＼(^o^)／ﾔｯﾀｰ
ついでに抜粋部分もきれいに
じつは上のスクショはきれいになおしたあとなんですが。
Simplicityには、ここに引っ張ってくるテキストを「本文」ではなく「抜粋」からにできる設定項目があります。
外観→カスタマイズ→レイアウト にある
この項目です。
これを設定したはいいものの、
…………
……
抜粋ってどこヽ(・∀・；ヽ三ﾉ；・∀・)ﾉ
All in one SEO packのディスクリプションのトコに入れればいいのかなと思ったら違いました。
じつはこの「抜粋」、WordPressのデフォルトの設定では非表示なんだそうです。
というわけで、抜粋を表示する方法
新規作成画面を表示させる
右上に。
おまわりさんこいつです
この「表示オプション」の▼をつっつくと
びろーんと設定項目が出てきて、またしても右上に。
おまわりさんこいつｒｙ
ここにチェックを入れると、リアルタイムで
テキストボックスのすぐ下に「抜粋」欄が出てきます。
このカスタマイズは
こちらの記事を参考にさせていただきました<(_ _)>
そして私はエントリは基本ScribeFireで書いてるんですけど、
はじめて、この下のとこにあった欄をどうやって使うのかを理解しました（・・）
ここになんか入れてもAll in One SEO packには反映されないしなんだろっておもってたんですよね（・・
抜粋文も量を揃えよう(・∀・)
というわけで、ここに入れた文字が、タイル表示の題名の下んとこに入ります。
ここも、題名部分と同じように、同じ行数になるようにしときゃいいんだよね(・∀・)
見た感じ1行20文字ぐらい。
（設定してるフォントによって変わると思いますのでそこは臨機応変に）
別にながくすることもできますが、最初のh2手前のひとことにプラスアルファぐらいの短いキャッチにしたいので、「抜粋」の中身を2行40字以内におさめればよいということで。
まあ、ここはいちおう私本職なので、おさめようと思ったらおさめられます。
仕様さえ分かってればおさまるようにキャッチ書くのは問題ない。
どっちかというと問題は1行でおさまっちゃう場合。
そうすると短くなっちゃうんですが、そういえば今回の件であちこちぐぐってるうちになんか見たな？と思ってやってみた結果
brタグで解決しました。１行のみのときは改行したいとこと空白行を確定させるためにbrを2つ入れればおっけーです。
ちなみにbr入れない場合は
表示上改行入ってても反映されません。
というわけで、Simplicityのタイル表示をきれいに見せる＆抜粋部分の文章をきれいに見せるカスタマイズ方法でした！
