＜いつも工事中＞

パソコン　 アイフォン　 カメラ　
　
たつひとの豪州IT
　
IT　 Windows10　 PC本体　
　
ショートカット　 Outlook　 ワード　 Google　 Google maps　 Gmail　 IE　 CloudDrive　 Skype　 pdf　 websoft　

◆ メモ帳 (テキストエディタ) で作るWebサイトのお話です ◆
　
備忘録ですのでほとんどの人はパスして大丈夫なノートです。　　(^-^)

2023/6/26 改訂

たつひとのWeb作成技術
　 なんのことはない，たつひと流ですから

[▲Top]

たつひとの初歩的HTML技術

番号	HTML	説明・解説　　【工事中】
☆	HTMLの TEXT編集 【200314】	＜HTMLのTEXT編集＞ 　・HTMLドキュメントを編集（ホームページを作成）する場合， 　　シンプルなテキストエディター (メモ帳)を使ってサイト作成を行うと 　　HTMLの仕組みが理解しやすいです。 　・Windows OSには標準のテキストエディターとしてメモ帳を 　　テキストを編集する為のテキストエディターを使用 ＜HTMLドキュメントをメモ帳で編集＞ 　・HTMLドキュメントをメモ帳で編集するには 　　メモ帳の[ファイル]→[開く]を選択 　　ファイルの種類を「テキスト文書」から「すべてのファイル」に変更 　　フォルダー内のhtmlドキュメントを選択できるようになる 　　メモ帳でドキュメントを修正・追加ができるようになる。 　(確認：　20220415) (^-^)v
☆	メタタグ 【180828】	＜メタタグ meta tag＞ 　・メタタグ：　朝日新聞メタタグ事件，慰安婦報道取り下げ英文記事で検索回避の設定で有名となったメタタグ 　・ロボット型検索エンジンが，検索しないようにするタグ。 　 　・「nofollow」「noarchive」と書いて，「検索しないでね」の意。 　　大新聞は，すごいことしますね。 (^-^)v
☆	画像のトリミング ペイント 【190625】	＜Webに張り付けるための画像のトリミング＞ 　ペイントの「ホーム」から画像の範囲を選択，トリミングをします。 　・トリミングする画像を右クリック 　・表示されるメニューから「プログラムから開く」→「ペイント」の順にクリック 　・ペイントが起動します。 　・「ホーム」タブをクリック 　・「選択」ボタン→「四角形選択」の順にクリック 　・トリミングする範囲の始点をドラッグし，マウスポインターを範囲の終点まで動かす。 　・目的の場所までマウスポインターを動かしたら，マウスのボタンから指を離す。 　・「ホーム」タブの「トリミング」ボタンをクリック。 　完了。 (^-^)v
☆	画像のダウンサイズ ペイント 【170308】	＜Webに張り付けるための画像のダウンサイズ＞ ・ペイントを使って画像のクオリティーを落とさずに簡単にサイズダウンする方法 　１．ペイントアプリを起動 　２．サイズダウンしたい画像の読み込み 　　　［ファイル］→［開く］でサイズダウンしたいファイルを選択し読み込む 　　　　例：　スマートフォンで撮影した画像でサイズは 　　　　　　　　　　・ファイルサイズ　：　　4.4MB 　　　　　　　　　　・大きさ　　　　　：　　3840x2160px 　　　　参考（キヤノン，C／MS Picture Manager，M） 　　　　　　L ：　16MB　　　　4608x3456px (C) 　　　　　　M1：　 8MB　　　　3264x2448px (C) 　　　　　　M2：　 3MB　　　　2048x1536px (C) 　　　　　　ドキュメント大：　1024x768px (M) 　　　　　　ドキュメント小：　 800x600px (M) 　　　　　　S ：　0.3MB　　　　640x480px (C) 　　　　　　Web 大：　　　　　 640x480px (M) 　　　　　　Web 小：　　　　　 448x336px (M) 　　　　　　メール 大：　　　　314x235px (M) 　　　　　　メール 小：　　　　160x160px (M) 　３．読み込んだファイルのサイズダウン 　　　画像を使用する目的に合わせて画像の縦x横のサイズを変更 　　　・［サイズ変更］をクリックし［ピクセル］を選択 　　　・水平方向を960と入力 　　　・「縦横比を維持する」を選択。 　　　・縮小したサイズを入力したら［名前をつけて保存］→［PNG］画像を選択しファイルを保存。 　４．　４MB　→　３１９KB 　　　　約1/10のサイズに ＜保存形式を変更すればサイズダウン？＞ 　　・元ファイル（JPG）：　４．４MB 　　　変換１（PNG）　 ：１２．９MB 　　　変換２（GIF）　　：　３．７MB 　　　単純に保存形式を替えてもサイズダウンしない ＜JPG，PNG，GIFの違い＞ 　・写真,グラデーションのある画像など，色数が多い場合 → jpg 　・PC画面キャプチャ，図表，線画など色数が少ない画像の場合 → png 　・画像ファイルサイズを気にせず，画質重視の場合 → png 　・gifはpngの代わりに使うと良い場合もあるがあまり使われない 　＜jpgの特徴＞ 　　・比較的高画質で画像ファイルサイズを小さくできる。 　　・画像が粗くなり，ノイズが出る（特にwebページのキャプチャや図形など） 　　・画質が確実に劣化 　　・webサイトに画像を載せる時には基本的にはjpg形式の画像を使う 　　・輪郭がシャープな画像の場合 → png形式を使う 　＜pngの特徴＞ 　　・画質が全く劣化しない 　　・透明･半透明の画像も扱える 　　・シンプルな画像の場合，jpgよりもファイルサイズが小さくなる 　　・画像ファイルサイズが大きくなりがち　(写真) 　　・画質を重視，シンプルで色数の少ない画像の場合に使う 　　・jpgよりファイルサイズが大きくなる事が多いが， 　　　場合により，jpgよりファイルサイズを小さくできる 　　・PC画面のスクリーンショットを撮る時や，編集の途中で保存する時は 　　　web上にアップロードする前は必ずpng形式で保存 　＜gifの特徴＞ 　　・シンプルな画像の場合，ファイルサイズを小さくできる 　　・透明な画素も使える 　　・アニメーションgifとしても使える 　　・256色しか使えない。色数の多い写真などには不向き 　　・pngと似ているが一つの画像で色を256色しか使用できない。 　　・通常のブログの場合は，gifを使う必要は無い。pngで十分 (^-^)v
☆	写真の張り付け 【171118】 説明追加【220908】	(注意)　コードの「<」 をそのまま記述すると，説明文が実際のコードになってしまうので， 「<」と「>」の代わりに，特殊なコード「<」「>」で表現しています。 ページのソースを表示させてみてください。 ＜単純張り付け＞ 　<img src="image/081129a-1.jpg"> 　※「image」というホルダーの中にある「081129a-1.jpg」のファイル ＜縮小張り付け＞ 　<img srcタグ>として間に，「width="　"」を使って，写真，図の横幅を指定します。 　縦横比を維持したまま，縮小できます。 ＜参照張り付け＞ 　・縮小版写真を使用 　　　<a href="image9/a170218g2.jpg">< img src="image9/a170218g.jpg" border="0"></a> 　※「a170218g.jpg」は「a170218g2.jpg」の縮小版です。 　・参照写真を縮小して使用 ＜img srcタグ＞ 　img src="　" alt="　" width="　" height="　" border="0" hspace="10" vspace="10" 　・srcには画像のあるURL 　・altに画像の説明文 　・widthに横幅 　・heightに高さ 　・borderには境界線の指定 　・hspace="" と vspace="" を追加で画像の周囲に余白 　・参照時に新しいウインドーで開く：　 target=" blank" ＜写真が自動で回転してしまうときの対処方法＞ 　・パソコン上で画像編集機能を使い，一度向きを直してから保存 　　これにより写真に埋め込まれたExif情報が上書きされ正しい向きの写真に。 　　→jpgの写真は正しい向きになりませんでした。 　・パソコン上で，画像をペイントで開け，向きを直してからpngで保存 　　→正しい向きにできました。 　　Exif 情報（Exchangeable image file format，イグジフ情報） 　　　・富士フイルムが開発 　　　・写真のプロパティでの表示可。 　　　・写真の向き，カメラやスマホの種類，焦点距離，F値，撮影時刻，場所，著作権情報など。 　(210427) (^-^)v
☆	動画の張り付け 【220908】 【230517】	(注意)　コードの「<」 をそのまま記述すると，説明文が実際のコードになってしまうので， 「<」と「>」の代わりに，特殊なコード「<」「>」で表現しています。 ページのソースを表示させてみてください。 ＜動画を自分のWebサイトにアップして表示させる＞ 　<video> を用いて埋め込みます。 ＜Youtubeの貼り付け＞ 　・あらかじめ自分のWebに使用する動画をYouTubeにアップしておく。 　(220908) ＜Youtube動画の開始時間を決める＞ URLに， src=”” の中の URL の部分最後に次のように「?t=26s」のようにパラメーターを付ける。 すでに，「?」がURLにあるときは「&t=26s」とする。 以下の記述も可。 　t=90 　t=1m 　t=1m0s 　t=1m30s 　t=01m30s 　t=1h20s URLパラメータ (変数，文字列)：　URLの末尾に付与され る”? (クエスチョン)”マーク以降の文字列のこと。コンテンツの表示内容を変えたりすることができる。 パラメータとは，サーバーに情報を伝えるために外部から付与される変動要素 ?○○○=××× URLにパラメータが付いたURLを「パラメータ付きURL」と呼ぶ。 　･「?」から始める 　・複数のパラメータを設定する場合は「&」で区切りを入れる 　・1つのパラメータにつき，入れる値は1つまで src=”” の中の URL の部分最後に次のように「?start=26」のようにパラメーターを付ける。 ＜Youtube動画の終了時間を決める＞ URLに， src=”” の中の URL の部分最後に次のように「?end=40」のようにパラメーターを付ける。数値は終了する時間（秒数）。 ＜Youtube動画の開始時間と終了時間を決める＞ src=”” の中の URL の部分最後に次のように「?start=26&end=40」のようにパラメーターをつける。 　(20230517) ＜YouTubeショートでは，上記の開始時間の設定はできない＞ 　・YouTubeショートでは通常動画のような早送り・巻き戻し（10秒スキップ）は出来ない。 　・再生バーを動かして，任意の箇所から再生するといったことも出来ない。 　・画面をタップして等の一時停止は可能。 　それ以外の操作の自由度ない。 　(20230626) (^-^)v
☆	表の縦と横 【161030】	表の縦と横をなんと英語でいうか，混乱します。 　表の縦の列のことを，column 　表の横の列のことを，row いいます。 (^-^)v
☆	位置の指定 【160423】	真中へ：　<td align="center"> 上部へ：　<td valign="top"> (^-^)v
☆	横の合体 　　　　　　　【160423】 　　　　　　　　　　　　　　　　　　　　　　　横のセルの合体です。 　　　　　　　　　　　　　　　　　　　　　　　<td colspan="2"> としました。 　　　　　　　　　　　　　　　　　　　　　　　(^-^)v
☆	縦の合体 【160423】	縦のセルの合体です。 番号の☆の縦合体。HTMLの縦の二つのセルの合体です。 <td rowspan="2"> としました。 (^-^)v
		ここは二段目になります。 ＜縦横同時合体＞ <td colspan="2" rowspan="2"> とすれば，縦横の合体も可能です。 (^-^)v
