ezorisu-web

ウェブサイトのデザインとかお仕事の効率化とか

注目記事に付箋を貼る

WordPress で記事を書いているときの編集画面で「ブログのトップに固定」という項目があるんだけど、告知記事なんかで1月前から宣伝しておきたい時などに使います。
せっかくだからCSSで、記事の頭に「注目記事」とか書いた付箋を貼っておいたら目立つかな。

「ブログのトップに固定」にチェックを入れると、ポスト記事に「sticky」というclass名が振られています。これを使って、タイトルの後ろに付箋を貼ってみましょう。

まずは、タイトルの h1 を調整。タイトル文字数によって幅が決まるようにしておきます。この辺は、使っているテーマによってもタイトルの設定が違っていると思うので、確認しながら調整して下さい。
別にタイトル部分じゃなくて、記事本文のところでもいいし、ブログのデザインに合わせて、お好きな場所に。

.sticky h1 {
	position: relative; /* 付箋の位置調整のため */
	width: fit-content; /* タイトル文字の左端が width になるように */
}

ここからは、付箋の作成。 デザインは自分好みで。位置は、 calc を使ってタイトルの左端から100%(つまりタイトル文字の右端)寄せてそこから10pxほど間隔を取りました。

.sticky h1::before { /* 付箋を作る */
	content: '注目記事'; /* 付箋に書き込む文字 */
	position: absolute; /* 位置調整のため */
	top: 10px; /* タイトルサイズに合わせて適当に */
	left: calc(100% + 10px); /* タイトルの右端から10pxだけ外にしてみた */
	width: 60px; /* 付箋の文字数に合わせて適当に */
	font-size: 13px;
	line-height: 1em;
	padding: 6px 15px 6px 10px; /* バランスを見て適当に */
	border-left: 7px solid #ff9124; /* 色は好みで */
	background: #fdeec0; /* 色は好みで /*
	transform: rotate(-3deg); /* ちょっとだけ傾けてそれらしく見せる */
	font-weight: normal; /* h1は太文字なので下に戻しておく */
	z-index: 100; /* 他の要素と重なったときに下にならないように */
}

続いて、付箋の影を作ります。サイズは付箋に合わせて、位置も様子を見ながら微調整します。なんとなく端っこだけめくれた感じに見えるかな?

.sticky h1::after { /* 付箋の影を作る */
	content: '';
	position: absolute; /* 位置調整のため */
	top: 0.8em; /* h1::before の位置を見ながらいい感じに */
	left: calc(100% + 40px); /* h1::before の位置を見ながらいい感じに */
	width: 60px; /* h1::before に合わせた */
	background-color: #d0d0d0;
	transform: rotate(7deg);; /* 影っぽい感じに角度をつける */
	filter: blur(4px);; /* 影っぽくぼかす */
	z-index: 95; /* 付箋の下になるように */
}

例として、この記事のタイトルのところに貼ってみました。これは「ブログのトップに固定」ではなくて、記事に振られているID class 名を使って表示しています。

色々試しながらオリジナルのデザインにしてみてね。

ゆるやかな曲線で区切りたい!

ここにはコンテンツ部分
エリアの下部分をこのようにゆるやかなウェーブで区切ってみる
 
 

随分前に作ったサイトでは、ウェーブ部分の画像を作って組み込んだんだけど、今ならCSSだけで出来そうなので、やってみました。

ウェーブの考え方はこんな感じ。

高さが a で、半径が R の形をふたつ組み合わせてゆるいカーブに見せます。
自分の好みで高さaと半径Rの値で大体の形を考えて、残りのdの値を割り出します。
とりあえず、高さを a =40px、半径 R = 300px として、その場合の d を計算してみます。直角三角形で考えると c² + d² = R² ですから d の値は、図の中の計算式の通りで、d= 149.666。約150px となります。これで必要な寸法はそろいました。
これを形にしていきます。まずは単純に

<div class="wave">
	<div class="contents-area"></div>
	<div class="wave-l"></div>
	<div class="wave-r"></div>
</div>

