ezorisu-web

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

エゾリス通信

エゾリス通信
エゾリス通信

むかし、むかし、20世紀も末の1999年。一番最初に作ったホームページが「エゾリス通信」でした。当時はNIFTY-Serve のホームページサービスで、デザインを考えながらHTMLで組み立てるのが面白かったです。

ちょうどバードウォッチングにハマり始めた頃で、パソコン通信で知り合った人たちと鳥を見に行ったりしてました。その頃は札幌の裏参道に住んでいて、円山公園も近かったので、双眼鏡をぶら下げて時々歩いていました。で、円山公園近辺の鳥や動物のことを書いたり、スケッチやちまちま作ったアイコンを載せるのにホームページを作り始めました。

まだ珍しかったので、ローカル局のTVで紹介されたり、アイコンがパソコン系の雑誌でCD掲載されたりしたこともありました。その後仕事が忙しすぎて、更新できなくなり、いつの間にやらNIFTY-Serveのホームページサービスも終了してしまい、「エゾリス通信」は、自然消滅したのでした。

その後も、お散歩ついでに撮りためていた植物の写真や、スケッチ、野鳥のイラストなども溜まっていたので、どっかに載っけておこうかなと思い、「エゾリス通信」をリニューアルして復活させた次第です。
円山は、札幌でも市街に近いのに原始林が残っているような自然にあふれた地域です。「エゾリス通信」は、この自然をいつまでも残したいと、円山の野鳥や動物たち、植物などを紹介しているサイトです。お暇でしたら、ぜひ覗いてみてください。

無料で使える、野鳥のアイコンもあります。クレジット表記不要で、個人、法人、商用問わず使えますので、 ご利用ください。

注目記事に付箋を貼る

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で色を変えるなり項目の前後に記号を入れるなりデザインを調整して、自分のサイトで見やすいようにして下さい。