☆	発音記号 【160223】	/ｶﾀｶﾅ発音記号/ /英字発音記号/ ：　， ：　 (^-^)v
☆	色付け 【160223】	(注意)　コードの「<」 をそのまま記述すると，説明文が実際のコードになってしまうので， 「<」と「>」の代わりに，特殊なコード「<」「>」で表現しています。 ページのソースを表示させてみてください。 ＜マーカーとして色付け＞ 　・style="background-color:yellow"をスパン<span>を使い 　　その後に属性として入れ，バックグランド(背景)の色を指定。 　◆　 ＜段落の色付け＞ 　・style="background-color:lightyellow"をパラグラフ <p> を使い 　　その後に属性として入れ，バックグラウンド(背景)の色を指定。 　◆　 　◆　 ＜文字の色付け＞ 　◆　 　◆　 　◆　 　◆　 (^-^)v
☆	升目の色のお話 【160930】	・bgcolor="lightyellow"を <td の後に属性として入れ，バックグラウンド(背景)の色を指定。 (^-^)v
☆	色のお話 【160222】	■■■　black #000000 ■■■　silver #c0c0c0 ■■■　gray #808080 ■■■　white #ffffff ■■■　maroon #800000 ■■■　red #ff0000 ■■■　purple #800080 ■■■　fuchsia #ff00ff ■■■　green #008000 ■■■　lime #00ff00 ■■■　olive #808000 ■■■　yellow #ffff00 ■■■　navy #000080 ■■■　blue #0000ff ■■■　teal #008080 ■■■　aqua #00ffff ■■■　beige #f5f5dc ■■■　lightyellow #ffffe0 (^-^)v
☆	全体の文字の色 【171113】	全体にわたり文字の色を青色に指定。 　　body text="blue" 　それぞれの場所での文字の色の指定は， 　　font color="red" (^-^)v
☆	背景色の色 (190917)	背景色を青色に指定。 　　body bgcolor="blue" (^-^)v
☆	faviconのお話 【160128】	faviconのが表示されない。 今回の@ホームページからcoocan.jpへの引越しでfaviconが表示されない トラブルがあって@Niftyのカスタマーサービスデスクに問い合わせしました。 以下解決方法です。 faviconは，サイトのページをお気に入りの名前の前のマークです。 tatsuaiki.art.coocan.jpやtatsu.in.coocan.jpのfaviconは，です。 回答は， 「Faviconが表示できない場合は，利用のブラウザ（Internet Explorerなど）に保存されているキャッシュやCookieが壊れているなどの影響を受けている可能性」とのこと。 　�@「F5」キーで再読み込みを行う 　�Aブラウザの初期化 　�BCookieの削除 �Bで解決しました。操作実施後はパソコンの再起動が必要です。 方法はネットで調べてくださいね。 本来なら，@Niftyカスタマーサービスデスクは，faviconの表示方法を含め， ホームページの作成方法やホームページの構成，CGI，HTMLタグの記述，FTPソフトの設定・操作に関しては，サポートを行っていないとのこと。 ニフティー運営のホームページシステム「@ホームページ」のサービス終了に伴う引越し絡みの質問なので回答をもらいました。 (^-^)v
☆	<br>のお話 【160124】	色々なディバイスで表示されることがおおくなりましたので<br>は極力，末尾以外には使用しないようにします。 (^-^)v
☆	URLの最後の「/」 のお話	○　http://tatsuaiki.art.coocan.jp/ 　　×　http://tatsuaiki.art.coocan.jp 　　○　http://tatsuaiki.art.coocan.jp/tauindex.htm 　　×　http://tatsuaiki.art.coocan.jp/tauindex.htm/ (^-^)v
番号	HTMLタグ	説明・解説　　【工事中】
☆	HTMLの基礎	HTMLは HyperText Markup Language の略 ・HTML文書は，拡張子を「.htm」または「.html」として保存 →「.htm」を使用。 ・要素名を記述する際にアルファベットは大文字も小文字も同じものとして認識 →小文字を使用。 ・URLやファイル名は，大文字・小文字を区別。注意方。 →「.jpg」は時々，「.JPG」になっていて表示されないことがあります。 　ファイル名を直しても，直ちに表示は変わらず四苦八苦。 　フォルダーと閉じて開けると表示が「.JPG」→「.jpg」に変わっていたりして。 ・「要素(element)」及び「要素」に対して定義される「属性(attribute)」 ・属性値は引用符ダブルクォーテーション(“”)あるいはシングルクォーテーション(‘’)で囲む。属性名="属性値" 　属性は開始タグの中に空白で区切って「何組でも」「順不同」で記述可 →引用符ダブルクォーテーション(“”)を使用 ・htmlファイルの基本構成 　要素HTMLの開始タグと要素HTMLの終了タグの間で定義 ・見出しheadの開始タグと終了タグ/headの間で，タイトルや付加的情報記載 ・タイトル titleは，headタグ(tag)間で，titleはタブのタイトルバーに表示 →「TatsuAiki …」と表示。 →自分のウエブ内をヤフーで検索するとき，極めて有効。自分のホームページを特定できる。 ・bodyと/bodyで囲まれた部分が本体部 ・背景色は，bgcolor="#E9FFD9"で ・fontは，size=”5”の様にサイズ指示。サイズは1〜7の7段階。1が最小。指定なしま3。 ・fontカラーは，color="#008000"のように指示。 ・文字に使用するタグ：　b(太字)，s(取り消し)，tt(等幅)，u(下線)，sup(上付き)，sub(下付き)，big(一 回り大きく)，small(一回り小さく)，strong(強調→太字)，em(強調→イタリック体) ・リンクは，a href="URL" 　　「新規（別の）タブで開く」は，target="_blank"を「>」の前に入れる ・図挿入は，img src="ファイル名" ・横線は，hr ＜table＞ 　・表は，table 　・tr行，tdで列（セル）作成。 　・td内で，テキスト位置はalign属性，valign属性，bgcolor属性でセル色指定。 　・余白ゼロ：　cellpadding="0" 　・余白3ピクセル：　cellpadding="3" (^-^)v
☆	HTMLの基礎 その弐	＜divとpとspan＞ 　・divとspanの違い 　　・divタグ　div〜/div 　　　　⇒display: block 　　　　・division（段，仕切り)のdiv 　　　　→ページ内にブロックを作りたい時に使用 　　　　→CSSで幅（width）と高さ（height）の指定できる。 　　　　→divタグの中にspanタグを入れることはよくる 　　　　→div，p，h1〜h6，ul，dl，ol，li，span，img，strong，em 等 　　　　→あらゆるものを挟んで大きなまとまりを作る 　　・spanタグ　span〜/span 　　　　⇒display: inline 　　　　・span (しばらくの間) 　　　　→幅と高さを指定できない。 　　　　→文章の一部の文字色を変えたり，文字に下線を引いたり，装飾したい時に使用。 　　　　→spanの中にdivは入れない 　　　　→span，a，img 　　　　→文字など小さいまとまりを作る 　　・pタグ　p〜/p 　　　　・Paragraph（段落） 　　　　→ページ内で段落を作る際に使用 ＜div style=";"＞ 　div style=”プロパティ:値;”〜/div 　　・style=”color:green; 　　・style=”color:blue; font-size:20px;” 　　・style=”color:blue; background-color:#90ddb4; padding:30px; display:inline-block; 　　　→display:inline-blockを使うとbackground-colorの幅を調整することができます 　　・style="color:red; background:yellow"> 　　　→黄色の背景色に赤い文字 　　・style="margin : 2px 3px 2px 3px" 　　　→数字は，上･右･下･左のマージンの順番 　　・style="margin : 5px" 　　　→１つだけだと上右下左すべてがその値。 　　・style="margin-top : 10px" 　　　→上マージンを指定 　　・style="margin-right : 10px" 　　　→右マージンを指定 　　・style="margin-bottom : 10px" 　　　→下マージンを指定 　　・style="margin-left : 10px" 　　　→左マージンを指定 　　・style="padding : 2px 3px 2px 3px" 　　　→数字は，上･右･下･左のパディング(内側余白)を指定 　　・style="padding : 5px" 　　　→全パディングを指定 　　・style="padding-top : 10px" 　　　→上パディングを指定 　　・style="padding-right : 10px" 　　　→右パディングを指定 　　・style="padding-bottom : 10px" 　　　→下パディングを指定 　　・style="padding-left : 10px" 　　　→左パディングを指定 　　・style="border : 10px none red" 　　　→borderは，幅，スタイル，色の順で値を指定 　　　→スタイルはnone (なし) 　　・style="border : 10px solid red" 　　　→スタイルはsolid (実線) 　　・style="border : 10px double red" 　　　→スタイルはdouble (二重線) 　　・style="border : 10px dashed red" 　　　→スタイルはdashed (点線) 　　・style="border : 10px dotted red" 　　　→スタイルはdotted (ドット) 　　・style="border : 10px groove red" 　　　→スタイルはgroove 　　・style="border : 10px ridge red" 　　　→スタイルはridge 　　・style="border : 10px inset red" 　　　→スタイルはinset 　　・style="border : 10px outset red" 　　　→スタイルはoutset 　　・style="width : 100px; height : 100px; border : 10px solid red" 　　　→順に，幅，高さ，外枠 (幅，スタイル，色) 　　・style="width:auto; background-color:orange" 　　　→幅自動，背景オレンジの設定 　　・style="width:400px; background-color:orange" 　　　→幅400pxの設定 　　・style="width:50%; background-color:orange" 　　　→幅50%の設定 　　・style="height:auto; background-color:orange" 　　　→高さ自動の設定 　　・style="height:80px; background-color:orange" 　　　→高さ80pxの設定 ＜文字の位置＞ 　　・style="text-align:left;" 　　　→左寄せ(left) 　　・style="text-align:center;" 　　　→中央揃え(center) 　　・style="text-align:right;" 　　　→右寄せ(right) 　　・style="vertical-align:top;" 　　　→上寄せ(top) 　　・style="vertical-align:middle;" 　　　→中央揃え(middle) 　　・style="vertical-align:bottom;" 　　　→下寄せ(bottom) ＜文字の大きさ＞ 　　・style="font-size:10pt" 　　　→ポイント 　　・style="font-size:10px" 　　　→ピクセル ＜背景色＞ 　　・p style="background-color: lightyellow; padding: 20px" ＜文字の色＞ 　　・style="color:red" 　　　→文字の色，赤 　　・style="color:blue" 　　・style="color:green" ＜行間隔＞ 　　・tr style="line-height: 180%; text-align: left; " 　　・td style="vertical-align:top; text-align: left; line-height: 120%;" (^-^)v
☆	HTMLの基礎 その参 リンク	(注意)　コードの「<」 をそのまま記述すると，説明文が実際のコードになってしまうので， 「<」と「>」の代わりに，特殊なコード「<」「>」で表現しています。 ページのソースを表示させてみてください。 ＜ハイパーリンク＞ 　HTMLのリンク（<a>タグ）の使い方 　　<a>タグは，文章や画像などの指定した要素をハイパーリンクにすることができる。 　<a アンカー 属性="属性値">〜</a> 　「target="_blank"」でリンク先を新しいタブで開く ＜ページ内リンク＞ 　リンク元 (出発点，ワープホールの入り口) 　<a href="#abc">ABCの位置へジャンプ</a> 　 　リンク先（到達点，ワープして飛ぶ場所，ワープホールの出口） 　<a name="abc">ここがABCの位置</a> 　 　リンク先（到達点）には，<a name="#　ように「#」を入れない。 　ページ内リンクでクリックしても飛ばない理由 　　・リンク先(到達点，アンカー)の属性に「#」が含まれている 　　　「#」はリンク元(出発点)に付けるものであり， 　　　リンク先(到達点)に付けてしまうとリンクが正しく働かなくなる。 (^-^)v

