アイキャッチにすりガラスとかボタンとかを自動で付けさせる

topImageKari3.jpg

こんにちは! 4連休も半分が瞬殺で終わってもう気が気でない @dutchisover です!

TopImageKari3

今回はアイキャッチのお話しです。 当ブログをはじめるにあたって、アイキャッチは必ず導入したい!と心に決めてみたりしたのですが、毎回 Fireworksとかでタイトルを入れたり、色々作ったりしないといけなくなるなら たぶん続かないことはブログ始めるまえから自信たっぷりでした。

なので、タイトルとか日付とかカテゴリーやらを自動で配置させてしまおうかと。
そしてそれだけだと面白くないし、写真の色合いによっては字が見えづらくなると思い、白ぼかしをかけてみることにしました。

白ぼかしの種明かし

はい、これだけです。透過PNGで作ったスケスケ画像を重ねてるだけでした。
(見やすくするために背景に布っぽいテクスチャを敷いてます)
ちなみに、左右のスライドボタンが入る丸と、真ん中の ” 続きを読む ” が入る長方形の部分は切り抜いて透明にしています。写真が入った時に透けさせたかったんです。

これに写真を入れると
TopImageMaru

こんな感じになります。素材としては 写真を用意して 1000×400 に切り出すだけなので非常にお手軽です。(あ、いちおうレベル補正とかフィルターあてたりとか少し加工もしてるんですよ。いちおう)

アイキャッチ画像に白ぼかしをHTMLで重ねる

まずはHTMLコードです

CSSはこんな感じにします

イメージ的にはこんな感じです
TopImageMaru2

要はサイズを合わせて基準点に揃えているだけですね。

あとはタイトルとか他の要素を入れ込む

外枠の imageWrapper に position: relative をあてているので、そこを基準に他の要素も並べていきます。

タイトルを例にするとこんな感じです
TopImageKari 1

左上角とか右下角を基準にして 何pxずつの場所に置くか、しかやってません。全て position: absolute を指定して、top と left (もしくは bottom と right) で位置の調整をしているだけです。

それを全ての要素で行うと
TopImageKari3

こんな感じになります。この記事のアイキャッチの画像とおんなじになりました。(トップページのスライドショーでみると字がカブって見づらくなってしまいましたw)

あとはWordPressにまかせてトップページで紹介する記事全てにおんなじ指定をかけます。白ぼかしだけはループから外して、画像とかタイトルとかをループさせます。

以上!トップページのスライドショーでした!

今までの記事

と、今回の記事で トップページのスライドショーは完成です!
「プラグイン使えよ」というツッコミは往々にして承知しておりますが、あえて自分で考えて作ってみることに意義があるのではないか。と考えまして( ー`дー´)キリッ

やはりシロウトなもんで、こんなことですけどここに至るまでに試行錯誤しまくって挫折の嵐でした。なのでこんなんできました!というのを残したかった一心で書き残した次第です。

もっとよいやり方や考え方があればご教授願えればと思います!DMください!

@dutchisover

よろしくです!(੭ु ˃̶͈̀ ω ˂̶͈́)੭ु⁾⁾ 以上でした。

最近の記事

Sponsored