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 名を使って表示しています。

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

Contact Form 7 で送信先を分岐させる

メールフォームといえば Contact Form 7

WordPressのプラグイン、Contact Form 7でメールフォームを作ると、サイト上からメールを送ってもらうことができます。このメールの宛先を「ドロップダウンメニュー」や「チェックボックス」、「ラジオボタン」で選んでもらった項目に合わせて、振り分けてあげようと思います。

通常はコンタクトフォームのメールタブで「送信先」に送り先のアドレスを入れておきます。複数入れる場合は、カンマ(,)で区切ってアドレスを続けて入力します。
aaaa@gmail.com,bbbb@gmail.com
のように。

フォームタブの設定

さて、このアドレスをメールフォーム(Contact Form 7 では、コンタクトフォームと呼んでいる)の入力に合わせて分岐させます。
フォームタブで「ドロップダウンメニュー」「チェックボックス」「ラジオボタン」どれでもいいですが、選びます。


例えば、「ドロップダウンメニュー」の場合、フォームタグ生成のメニュー画面が出てきます。「オプション」で1行ごとに項目を入力します。これで通常のドロップダウンリストが出来上がります。


「このサイトへのコメント」「野鳥に関する質問」「入会について」の3つの項目を作ってみました。それぞれのコメントに対して別々の担当者のところへメールが送られるようにしたいとします。その場合は、行ごとの後ろに半角の縦棒「|」で区切ってメールアドレスを入れます。

1行目:このサイトへのコメント|abcd@gmail.com
2行目:野鳥に関する質問|efgh@gmail.com
3行目:入会について|ijkl@gmail.com

それぞれ送り先の担当者に合わせてアドレスを入れて下さい。
出来上がったメールフォームのドロップダウンでは後ろのメールアドレスは表示されません。
「チェックボックス」も「ラジオボタン」も基本形は同じです。

メールフォームの表示

「タグを挿入」ボタンを押して、フォーム画面に戻ります。ドロップダウンメニューのタグが挿入されています。

<label>を追加しておきましょうか。
[select menu-400 “このサイトへのコメント|abcd@gmail.com” “野鳥に関する質問|efgh@gmail.com” “入会について|ijkl@gmail.com”]
このタグは menu-400 になっています。ここで一旦「保存」。

メールタブでメール画面に移動。

メールタブの設定

上の方に「以下の項目にて、これらのメールタグを利用できます」と書いてあります。先程の [menu-400] というのもありますね。
送信先に [menu-400] を入れてやります。ドロップダウンメニューで選んだ項目のメールアドレスが送信先に入力されるようになります。
あれ? 「不正なメールボックス構文が使用されています。」と出てきました。よくわかりませんが、たぶんまだドロップダウンで項目を選んでいないため、アドレス以外のものが入力されていると判断されているのではないでしょうか。無視して進めてかまいません。試してみるとちゃんと送られます。
管理人のaaaa@gmail.comアドレスへ送りつつ、各担当者へも送る場合は、
送信先にカンマで区切って aaaa@gmail.com,[menu-400] と入れてあげればOK。

メッセージ本文にも [menu-400] を入れておきます。ただし、このままだと送られたメールの中では、ドロップダウンメニューの選んだ項目が表示されなくて、メールアドレスのほうが表示されてしまいます。これでは困るので頭に「_raw_」を付けます。
[_raw_menu-400] こうしておくとメール本文の方は選んだ項目が表示されます。

「保存」ボタンを押します。
上部のショートコードをコピーして、投稿記事や固定ページへペーストしてコンタクトフォームページを作ります。
ちゃんと送れるかどうか、テストしてみてね。

野鳥の会札幌支部ウェブサイトのリニューアル

野鳥の会札幌支部ウェブサイト

作ってから10年近くたつサイトでしたが、2012年10月にWordPressに移行して新しく作り直しました。今までの固定客(主に支部会員の方々)もいらっしゃるので、あまり大きく印象が変わらないようにしながら、Twitterなど今風のITに対応できるようにしてみました。
野鳥の会も高年齢化が進み、なかなか若い会員の方が増えてこない状況ですが、なんとか興味を持ってもらえるサイトにしていきたいです。
お知らせなどの更新も私がやっていますがWordPressにしてずっと楽になりました。月ごとにタイトル写真を入れ替えたりもしていたので、そういう作業は簡単でいいですね。

日本野鳥の会札幌支部:http://sapporo-wbsj.org

ウェブサイト作成 「北海道フィンランド協会」

北海道フィンランド協会ウェブサイトイメージ

北海道フィンランド協会:http://hokkaido-finland.com/

北海道とフィンランドの情報交換、交流親善を目的としたサイトです。
妻が何故か古くからのフィンランド協会会員だった縁で作成することになりました。昔フィンランド語講座を受講していたそうで、その当時一緒に学んだ人たちは今ではフィンランド語の先生になっていたり、フィンランドの楽器カンテレの演奏者になって全国を飛び回っていたりしています。
ちなみに妻はいまだにフィンランド語を話せません。フィンランド語はあきらめて、会員だけ続けていたみたい。

フィンランドの魅力を伝えたいというのがテーマだったので、タイトル部分にはフィンランド人の方が撮影した美しい写真を並べています。もうほとんど写真だけでこのサイトのイメージは決まったようなものです。
ドロップダウンメニューはオーロラのイメージです。「CSSでドロップダウンメニュー」の応用編ですね。
トップページのサイドバーにはtwitterのハッシュタグで「フィンランド」関連のつぶやきを流しています。
あまり記事の更新が期待出来なかったので、サイトを開いた時に何かフィンランド関係の話題が流れていればいいかなと思って設置しましたが、これは意外と面白かったです。けっこうフィンランドについて話題にしている人はいるものなのですね。

このサイト、外枠はできているんですが中身がなかなか追いついていない感じです。
権限のある人が中心になってまとめてくれるといいのですが、なかなかそれも難しいようで・・・
フィンランド式野球「ペサパッロ」の話しとか楽しそうな話題もあって、うまく活用していけば、面白くなりそうなんですが。
今後に期待。

ウェブサイト作成 「日本野鳥の会札幌支部」

日本野鳥の会札幌支部ウェブサイトイメージ

私は野鳥の会札幌支部の幹事をやっておりまして、2003年に作ったのがこのサイトです。もう9年前ですね。
当時はテーブルレイアウトとCSS両方使って作っていましたが、途中から徐々にCSSに移行していきました。
通信環境も今と比べるととても遅かったので、なるべくシンプルに軽くすることを一生懸命考えていた気がします。月日が立つうちにだんだん脂肪がたまってきた感じがしますけど・・・
元々シンプルなデザインが好きなので、これはこれで今でも気に入っています。
野鳥のアイコンやロゴマークも手書きでポチポチと作っています。
この時はGoLiveを使って制作していました。今はMacのエディタ mi を使ってサイトを作成しますが、野鳥の会札幌支部のサイトは昔ながらのホームページ形式なのでGoLiveなどを使うと、制作が楽と言うより更新がとっても楽になります。
それでもWordPressに比べると頻繁に更新が必要なサイトは手間がかかります。そういう訳でこのサイトはWordPressに移行するべくリニューアル準備中です。複数のスタッフで記事を書いていくにはWordPressは便利ですしね。

野鳥の会も年々高齢化が進んできて、会員数も減少気味です。若い人達に積極的に参加していただけるようにどうやってアピールしていくかが悩みどころです。スマートフォンやタブレット端末も考えないとね・・・