[▲Top]

たつひとのスタイルシート

[▲Top]

たつひとのFTP

[▲Top]

WordPress

番号	WordPress	説明・解説　　【工事中】
☆	WordPress 　無機材会	WordPress ＜無機材会ホームページ＞ 　https://ceramni.matrix.jp/ 　　工場見学会：　https://ceramni.matrix.jp/?cat=19 　　企業セミナー：　https://ceramni.matrix.jp/?cat=20 　　技術英会話エッセイ：　https://ceramni.matrix.jp/?p=1582 　　合気道エッセイ：　https://ceramni.matrix.jp/?p=3592 　　「その時私は」物語：　https://ceramni.matrix.jp/?cat=53 　　たつひとの富士山：　https://ceramni.matrix.jp/?p=5390 　　管理者ログイン (記事投稿)：　ログイン ＜無機材会ホームページの色＞ 　文字色 　　■■■　赤　 #b22222 　　■■■　茶　 #c39a20 　　■■■　紫　 #470288 　　■■■　紺　 #002060 　　■■■　緑　 #015939 　背景色 　　ベージュ　#fff2f2　です。このマス目の色です (^-^)v
☆	WordPress コード編集にして文字の色付け	WordPress (注意)　コードの「<」 をそのまま記述すると，説明文が実際のコードになってしまうので， 「<」と「>」の代わりに，特殊なコード「<」「>」で表現しています。 ページのソースを表示させてみてください。 コード編集にして文字の色付け ワードプレスのビジュアルエディターで色を付けようとすると， マーカーペンで文字に黄色い背景がついてしまいます。 いつの時点からかの改悪です。 そこで，コード編集で，このマーカー背景を取り除きます。 字を赤字に <span class="has-inline-color has-vivid-red-color">赤字</span> 字を赤字＋マーカー黄色 <mark class="has-inline-color has-vivid-red-color">赤字</mark> 字を青に <mark class="has-inline-color has-vk-color-primary-vivid-color">青字</mark> 字を青字＋マーカー黄色 <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vk-color-primary-vivid-color">青字<mark> ワードプレスのビジュアルエディターはコロコロ改変されます。 よかれと思っての改変でしょうが，同じ操作ができないのは本当に困ります。 これをコードエディターで修正するわけですが，コードエディターが 使えない人は頭を抱えると思います。 　(20221105) (^-^)v
☆	WordPress 記事の投稿方法	WordPress 2021年Wordpress初心者使い方・始め方　【金子晃之】 ＜記事の投稿方法＞ 　46:17 　記事の投稿（タイトルと本文）（「投稿」） 　54:17 　投稿ページ（カテゴリーで分類する）と固定ページ（単体で独立している）の違い 　55:42 　カテゴリーの名前の設定（分類名）（「投稿」→「カテゴリー」） 　01:24:47 　記事に画像を載せる（アイキャッチ画像）（「投稿」→「記事」→「アイキャッチ画像」） 　01:33:49 　投稿した記事の修正（管理画面→投稿） 　01:51:56 　投稿を削除する（「投稿」→「記事」→「ごみ箱」） ＜ポイント＞ 　＜分類＞ 　・投稿画面の右欄をブロックではなく投稿に 　・アイキャッチ画像を入れたその上に，新規タグの追加，さらに上にカテゴリーの 　　適切な欄にチェック。 　・カテゴリーのチェックがダブルで入れられる (^-^)v
☆	WordPress 記事作成のポイント	WordPress 背景はそのまま，文字だけの色を付ける　(20220703) 　［ブロックツールバー］では，文字だけの色の変更をできない。 　　・上のメニューバーの右の歯車の右の縦三ツ点をクリック 　　・エディター 　　　　ビジュアルエディター 　　　　コードエディター 　　から「コードエディター」を選択。 　　＜ショートカット＞ 　　　　「ビジュアルエディター」と「コードエディター」の切り替えは， 　　　　ショートカット，Ctrl+Shift+Alt+Mでも可。 　　　　ショートカットの使用で交互に切り替え。 　　　font color="blue" 等で，文字の色を設定 文字の大きさを自由に変える　 (^-^)v
☆	WordPress 書き方	WordPress ブロックエディタの使い方　(20220704) 　段落ブロックを使ったテキストの入力 ＜段落で分ける＞ 　・「段落ブロック」でテキストを入力している時に，別の段落を作成するには [Enter] キーを押す。 　　新しい「段落ブロック」がすぐ下に作成されてブロックとブロックの間には，スペースが挿入される。 ＜段落ブロック内で改行する＞ 　・新しい段落ブロックにしたくなく，同じブロック内で改行したいときは， 　　 [Shift] キーを押して [Enter] キーを押します。 　・段落ブロックをクリックすると，「ブロック」のツールバーオプションが表示 　　太字やイタリックなどの書式の設定やリンクの設定などを行うことがでる。 ＜段落ブロック内の行間の変更＞ 　右のブロックからの「タイポブラフィ」を選び，右の縦三点マークの設定から 　「行の高さ」をクリック 　　　「行の高さ」で，1.5→から変更 (注意点) 　・段落ブロック全体を変える［パネル］と 　　段落ブロック内の一部を変える［ブロックツールバー］があります。 (^-^)v
☆	WordPress 書き方	WordPress その他 WordPressは，HTMLで作成しています。 ＜HTMLタグリファレンス＞ 　<! -- -->で囲まれた部分はブラウザには表示されません。 　　作者が見るための覚え書きや注釈、一時的にコンテンツの一部をを非表示にしたい場合などに使用 　　コメントは1行だけでも複数行にまたがってもOK。 ＜コードを文の中で表示させる方法＞ 　<br>は，改行コードを文の中に表示させたもの 　「code」と「/code」で挟み，コードの「<」を 「& l t ;」 で置き換える。 ＜グループ化＞ 　「span」〜「/span」で囲った部分をインライン要素としてグループ化することができるタグ 　　グループ化することで、指定した範囲にスタイルシートを適用したりすることができます。 (^-^)v
☆	WordPress ページ内リンクについて	WordPress ページ内リンクについて ＜WEBサイトで別のページに飛ばす＞ 　「リンク」「ハイパーリンク」「アンカーリンク」 ＜ページ内リンク（アンカーリンク）＞ 　同じページ内の指定した箇所にリンクで飛ばす 　　「ページ内リンク」とも言われます。 　方法： 　�@リンク先のブロックにHTMLアンカーを設定 　　画面右側の「ブロック」設定パネル内一番下「高度な設定」を開く。 　　「HTMLアンカー」を設定。 　�Aリンク元に設定するURLにHTMLアンカーを指定する 　　普段URLを入力している箇所に「#」＋「設定したHTMLアンカー」 ＜アンカー設定した見出しブロックがメニューに隠れてしまうときの対処＞ 　・設定するHTMLアンカーを一つ上のブロックに設定。 　　見出しの上に「スペーサー」ブロックを追加。 　　そこに「HTMLアンカー」を設定 　・「スペーサー」ブロック設定 　　編集画面の「+」（ブロックの追加）をクリック 　　「レイアウト要素」から「スペーサー」をクリック 　　または，検索バーに「スペーサー」と入力， 　　表示された「スペーサー」をクリック (20221211) (^-^)v
☆	WordPress スラッグについて	WordPress スラッグについて 　スラッグ (Slug)は，IT用語で「位置を示すコード」の意味。 　URL（パーマリンク）の末尾の部分を任意の文字列に指定できる機能でURLの一部。 　・スラッグの役割はSEO (Search Engine Optimization) 対策 　　検索エンジンのロボットがページの内容を把握するのを助ける 　・すべて半角小文字で，英数字とハイフンのみ使用 　・スラッグに日本語を使うと「URLエンコード」という処理により 　　数字や記号の混ざったとても長い羅列になる。 　　検索エンジンがサイトをクロールしなくなる可能性がある (^-^)v

[▲Top]