wabe-l と wabe-r を50%ずつで、左右に振り分けます。割合は好みで決めて下さい。
wave-l は、contents-area と同じ色にして右側の幅150px(先程計算した d の値)だけ白に。wave-r は、右側を幅150pxのみ contents-area と同じ色で、残りは白にします。

あとは、幅150pxの部分に半径300pxの円弧をそれぞれ擬似要素の「::after」で重ねてやります。

わかりやすいように、ウェーブ部分を色分けしてみた
 
 

.wave-l {
	position: relative;
	width: 50%;
	height: 80px;
	float: left;
	margin: 0;
	background: linear-gradient(90deg, #ffd24b 0, #ffd24b calc( 100% - 150px ), white calc( 100% - 150px ), white 100%);
	overflow: hidden;/*はみ出した部分は表示しない*/
}

.wave-l::after {/*contents-areaと同色の円弧を weve-l に重ねて表示*/
	content: "";
	background: #ffd24b;
	height: 300px;
	width: 300px;
	position: absolute;
	left: calc( 100% - 150px );/*右から150pxで*/
	bottom: 0;/*下を起点とする*/
	border-bottom-right-radius: 100%;/*右下角を100%(300px)の角丸にする*/
}

background は、linear-gradient で途中までオレンジに、残り150pxをホワイトにしています。calc を使っているのは、wave-l とwave-r の幅を調整しても150px部分は常に残るようにです。やり方は他にもいろいろあると思いますが、計算で出したdの値だけ動かさないようにします。

.wave-r {
	position: relative;
	width: 50%;
	height: 40px;
	float: right;
	margin: 0;
	background: linear-gradient(90deg, #ffd24b 0, #ffd24b 150px, white 150px, white 100%);
	overflow: hidden;/*はみ出した部分は表示しない*/
}

.wave-r::after {/*白色の円弧を weve-r に重ねて表示*/
	background: white;
	height: 300px;
	width: 300px;
	position: absolute;
	right: calc( 100% - 150px );/*左から150pxで*/
	top: 0;/*上を起点とする*/
	border-top-left-radius: 100%;/*左上角を100%(300px)の角丸にする*/
}

今回は、d= 149.666 を丸めて約150px としましたが、場合によっては、円弧の接点にズレが生じてピタッと合わないかもしれません。ブラウザによっては、小数点以下をどこまで表示するか、多少違っているようなので、適当に調整して下さい。.wave-r::after の right: calc( 100% – 150px ) で150の値を微調整して合わせるのが簡単です。少数第3位くらいまで指定してもいけるんじゃないかな。あんまり細かくしてもブラウザやディスプレイによって違って見えるかもしれないので、意味がないかも。

幅と半径を決めてから高さを計算したり、幅と高さを決めてから半径を割り出したり、考え方は同じなので、いろいろできるかと思います。

Googleマップをスッキリ埋め込みたい

ブログ上にGoogleマップを <iframe> で埋め込んでみたんだけど、イマイチしっくりこない。主張が強すぎて、なじまない感じ。かと言って、デザイン的に色々しようと思っても、 けっこう面倒。とりあえず CSS だけでなんとかしてみます。

ブログに地図を埋め込むならGoogleマップ

ブログ上で地図を表示する場合、何かと便利なのはやっぱりGoogleマップ。
この地図を自分のブログで表示する方法は、いくつかあって、

  1. Googleマップで「地図を共有または埋め込む」
  2. Googleマイマップで「共有」して埋め込む
  3. Google Map APIを利用して埋め込む

(1)は、設定がとっても簡単。でもデザイン的には融通がきかない。表示されたマップは左上に情報ウィンドウみたいなのがあって、小さい表示だと、見づらいし邪魔。消す方法もあるにはあるようなんだけど、手間がかかって面倒そう。

(2)のマイマップを使うのがデザイン的にもなんとかなりそうなので、今回はこれでいってみようと思います。

(3)APIを使うのは、デザインも自由にカスタマイズできて、思い通りに表示できそう。だけど、色々コードを打ち込んだり、基本有料だし、これまた大変そうなので、今回はパス。

Googleマイマップを埋め込む

Googleマイマップを開いて、新しい地図を作ります。マイマップに新しい場所を登録して、場所の名前や説明文を編集します。
あとは、ピンのアイコンや色も変えられますので、収録されているアイコンから良さげなのを選んで下さい。カスタムアイコンも設定できます。
その場所の写真も登録できます。店舗などは、お店の写真を登録しておくとわかりやすいかもね。
地図の種類も選べます。航空写真とか、ダークモードとか。

で、「共有」をクリックして <iframe> を使ってブログに表示します。

マイマップで地図を作成してブログに埋め込む(<iframe> をコピーして貼り付ける)ところまでは、ネット上にたくさん情報があるので、そちらを参考にして下さい。


私は、こちらのサイトにお世話になりました。わかりやすいです。

Googleマイマップでカスタマイズした地図を自分のサイトやブログに埋め込む方法:TOMONO Tech-Blog

さらに、<iframe> 内に追記オプションで地図の中心位置を決めたり、表示モードを変えたり、縮尺を変更する場合はこちらを参考に

Google Mapをiframeで利用する際のオプションとレスポンシブ対応させるためのHTMLとCSSを紹介(住所指定で表示もできるよ!):Olein Design


まずは、マイマップから「共有」で iframe をコピーします。中身を見てみるとこんな感じ。

<iframe src="https://www.google.com/maps/d/embed?mid=1N187HOMmPN-ZIGeHOfv6A98pbaPJ9co&ehbc=2E312F" width="640" height="480"></iframe>

表示サイズは、width,height いずれもレスポンシブ対応のため100%にしておきます。

src のところにオプションで中心位置と地図の縮尺を追加します。

中心位置は,Googleマイマップで座標をコピペ。

ll=43.76697, 142.48322

縮尺は、とりあえず14くらい?後から調整すればOK(0から23まで指定できます)

Z=17

「&」でつないで、追加します。

<iframe src="https://www.google.com/maps/d/embed?mid=1N187HOMmPN-ZIGeHOfv6A98pbaPJ9co&ehbc=2E312F&ll=43.76697, 142.48322&z=14" width="100%" height="100%"></iframe>

後は、CSS で見た目を調整していきます。

CSS で埋め込みマップの黒帯を消す

最初にレスポンシブ対応のためサイズを100%にしましたが、それだけではレスポンシブデザインにはならないので、<iflrame> を囲むように外側に要素を配置します。

<div class="map">
<iframe src="https://www.google.com/maps/d/embed?mid=1N187HOMmPN-ZIGeHOfv6A98pbaPJ9co&ehbc=2E312F&ll=43.76697, 142.48322&z=14" width="100%" height="100%"></iframe>
</div>

<div class=”map”> に CSS で幅と高さを指定します。

幅は、最大600pxとして、 max-width: 600px;

高さは、height: 450px くらいにしておきましょうか。

これで、パソコン画面で見た時は、幅600pxが上限。スマホは、画面サイズに合わせて縮小されます。

ところで、上部の黒い帯をなんとかしたくなりません?
マイマップの情報を開いたり、拡大地図を開いたりとそれなりに役目はあるんだけど、ちょっと目立ちすぎ。
早速消しちゃおうと思ったんだけど、これがまた厄介だ。<iframe> 内で表示されているものだから、単純に CSS で直接いじろうとしても、うまくいかない。いろいろ検索してみたけど、難しそうな方法ばかり。

あんまり複雑にしないで、手っ取り早く見えなくしてみます。

<iframe>に CSS で margin-top: -60px; を指定します。
これは、帯部分の最大高さ。場合によっては、46px だったり 59px だったりするみたいなので、60px 分とっておけば大丈夫かと思います。帯の分だけ、上方向にずらしています。

<div class=”map”> には overflow: hidden; を指定してはみだした分を見えなくします。

あとは、好みに合わせて、少し色の調子を整えてみます。あんまり地図ばっかり目立ってもしょうがない、という場合に。

CSS で <iframe> に filter: grayscale(70%); を追加してみます。

.map {
	max-width: 600px;
	height: 450px;
	overflow: hidden;
}

.map iframe {
	margin-top: -60px;
	filter: grayscale(70%);
}

ブログに合わせて、背景に馴染みつつスッキリ表示されたでしょうか。

説明リストを見やすくしてみる

リスト表示ってよく使ってると思います。文の頭に数字とか丸ポチが付いて箇条書きになってるやつですね。

この他に説明リストっていうのもあるんだけど、最初に項目(用語)があって、その後に項目の説明が続いているもの。商品リストで、項目として「鉛筆」、説明として「〇〇製、2B、1ダース:400円」とか、解説文で項目が「ヤマゲラ」説明が「キツツキ目キツツキ科【Picus canus】」など色々使えます。

ところがWordaPressの投稿画面(グーテンベルク)の中では、数字とか丸ポチのリストブロックはあっても、説明リストのブロックはありません。使う場面はいっぱいありそうなのに、使いにくいところがちょっと残念。単純にカスタムHTMLブロックの中にHTMLで書いてあげればいいんだけど、記事を書いている投稿者は、そういうのに詳しい人ばかりじゃないから・・・。そのへんのやり方は色々あるんだけれど、それはまた別の機会に。

今回はその説明リストをそれらしく表示するためのCSSです。

まずは、HTMLの基本形から

<dl><!-- description list -->
	<dt>項目</dt><!-- description term -->
	<dd>説明</dd><!-- definition description -->
</dl>

全体をdlで囲んで、項目部分はdt、説明部分はddで囲みます。
例えば、

<dl>
<dt>開催日時</dt>
<dd>12月24日(水曜日)19時00分</dd>
<dt>集合場所</dt>
<dd>中央区円山原始林山道横ミズナラ3丁目5幹3枝番地<br />ツリーハウス シマリス会館</dd>
<dt>会費</dt>
<dd>3ドングリ</dd>
<dt>ゲスト</dt>
<dd>サンタクロース</dd>
<dt>主催者</dt>
<dd>円山リスの会代表 シマリス </dd>
</dl>

こんな感じ。特に何もしないと


開催日時
	12月24日(水曜日)19時00分
集合場所
	中央区円山原始林山道横ミズナラ3丁目5幹3枝番地
	ツリーハウス シマリス会館
会費
	3ドングリ
ゲスト
	サンタクロース
主催者
	円山リスの会代表 シマリス

Chromeだと1行ずつ表示されて、説明部分がインデントされました。これはこれで最小限、項目と説明をそれぞれ読めますね。
もう少し見やすいようにしてみます。項目と説明を横並びにして、項目に色を付けてみましょう。横並びにするのは色々ありますが、今回はグリッドプロパティを使ってみます。

.entry dl { /* 説明リスト全体 */
	margin: 1em 0;
	padding: 2em 0 2em 1em;
	line-height: 1.7em;
	display: grid; /* これでグリッド表示になります*/
	gap: 1em 1.5em; /* 行間が1文字分、項目と説明の間が1.5文字文空けます */
	grid-template-columns: minmax(6em, max-content) 1fr; /* 列の幅を決めます */
}

.entry dt { /* 項目(用語)部分 */
	background-color: hsla(66, 66%, 67%, 0.75); /* 色を付けています */
	padding: 0 0.7em;
	height: 1.7em; /* 1行分だけの高さを指定 */
	font-weight: 700;
}

@media screen and (max-width: 480px) { /* 480pxでモバイル用に切り替え */
.entry dl {
	display: unset; /* グリッドを解除 */
}

.entry dd {
	margin: 0 0 1em 1em; /* 各項目ごとのスペースを調整 */
}
}

項目と説明で横並びのワンセットでそれを繰り返してリストにしています。複数の項目に対して、ひとつの説明なんていうことも、本来できるのですが、ここではごく単純にひとつの項目にひとつの説明という形を想定してCSSにしています。

gapは、行と行の間隔、項目と説明の間隔を指定しています(図−1)。それぞれ1emと1.5em空けています。

(図-1)

grid-template-columns は、グリッド表示にしたときの列の幅を指定します。

最初の minmax(6em, max-content) は、1列目(項目部分)の幅を最小で6em、最大で入力された文字分の幅として変動します(図-1)。
スペースを開けて、次の1fr で残りの範囲を説明部分として使っています。

その残り範囲の幅で説明文は折り返されます。こういうところがグリッドプロパティを使うと便利です。

dt の height に dl で指定した line-height と同じ高さを指定して、説明文が改行されて複数行になっても、項目部分は1行分だけ色がつくようにしています。
スマホなどで表示幅が狭くなると、グリッド表示を解除して項目部分の色はそのまま1行ずつの表示になります。

先程のクリスマスパーティーのお知らせを例にとると

クリスマスパーティーのお知らせ
開催日時
12月24日(水曜日)19時00分
集合場所
中央区円山原始林山道横ミズナラ3丁目5幹3枝番地
ツリーハウス シマリス会館
会費
3ドングリ
ゲスト
サンタクロース
主催者
円山リスの会代表 シマリス

こんな感じ。画面の幅を480px以下に小さくすると、スマホ用に表示が切り替わります。

項目の文字数が少ないときは指定した最低幅で

開催
12月24日(水曜日)19時00分
集合
中央区円山原始林山道横ミズナラ3丁目5幹3枝番地
ツリーハウス シマリス会館
会費
3ドングリ

項目の文字数が多くなったときもそれに合わせて勝手に調整してくれます。

開催日時
12月24日(水曜日)19時00分
集合場所は木の上
中央区円山原始林山道横ミズナラ3丁目5幹3枝番地
ツリーハウス シマリス会館
会費
3ドングリ

あとは、CSSで色を変えるなり項目の前後に記号を入れるなりデザインを調整して、自分のサイトで見やすいようにして下さい。

CSSでドロップダウンメニュー

このブログを作るに当たって、いろいろと試行錯誤をした記録です。すぐ忘れてしまうので、覚書として書き留めています。今回はヘッダーのメニュー編。

CSSのドロップダウンメニューです。テストバージョンのオリジナルWordPress Themeで一部表示がおかしくなっているところがあったので、少し整理してみました。
ヘッダー部分に横並びメニューとしてデザインしていて、メニュー項目にカーソルを合わせると階層式に子メニューが表示される、よく見るタイプです。

まずはメニューなのでリンク項目であることを前提に、リストとしてマークアップします。(DEMOではリンク部分でも別のページに飛ばないようにしています)

[sourcecode language=’html’]

[/sourcecode]

1段目は横並びのメニュー項目で、2段目以降は入れ子構造にしていきます。

次はCSS。
まずは、ドロップダウンメニューとしての基本形。

[sourcecode language=’css’]
#menu-sample ul { /*リスト全体*/
list-style: none;
margin: 0;
padding: 0;
}

#menu-sample li { /*リストの1段目*/
float: left;
min-width: 94px;
white-space: nowrap;
}

