WordPressでサイドバーのサムネイル付き新規投稿をプラグインを使わずにカスタマイズしてみる

画像の上に文字を重ねてみたい
new

ウィジェットに頼らず新規投稿をサムネイル付きでサイドバーに設置してみました。左の画像が設置直後の状態です。

この後、2015年3月に思い切ってブログの横幅を広げてみましたので下記内容は昔のデザインのものです。

このままではちょっと画像が目立ちすぎるなと思い、少し暗めにしようと考えました。そして、手を加えるならいっそのことよく目にする「画像に文字を重ねたサムネイル」にしてしまおうと思い立ちました。

サイドバーのサムネイルにはアイキャッチの画像を流用しています。
画像に文字を重ねるサムネイルのメリットは画像を大きく使える点だと思うのですが、いかんせんこのブログは横長の大きい画像をアイキャッチにしているためサイドバーに画像全体を表示するにはこれが最大の大きさです。

もちろん、四角形などにリサイズして切り抜けば大きく使えるわけですが、画像を適当に作りすぎているため「真ん中だけ切り抜いたらテクスチャしか見えない」 という状態になるものが多々あって断念しました。

一抹の不安を覚えつつ、現在の画像サイズのまま文字を重ねていくことにします。

画像にフィルターをかける

そのまま文字を重ねてしまうと色的に読めないので、画像にフィルターをかけて暗くします。
そして文字は重ねる際に白系に変更します。

画像の処理にはCSS3の「filter」を使用します。
各ブラウザに対応するために同じ記述を5種類書きます。

サイドバーの ul の class 名は「newentry」という名前にしてありましたので 

ul.newentry li img {

    -webkit-filter: grayscale(70%);
    -moz-filter: grayscale(70%);
    -o-filter: grayscale(70%);
    -ms-filter: grayscale(70%);
    filter: grayscale(70%);

}

このように li 要素内の画像に対して記述を加えます。
まずはグレイスケールという、モノクロ処理をしてくれるフィルターを70%でかけてみました。

new2

見た目がわかりやすいようにカラフルな画像を抜き出してみました。
予定通り暗めの処理となっています。

ここで重大な事実が発生します。
元々の色合いが白い画像は全然灰色っぽくなっていないのです。

new3

どうやらグレイスケールのフィルターは画像の白い部分には効果が薄いようです。
それでは明るさを調節する brightness ではどうでしょうか。 

ul.newentry li img {

    -webkit-filter: brightness(50%);
    -moz-filter: brightness(50%);
    -o-filter: brightness(50%);
    -ms-filter: brightness(50%);
    filter: brightness(50%);

}

ブライトネス50％でフィルターをかけてみたところ、

new4

実にいい感じでフィルターがかかってくれました。
これなら白文字が映えそうです。

フィルターにはこの他にも「ぼかし」や「コントラスト」など色々あります。
私は下記ブログを参考にさせて頂きました。デモもあり大変参考になりました。

CSS filterプロパティとFilter Effectsの話 | mae’s blog
文字を画像に重ねる前に

話が前後しますが、新着投稿をサイドバーに表示させる際に参考にさせて頂いたブログをご紹介します。

【WordPress】サイドバーにサムネイル付き最新記事一覧を追加｜WILD-CARDS.NET

こちらのブログでは、プラグインを使用せず functions.php を使用して新規投稿を表示する方法がソース付きで掲載されています。私もほぼそのままソースを流用させて頂いています。

画像に文字を重ねるためには「文字部分を li 要素内の入れ子にする」必要があったため、上記ブログのソースに一部変更を加えました。下記の図のように、文字部分を p タグで囲むようにします。

new5

下記が functions.php への記述です。
9行目と11行目を追記して、10行目の「the_title()」が p 要素で囲まれるように変更しました。

ここでは関係ないですが、8行目の(180,180)はサムネイルの大きさの指定です。
実際に出力される画像の大きさは「180px × 58px」ですが、指定した数字の小さい方に合わせて正方形を作ろうとするのでこのように書きます。 

// サイドバー新規投稿用
function new_post_list($show_num) {
    query_posts('showposts=' . $show_num . '"');
    if(have_posts()) {
        while(have_posts()) {
            the_post();
            echo '<li><a href="https://mndangler.net/2014/07/newpost_with_thumbnail/">';
	    the_post_thumbnail(array(180,180), array('class' => 'new_post'));
            echo '<p>';
            the_title();
            echo '</p>';
            echo '</a></li>';
        }
    }
    wp_reset_query();
}

これで「　li　～　/li　」の中に「　p　～　/p　」という入れ子ができ、準備が整いました。

文字を重ねてみる

文字と画像を重ねるために「position: relative;」と「position: absolute;」を使用します。

具体的には、

1. li 要素に「position: relative;」を指定します
2. p 要素に「position: absolute;」を指定します
3. p 要素（文字）の位置を指定します

はじめに li 要素に「position: relative;」を追記します。 

ul.newentry li {

    position: relative;

}

ここからはいくつか同時に指定していきます。

p 要素に「position: absolute;」を指定します。
この時点で文字が画像に重なるため、文字の位置を指定する「bottom: 0px;」も追記します。
暗い背景でも文字が読めるように「color: #fff;」で文字を白色に指定します。 

