Simplicityを少し改造してみた 番外編 part4 リストスタイル3列で字数制限をして高さを揃える

※ 2015/07/24追記
記事中央辺りに、現在の最新版Simplicityでも対応できるであろう設定を書いておきました。何かしらの参考までに。

これまでリストスタイル3列表示はしていなかったのですが、公式サイトのトピックにて、高さを揃えたいという質問がありテーマ作者のわいひらさん曰く「タイルとはそういうものなの」と言う話で、それは至極あたりまえではあるのですが、そこを揃えたいというのは人の常。

できないなら「やってやろうじゃないか」ということでやってみました。

と、言っても確実にそうなるというものではありません。いくつか問題点もあるわけですがそれも踏まえて解決方法を書いてみようかと思います。

動作サンプル:blazezhariot(hostinger)

問題点

  • タイトルが比較的長い場合、それが1行では収まらずに2行3行になってしまう。
  • 抜粋部分が長い場合それも高さが揃わない点になる
  • サムネイルの高さが低い場合、揃わない原因になる

こういう問題点があります。抜粋部分はカスタマイザーで調整できるわけですが日本語と英語が混在している場合はマルチバイトとシングルバイトの文字の差で高さが異なるわけです。
これはテーマ側のPHPでうまく処理すれば解決もできるわけですが面倒と言っちゃ面倒。それに、リストスタイル3列をやめた時にテーマの処理部分を直すのも面倒だし、それならばjQueryでやってしまおうという感じになりました。これらは各タイトルも同様です。

問題点となるマルチバイトとシングルバイトの文字の差ですが、これは日本語や韓国語などの全角で表示するような文字とアルファベットのように半角で表示する文字が混在しているというものです。これを解決するにあたり、jquery multibyte stringを参考にして(というか引用して)みました。
それが以下になります。

背景に色がついている部分が引用したスクリプトで、$(function(){…});がSimplicity向けに追加した部分です。引用した部分はプラグイン化していると思うので別ファイルに置いておいても良いと思いますが、子テーマやら親テーマのjavascript.jsに一緒に書いておいても良いと思います。
書き方として、$(document).ready(function(){…}); の外に引用スクリプトを書いておくほうが良いと思います。
$(document).ready(function(){…}); と $(function(){…});は同じことです。

使用方法

$(“字数を丸めたいセレクタ”).cutString({ length:xx, ellipsisText:’…’});

こういう感じで使います。lengthで文字数を、ellipsisTextで省略する部分の文字列を設定します。省略する部分は例えば「(more…)」とかでも良いと思います。デフォルトでは「”…”」となっています。

Simplicityのリスト記事タイトルは$(“.entry-content h2 a”)で拾えます。.each()でそれぞれ同じセレクタの要素に対して処理を行います。var maxと変数を用意していますが、特別必要なわけではなく直接その後のlength:xxxと数値を入れれば良いと思います。
同様にして、記事の抜粋部分は$(“.entry-content .entry-snippet”)で拾えます。既にここはカスタマイザーで数値を入力してあると思いますのでそれ以下にしないといけないわけです。考え方としては、「カスタマイザーで設定した数値+n以下」でしょうか。+nは省略記号の分です。ちょっと少なめの方が良いかと思います。

これで調整することによってそれぞれの記事タイトルと記事抜粋は調整できます。
残るはサムネイルですが、これは元の画像の縦幅(height)が小さい時、サムネイルの高さも小さくなってしまうようです。そこで、アイキャッチ画像にする画像はできるだけ4:3あたりの比率のものを選ぶと良いかも知れません。
画像、記事タイトル、記事抜粋の高さがある程度そろえられればリストスタイル3列でも綺麗に並べることが可能です。

2015/07/24現在の設定

子テーマjavascript.jsに上記cutString()のスクリプト部分を追記して、以下のようにします。

cssは、子テーマstyle.cssに

Screenshot_from_2015-07-24 15:06:34こんな感じで、タイトル2行、抜粋3行、そのままでは重なってしまう「記事を読む」を1行で表示が可能です。カットするテキストの文字数を増やせば高さもそれに合わせて設定する必要がありますが、サムネイルの高ささえ同じであればきちんと揃うはずです。
また、3列で表示する際には、ダッシュボード→設定→表示設定で、「1ページに表示する最大投稿数」を3の倍数にしておくと幸せになれます。
画像は1ページに表示する最大投稿数が10の時なので、一つ下に出てますが、これを12とかにしておくとばっちりと表示されると思います。

その他の方法

そもそも、リストスタイル3列を使わなくても3列でも2列にでも揃えることは可能です。それがこれまでに紹介したflex-boxを利用することで実現できます。
これは、cssで全て解決できるわけですがサムネイルの大きさやその他色々と問題をはらんでいることもあります。

こんな感じでベースができると思います。注意すべきは、.entry h2にline-heightが入っていて.entry-content h2 aのline-heightだけでは調整できないという点でしょうか。
display: flex;はベンダープレフィックスも必要です。

こんな感じです。

flex: 1 33%;は、

