カテゴリー
HTML 細工

WordPress の記事を面白くする細工。

           

           

作業効率化、 仕組み化 のあれとこれ

↓↓WordPress に
外に飛ばす URL を貼る

↓↓WordPress で使う画像をストックしておく

↓↓WordPress のテキストで

導入文や目次の
触った箇所で

①それぞれの本文に飛ばす仕組み
②逆に 本文から元の 箇所 へ戻す

↓↓文字を右寄せ

↓↓コメントを打ちこめる

↓↓空白文字でスペースを空ける

↓↓表、囲いのHTML

↓↓ラッコ ツールズ

↓↓diigo、 HTMLとCSSだけで作るツールチップ

↓↓ハッシュタグ ツール

↓↓読んでほしい本

           

           

           

WordPress に
外に飛ばす URL を貼る

URLとは
「Webページの住所のようなもので、そのWEBがネットワーク上のどこにあるかを示すもの」です。
リンクは、
別のページに飛ぶ仕組み。

リンクは別の場所に移動するための入り口であるのに対し、
URLは場所そのものを表しています。

リンクは入り口、
URLは場所を示す。

           

外に飛ばす リンク
https://ka2.link/situke/syougeki/#2
外に飛ばずにここが変わっちゃう リンク
https://ka2.link/situke/syougeki/#2

           

外に飛ばす リンク (URLつける前)
< a target="_blank" href=" " >< /a >

外に飛ばずに ここ が変わっちゃう リンク (URLつける前)
< a href=" " >< /a >

           

外に飛ばす リンク (URLつけた後)
< a target="_blank" href="https://ka2.link/situke/syougeki/#2 " >https://ka2.link/situke/syougeki/#2< /a >

外に飛ばずにここが変わっちゃう リンク (URLつけた後)
< a href="https://ka2.link/situke/syougeki/#2 " >https://ka2.link/situke/syougeki/#2< /a >

           

           

WordPress で使う画像をストックしておく

例えば
Gif画像 無料
で検索して

画像に
使う時の 注意事項 みたいな
余計なことが載ってなかったら

画像の上で右クリック
「名前をつけて画像を保存」
自動でついてる名前を消して
自分がつけたい
かわいい
とか 適当に名前をつけて 保存してます

紹介したいものが
目立たせるのに
なんか物足りなかったら
保存した画像を つけて やったりしてます

テキストの
ここに貼り付けたい ってところを
チカチカさせておいて

WordPress のテキスト 画面の上の方に
画像を開くところがあるんで
そこをクリックすると
画像一覧がバーッと 画面いっぱいに開きます

画像をチェック して保存すると
チカチカに画像の URL が つきます

投稿を表示
で 見ると
ちゃんと画像が ついてます

           

           

WordPress のテキストで

導入文や目次の
触った箇所で

①それぞれの本文に飛ばす仕組み
②逆に 本文から元の 箇所 へ戻す

①< a name="1" >はじめに< /a >
↓ 
< p >1< /p >
はじめに の本文

②< p >1< /p >
はじめに

< a name="1" >はじめに に戻る < /a >

・・・・・・・・・・・・

③< a name="2" >導入文< /a >
↓ 
< p >2< /p >
導入文 の本文

④< p >2< /p >
導入文

< a name="2" >導入文 に戻る < /a >

・・・・・・・・・・・・
 
①②と
③④ の違いは
1 2
です

1 は 1 へ、
2 は 2 へ
飛びます

< a name="a" >導入文< /a >
↓ 
< p >a< /p >
導入文 の本文

でも同じに
a から aへ飛びます

飛ばす方は 文字や記号など挟まないと 何も 反応しません

着地する方は
文字、記号、数字を挟んでもいいけど
挟まなくても
数字で反応します

挟まないと 透明です

・・・・・・・・・・・・

ここから
そっちのサイト↓
https://ka2.link/situke/syougeki/


〇〇の部分に飛ばしたい
ってときは

そっちのサイト↓
https://ka2.link/situke/syougeki/


飛ばして
〇〇の部分に着地した時に
そのサイトの
一番上の検索窓が
元はこうなのが↓
https://ka2.link/situke/syougeki/

こうなってます↓
https://ka2.link/situke/syougeki/#2

このサイト↓
https://ka2.link/situke/syougeki/


ブログの参考書「ワントップ」 のページ
に飛ばしたい
ってときに
これを置いておけば↓
https://ka2.link/situke/syougeki/#2

そこへ飛ばせます

           

           

文字を右寄せ

この文字は右寄せされます!

< p style="text-align: right"> この文字は右寄せされます! < / p >

HTML:文字を右寄せ・左寄せ・中央寄せする方法
https://www-creators.com/archives/4672

           

HTMLのinputタグ内に記載された内容のみ右寄せに表示する方法を現役デザイナーが解説【初心者向け】
https://magazine.techacademy.jp/magazine/32116

デフォルト

/* CSSコード */ .box { background-color: #cccccc; }

left  ・・・左寄せ
entry-title { text-align: left; }
center ・・・中央寄せ
entry-title { text-align: center; }
right ・・・右寄せ
entry-title { text-align: right; }

           

           

コメントを打ちこめる↓

< input type="text" value="こんにちは" class= " ↓

空白をあける。

& nbsp; 」は通常の半角スペースと同じサイズの空白。

& ensp; 」はそれより少し広めの空白。

& emsp; 」はさらに広めの空白。

& thinsp; 」は、最初の「 & nbsp; 」よりも狭い(細い)空白です。

空白文字の打ち方!HTMLで使えるスペースの入れ方いろいろ
https://allabout.co.jp/gm/gc/23899/



表、囲いのHTML

< table >
< tbody >
< tr >
< td >< /td >
< td >< /td >
< td >< /td >
< td >< /td >
< td >< /td >
< /tr >
< /tbody >
< /table >

: テーブル本体要素
https://developer.mozilla.org/ja/docs/Web/HTML/Element/tbody



ラッコ ツールズ
オンラインHTMLエディター
https://rakko.tools/tools/129/



diigo
https://www.diigo.com/

diigo
https://www.diigo.com/user/keeiio

HTMLとCSSだけで作るツールチップ
https://zenn.dev/catnose99/articles/26bd8dac9ea5268486c8

           

           

           

ハッシュレコ
https://hashreco.ai-sta.com/

AIハッシュタグ レコメンド
https://instagram.userlocal.jp/hashtags/search?hashtags=%E4%B8%81%E5%AF%A7%E3%81%AA%E6%9A%AE%E3%82%89%E3%81%97

           

           

           

読んでほしい本
結論を簡単にいうと
「この人を見よ」ってことです

↓ この人に衝撃をうけました
ジーン・シャープ。
「独裁体制から民主主義へ 権力に対抗するための教科書」
https://ka2.link/situke/syougeki/#1

↓ この人に衝撃をうけました
ヴィクトールフランクル 。
「夜と霧 」
ロゴセラピー 。
「生きる意味」 に導かれてる って感じる
https://rreey.xyz/suki/rogo/

↓ この人に衝撃をうけました
ホーキング。
https://ka2.link/situke/syougeki/#16

           

           

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です