WordPressで画像に影を付けたい人は「メシオプレス03ver.1.1」を使えば簡単です。

本日、ブログ用WordPressテーマ「メシオプレス03」がver.1.1にバージョンアップしました。新機能として「画像にドロップシャドウ(影)を付ける機能」と、「パンくずリストのカスタマイズ機能」を追加しましたので、ご紹介しておきます。

画像に影を付けるプラグイン「Shadows」はスマホに対応していない

記事内に挿入する画像に影を付けられるプラグインに「Shadows」というものがあります。しかし、このShadowsというプラグインで画像に影をつけると、スマホで見た時に画像がはみ出してしまいます。

小さな画像なら問題ないのですが、大きな画像を貼ると盛大に画面からはみ出てしまいます。本来は自動的にスマホ画面用にリサイズされるのですが、PC画面サイズのままで表示されてしまいます。ですので、スマホ対応のWordPressテーマではShadowsは使い物になりません。

一方、メシオプレス03では、画像に「枠」「網掛け枠」を簡単に付けられるようになっています。画像のclassに「waku」「waku_ami」と付け加えるだけです。もちろん、スマホで見てもスマホ画面に合わせて自動で画像サイズは最適化されます。

ですが、枠線は画像ではないため、その分、若干右にずれて表示されてしまうという問題がありました。「網掛け枠」の場合はあまり気になりませんが、「枠」の場合は右側がわずかに画面に収まりません。

そこで、今回のバージョンアップでスマホで見ても画面内に収まる「影(ドロップシャドウ)」の装飾機能を新たに実装しました。下記の画像をご覧ください。

画像に影を付けてみた比較写真

左下の画像がプラグイン「Shadows」を使用した場合です。Shadowsを使うと、画像がPCサイズのままで巨大表示されるだけでなく、画像の上に1行空行が入ってしまうという問題も生じています。

一方、右側のキャプチャは、メシオプレス03の新機能「影」を使用した場合です。メシオプレス03の影機能の場合はスマホで見てもキレイに収まって、余計な改行をされることもなく、影付きで表示されています。使い方は簡単で、画像のclassに「kage」と記述するだけです。

当メシオプレス公式サイトもそうなのですが、画像を多用するブログの場合は今回の「影」機能はかなり便利だと思いますので、ぜひ活用してください。

パンくずリストのカスタマイズ機能を追加

さらに、メシオプレス03ver.1.1では、パンくずリストのカスタマイズ機能も追加しました。パンくずリストの書き出しは、「ブログタイトル」が最初に表示されるようになっていますが、この部分を任意のテキスト(「HOME」「ホーム」「トップ」など)に変更することできます。

パンくずリスト表示例1
パンくずリスト表示例2

ここを「ブログタイトル」にした場合と、「ホーム」などにした場合では、理論上は下記のような違いが生じます。

■書き出しをブログタイトルにした場合
ブログ名が露出されるので、ブランディング効果が高まります。また、狙ったキーワードが入っている場合、アンカーテキストによりSEO的に有利に働く可能性があります。

■書き出しを「ホーム」にした場合
ブログタイトルや記事タイトルが長い場合に、パンくずリストが2行に折り返されるのを防げます。コンテンツ部分が下に押し下げられることなく、ファーストビューでの訴求量をアップさせることができます。

運営スタイルに応じて、どちらでも選択できるようにしました。ただ、どちらにしても大きな差は生じないと思います。重要なのはコンテンツの中身です。

他に新機能ではないですが、

  • 固定ページタイトルを左寄せに変更
  • 「WP Social Bookmarking Light」最新版使用時にボタンがズレる現象の修正
  • グローバルメニューのメニュー幅を可変タイプにする方法の解説

にも対応しました。
ブログで画像を多用していて、かつ、スマホからのアクセスが多い場合は、今回の画像に影を付ける新機能はお役に立てると思います。快適なブログライフのお供に「メシオプレス03ver.1.1」をご利用ください。

画像に影をつける機能、パンくずカスタマイズ機能を追加

この記事へのコメント

この記事へのコメントはありません。

コメントする