縦書きのフォーム(How to create a vertical form)

  • Sorry for questioning in Japanese.
    This is a topic to ask how to make a vertical-oriented form.

    今年度大学受験用のブログを運営させていただいております、
    私立高校講師の武富と申します。

    先日は行間と字間についてアドバイスいただきましてありがとうございました。
    東大や京大の現代文についてオンラインの解説と教材プリントを違和感なく横断することができ、大変助かっています。

    こないだphpによって独自に縦書きのための書式を実現していると伺いました。
    それで質問なのですが、WordPressの記事それぞれのdtate内部において、入力フォームを縦書きで構成することはできますでしょうか？
    また、それが困難な場合、cssを自分で整備することで縦書きが実現できる領域（固定ページ）はWordPressのテーマの内部で技術的には確保可能でしょうか？

    縦書きでフォームを作成すること自体についてはWebで幾らかの情報を得ましたので、ブログ外の別の場所に掲示板のようなページを作ることも考えています。
    けれども、現在Gianismプラグインで簡易的な会員ページを作って読者制限をしているため、ブログ内部で投稿が完結することを最優先と考えています。

    縦書きフォームは「できたらいいな」の切迫度ですから、現状だけ教えていただければ結構です。
    ご返答のほどどうぞよろしくお願いいたします。

Viewing 1 replies (of 1 total)
  • Theme Author nobita

    (@nobita)

    @ataketomi さん　こんにちは

    ちょっと考えたことがなかったので、縦書きフォームでググってみました。

    以下のコードをコピーして、テーマの、preparation.php という空ファイルに、貼り付けてみてください。

    
/**
 * blank template for NO FTP ( Theme Editor ) users
 */

    これは、削除してくださいね

    
<?php
/**
 * Template Name: tategaki form test
 * Template Post Type: post, page
 * @see https://kuroeveryday.blogspot.com/2017/04/vertial-input-forms.html?showComment=1517469996188#c938529383974582869
 */
?><!DOCTYPE html>
<html lang="ja">
	<head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" id="raindrops-viewport" />

		<title>縦書き – Theme Raindrops</title>
		<style>
			.form-tategaki {
				writing-mode: vertical-rl;
			}
			.form-tategaki > .field {
				width: 80px;
			}
			.form-tategaki > .field > .label {
				display: block;
			}
			.form-tategaki > .field > .inputfield {
				writing-mode: initial;
				transform: rotate(90deg);
				transform-origin: top left;
				width: 120px;
				height: 20px;
				margin-right: -140px;
			}
			.form-tategaki > .field > button {
				writing-mode: initial;
				transform: rotate(90deg);
				transform-origin: top left;
				width: 80px;
				height: 30px;
				margin-right: -80px;
			}

		</style>
	</head>
	<body>
		<form class="form-tategaki">
			<div class="field">
				<label class="label" for="name">名前</label>
				<input id="name" class="inputfield" type="text" placeholder="山田 太郎">
			</div>

			<div class="field">
				<label class="label" for="message">用件</label>
				<textarea id="message" class="inputfield" placeholder="用件をかいてください"></textarea>
			</div>

			<div class="field">
				<button type="submit">送信</button>
			</div>
		</form>
	</body>
</html>

    出来たら、新規の投稿を作成して、右側のメニューの投稿属性(Post attributes)から、
    tategaki form test を選択　保存します。
    適当なタイトルで、　本文は　書かなくても構いません。

    投稿を表示すると、フォームだけが表示されていると思います。

    このように、テンプレートを作成すると、WordPress内で、フォームを表示することができます。

    データの受け渡しなどについては、ググってみてください。

    私的には、フォームを縦書きにした場合　PCだと変換候補の位置があまりよろしくない感じがします。
    フォームの入力が、横書きを前提にしているためだと思います。

    まずは、実際に動かしてみていただいてはどうでしょう、、、

    • This reply was modified 4 years, 11 months ago by nobita.
    • This reply was modified 4 years, 11 months ago by nobita.
Viewing 1 replies (of 1 total)
  • The topic ‘縦書きのフォーム(How to create a vertical form)’ is closed to new replies.