自動スタイルシート作成ツール第二段 蛍光線を自在にあやつれるツールはじめちゃいます。

第一弾がかなり好調だったので第二段自動ツール作成はじめちゃいます。
蛍光マーカー線のスタイルシートが、出来上がったサンプルを見ながら
自動で作成できるツールとなる予定です。

この調子で自動ツールをどんどん作っていきますので、宜しくお願いします。

↓第一弾はこちら↓

・めちゃくちゃ便利！
・枠のスタイルシートが自在に作れてコピペ機能も搭載！
・HTMLタグやスタイルシートが全くわからない人でも作れます。
・できあがったサンプルを見ながら作れます。
・色も系統別に分かれてて100種類ほどから選べます。

purechan22.hatenablog.com

枠のスタイルシートを自動で作成できるよ！ 便利すぎて笑う HTML,CSS復習24

2022年11月14日仮の仮サービススタート笑　更新内容

HTMLタグやスタイルシートが全くわからない方でも使えるようになりました！

コピペ機能を実装、そのままHTML編集に張り付けて記事がかけるようになりました。
そのまま張り付けるだけ！ほかのブログやホームページにも使えます。

2022年11月15日　更新内容

・記事の一部だけ蛍光マーカーが引けるようになりました。マーカーの色、文字のサイズ、マーカーの線の太さを指定できます。
・サンプル表示に不具合が出ていた問題を修正しました。
・枠(BOX)にシャドウ（影）がつけれるようになりました。
・枠のサイズが設定できるようになりました。

完成には近づいてきてますがまだ機能を増やしていきたいと思います。
こんな機能を増やしてほしいというのがあればコメントを頂ければと思います。
ソフトより機能は劣るけどソフトの1000倍わかりやすいを目指して精進していきます。

で..自分で言うのもなんだけど、自分で早速使ってみたら便利すぎて笑いが出ました。笑

2つ以上のパターンを作る場合は半角英数字で好きな名前を入力 例　waku2：

枠のサイズを指定する（指定がない方はそのままでOK)
幅 指定しない 50px 100px 150px 200px 250px 300px 350px 400px 450px 500px 550px 600px 高さ 指定しない 50px 100px 150px 200px 250px 300px 350px 400px 450px 500px 550px 600px 枠自体の中央寄せする？ しない する

外枠の線の有無、太さ
選択してください 1px 2px 3px 4px 5px なし

どのタグで使う？わからなければp or div推奨
選択してください p div textarea

領域と文字との余白
選択してください 余白なんて不要 ちょっとだけ もうちょっと 結構開ける

枠線の種類を選ぶ
選択してください 実線 点線 破線 二重線 線がへこんで見える 線が浮き上がって見える 線より内側がへこんで見える 線より内側が浮いて見える

角って丸める？
選択してください 選択して下さい 丸めない ちょっとだけ もうちょっと 結構丸める

文字は太くする？
選択してください しない する

BOXにシャドウ（影）をつける
シャドウをつけない場合はそのままでOK
どれくらいつける？ つけない 弱いシャドウ 普通のシャドウ 強いシャドウ かなり強いシャドウ

外枠色の初期値はブラック、黒です
外枠の色(ピンク~赤,紫系統)
選択してください 他のにする red crimson mediumvioletred deeppink hotpink palevioletred pink lightpink magenta fuchsia violet plum orchid mediumorchid darkviolet darkmagenta purple indigo darkslateblue blueviolet mediumpurple stateblue mediumslateblue
外枠の色(黄~オレンジ)
選択してください 他のにする lightyellow lightgoldenrodyellow lemonchiffon wheat burlywood tan khaki yellow gold orange darkorange goldenrod peru darkgoldenrod chocolate sienna saddlebrown maroon darkred brown firebrick indianred rosybrown darksalmon lightcoral salmon lightsalmon
外枠の色(緑系統)
選択してください 他のにする darkcyan teal darkslategray darkgreen green forestgreen seagreen mediumseagreen mediumaquamarine darkseagreen aquamarine palegreen lightgreen springgreen mediumspringgreen lawngreen greenyellow lime limegreen yellowgreen darkolivegreen olivedrab olive darkhaki palegoldenrod cornsilk beige
外枠の色(青系統)
選択してください 他のにする aliceblue teal lightsteelblue lightstategray stategray steelblue royalblue midnightblue navy darkblue mediumblue blue dodgerblue cornflowerblue deepskyblue lightskyblue skyblue powerblue paleturquoise lightcyan cyan aqua turquoise mediumturquoise lightseagreen cadetblue
外枠の色(黒～クリーム系統)
選択してください 他のにする dimgray gray darkgray silver lightgray gainsboro whitesmoke white snow ghostwhite floralwhite linen antiquewhite papayawhip blanchedalmond bisque moccasin navajowhite peachpuff mistyrose lavenderblush seashell oldlace ivory honeydew azure mintcream