#menu-sample ul ul { /*2段目以降*/
display: none;
position: absolute;
z-index: 10;
}

#menu-sample li li { /*2段目以降のリスト項目*/
clear: left;
position:relative;
width: 100%;
}

#menu-sample ul ul ul { /*3段目以降*/
top: 0;
left: 100%;
}

#menu-sample ul li:hover > ul {
display: block;
}

*+html #menu-sample ul ul a { /*IE用*/
width: 72px; /*(94-10-10-1-1)パディングとボーダーの分を引いた値*/
white-space: normal; /*幅に応じて改行*/
}
[/sourcecode]

ul:リストの装飾は不要なので削除。マージン、パディングも0にして、いったんきれいな身体に。

1段目のliをfloat: leftで横並びにします。
できればひとつひとつのメニュー項目の幅をそろえたいと思いますが、文字数によってはピッタリ納まるとは限らないので、あくまでも最小幅とし、文字数が増えても対応できるようにしておきます。それがmin-width: 94px部分。94pxはヘッダーの幅と入れたいメニュー項目数から逆算して適当に決めた数値。
white-space: nowrapは下層のメニュー項目も改行しないようにしています。これを入れておかないと3段目以降で固定幅になって、文字が改行されてしまいます(なぜなのかよくわからない)

ul ulはメニューの2段目以降を指定しています。ここで下層のメニューが見えないようにdisplay: noneで 非表示にします。
positionの使い方がわかりにくいですが、ul ulにposition: absoluteを指定して、2段目以降のulにabsoluteがかかるようにします。2段目のulの親要素である1段目のliにはpositionが指定されていないので、親要素の下に絶対配置されます。
z-index: 10は念のため。サイドバーなどにメニュー項目が重なったとき、下になって隠れてしまう場合もあるので。

