Image

「ステンドグラス関連用語辞典」をつくりました。

ステンドグラス関連用語辞典

まだ用語が少ないですが、これから徐々に増やしていきます。

Pocket

Image

SONY DSC-RX1R, 1/80, f/2.0, ISO2500, Photo by eto

背景、コンセプト

用語集を作って、そこに分からなかったりあやふやな言葉の意味を調べて書いておくと、よりしっかり理解できるかなと。あと、サイトのSEO効果も期待できそうですし。


今はまだ少ないですが、徐々に増やしていく予定です。


ステンドグラス関連用語辞典

デザイン、機能

Image

ヘッダ+縦長1ページのデザイン

重くなるので、基本は文字のみで写真は付けず。WordPressの固定ページを使用。


Last Update(最終更新日)の表示

新しい用語が登録されたり内容が更新されたのがわかるように。

ソースは以下。

<p>Last Update:<?php the_modified_date('Y.m.d'); ?></p>

※プラグイン「PHP Execution」を使用しているため、html内でphpの使用が可能になっている。


50音索引

ヘッダにある50音の行頭文字(あかさたな~)から、各行に移動可能。


用語追加リクエスト機能

ヘッダにあるボックスに、追加して欲しい用語を入力して送信ボタンをクリック

Image

     

管理者にメール送付

Image

プラグイン「Contact Form 7」を使用して作成。

Contact Form 7 設定方法

1. 設定画面でコンタクトフォームを新規作成

2. フォームに用語入力欄と送信ボタンを設定

    <p>[text term class:contact-form-7_term] </p>
    <p>[submit class:contact-form-7_submit "送信"]</p>

3. 管理者に送信されるメールを設定

    <p>追加リクエスト: [term]</p>

4. CSSでボックスの並びを縦から横に変更

/*用語入力欄の位置修正*/
.contact-form-7_term {
  position: relative; 
  top: -16px;
  left:145px;
}

/*送信ボタンの位置修正*/
.contact-form-7_submit{
  position: relative; 
  top: -44px;
  left: 470px;
}

/*送信後メッセージの位置調整*/
.wpcf7-mail-sent-ok {
  text-align: center;
  position: relative; 
  top: -60px;
  left: 0px;
  text-align: center;
}

5. 実際にメールが送られるか確認





Image

SONY DSC-RX1R, 1/100, f/8.0, ISO100, Photo by eto

Image

SONY DSC-RX1R, 1/200, f/8.0, ISO100, Photo by eto





最後に

これからガンガン増やしていければと思います。目標は1000個くらいかな?「関連」用語なので、範囲は結構広く出来そうですし。。


それにしても、WordPressはいろんなことが比較的簡単にできるので楽しいです。


ステンドグラス関連用語辞典


Pocket

Comment

メールアドレスが公開されることはありません。