こういう意味合いで、これもベンダープレフィックス(-webkit-flex: 1 33%;等)が必要になります。flex-flow、justify-content共に(-webkit-flex-flow: row wrap;の様な)ベンダープレフィックスもいるでしょう。
サムネイルについてはサイズや表示場所、表示方法など色々とあると思うので割愛。その他も好きにデザインすれば良いと思うので割愛します。

まだflex-boxは議論されているスタイルなのでこれで確定というわけではないですが、使えると非常に強力かつ便利に使え記述的にも少なくて済むので(ベンダープレフィックスを除く)、とても良いです。ブラウザによって使える使えないという制限もありますがモダンブラウザならたいていは問題ないのでどしどし使って行っても良いのではないかと思ったり。

IEはどうせ対応が遅れますし、ウチのサイトではIEはそもそもサポート対象外なのでどうでも良いですし、マイクロソフトも「Spartan」と言う新しいブラウザを作ってるようなので、もう切り捨ててもいいんじゃないかと思ったりしています。
一部企業などでどうしてもIEが良いという人に対しては、過去の技術で何とか頑張ってくれというエールを送る程度でいいんじゃないかと。
探せば、古いIEでも何かしらのjavascriptなどで現行のHTML5あるいはCSS3を補ってくれるスクリプトが発見されるかも知れませんが、そういう人達に限ってjavascriptを切って使うという考えの人も多く、バイクで言うなら未だに2スト最高!みたいな、そこらは各々なんとかしてくれという感じですね。

スポンサーリンク

シェアする

フォローする

コメント

  1. はすみく より:

    返信ありがとうございます。

    やはり細かいカスタマイズをするにはテンプレを直接いじる必要があるんですね。
    初心者の自分にはカスタマイザーで簡単に設定できる機能はとても重宝しています。

    Simplicityの前にいくつかテーマを試してみたのですが、カスタマイズする前に挫折しました。(汗)
    Simplicityはパーツが細かく分かれているのでやりやすかったです。

    サイト完成まではまだまだ時間がかかりそうですが、これからもちょくちょく訪問させていただきますのでhidekichiさんのカスタマイズ楽しみにしています。

    とりあえずグラバターだけは登録してみました。

    それではまた(^_^) /

  2. はすみく より:

    はじめまして。最近Wordpressを始めたばかりの超初心者です。

    現在サイト公開に向けてSimplicityをローカルでカスタマイズ中なのですが、HIDEKICHIさんのスクリプトのおかげで初心者の私でも簡単にリストスタイルの高さを揃えられ見た目がすっきりして助かりました。
    他にも自分がやりたかった事に近いカスタマイズをされていてとても参考になります。

    ページ送りを一段にまとめたり、アーカイブのタイトルのダブルクォーテーションを消したり、更新記事のupdateマークを表示したり、このJetpackのコメント欄に変更するのも親テーマのテンプレを子テーマにコピーしてカスタマイズされているのですか?

    テンプレを直接カスタマイズすれば色々できるとは思うのですが、あまり子テーマのテンプレを増やしたくないのでHIDEKICHIさんはどの様にして行っているのか気になりました。

    お手すきの時にでもコメント頂けると有難いです。

    • hidekichi より:

      どうもはじめまして。
      書いた記事がお役に立てて何よりです。

      >ページ送りを一段にまとめたり、アーカイブのタイトルのダブルクォーテーションを消したり、
      >更新記事のupdateマークを表示したり、このJetpackのコメント欄に変更するのも
      >親テーマのテンプレを子テーマにコピーしてカスタマイズされているのですか?

      jetpackのコメントはpluginの設定で有効にするだけでこうなりますが、その他の部分は親テーマを直で変更しています。
      ページ送りは記事下のナビゲーションの部分かと思うんですが、これはCSSだけです。
      アーカイブのタイトルも確かCSSだけでしたように思うんですが、何かしらいじっているかもしれません。

      僕は、カスタマイズするにあたってアップデートを犠牲にしています。なので、フッター部に表記されているバージョンはまだ1.5.xとかです(笑)
      これも実際、内部が1.5系と言うわけではないんですが、ベースにしたのがそのあたりだったので。本家が2.0ぐらいになったら、もう少し色々やろうかとは思っています。
      というのも、どうしても機能的に必要な部分はその都度組み込んでいますが、必ずしも自分にとって必要な機能が追加されるというわけではないので、必要な部分だけ良いとこ取りしているわけです。
      アップデートさえしなければ親テーマをいじれば良いのである意味楽は楽ですが、アップデートが頻繁に行われるSimplicityでは、その都度色々と見て回らないといけないので、アップデートしつつカスタマイズ部分を追加していくのと手間はあまり変わりません。

      むしろ、いわゆるカスタマイザーで設定する部分の大半を無くした、本当にベースとなるだけのバージョンが欲しいぐらいです。SEOの部分とアドセンス部分だけでいいかなぁとも思っています。CSSもほとんど書きなおしているような感じでもあるので(もちろん流用しているのが大半ですが)、汎用性のあるテーマになるといいなとは思っています。
      いっそのこと全ての機能はプラグイン化して必要なものだけ導入できるようになるとより一層良いんですが、わいひらさんも色々と忙しいようなので、そこらは後々自分でしようかとか目論んでいます。まぁしばらくはムリですけどね(笑)