2段目以降のリスト項目li liはclear: leftで縦並びに戻します。
position:relativeを入れて2段目以降のリスト項目左上を基準とします。
width: 100%は、リスト項目どれかの文字数が多いときにそれに合わせて同じ幅になるようにしています。

3段目以降を示すul ul ulにもabsoluteがかかっていますが、親要素である2段目以降のliでposition:relativeを指定してあるのでその要素の左上が基点となり、子要素であるulにtop、leftなどで基点からの位置を指定します。
ここではtop: 0でliと下段のulのラインを揃えて、left: 100%で親要素のul幅分右へずらしています。
4段目、5段目と階層が増えても、親要素、子要素の関係は変わらないので同じように表示されます。

あとは、li:hover > ul で子要素がある項目にカーソルが重なったときに直下のulをdisplay: blockで表示するようにします。

例によって、IE用の対策。

まずIEではli liでwidth: 100%を指定してもなぜか最大幅のメニュー項目に合わせて同じ幅に広がってくれないので、*+htmlハックでIE用にメニューの幅を固定して改行するように指定してます。
他のブラウザと見た目が少し変わりますが読めるから大丈夫、というレベルで対応。

そもそもIE6は疑似クラスの :hover や min-width が効かないので、「Google Code」の「IE7.js」を使わせてもらいます。

