TatsuIT Web Wordpress

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

番号	WordPress	説明・解説　　【工事中】
☆	WordPress メモ	WordPress ＜検証ツール＞　shift+ctrl+I ＜Youtube＞　J　10秒戻る　L　10秒進む (^-^)v
☆	WordPress ワードプレスについて	WordPress 　ワードプレスは，世界で全ウエブサイトの43%で使用されている。(2023年1月9日現在）　世界でブログでは63%。国内でブログの83.6%。 (^-^)v
☆	WordPress メディアへアップと図の数	WordPress メディアにアップすると新たに3つのサイズが作られます。　・サムネイル　150X150 　・中サイズ　　300X300 　・大サイズ　　1024X1024 と大本のもので，4つ作成。アップは，5MBまで。 (^-^)v
☆	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 ＜無機材会ホームページ＞投稿の手引きからの抜粋です。１．会員ログインを開いてユーザー名またはメールアドレス，そしてパスワードを入力するとダッシュボードが現れます。２．左コラムの投稿の「新規投稿」あるいは次のステップの「ブログ投稿を追加」をクリックします。・「表示状態」の右をクリックすれば，「公開」以外の「非公開」または「パスワード保護」を選択することも可能。・「公開」の右をクリックすれば，「今すぐ」公開を「日時指定の公開」に変更可。・作業を中断するときには「下書き保存」が便利。・作業を再開して修正したときには，「更新」をクリックすると修正が確定。５．右欄を「ブロック」から「投稿」に変更して，カテゴリーを選択，アイキャッチ画像を設定して公開　タグを記入することも可。・右欄が見えないときには，文章を記入するときに現れる１行４列の表の最右の列(３つの点が縦に並んでいます)をクリックして，「追加設定を表示」を選択。・保存したファイルについては，クイック編集をクリックすると，カテゴリーの選択，タグの記入，ステータス(公開済み，下書き等)の変更，公開する日時指定等が行えます。・Facebook，twitter，Hatena，Pocketなどのシェアボタンの表示を消すときは，　下部に表示されているVK All in One Expansion Unitの「シェアボタンの非表示設定」で「ソーシャルボタンを表示しない」にチェック。・コメントを許可しないときは，右欄にあるディスカッションの「コメントを許可」の「レ」を外す。・カラムを作ったり，動画やpdfを貼り付けたりするときには試行錯誤を伴う練習要。＜参考情報＞ [参考１] 改行すると新しいブロックが生成するので，改行(enter)すれば間に１行の空白が必ず入ります。それを避けて新しいブロックを生成させずに改行するときは，「shift＋enterキー」を同時に押すことで，新しいブロックの生成なしに既存のブロック内で改行できます。・コピーアンドペーストでは，Wordの文章のフォントの色やサイズの情報は失われますが，リンクや太字などの情報は保持されます。 [参考２] Excellを貼り付けて，表を作成することも可能。ただし，表の寸法は自動設定見た目重視なら，空白を適切に導入するなどの試行錯誤が必要・スマホでは表の欄の横幅が狭くなるので，多くとも３列以下に [参考３] pdfの貼り付けは，まずメディアのライブラリーから「新規追加」をクリックして，「ファイルを選択」してアップロード次に「メディアライブラリ」のファイルを選択して，添付ファイルの詳細からファイルの URLをコピーします。これをリンクに貼り付ければ完了です。 [参考４] 画像などの挿入は，まずenterキーを押して，新たなブロックを表示そこにスラッシュ(半角の斜めの線)を入力すると，画像，カラム，見出し，リストなどが表示左上にある青の＋マークをクリックすれば，もっと多くの種類を表示をさせることもできます。ブロックの右端に現れる黒の＋マークをクリックしても同様の操作が可能です。この中の画像を選択すると，画像の挿入が可能となります。具体的な手順は以下のようになります。（１）「画像」ブロックの作成：左上の「＋マーク」をクリックまたは「/」を入力する) （２）「画像」の貼り込み：画像ファイルをアップロードするか，メディアライブラリから選択，または URL を追加する（３）画像の大きさ設定：追加設定を表示させて，画像サイズ(中，サムネイルなどから選択)と画像の寸法(25%，50%，75%，100%)を選択（４）貼り込んだ「画像」の位置調整：初期設定は「なし」だが，「左寄せ」または「右寄せ」に設定すると画像の脇に文章が入るカラムを選択してカラムのなかに画像を挿入することもできます。カラムのなかをクリックして「すべて表示」をするとさまざまな挿入可能なオプションが現れます。テキスト，メディア，デザイン，ウィジェットなどのなかに，さまざまな挿入オプションがあります。例えば，横に３枚の画像を貼り込む場合は，カラムを選択し，開始時のパターンとして33/33/33を選択すれば，３つのカラムが現れます。左，中央，右のカラムです。その１つのカラムを選択してから，画像を選択，そして自身のパソコンに保存されている画像をアップロードすれば画像が挿入されます。また，画像を右の位置のみに表示させたいときには，右のカラムを選択して画像を挿入し，左と中央のカラムは空欄のままとします。 [参考５] 動画の貼り付けは，youtubeの共有をクリックしてサイトのアドレスをコピーし，これを貼り付けて行います。そのためにはまずカラムを選択し，次にカラムのなかをクリックして「すべて表示」をクリックします。そして，「動画」または「youtube」を選択してコピーしたアドレスを貼り付けます。 [参考６] 文章を記入のときに現れるバーは，文章の体裁を整えるのに有用です。左から 1番目の1番：見出し，カラム，リストなどを選択できる 1番目の3番：ブロックの位置を上または下に移動 2番目の1番：テキストの位置，左寄せが標準 3番目の1番：太文字 3番目の2番：イタリック 3番目の3番：リンク設定 3番目の4番：いろいろな設定ができる 4番目：一番上が追加設定の表示/非表示，一番下にブロック削除がある (^-^)v
☆	WordPress コード編集にして文字の色付け	WordPress (注意)　コードの「<」をそのまま記述すると，説明文が実際のコードになってしまうので，「<」と「>」の代わりに，特殊なコード「<」「>」で表現しています。ページのソースを表示させてみてください。コード編集にして文字の色付けワードプレスのビジュアルエディターで色を付けようとすると，マーカーペンで文字に黄色い背景がついてしまいます。いつの時点からかの改悪です。そこで，コード編集で，このマーカー背景を取り除きます。字を赤字に <span class="has-inline-color has-vivid-red-color"> 赤字</span> 字を赤字＋マーカー黄色 <mark class="has-inline-color has-vivid-red-color">赤字</mark> マーカー黄色 <mark>黄色マーカー</mark> ＜インライン要素＞　※<span タグとは，囲んだ要素のテキストのフォント調整，文字色・背景色の変更　※<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アンカー」を設定。　②リンク元に設定するURLにHTMLアンカーを指定する　　普段URLを入力している箇所に「#」＋「設定したHTMLアンカー」＜アンカー設定した見出しブロックがメニューに隠れてしまうときの対処＞　・設定するHTMLアンカーを一つ上のブロックに設定。　　見出しの上に「スペーサー」ブロックを追加。　　そこに「HTMLアンカー」を設定　・「スペーサー」ブロック設定　　編集画面の「+」（ブロックの追加）をクリック　　「レイアウト要素」から「スペーサー」をクリック　　または，検索バーに「スペーサー」と入力，　　表示された「スペーサー」をクリック (20221211) (^-^)v
☆	WordPress スラッグについて	WordPress スラッグについて　スラッグ (Slug)は，IT用語で「位置を示すコード」の意味。　URL（パーマリンク）の末尾の部分を任意の文字列に指定できる機能でURLの一部。　・スラッグの役割はSEO (Search Engine Optimization) 対策　　検索エンジンのロボットがページの内容を把握するのを助ける　・すべて半角小文字で，英数字とハイフンのみ使用　・スラッグに日本語を使うと「URLエンコード」という処理により　　数字や記号の混ざったとても長い羅列になる。　　検索エンジンがサイトをクロールしなくなる可能性がある (^-^)v
☆	WordPress 作業準備	WordPress htmlで書いてある「ページ」の作業準備について　　・「ページ」のソース表示 (ctrl + u)」で，ソースを表示　　・コピーしテキストにペーストして「.html」で保存　　・保存した***.htmlを開けば，自分のパソコン内に同じHPが再現　・再現されないときは，「https・・・」の部分を補って書き込む。　ソースファイルをテキストにコピーしたものを自由に編集し，　それをhtmlで保存すれば勉強になる。 (^-^)v
☆	WordPress 参考書	WordPress ホームページ作成の参考書　「いちばんやさしいWordPressの教本」　第5版 5.x対応　￥1,738 (^-^)v