ul.newentry p {

    position: absolute;
    bottom: 0px;
    color: #fff;

}
new6

現時点ではこのようになりました。

li 要素を相対位置＝ relativeで指定し、
p 要素を絶対位置＝ absoluteで bottom 0px(一番下に固定) 指定することにより、
p 要素がフロートで浮くような形となってli 要素の中身は画像しか残っていない状態になります。

画像しかない li 要素は「画像が丸ごと背景の状態」と同じです。

その背景の中で浮かんでいる p 要素の位置を指定してあげます。

ｐ要素内の「bottom: 0px;」とは、「 li 要素」の「一番下、0pxの位置」という意味です。左の画像を見てもらえると、各画像の一番下に文字が揃っていることがわかると思います。

文字数が1行を超える場合は自動で上へ重なっていきます。

ここで、画像の上から5つ目を見るとトラブルが発生しているようです。
タイトルが長いことと、画像の縦幅が短いことで文字が溢れてはみ出してしまっているようです。

最初に懸念していたとおり、画像のサイズに泣かされる展開になってきました。
考えられる対策としては、

・　文字を小さくする
・　文字数を制限してタイトルを2行までにおさめる
・　li 要素の高さを設定してしまう

私に思い付いたのはこんなところでした。
文字を小さくするのは限界があるし、見た目の統一感も悪そうです。
ここはまず文字数を制限して2行以上表示しないようにしてみます。



functions.php に以下を追記します。
新規投稿用に記述した内容よりも上に書きます。 

// タイトルの文字数制限
function trim_str_by_chars( $str, $len, $echo = true, $suffix = '...', $encoding = 'UTF-8' ) {
    if ( ! function_exists( 'mb_substr' ) || ! function_exists( 'mb_strlen' ) ) {
        return $str;
    }
    $len = (int)$len;
    if ( mb_strlen( $str = wp_specialchars_decode( strip_tags( $str ), ENT_QUOTES, $encoding ), $encoding ) > $len ) {
        $str = wp_specialchars( mb_substr( $str, 0, $len, $encoding ) . $suffix );
    }
    if ( $echo ) {
        echo $str;
    } else {
        return $str;
    }
}

WordPressのフォーラムを参考にさせて頂きました。世話役の方が説明をしてくれています。
タイトルはプラグインですが中身は functions.php を使用する方法です。

[解決済み] 記事のタイトルを短縮表示してくれるプラグイン | WordPressフォーラム

上記を書き込んだら、テンプレートを編集します。
文字数制限を適用させたい箇所、ほとんどの場合<?php the_title() ?>となっている箇所を 

&lt;?php trim_str_by_chars( get_the_title(), 35 ); ?&gt;

に変更します。

しかし今回の場合は functions.php 内に書いてあるので、記述をこのように変更しました。10行目が変更箇所です、中身だけ書いた形となります。 

// 最新記事
function new_post_list($show_num) {
    query_posts('showposts=' . $show_num . '&quot;');
    if(have_posts()) {
        while(have_posts()) {
            the_post();
            echo '&lt;li&gt;&lt;a href=&quot;https://mndangler.net/2014/07/newpost_with_thumbnail/&quot;&gt;';
	    the_post_thumbnail(array(180,180), array('class' =&gt; 'new_post'));
            echo '&lt;p&gt;';
            trim_str_by_chars( get_the_title(), 35 );
            echo '&lt;/p&gt;';
            echo '&lt;/a&gt;&lt;/li&gt;';
        }
    }
    wp_reset_query();
}
「35」という数字が文字数の上限ですので、任意で書き換えて調節して下さい。
new6

なんとか無事に2行で収まるようになりました。

あとは細かなところをCSSで調節します。
文字を透過させて画像となじませてみたり、文字位置を変えたりしてみたいと思います。

また、アイキャッチの横幅は常に642pxで作成しているのですが縦幅にはムラがあるので、最大縦幅と決めてある208pxで指定しておこうと思います。

「642 × 208」を横幅180pxにすると「180 × 58」となりますので、li 要素の縦幅を「58px」で固定して高さを揃えてみます。


最終調整

ul.newentry li 要素に「height: 58px;」を指定しました。

new7

高さは綺麗に揃いましたが、画像の高さが違うので全体としては不揃いです。
ul.newentry li 要素の背景色を「background-color: #808080;」でグレーにしてみます。

new8

これで全体的に整ったように思います。

文字色を透過させ、文字位置も微妙に調節してやっと完成です。

new9

他の方のブログを覗いてみると、リツイート数やこれまで読まれた数など色々な表示がされています。ボーダーを指定して一体感をもっと出したりまだまだ面白い装飾ができそうですが、ひとまずこれで一度完成とします。


WordPress > WordPressでサイドバーのサムネイル付き新規投稿をプラグインを使わずにカスタマイズしてみる
スポンサーリンク

コメント

　DISQUSコメントシステムとは？
DISQUSコメントシステム は Facebook Twitter Google などのアカウントを使用してコメントを残すことができます。
また、それらを使いたくない場合でも メールアドレスのみ でコメントが可能で、その際のアドレスはもちろん非公開です。
YouTube や Tweet などはURLを貼ると自動で埋め込み表示されますし、画像をアップすることもできます。
お気軽にコメント頂けると嬉しいです。
スポンサーリンク

New Post

Random


CLOSE