ブログのCMSといえばWordpress。
今や当たり前のように使われています。
でも、レスポンシブ対応って結構面倒。
今回はWordpressのアイキャッチとTablepressのレスポンシブに関する個人的メモです。
テーマのレスポンシブは一般化
現在はWordpressのテーマも数え切れないほどありますが、中でも特に増えているのがレスポンシブ対応のテーマですね。
スマホやタブレットでも同じテーマ使えるし、プラグインで切り替えなくていいのが魅力。
しかし、テーマによってはアイキャッチのサイズが小さくならず、何故か大きいままのこともあります。
アイキャッチがはみ出ちゃって半分切れちゃう場合もありますね。
結局テーマ次第なのですが、アイキャッチをレスポンシブ化させてみます。
アイキャッチをレスポンシブ対応
HTMLソースを見てみると、アイキャッチにサイズ指定が入っていますよね。
WidthとHeightの部分です。
テーマによってはCSSで指定されている可能性もありますが、まずはサイズ指定を削除するPHPコードを記述しましょう。
以下のブログ(memocarilogさん)のコードを拝借し、function.phpへ追加します。
“サイズ指定を削除する”のコードですね。
次に使用中のテーマをイジりましょう。
single.phpなどのアイキャッチ部分(the_post_thumbnail関数)を、次のように変更。
クラス名はお好みで。
<p class="responsive-thumbnail">
<?php the_post_thumbnail('full'); ?>
</p>
アイキャッチをPタグで囲むだけです。
最後にCSSをイジっておしまい。
style.cssなどに以下を追記します。
.responsive-thumbnail{
text-align:center;
}
.responsive-thumbnail img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
以上を追記後、PCのブラウザのサイズを変更してみると、アイキャッチ画像のサイズが変化します。
アイデアメモで書いた内容ですが、もし使っているテーマ(※レスポンシブ対応)でアイキャッチだけが小さくならない、はみ出るとお悩みの方はお試し下さい。
Tablepressを1分でレスポンシブ化させてみる
テーブルを楽に作成・管理できる大人気のプラグインがTablepress。
でもレスポンシブ対応するには別途プラグインを追加する必要があります。
しかし、このプラグインが結構くせ者で、テーブルの並び方が変わったり、思うように表示できないんですよね。
単にテーブルをそのまま拡大・縮小させたい場合は逆にややこしくなります。
画面サイズに合わせて表の大きさを変えたい場合、Tablepressを単純にレスポンシブ対応させたい場合は、以下のコードをstyle.cssに追加するだけでOKです。
.tablepress table{ width:99%; }
テーマがレスポンシブ対応しているなら、Tablepressの表もデバイスの画面サイズに応じて拡大縮小されると思います。
ただし、”単に表の大きさが変わるだけ”なので、表の内容が2行に折り返される欠点も。
Tablepressで作った表をレスポンシブ対応させるだけなら、上のコードを追加するだけでかまいません。
私はこの1行のために半日以上悩みました。
頭が固いためか、全然思い浮かばなかったという…。
レスポンシブ化に難儀する
簡単なWordpressのカスタマイズ小ネタでした。
考えてみると、1+1を解くために大回りしている気がします。
CSSもPHPも、まだ勉強が足りません。
コメント