htmlのhead部分に

[sourcecode language=’html’]

[/sourcecode]

を書き込むだけです。

IE6は、しょうがないから最低限の対応だけしておくか、というスタンスなのでご勘弁を。
これに関しては、「なるべくならIE用のHackは使いたくない」と「「IE7.js」で IE6 でも透過 PNG、疑似クラス :hover に対応」を見てください。
上記の*+htmlハック部分も「IEの条件付きコメント」を使って別ファイルにしたほうがスッキリします。

あとは、メニューっぽく装飾を施します。

[sourcecode language=’css’]
#menu-sample li {
margin-left: 3px;
}

#menu-sample a { /*1段目以降のメニュー文字*/
font-size: 13px;
line-height:15px;
color: #dadada;
text-decoration: none;
text-align: center; /*1段目は文字を中央合わせに*/
padding: 5px 10px;
background-color: #242424;
display: block;
}

#menu-sample a:hover {
color: #f90;
background-color: #111;
}

#menu-sample ul ul {
padding-top: 2px;/*2段目を少し下げた*/
}

#menu-sample ul ul ul { /*3段目以降*/
padding-top: 0; /*2段目のパディング2pxを元に戻す*/
}

#menu-sample li li {
margin-left: 0; /*liのmargin-left: 3pxを元に戻す*/
}

