【WordPress.com】半透明の画像を使って、背景全体の色合いや明暗の調整をしやすくする

WordPress.com のカスタマイズ機能では、一般に、背景に画像や色を設定することができますが、画像を設定した場合には、色の設定は画像の下に隠れてしまい、見かけ上、無効となります。

2016-02-09 at 16.49.png

そのため、WordPress.com にあらかじめ準備されている不透明な背景パターンを背景画像として使用する場合、その色合いや明暗の調整をするためにはその都度、画像を編集し、差し替える必要があります。

2016-02-09 at 16.50.png

ここでは、画像を半透明にすることにより、下色を使って、背景の色合いや明暗を調整しやすくする方法について覚え書きしたいと思います。

2016-02-09 at 16.54.png

comemoarrow

2016-02-09 at 16.55.png

続きを読む

CSS を使って背景をぼかす方法についての考察

以下の記事で紹介されていた CSS を WordPress.com に適用できるかどうかの確認です。

続きを読む

【WordPress】タグ機能を使って、アーカイブ表示等で任意の記事を薄く表示させる

最終更新日:2015-10-31

この記事は、CSS の使い方について解説したものであり、以下で紹介されている CSS が WordPress のテーマすべてに適用できるわけではありません。(2015-10-31追記)

例えば、「light」というタグを任意の記事に設定し、

2015-10-30 at 15.40

続きを読む

[WordPress.com] 表示させたくはないけれども検索にはひっかかるようにしたい、といったようなときにどうすればいいかについての考察

例えば、ブログ上には表示させたくないけれども自分自身はなんらかのメモとして文章を追加しておきたいといったような場合、私自身は、自分自身が使っている Web ブラウザ上だけでは見えるけれども、他の人からは見かけ上、見ることができないように設定しています(記事「「Stylish」という Safari の拡張機能を使って、自分が使っているパソコンだけ表示を変える」参照)。

AccessMenuBarApps-5

rect3015

AccessMenuBarApps-4

しかしながら、CSS の追加はオプション機能であって、すべての WordPress.com ユーザーが使えるわけではないので、ここでは、その代替となりそうな方法について考えてみました。

続きを読む

#2013

Google マップの明暗を調整するための CSS

最終更新日:2015-11-22

以下の CSS を CSS スタイルシートエディターへ追加すると、

/* Google マップを薄暗くする */
.googlemaps {
position: relative;
}

.googlemaps:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}

.googlemaps:hover:before {
background-color: transparent;
}

Google マップの明暗を調整することができます。

adfadfa

rect3015

adfadf-1

#2013

背景が透明で枠なしでレスポンシブ対応のスライドショーを表示する方法についての考察

!

2015-07-21現在、WordPress.com の仕様変更等により、表示が崩れていることを確認済みです。

 

スライドショーには JavaScript が必要です。

続きを読む

#2013

リンク付きの画像にカーソルを乗せたときに画像をぼんやりと薄くするためのCSS


続きを読む

#2011