背景色の初期値はなしです
背景の色(ピンク~赤,紫系統)
選択してください 他のにする red crimson mediumvioletred deeppink hotpink palevioletred pink lightpink magenta fuchsia violet plum orchid mediumorchid darkviolet darkmagenta purple indigo darkslateblue blueviolet mediumpurple stateblue mediumslateblue
背景の色(黄~オレンジ)
選択してください 他のにする lightyellow lightgoldenrodyellow lemonchiffon wheat burlywood tan khaki yellow gold orange goldenrod peru darkgoldenrod chocolate sienna saddlebrown maroon darkred brown firebrick indianred rosybrown darksalmon lightcoral salmon lightsalmon
背景の色(緑系統)
選択してください 他のにする darkcyan teal darkslategray darkgreen green forestgreen seagreen mediumseagreen mediumaquamarine darkseagreen aquamarine palegreen lightgreen springgreen mediumspringgreen lawngreen greenyellow lime limegreen yellowgreen darkolivegreen olivedrab olive darkhaki palegoldenrod cornsilk beige
背景の色(青系統)
選択してください 他のにする aliceblue teal lightsteelblue lightstategray stategray steelblue royalblue midnightblue navy darkblue mediumblue blue dodgerblue cornflowerblue deepskyblue lightskyblue skyblue lightblue powerblue paleturquoise lightcyan cyan aqua turquoise mediumturquoise lightseagreen cadetblue
背景の色(黒～クリーム系統)
選択してください 他のにする dimgray gray darkgray silver lightgray gainsboro whitesmoke white snow ghostwhite floralwhite linen antiquewhite papayawhip blanchedalmond bisque moccasin navajowhite peachpuff mistyrose lavenderblush seashell oldlace ivory honeydew azure mintcream

（蛍光マーカーを引く箇所がない場合はそのままにしてOK!)
蛍光マーカーのクラス指定（半角英数字ならなんでも） 例　keikou2：
蛍光マーカーを引く箇所がある場合は選択して下さい。
色、線の太さ ない 細いpink線 太いpink線 細いred線 太いred線 細いyellow線 太いyellow線 細いblue線 太いblue線 細いgreen線 太いgreen線
文字の大きさ 普通 少し大きく もう少し大きく かなり大きく 巨大 文字の太さ 普通 太くする

クリックしてスタイルシートを自動作成、またサンプルを表示する(見たままモード、はてな記法モード、普通のブログ、ホームページ用)
はてなブログのMarkdownは絶対こっち)
ここにスタイルシートなどが全て表示されます

ここにサンプルが表示されますここに蛍光マーカーが引かれます

でき上がったスタイルシートなどをクリップボードにコピーする

そのままスマホでも記事が書けます!
サンプル表示に不具合が出ていましたがほぼ治りました
他に不具合をコメント欄で指摘していただいた場合はブックマークさせて頂きます。

はてなブログにコピーボタンを実装する方法を難しい言葉を使わずに説明してみた HTML,CSS復習22

この記事でわかること

 

誰でもブログにコピーボタンを実装できてそのコードの意味も全部わかります。またテキストエリアの装飾方法もわかります。
プログラム？javascript？なにそれ？おいしいの？状態でも大丈夫です。コピペ用のスタイルシート、スクリプトはページの最後にあります。

こんにちは。
ブログ(はてなブログ)にコピーボタンを実装しようとして他のサイトを見てみたら

難しい言葉が並んでる...
javascript...何それ？おいしいの？
コピペして使おうと思っても作動しない！

そんな感じで無理って思って諦めたことはありませんか？

実ははてなブログではサポートしていない機能があるので
ややこしいスクリプトは作動しないんです。

そこで今回はブログにコピーボタンを実装する方法をすごくわかりやすく
難しい言葉を使わずに説明してみました。

ブログにコピーボタンを実装するには

まずはブログの編集モードをMarkdownに変更してください。

・それからまずコピーしてもらえるテキストエリアを作ります。

id="好きな名前"を入れておきます。

今回はcopy1にします。

<textarea id="copy1" readonly>
ここにコピーしてほしい文章を入力する
</textarea>