#menu-sample ul ul a { /*2段目以降のメニュー文字*/
font-size: 11px;
line-height: 1.3;
text-align: left; /*2段目以降は左寄せにもどす*/
border-top: solid 1px #555555;
border-right: solid 1px #070707;
border-bottom: solid 1px #070707;
border-left: solid 1px #555555;
background-color: #343434;
}
[/sourcecode]

文字色やバックグラウンドの色は、メニュー内のa要素で指定。display: block;でブロック要素にしてサイズを固定します。
a:hoverでカーソルが乗った位置がわかるように文字色とバックグラウンド色が変わるようにします。
2段目以降は文字サイズを少し小さくしてみました。
その他諸々の指定は、個人個人の好みの問題です。

ただ、やっぱりIEが絡んでくるとなかなかうまく表示されない場合もあって、たとえば2段目と3段目で少し隙間を空けようかとか、逆にちょっと重ねてみようかと思うと、細かいところでいろいろ苦労をすることになります。Operaも少し挙動が変になったりします。

とりあえずこのサンプルでは、その辺も考えた上での基本形ということで IE6,7,8、Opera、Firefox、Safari それぞれのブラウザであまり苦労をしないで動くような最低限のデザインにしてあります。

あとは応用ですので、バックの色やボーダー、イメージ画像を使ったりしていろいろバリエーションを楽しめると思います。

参考サイト