煤式自動連結器

先日、プラグインに頼らずにスマートフォンで最適に表示できるようにCSSをいじっていたのですが、環境によっては幅600pxの画像がそのまま表示されてサイトのボックス幅よりはみ出していることが確認できました。

その前に、軽くレスポンシブイメージの説明を。レスポンシブイメージとは、閲覧側の画面サイズに対して最適な画像のサイズと見せ方を選べる方法です。画面幅に合わせて最適な大きさの画像を表示させることができます。

WordPress4.4からsrcsetとsizesを使ったレスポンシブイメージが実装されているようです。何かしないと機能しないのかな。プラグインを入れたり、functions.phpに記述したりが必要だったときもあったようですが…

さっそくいろいろと探りを入れてみました。

まずは画像のソース。

<img class="size-large wp-image-12886 aligncenter" src="https://susu.cc/wp-content/uploads/2018/05/nanowallet-600x330.jpg" alt="nano wallet download" width="600" height="330" srcset="https://susu.cc/wp-content/uploads/2018/05/nanowallet-600x330.jpg 600w, https://susu.cc/wp-content/uploads/2018/05/nanowallet-150x83.jpg 150w, https://susu.cc/wp-content/uploads/2018/05/nanowallet-300x165.jpg 300w, https://susu.cc/wp-content/uploads/2018/05/nanowallet-768x423.jpg 768w, https://susu.cc/wp-content/uploads/2018/05/nanowallet.jpg 1143w" sizes="(max-width: 600px) 100vw, 600px" />

という感じで、レスポンシブイメージとしての記述は問題なし。それじゃあいったい何なのだろうか。2つほど抜けているところがあったようです。

まずはheader.phpのhead内に

<meta name="viewport" content="width=device-width,initial-scale=1">

を入れました。スタイルシートの指定よりも前に記述しておきます。

次にCSS。

img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
max-width: 100%;
height: auto;
}

「max-width: 100%;」と「height: auto;」を追加しました。

これで正しく表示されるようになりました。しばらくご無沙汰だと新技術についていくのが大変ですね。

先日single.phpを分岐させて、カテゴリ別のデザインを適用するようにしたことで、久々にウェブデザインにハマってしまいました。今までになかったファイル構成にしたくて、まずは日付によるアーカイブ用のarchive.phpとカテゴリごとの表示用category.phpを作ってみました。

index.php等との違いとして、「<?php the_excerpt(); ?>」というふうにthe_contentの代わりにexcerptを使いました。全文を表示をしてしまうとびろーんと冗長的になってなんだかアレなので、抜粋文を表示させることにします。

ただ標準のままだと文字数が少なすぎるし、省略部分が[...]でちっとも面白くないので、functions.phpに

//the_excerptのカスタマイズ
function custom_excerpt_length( $length ) {
return 200;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

function new_excerpt_more($more) {
return '…(以下略)';
}
add_filter('excerpt_more', 'new_excerpt_more');

と書きました。

それから検索結果表示のためのsearch.phpもほとんど同じように複写して手直しして作りました。少し異なる部分として、

<?php endwhile; ?>

<?php else : ?>
<div class="entry">
<h2 class="entrytitle">キーワードが見つかりません…</h2>
<p>検索キーワードに該当する記事がありません。別のキーワードをお試しください。</p>
</div>
<?php endif; ?>

のようにキーワードが見つからなかったときの処理が入っています。ちょっと寂しい感じも漂っているので、もう少し色を添えたいかな。手書きのイラストとか。うーん...

長い間デザインのメンテナンスはしていなかったこのサイト。仮想通貨カテゴリのページだけ少しデザインを変えてみたかったので、挑戦してみました。

まずはindex.htmlをアレンジして、個別記事のためのsingle.phpを作ります。そしてそのsingle.phpを複製して、一般カテゴリ用のsingle-common.phpと仮想通貨カテゴリ用のsingle-cryptocurrency.phpを作ります。

最初に作ったsingle.phpの中身を

<?php
if ( in_category(array('cryptocurrency')) ) { get_template_part( 'single-cryptocurrency' , false );
} else { get_template_part( 'single' , 'common');
}
?>

というふうに、分岐のための中身に書き換えます。これでカテゴリスラッグがcryptocurrencyのときだけsingle-cryptocurrency.phpを見に行くようになりました。その気になればもっと分岐させることもできますがとりあえず2択で。

デザインの変更といっても、今のところNEM投げ銭用のQRコードを載せただけですが、もう少しいじりたいかな。