readonlyの意味は こっから好きに読み取ってもいいよ！どうぞどうぞ！っていう意味です。

・次にボタンを作ります。

またボタンに好きな名前をつけておきます。

今回はcopybutton(1)にしておきます。

(1)のように番号をつけておくとページ内にいくつもコピーボタンが作れるようになりますよ。

<button onclick="copybutton(1)">コピー</button>

onclickの意味は クリックしたら何か起きるボタンだよ！っていう意味です。

ここまでまとめると次のようになります。記事中に入力します。

<textarea id="copy1" readonly>
ここにコピーしてほしい文章を入力する
</textarea>

<br>

<button onclick="copybutton(1)">コピー</button>

実際にはこうなります。
ここにコピーしてほしい文章を入力する
コピー

でもこのままだと何も起きないのでコピーさせる機能を実装していきます。
まずは全部のせてから一つ一つ説明していきます。 <script> function copybutton(id) { var target = document.getElementById('copy1'); target.select(); document.execCommand("Copy"); alert("「 " + target.value + "」がコピーできました。"); } </script>

function copybutton(id) {

copybutton(id)はコピーボタンを作った時に作った名前です。

idはその時に作った番号1のことです

copybutton(1) copybutton(2)とすれば同じページにいくつもボタンが作成できます。

    var target = document.getElementById('copy1');

targetはテキストエリア内に入力した内容を入れる箱です。好きな名前で大丈夫です。

copy1は一番最初にテキストエリアを作った時のテキストエリアの名前です。

documentは文書の意味でgetElementByid('copy1')でその文書の内容を読み取りtargetに入れます。

    target.select();

targetに入ってる文章を選択してコピーできる準備をしています。

    document.execCommand("Copy");

document.execCommandでtargetに入ってる文章をついにコピーします。

    alert(target.value +" がコピーできました。");

alertでコピーしてもらった後に表示する文章を決めます。

targetにはいってる文章(値)(value)を表示させるにはtarget.valueと入力します。

表示させる文章をつなげる場合はプラス記号(+)を使い

target value +"つなげる文章"を入力します。

ここまでまとめると次のようになります。

全て記事中に記入します。

<textarea id="copy1" readonly>
ここにコピーしてほしい文章を入力する
</textarea>
<br>
<button onclick="copybutton(1)">コピー</button>
<script>
function copybutton(id) {
    var target = document.getElementById('copy1');
    target.select();
    document.execCommand("Copy");
    alert(target.value +" がコピーできました。");
}
</script>

実際にはこうなります。

ここにコピーしてほしい文章を入力する

コピー

・最後にテキストエリアの見た目をよくするためにスタイルシートで装飾していきます。

背景色をseashell色にして、テキストエリアの幅、高さを調整します。

今回は幅を500px; 高さを100pxにしてみます。

widthは幅、heightは高さです。

テキストエリアのスタイルシート

textarea.copyyou{
width:500px;
height:100px;
background-color:seashell;
}

すると記事中はこうなります。

追加したスタイルシートのクラスcopyyouを

class="copyyou"として追加しています。

<textarea id="copy1" class="copyyou" readonly>
ここにコピーしてほしい文章を入力する
</textarea>
<br>
<button onclick="copybutton(1)">コピー</button>
<script>
function copybutton(id) {
    var target = document.getElementById('copy1');
    target.select();
    document.execCommand("Copy");
    alert(target.value +" がコピーできました。");
}
</script>

実際にはこうなります。
ここにコピーしてほしい文章を入力する
コピー

今回のコピペ用スタイルシート

textarea.copyyou{ width:500px; height:100px; background-color:seashell; }

スタイルシートをコピーする

今回の記事中のコピペ用スクリプト

<textarea id="copy1" class="copyyou" readonly> ここにコピーしてほしい文章を入力する </textarea> <br> <button onclick="copybutton(1)">コピー</button> <script> function copybutton(id) { var target = document.getElementById('copy1'); target.select(); document.execCommand("Copy"); alert(target.value +" がコピーできました。"); } </script>

記事中のスクリプトをコピーする

このページは私が勉強、復習しながら作っているページです。

どんどんできることがすごい増えてきました。

これからもブログに特化した使えるHTMLタグ、CSSをこれからも紹介していくので

読者登録もよろしくお願いします。

今後の目標はもっとできることを増やしていって、一つ一つの記事のクオリティを上げていくことでです。
来年の１２月ぐらいからの収益化を目指してクオリティの高いページをそれまでに500記事書いていく予定です。

ecnavi.jp