たつひとのWEB作成
Tatsu's Website making

<いつも工事中>

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

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

2023/6/26 改訂

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

番号 Website 説明・解説  【工事中】


フリー素材サイト

(210126)

フリー素材サイト「いらすとや」

  フリー素材サイト「いらすとや」 


(^-^)v


Website

(190909)

ドメインの取得とレンタルサーバー

 ・レンタルサーバ代:  ホームページを置く家。月額数百〜数千円。

 ・ドメイン取得費用:  ホームページの住所。年額1000円程度。

SEO
 ・SEO (Search Engine Optimization): 検索エンジン最適化

 ・今では,nifty,グーグル,Bingで,「合気道 高橋」等を検索すると,
  広告をのぞき一番でヒットするようになりました。
  すごいですね。

  「合気道 高橋」 「高橋 合気道」 「たつひと 合気道」

  「高橋達人」

  「Tatsu Aikido」 「Aikido Tatsu」 「Tatsu Aiki」 「Aiki Tatsu」

 ・超簡単な出し方

  ひらがなで「たつひとの」 これが一番簡単で早いです。 (210719)


(^-^)v


文字化け

(190916)

文字化けの原因

 ・日本では,Shift-JIS (x-sjis), EUC-JP,UTF-8などという文字コードを使用。
  「あ」でも,文字コードが異なれば,PC内部では全く異なる情報

 ・Shift_JISで保存されたHTMLファイルを,ブラウザがUTF-8だと勘違いして表示してしまうと文字化けが発生

文字化けの対処法

 ・HTML 文書では要素で使用されている文字コードのエンコーディングを指定

 ・charset=x-sjis について

 ・シフトJISコードの文字コード指定で x-sjis
  標準規格では,シフトJISコードは charset=shift_jis
  charset=x-sjis

 ・旧式のブラウザはUTF-8などユニコードに対応していない


(^-^)v


画面サイズ

パソコンとiPhone(190920)

画面サイズをどうするか

 ・iPhoneとパソコンモニターともにバランスよく見えるにはどの程度のpxにするとよいか。

  ・iPhoneでは,横 750pxが適当。
  ・パソコンは,1000px前後で

  →では,共用として,750px→ 700px を標準としましょう。


(^-^)v


オフラインで
PDFを画像に変換する
ペイントの利用方法


(211011)

オフラインでPDFを画像に変換するペイントの利用方法

 ・PDFファイルは,紙に印刷するのと同じ状態のイメージを保存するためのファイル形式。
  メールに添付したり,印刷,文書保存に適しています。
 ・ワードなどに使用するためには,jpgやpngなどの画像ファイルに変換しないと使用できません。

<方法1>
 ・パソコンでのスクリーンショットの方法で画像として保存。
 ・画面の一部を切り取るSnipping Toolが便利。

<方法2>
 ・オフラインでPDFを画像に変換するペイントの利用方法
 ・ペイントを使ってでAdobeで表示したpdfをjpgに変換する方法
  ただし,1枚づつです。

  ・Adobe Acrobatでpdfを開きます。
  ・「編集」から,「ファイルをクリップボードにコピー」を選びます。
   または,
   ・「編集」から,すべてを選択を選び,ついで「編集」から,コピーを選びます。
  ・「ペイント」を起動させます。
  ・「ペイント」の「貼り付け」をクリックすると,pdfの1ページが貼り付きます。
  ・「名前を付けて保存」で,jpgで適当な名前をつけ保存します。
  ・画像ソフトで,余分な部分のトリミングや傾き,色合い等の調整を行います。

  ・jpgファイルの大きさを変えるときは,「ペイント」のホームにある「サイズ変更」を使います。
   iPhoneとパソコン共用画像では,横 700px を標準とすることにしましたね。


(^-^)v

[▲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に張り付けるための画像のダウンサイズ

ペイントを使って画像のクオリティーを落とさずに簡単にサイズダウンする方法

 1.ペイントアプリを起動

 2.サイズダウンしたい画像の読み込み
   [ファイル]→[開く]でサイズダウンしたいファイルを選択し読み込む
    例: スマートフォンで撮影した画像でサイズは
          ・ファイルサイズ :  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)

 3.読み込んだファイルのサイズダウン
   画像を使用する目的に合わせて画像の縦x横のサイズを変更
   ・[サイズ変更]をクリックし[ピクセル]を選択
   ・水平方向を960と入力
   ・「縦横比を維持する」を選択。
   ・縮小したサイズを入力したら[名前をつけて保存]→[PNG]画像を選択しファイルを保存。

 4. 4MB → 319KB
    約1/10のサイズに

<保存形式を変更すればサイズダウン?>

  ・元ファイル(JPG): 4.4MB
   変換1(PNG)  :12.9MB
   変換2(GIF)  : 3.7MB

   単純に保存形式を替えてもサイズダウンしない

<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"
   →1つだけだと上右下左すべてがその値。
  ・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]

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

番号 CSS 説明・解説  【工事中】


スタイルシート

【180828】

スタイルシート

<スタイルシートの入れ方>

<link rel="stylesheet" href="style.css">を </head>の前にいれましょうね。

<スタイルシートの名前>
 ・style.cssです。


(^-^)v

[▲Top]

たつひとのFTP

番号 FFFTP 説明・解説  【工事中】


FFFTPとは

<FFFTP>

 ・フリーでかつ日本語で使えるFTPクライアントソフトウェア。

(^-^)v


htmとhtml
のお話

 ・「index.htm」と「index.html」が両方アップロードされている場合は,
  「index.html」のファイルが優先して開きます。
   →このため,FTPサーバーより「index.html」の削除要。

(^-^)v
FFFTPの
マスターパスワード
のお話

 ・ディフォルトのマスターパスワードが使われている場合は,変更要。

(^-^)v


突然,FFFTPが
接続できないこと
のお話

【160624】

突然,FFFTPが接続できないことで真っ青。アップできない。

 ・@niftyホームページサービスで,FTP接続制限を確認。
 ・現在の接続のIPアドレスとネットワーク帯が変更になっていて,
  受け付けないことに。
  新たに登録をし直すことで復活。

よかった。

<PocketWifi>
 ・日々,IPアドレスが変わるので,
  アップの度に,
  @niftyホームページサービスで,サイトごとに,
  FTP接続制限に新たにIPアドレスの追加入力が必要。
  (171226)

(^-^)v


FFFTPのサーバ側
の一覧がでない


【170721】

<FFFTPでサーバー側のファイル一覧が表示されない>

 FFFTPを入れ替え,4つのniftyウエブサイトを登録したら,その内,
 二つのウエブサイトでFFFTPのサーバー側のファイル一覧が表示せず。
 同じniftyのホームページなのに???

 「ファイル一覧の取得は正常終了しました。 (0 Bytes)」
 →つながっているのに 0 Bytes

 →「FTPアクセス制限設定」によりFTP接続が拒否。
  「FTPアクセス制限設定」では,
  許可されていない接続元からアクセスするとログインは可能。
  ファイルリスト取得や操作はできず。

 ・niftyのホームページの管理ページで,
  現在使用の接続IPアドレスとネットワーク帯を用い
  FTPアクセス制限設定を新規に登録。

 ・サーバー側のファイル一覧が
  表示されるようになりました。

(^-^)v

[▲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]


 本ホームページの作成者・管理者: 高橋達人  tatsudoc@nifty.com