パラパラ漫画のHTMLを自動で作成することができるページの作成を試みています。
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="form">
<p></p>
<label><input type="checkbox" id="check1">CSSを追記する </label>
<label><input type="checkbox"id="check2" >CSSを追記しない</label>
<p></p>
<label>画像の枚数:</label>
<input type="text" id="box1">
<p></p>
<label>jsとCSSの読み込みのパス:</label>
<input type="text" id="box2">
<p></p>
<label>パラパラ漫画の表紙のパス:</label>
<input type="text" id="box3">
<p></p>
<label>パラパラ漫画の画像のパス:</label>
<input type="text" id="box4">
<p></p>
<button id="make">パラパラ漫画のHTML作成</button>
<div id = "add"></div>
<div id="test1"></div>
</div>
<!--<fieldset>
<legend>CSS</legend>
<label for="radio-1"> あり </label>
<input type="radio" name="radio-1" id="radio-1">
<label for="radio-2"> なし </label>
<input type="radio" name="radio-1" id="radio-2">
</fieldset>-->
</div>
<script>
document.getElementById("make").onclick = function(){
const textbox1 = document.getElementById("box1").value;
console.log(textbox1);
const textbox2 = document.getElementById("box2").value;
console.log(textbox2);
const textbox3 = document.getElementById("box3").value;
const textbox4 = document.getElementById("box4").value;
let ht1 = textbox1;
let ht2 = textbox2;
let ht3 = textbox3;
let ht4 = textbox4;
let aaa = ht1+textbox1+ht2;
var x = document.getElementById("test1");
console.log("aaa")
x.innerHTML = "<h2>h2タグで囲まれたテストの文章です。</h2>"+ht1+ht2+ht3+ht4;
if (check1.checked){
console.log('CSS追記');
}
}
</script>
</body>
</html>innerHTMLにHTML文字列を設定すると、その内容がHTMLタグとして解釈されて、画面表示が置き換わります。 なお、h1タグで文字を囲むと、 通常よりも文字サイズが大きく表示されます。 これは、HTMLタグごとにあらかじめ決められたスタイルが適用されているためです。
「textContent」を使用するとHTMLタグであっても文字列として扱われることになります。
入力欄が多くなるとコードが複雑になってきましたので、必要最小限だけに絞ることにしました。
また、「HTMLのパラパラ漫画作成」ボタンを押しても、ワードプレスにアップロードされた記事内ではなぜか適応できないようなので、今後の対策が必要になってきます。
次回は必要最小限にした自動作成ツールと詳細な設定方法をご紹介しようと考えています。
追記
「HTMLのパラパラ漫画作成」ボタンを押してもワードプレスの記事内ではＨＴＭＬの内容を表示させることができませんでした。
作成ボタンを押してから、HTMLを表示させたい場合は以下のサイトなどで変換しておく必要があります。
〇HTML特殊文字変換ツール
ただし、シンタックスハイライトやコピーボタンを設置はできそうにありません。
あくまでも、文字列を表示させることしかできませんでした。