テク魔法使い

スタイリング·ダイアクリティックス

2023-02-18T04:50:27Z

アクセント記号とも呼ばれる発音区別符号に色を付ける方法があるかどうか気になるなら、あなたは正しい場所にいます！なぜなら、答えは「はい」で、方法をお教えします。

次のようなCSSスタイルを作成します。

1
2
3
4
5
6


.diacritics {
  color: hsla(0deg, 100%, 50%, 1);
  color: hwb(0deg 0% 0% / 100%);
  font-family: "DejaVu Sans"; /* 現在、ダイアクリティカルマークの位置決めの精度はDejaVuSansが最も高い。 */
  font-weight: bold;
}

diacriticsクラス内にダイアクリティカルを配置します。
1

<span class="diacritics">span>

できました！

次に例を示します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


bata<span class="diacritics">̀span>
panibugho<span class="diacritics">̂span>
ara<span class="diacritics">́span>w–a<span class="diacritics">́span>raw
ke<span class="diacritics">̈span>tke<span class="diacritics">̈span>t
sag<span class="diacritics">̃span>nay or sagn<span class="diacritics">̃span>ay
pan<span class="diacritics">͠span>gulo
a<span class="diacritics">̄span>so
h<span class="diacritics">͞span>oy
pu<span class="diacritics">̱span>sà
trab<span class="diacritics">͟span>aho

batà [ba·tà]
panibughô [pa·ni·būg·hô]
aráw–áraw [a·ráw–á·raw]
këtkët [kët·kët]
sag̃nay or sagñay [sa·ñgay]
pan͠gulo [pa·n͠gu·lo]
āso [ā·so]
h͞oy [h͞oy]
pu̱sà [pu̱·sà]
trab͟aho [tra·b͟a·ho]

CodePen経由でも利用できます。または、私のtest-repo: Noto Diacriticals Gitブランチから簡単なテストページを複製することもできます。

注意:ネイバーPapago神経翻訳

Hugo markdownリンクにリンクアイコンを追加する方法

2022-06-17T06:07:01Z

リンクアイコンは素晴らしいです。リンクが何であるかを読者に知らせます。外部ですか？それともビデオ？リンクをクリックすると、ダウンロードが開始されますか、それともデフォルトのメールプログラムが開きますか？リンクアイコンは、開発者またはコンテンツ作成者がリンクまたはリンクの欠如を簡単に見つけるのにも役立ちます。

リンクアイコンは、10年前にWikipediaで始まり、普及しました ¹。誰もが自分のウェブサイトやブログにリンクアイコンを追加するためのCMSプラグインを探していました。当時の方法は、小さな.png画像ファイルをアイコンとして使用することでした。でも今日は？ Unicode絵文字を使用し、適切な絵文字が利用できない場合にのみ.svgを使用します。

この投稿では、Markdownリンクを介してHugoにリンクアイコンのサポートを追加します。レンダリングフックの力のおかげで、ショートコードは必要ありません。通常の [text](https://example.com "Title")リンクだけです ²。

特徴

JavaScriptを使用せずにリンクアイコンを追加する
- 内部Markdownリンクのサポート付き
Hugo markdownリンクに相互参照を追加する方法の機能

手順

リンクアイコンを追加するには、以下の手順に従います。

このディレクトリにrender-link.htmlというファイルを作成します/layouts/_default/_markup/

このコードをコピーして貼り付けます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81


{{- $baseurl := urls.Parse site.BaseURL -}}
{{- $url := urls.Parse .Destination -}}
{{- $getpage := site.GetPage .Destination -}}
{{- $internal := lt (len $url.Host) 1 -}} {{/* NOTE: internal links will always have an empty $url.Host */}}

{{- $fragment := $url.Fragment -}}
{{- with $fragment -}}{{ $fragment = printf "#%s" $fragment }}{{- end -}}

{{- $destination := "" -}}
{{- if $internal -}}
  {{- if (strings.HasPrefix $url.Path "./") -}}
    {{/* NOTE: for links starting with ./ */}}
    {{- $urltrimmed := strings.TrimPrefix "./" $url -}}
    {{- $destination = printf "%s://%s/%s%s" $baseurl.Scheme $baseurl.Host $urltrimmed $fragment -}}
  {{- else -}}
    {{/* NOTE: for internal links */}}
    {{- $destination = printf "%s%s" $getpage.RelPermalink $fragment -}}
  {{- end -}}
{{- else -}}
  {{- $destination = .Destination -}}
{{- end -}}

{{/* PROTOCOLS */}}
  {{- $chat := findRE "^(?:discord|irc[s6]?|jabber|skype|xmpp)://" .Destination -}}
  {{- $ftp := findRE "^(?:[as]?ftp)://" .Destination -}}
  {{- $magnet := strings.HasPrefix .Destination "magnet://" -}}
  {{- $mail := strings.HasPrefix .Destination "mailto:" -}}
  {{- $remote := findRE "^(?:bzr|git|s(?:sh|vn)|telnet)://" .Destination -}}
  {{- $tel := strings.HasPrefix .Destination "tel:" -}}

{{/* READING */}}
  {{- $books := or (strings.HasPrefix .Destination "doi://") (findRE "\\.(?:epub|mobi|pdf)$" .Destination) -}}
  {{- $document := findRE "\\.(?:docx?|odt|s(?:dw|xw)|sxw|uo[ft])$" .Destination -}}
  {{- $text := findRE "\\.(?:csv|txt)$" .Destination -}}
  {{- $presentation := findRE "\\.(?:f?odp|pptx?|s(?:d[dp]|xi)|uop)$" .Destination -}}
  {{- $spreadsheet := findRE "\\.(?:f?ods|s(?:d[cx]|xc)|uos|xlsx?)$" .Destination -}}

{{/* MEDIA */}}
  {{- $audio := findRE "\\.(?:(?:fl|a)ac|mka|og[ag]|opus|mp[3a]|midi?|wave?|wma)$" .Destination -}}
  {{- $video := findRE "\\.(?:av[1i]|divx|mk(?:3d|v)|mp(?:(?:e?g)?4?|v)|og[mv]|xvid|webm)$" .Destination -}}
  {{- $subtitle := findRE "\\.(?:dfxp|mks|s(?:bv|cc|rt|ub)|ttml|vtt)$" .Destination -}}

{{/* EXECUTABLES */}}
  {{- $executable := findRE "\\.(?:apk|com|deb|exe|msi)$" .Destination -}}
  {{- $scripts := findRE "\\.(?:bat|sh)$" .Destination -}}

{{/* OTHERS */}}
  {{- $fonts := findRE "\\.(?:otf|tt[fc]|woff2?)$" .Destination -}}
  {{- $compressed := findRE "\\.(?:[7g]?z(?:ip)?|bz(?:ip)?2?|[rt]ar)$" .Destination -}}
  {{- $diskimage := findRE "\\.(?:[di]mg|iso|md[sfx])$" .Destination -}}
  {{- $imagediting := findRE "\\.(?:psd|xcf)$" .Destination -}}

{{- $icon := "" -}}
{{- if $chat -}}{{ $icon = "chat" }}
  {{- else if $ftp -}}{{ $icon = "ftp" }}
  {{- else if $magnet -}}{{ $icon = "magnet" }}
  {{- else if $mail -}}{{ $icon = "mail" }}
  {{- else if $remote -}}{{ $icon = "remote" }}
  {{- else if $tel -}}{{ $icon = "tel" }}

  {{- else if $books -}}{{ $icon = "books" }}
  {{- else if $document -}}{{ $icon = "document" }}
  {{- else if $text -}}{{ $icon = "text" }}
  {{- else if $presentation -}}{{ $icon = "presentation" }}
  {{- else if $spreadsheet -}}{{ $icon = "spreadsheet" }}

  {{- else if $audio -}}{{ $icon = "audio" }}
  {{- else if $video -}}{{ $icon = "video" }}
  {{- else if $subtitle -}}{{ $icon = "subtitle" }}

  {{- else if $executable -}}{{ $icon = "executable" }}
  {{- else if $scripts -}}{{ $icon = "scripts" }}

  {{- else if $fonts -}}{{ $icon = "fonts" }}
  {{- else if $compressed -}}{{ $icon = "compressed" }}
  {{- else if $diskimage -}}{{ $icon = "diskimage" }}
  {{- else if $imagediting -}}{{ $icon = "imagediting" }}

  {{- else if and (not $internal) (ne $url.Host $baseurl.Host) -}}{{ $icon = "external" }}
{{- end -}}
<a href="{{ $destination | safeURL }}"{{ with or .Title $getpage.LinkTitle .Text }} title="{{ . }}"{{ end }}{{ with $icon }} class="icon_{{ . }}"{{ end }}{{ if not $internal }} rel="noopener external"{{ end }}>{{ or .Text .Title $getpage.LinkTitle | safeHTML }}a>

スタイルシートファイルに次を追加します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


/********************
** BGN: Link icons **
********************/
  [class^="icon_"]::after {
    display: inline-block;
    text-decoration: none;
    white-space: pre-wrap;
    margin-left: 0.25em;
    width: 1em;
  }
  .icon_external::after     { content: "\1F517";                                    /* 🔗 */ }

  .icon_chat::after         { content: "\1F4AC";                                    /* 💬 */ }
  .icon_ftp::after          { content: "\2194\FE0F";                                /* ↔️ */ }
  .icon_magnet::after       { content: "\1F9F2";                                    /* 🧲 */ }
  .icon_mail::after         { content: "\1F4E7";                                    /* 📧 */ }
  .icon_remote::after       { content: "\1F4BB";                                    /* 💻 */ }
  .icon_tel::after          { content: "\260E\FE0F";                                /* ☎️ */ }

  .icon_books::after        { content: "\1F4D6";                                    /* 📖 */ }
  .icon_document::after     { content: "\1F4C4";                                    /* 📄 */ }
  .icon_text::after         { content: "\1F4DD";                                    /* 📝 */ }
  .icon_presentation::after { content: url("../img/link-icons-presentation.svg");   /* https://openclipart.org/detail/36505/tango-x-office-presentation */ }
  .icon_spreadsheet::after  { content: url("../img/link-icons-spreadsheet.svg");    /* https://openclipart.org/detail/36517/tango-x-office-spreadsheet */ }

  .icon_audio::after        { content: "\1F3B5";                                    /* 🎵 */ }
  .icon_video::after        { content: "\1F4FD\FE0F";                               /* 📽️ */ }
  .icon_subtitle::after     { content: url("../img/link-icons-subtitle.svg");       /* https://openclipart.org/detail/212110/mimetype-subtitle */ }

  .icon_executable::after   { content: url("../img/link-icons-executable.svg");     /* https://openclipart.org/detail/212161/mimetype-binary */ }
  .icon_scripts::after      { content: url("../img/link-icons-scripts.svg");        /* https://openclipart.org/detail/36175/tango-text-x-script */ }

  .icon_fonts::after        { content: url("../img/link-icons-fonts.svg");          /* https://openclipart.org/detail/35257/tango-preferences-desktop-font */ }
  .icon_compressed::after   { content: "\1F5DC\FE0F";                               /* 🗜️ */ }
  .icon_diskimage::after    { content: "\1F4BD";                                    /* 💽 */ }
  .icon_imagediting::after  { content: url("../img/link-icons-imageediting.svg");   /* https://openclipart.org/detail/231061/artists-brush-and-paint */ }
/********************
** END: Link icons **
********************/

.svgアイコンをダウンロードします：link-icons.7z
- ソース（すべてパブリックドメイン）：
  - プレゼンテーション：warszawiankaによるtango x office presentation
  - スプレッドシート：warszawiankaによるtango x office spreadsheet
  - 字幕：sixsixfiveのmimetype subtitle
  - 実行可能ファイル：sixsixfiveによるmimetype binary
  - スクリプト：warszawiankaによるtango text x script
  - フォント：warszawiankaによるtango preferences desktop font
  - 画像編集：GDJによるArtists Brush And Paint
  リストされたソースからホットリンクすることが可能です。ただし、それらが設定されているかどうかについての情報はありません。
/static/img/フォルダーにある.svgファイルを抽出します。

使い方

次のMarkdownリンク

- 外部リンク
  - [https://example.com/#fragment](https://example.com/#fragment "https://example.com/#fragment")
- チャット
  - [irc://](irc://example.com "irc://") | [ircs://](ircs://example.com "ircs://") | [irc6://](irc6://example.com "irc6://") | [xmpp://](xmpp://example.com "xmpp://") | [jabber://](jabber://example.com "jabber://") | [discord://](discord://example.com "discord://") | [skype://](skype://example.com "skype://")
- FTP
  - [sftp://](sftp://example.com "sftp://") | [ftp://](ftp://example.com "ftp://") | [aftp://](aftp://example.com "aftp://")
- Magnet
  - [magnet://](magnet://example.com "magnet://")
- Mail
  - [mailto:](mailto:noreply@example.com "mailto:")
- リモート
  - [telnet://](telnet://example.com "telnet://") | [ssh://](ssh://example.com "ssh://") | [git://](git://example.com "git://") | [svn://](svn://example.com "svn://") | [bzr://](bzr://example.com "bzr://")
- Tel
  - [tel:](tel:123-456-7890 "tel:")
- 本
  - [doi://](doi://example.com "doi://") | [.epub](https://example.com/file.epub ".epub") | [.mobi](https://example.com/file.mobi ".mobi") | [.pdf](https://example.com/file.pdf ".pdf")
- 書類
  - [.odt](https://example.com/file.odt ".odt") | [.sdw](https://example.com/file.sdw ".sdw") | [.sxw](https://example.com/file.sxw ".sxw") | [.uof](https://example.com/file.uof ".uof") | [.uot](https://example.com/file.uot ".uot") | [.doc](https://example.com/file.doc ".doc") | [.docx](https://example.com/file.docx ".docx")
- 文章
  - [.txt](https://example.com/file.txt ".txt") | [.csv](https://example.com/file.csv ".csv")
- プレゼンテーション
  - [.odp](https://example.com/file.odp ".odp") | [.fodp](https://example.com/file.fodp ".fodp") | [.sdd](https://example.com/file.sdd ".sdd") | [.sdp](https://example.com/file.sdp ".sdp") | [.sxi](https://example.com/file.sxi ".sxi") | [.uop](https://example.com/file.uop ".uop") | [.ppt](https://example.com/file.ppt ".ppt") | [.pptx](https://example.com/file.pptx ".pptx")
- スプレッドシート
  - [.ods](https://example.com/file.ods ".ods") | [.fods](https://example.com/file.fods ".fods") | [.sdc](https://example.com/file.sdc ".sdc") | [.sxc](https://example.com/file.sxc ".sxc") | [.uos](https://example.com/file.uos ".uos") | [.xls](https://example.com/file.xls ".xls") | [.xlsx](https://example.com/file.xlsx ".xlsx")
- オーディオ
  - [.flac](https://example.com/file.flac ".flac") | [.aac](https://example.com/file.aac ".aac") | [.mka](https://example.com/file.mka ".mka") | [.ogg](https://example.com/file.ogg ".ogg") | [.oga](https://example.com/file.oga ".oga") | [.opus](https://example.com/file.opus ".opus") | [.mp3](https://example.com/file.mp3 ".mp3") | [.mpa](https://example.com/file.mpa ".mpa") | [.mid](https://example.com/file.mid ".mid") | [.midi](https://example.com/file.midi ".midi") | [.wav](https://example.com/file.wav ".wav") | [.wave](https://example.com/file.wave ".wave") | [.wma](https://example.com/file.wma ".wma")
- ビデオ
  - [.av1](https://example.com/file.av1 ".av1") | [.webm](https://example.com/file.webm ".webm") | [.xvid](https://example.com/file.xvid ".xvid") | [.mkv](https://example.com/file.mkv ".mkv") | [.mk3d](https://example.com/file.mk3d ".mk3d") | [.ogm](https://example.com/file.ogm ".ogm") | [.ogv](https://example.com/file.ogv ".ogv") | [.divx](https://example.com/file.divx ".divx") | [.avi](https://example.com/file.avi ".avi") | [.mp4](https://example.com/file.mp4 ".mp4") | [.mpeg4](https://example.com/file.mpeg4 ".mpeg4") | [.mpv](https://example.com/file.mpv ".mpv") | [.mpeg](https://example.com/file.mpeg ".mpeg") | [.mpg](https://example.com/file.mpg ".mpg")
- 字幕
  - [.vtt](https://example.com/file.vtt ".vtt") | [.ttml](https://example.com/file.ttml ".ttml") | [.dfxp](https://example.com/file.dfxp ".dfxp") | [.srt](https://example.com/file.srt ".srt") | [.sub](https://example.com/file.sub ".sub") | [.sbv](https://example.com/file.sbv ".sbv") | [.scc](https://example.com/file.scc ".scc") | [.mks](https://example.com/file.mks ".mks")
- 実行可能ファイル
  - [.deb](https://example.com/file.deb ".deb") | [.apk](https://example.com/file.apk ".apk") | [.exe](https://example.com/file.exe ".exe") | [.com](https://example.com/file.com ".com") | [.msi](https://example.com/file.msi ".msi")
- スクリプト
  - [.bat](https://example.com/file.bat ".bat") | [.sh](https://example.com/file.sh ".sh")
- フォント
  - [.woff](https://example.com/file.woff ".woff") | [.woff2](https://example.com/file.woff2 ".woff2") | [.otf](https://example.com/file.otf ".otf") | [.ttf](https://example.com/file.ttf ".ttf") | [.ttc](https://example.com/file.ttc ".ttc")
- 圧縮されたファイル
  - [.7z](https://example.com/file.7z ".7z") | [.7zip](https://example.com/file.7zip ".7zip") | [.tar](https://example.com/file.tar ".tar") | [.gz](https://example.com/file.gz ".gz") | [.gzip](https://example.com/file.gzip ".gzip") | [.bz2](https://example.com/file.bz2 ".bz2") | [.bzip2](https://example.com/file.bzip2 ".bzip2") | [.zip](https://example.com/file.zip ".zip") | [.rar](https://example.com/file.rar ".rar")
- ディスクイメージ
  - [.img](https://example.com/file.img ".img") | [.iso](https://example.com/file.iso ".iso") | [.dmg](https://example.com/file.dmg ".dmg") | [.mds](https://example.com/file.mds ".mds") | [.mdf](https://example.com/file.mdf ".mdf") | [.mdx](https://example.com/file.mdx ".mdx")
- 画像編集
  - [.xcf](https://example.com/file.xcf ".xcf") | [.psd](https://example.com/file.psd ".psd")

次のようにレンダリングされます：

外部リンク
- https://example.com/#fragment
チャット
- irc:// | ircs:// | irc6:// | xmpp:// | jabber:// | discord:// | skype://
FTP
- sftp:// | ftp:// | aftp://
Magnet
- magnet://
Mail
- mailto:
リモート
- telnet:// | ssh:// | git:// | svn:// | bzr://
Tel
- tel:
本
- doi:// | .epub | .mobi | .pdf
書類
- .odt | .sdw | .sxw | .uof | .uot | .doc | .docx
文章
- .txt | .csv
プレゼンテーション
- .odp | .fodp | .sdd | .sdp | .sxi | .uop | .ppt | .pptx
スプレッドシート
- .ods | .fods | .sdc | .sxc | .uos | .xls | .xlsx
オーディオ
- .flac | .aac | .mka | .ogg | .oga | .opus | .mp3 | .mpa | .mid | .midi | .wav | .wave | .wma
ビデオ
- .av1 | .webm | .xvid | .mkv | .mk3d | .ogm | .ogv | .divx | .avi | .mp4 | .mpeg4 | .mpv | .mpeg | .mpg
字幕
- .vtt | .ttml | .dfxp | .srt | .sub | .sbv | .scc | .mks
実行可能ファイル
- .deb | .apk | .exe | .com | .msi
スクリプト
- .bat | .sh
フォント
- .woff | .woff2 | .otf | .ttf | .ttc
圧縮されたファイル
- .7z | .7zip | .tar | .gz | .gzip | .bz2 | .bzip2 | .zip | .rar
ディスクイメージ
- .img | .iso | .dmg | .mds | .mdf | .mdx
画像編集
- .xcf | .psd

URI（Uniform Resource Identifier）スキームの公式リストは、IANAの公式Webサイトにあります。 ³ ただし、すべての一般的なURIスキームが登録および/または送信されたわけではありません。たとえば、 discord：//や bzr：//（2022-05-13日付のIANAドキュメントの時点）。とにかく、これらの人気のある未登録のURIスキームは上記のコードに含まれていました。

お役に立てば幸いです。

Hugo markdownリンクに相互参照を追加する方法

2022-06-17T06:07:00Z

Hugoであまり使用されない機能の1つは、レンダリングフックです。この投稿では、レンダリングフックを使用して、リンクを作成するMarkdownのデフォルトの方法である [文章](https://example.com#fragment "題名")に内部相互参照サポートを追加します。

Hugoの内部相互参照は通常、組み込みのショートコード {{< ref >}}または{{% relref %}}を使用して行われますが、Hugoバージョン0.62.0以降ご存知でしたか ¹ 推奨される方法は、レンダリングフックを使用することですか ²？

特徴

Hugo内で相互参照するには、通常のMarkdownリンク形式を使用します
- {{< ref >}}と{{% relref %}}、またはそれらのバリエーションは過去のものです
- コンテンツのタイトルを自動的に使用する
- 多言語サポート
- Markdownリンクのテキストとタイトルのサポート
- URIフラグメントのサポートあり

手順

このディレクトリにrender-link.htmlというファイルを作成します/layouts/_default/_markup/

以下のコードを追加します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


{{- $baseurl := urls.Parse site.BaseURL -}}
{{- $url := urls.Parse .Destination -}}
{{- $getpage := site.GetPage .Destination -}}
{{- $internal := lt (len $url.Host) 1 -}} {{/* NOTE: internal links will always have an empty $url.Host */}}

{{- $fragment := $url.Fragment -}}
{{- with $fragment -}}{{ $fragment = printf "#%s" $fragment }}{{- end -}}

{{- $destination := "" -}}
{{- if $internal -}}
  {{- if (strings.HasPrefix $url.Path "./") -}}
    {{/* NOTE: for links starting with ./ */}}
    {{- $urltrimmed := strings.TrimPrefix "./" $url -}}
    {{- $destination = printf "%s://%s/%s%s" $baseurl.Scheme $baseurl.Host $urltrimmed $fragment -}}
  {{- else -}}
    {{/* NOTE: for internal links */}}
    {{- $destination = printf "%s%s" $getpage.RelPermalink $fragment -}}
  {{- end -}}
{{- else -}}
  {{- $destination = .Destination -}}
{{- end -}}

<a href="{{ $destination | safeURL }}"{{ with or .Title $getpage.LinkTitle .Text }} title="{{ . }}"{{ end }}{{ if not $internal }} rel="noopener external"{{ end }}>{{ or .Text .Title $getpage.LinkTitle | safeHTML }}a>

それでおしまい。

使い方

伝統的

1
2
3
4


- [https://example.com/#fragment](https://example.com/#fragment "https://example.com/#fragment")
- [直接](https://im.youronly.one/techmagus/browser-wars-3-blink-gecko-2018344/ "題名")
- [#fragmentで直接](https://im.youronly.one/techmagus/browser-wars-3-blink-gecko-2018344/#fragment "題名")
- [＃フラグメントのみ](#fragment)

新しい

特別な

[text](./path/to/content/)形式は、現在のHugoの一部ではなく、同じ（サブ）ドメインの下で、Webサイトの別の部分へのリンクを作成する場合に役立ちます。事業。 Hugo markdownリンクにリンクアイコンを追加する方法もインストールされている場合、この形式では外部リンクアイコンは生成されません。

[text.ext](./path/to/file.ext)は、現在のHugoプロジェクトの内部または外部の同じ（サブ）ドメインでホストされているダウンロードリンクに役立ちます。

1
2


- [贈り物を送る](./p/gift/)
- [link-icons.7z](./techmagus/dls/link-icons.7z)

ファイル拡張子なし

1
2
3
4
5
6
7
8


- [](20181210-browser-wars-iii)
- [](/20181210-browser-wars-iii)
- [](20181210-browser-wars-iii "題名")
- [](/20181210-browser-wars-iii "題名")
- [文章](20181210-browser-wars-iii)
- [文章](/20181210-browser-wars-iii)
- [文章](20181210-browser-wars-iii "題名")
- [文章](/20181210-browser-wars-iii "題名")

ファイル拡張子付き

1
2
3
4
5
6
7
8


- [](20181210-browser-wars-iii.md#fragment)
- [](/20181210-browser-wars-iii.md#fragment)
- [](20181210-browser-wars-iii.md#fragment "題名")
- [](/20181210-browser-wars-iii.md#fragment "題名")
- [Text＃fragment](20181210-browser-wars-iii.md#fragment)
- [Text＃fragment](/20181210-browser-wars-iii.md#fragment)
- [Text＃fragment](20181210-browser-wars-iii.md#fragment "題名")
- [Text＃fragment](/20181210-browser-wars-iii.md#fragment "題名")

サポートされていません

ファイル拡張子がなく、 ＃fragmentを使用した内部リンクでは、間違ったリンクが生成されます。

1
2
3
4
5
6
7
8


- [](20181210-browser-wars-iii#fragment)
- [](/20181210-browser-wars-iii#fragment)
- [](20181210-browser-wars-iii#fragment "題名")
- [](/20181210-browser-wars-iii#fragment "題名")
- [Text＃fragment](20181210-browser-wars-iii#fragment)
- [Text＃fragment](/20181210-browser-wars-iii#fragment)
- [Text＃fragment](20181210-browser-wars-iii#fragment "題名")
- [Text＃fragment](/20181210-browser-wars-iii#fragment "題名")

次の形式にも注意してください。

1
2


- [link-icons.7z](/dls/link-icons.7z)
- [link-icons.7z](../../dls/link-icons.7z)

上記の代わりに、 [文章](./path/to/file.ext)を次のように使用します。[link-icons.7z](./techmagus/dls/link-icons.7z)は次のようにレンダリングされます。 link-icons.7z

それを改善

上記のコードを自由に改善して、コミュニティに共有してください。あなたが適切にクレジットされるようにあなたのウェブサイトと名前を提供してください。

LANG属性

2009-06-20T16:20:37Z

前回の投稿で、《バイバイン-フィリピン人の忘れられたヒスパニック以前の執筆》について話しました。 Unicode Standardのバージョン5.0で、ブヒッド文字、ハヌノオ文字、タグバヌワ文字とともに《フィリピン文字》グループに追加されました。しかし、別の言語やスクリプトで書かれたコンテンツを適切に記述またはマークするにはどうすればよいでしょうか。

この投稿では、コンテンツの言語を正しく宣言する方法について説明します。これにより、翻訳ソフトウェアやヘルパーアプリケーション、およびこの頻繁に認められるHTML属性に依存するその他のテクノロジに慣れることができます。私たちの画像に示されているように、誰もが使用されている書記を見ることができますが、デジタルの世界では、使用しているフォントを持っていない人がいます。あなたと私が使用しているのと同じブラウザを使用していない人もいます。テキストのみのブラウザ、音声ブラウザ、点字ブラウザの可能性があります。

その場合、使用している言語とスクリプトでコンテンツに適切かつ正しくタグを付けることが適切です。 LANG属性をたくさん使用する準備をしてください。

ウェブサイトを作成するときは、ウェブサイトで使用されている言語を適切に宣言することが重要です。たとえば、私は自分のサイトに次のものを使用しています。

1

<html lang="en-PH">

ASCIIの範囲を超える文字を使用する場合は特に、文字セットを宣言することも重要です。これはどのように見えるかです：

1

    <meta charset="UTF-8" />

すべてをまとめると、基本的なHTMLは次のようになります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12



<html lang="en-PH">
    <head>
        <meta charset="UTF-8" />
        <meta description="My Website" />
        <meta keywords="Philippines, Baybayin" />
        <title>My Baybayin Websitetitle>
    head>
    <body>
        <p>Mabuhay!p>
    body>
html>

では、掘り下げてみましょう…

lang属性

HTML lang属性は、宣言された要素内に含まれるコンテンツの言語を定義します。コードはsubtagと呼ばれ、私のフィリピン人の読者にとって、心配すべきサブタグの種類は、language-Script-REGIONの3つだけです。完全な形式：language-extended_language-Script-REGION-variant-extension-privateuse。

以下の表を参照してください。

コード	言語	サブタグの配置
en	（ジェネリック）英語	language
en-PH	フィリピン英語	language+REGION
fil-Tglg	バイバインのフィリピン人	language+Script
bik-cts-Tglg	バイバインスクリプトのパンダン（北カタンドゥアネス）方言のビコラノ	language+extended_language+Script
phi-Tglg-tsg	バイバイン文字で書かれたタウスグ語フィリピン語	language+Script+variant

特定の言語のサブタグを見つけたい場合は、以前はさまざまなWebサイトと多数の公式コードリストを確認する必要がありました。時間のかかる作業です（通常は一度だけ行う必要がありますが）。さて、最新の公式サブタグは、IANA言語サブタグレジストリにあります。これは、すべての有効なサブタグのユニバーサルソースになりました。

最新のリスト（この記事の執筆時点）によると、フィリピンに関連するサブタグは次のとおりです（何か見落とした場合は、以下にコメントを残してください）。

言語

Tagalog
- Type: language
- Subtag: tl
- Description: Tagalog
- Added: 2005-10-16
- Suppress-Script: Latn
Bikol
- Type: language
- Subtag: bik
- Description: Bikol
- Added: 2005-10-16
Cebuano
- Type: language
- Subtag: ceb
- Description: Cebuano
- Added: 2005-10-16
Filipino/Pilipino
- Type: language
- Subtag: fil
- Description: Filipino
- Description: Pilipino
- Added: 2005-10-16
Hiligaynon
- Type: language
- Subtag: hil
- Description: Hiligaynon
- Added: 2005-10-16
Iloko
- Type: language
- Subtag: ilo
- Description: Iloko
- Added: 2005-10-16
Pangasinan
- Type: language
- Subtag: pag
- Description: Pangasinan
- Added: 2005-10-16
Pampanga/Kapampangan
- Type: language
- Subtag: pam
- Description: Pampanga
- Description: Kapampangan
- Added: 2005-10-16
Philippine languages
- Type: language
- Subtag: phi
- Description: Philippine languages
- Added: 2005-10-16
Waray
- Type: language
- Subtag: war
- Description: Waray
- Added: 2005-10-16

領域

Philippines
- Type: region
- Subtag: PH
- Description: Philippines
- Added: 2005-10-16

スクリプトを書く

Buhid
- Type: script
- Subtag: Buhd
- Description: Buhid
- Added: 2005-10-16
Hanunoo (Hanunóo)
- Type: script
- Subtag: Hano
- Description: Hanunoo (Hanunóo)
- Added: 2005-10-16
Tagbanwa
- Type: script
- Subtag: Tagb
- Description: Tagbanwa
- Added: 2005-10-16
Tagalog
- Type: script
- Subtag: Tglg
- Description: Tagalog
- Description: Baybayin
- Description: Alibata
- Added: 2005-10-16

必要なサブタグができたので、フィリピンの言語とスクリプトの正しい lang値のコーディングを開始できます。次の例を参照してください。

あなたがフィリピンで成長して英語を学んだ場合、おそらくフィリピン専用の英語の単語を使用しているだけでなく、フィリピン英語でのみ教えられている厳格な言語規則に従っています。これはあなたのウェブサイトの正しい lang値です：lang= "en-PH"
タガログ語ではなくフィリピン語で書いている場合は、次のように使用します： lang="fil"
フィリピン語ではなくタガログ語で書いている場合は、次を使用します： lang="tl"
ビコラノの場合は、次を使用します： lang="bik"
セブアノ語では、次を使用します： lang="ceb"
ヒリガイノン語、これを使用してください： lang="hil"
イロカノ語では、これを使用します： lang="ilo"
パンガシナン語： lang="pag"
パンパンガ語： lang="pam"
ワライ語： lang="war"
対応するISO-639-2コードがないフィリピンの言語の場合、一般的なサブタグ lang="を使用する必要があります。ファイ "

次に、Baybayinスクリプトで何かを書きたい場合は、スクリプトサブタグ《Tglg》で正しく囲む必要があります。形式は次のとおりです。言語-スクリプト、次のようになります。

バイバインスクリプトを使用してフィリピン語とタガログ語で書く場合は、次を使用します： lang="fil-Tglg"
ビコラノ語だがバイバイン語のスクリプト： lang="bik-Tglg"
バイバインスクリプトを使用したセブアノ語： lang="ceb-Tglg"
ISO-639-2サブタグのない他のすべてのフィリピン語は、次を使用する必要があります： lang="phi-Tglg"

lang="tl-Tglg"サブタグコードがないのはなぜですか？ Suppress-Script：Latnのため、前に示したようにIANA言語サブタグレジストリにあります。私がそれを正しく理解していれば、それは公式の基準によるタガログ語が常にラテン文字で書かれるべきであることを意味します。その場合、lang=“tl-Tglg"が間違っており、アプリケーションにはそれを無視するか、《Tglg》スクリプトサブタグを削除するオプションがあると思います。この場合、《fil-Tglg》を使用するだけです。

ISO-639-3言語

方言とマクロランゲージをターゲットにする場合に学習する必要のある別のサブタグがあります。 ISO規格ISO-639-3からリストを見つけることができます。。例としてビコラノを使用してみましょう。使用する形式は、language-extended_language-Scriptです。

中央ビコラノ語で書いている場合は、次を使用します： lang="bik-bcl"
アルバイビコール語/ブヒダラガ語で書く場合： lang="bik-bhk"
バイバインスクリプトを使用してイリガビコラノにいる場合： lang="bik-bto-Tglg"
バイバインスクリプトを使用してパンダン（北カタンドゥアネス）にいる場合： lang="bik-cts-Tglg"

言語-extended_language-スクリプトは、この記事の時点ではまだ実装されていません。 lang属性の基礎は、extended_languageを含むように更新されると、常にIANA言語サブタグレジストリになります。その後、必要に応じて使用を開始できます。

phi言語サブタグ

次に、言語にISO-639-3コードがあり、ISO-639-2の言語コード《phi》の下またはその一部である場合は、phiサブタグが使用されます。このサブタグコードは集合言語と見なされます。良い例は次のとおりです。

キナライア語-言語： lang="phi-krj"
マギンダナオ語： lang="phi-mdh"
バイバインスクリプトで書かれたマラナオ語： lang="phi-Tglg-mrw"
バイバインスクリプトで書かれたタウスグ語： lang="phi-Tglg-tsg"

お気づきかもしれませんが、私が使用した形式はlanguage-Script-variantであり、language-extended_language-Scriptではありませんでした。私の推論は単純です-phi言語コードは実際には言語ではなく、このバージョンのISOでは見つからない他のすべてのフィリピン言語のISO-639-2では《集合》言語エントリと正確に呼ばれます言語標準。これをbik言語コードと比較すると、ISO-639-2とISO-639-3の両方で《マクロ言語》として明確にマークされています。

さらに、World Wide Web ConsortiumまたはW3Cによると、マクロ言語のダイアレクトが検討されます/すぐに作成する必要があります言語サブタグの後。つまり、ISO-639-2コードがマクロ言語と見なされる場合は、 lang="bik-cts-Tglg"のようなextended_languageサブタグの位置を使用する必要があります。マクロランゲージとして定義されていない場合は、 lang="phi-Tglg-tsg"の場合と同様に、バリアントサブタグの位置を使用する必要があります。

例、例、その他の例…

あなたのウェブサイトが主にイリガに関するものであり、あなたがあなた自身の言語で書いているなら、あなたはそれに応じてあなたのウェブサイトのヘッダーファイルを調整するべきです：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12



<html lang="bik-bto">
    <head>
        <meta charset="UTF-8" />
        <meta description="Ang Website Ko Sa Iriga Bikolano" />
        <meta keywords="Philippines, Baybayin, Iriga, Bikolano" />
        <title>Ang Website Ko Sa Iriga Bikolanotitle>
    head>
    <body>
        <p>Mabuhay!p>
    body>
html>

バイバインで《ハッピー父の日》を書きたい場合は、次のようにします。

1

  <bdi lang="fil-Tglg">ᜋᜎᜒᜄᜌᜅ᜔ ᜀᜍᜏ᜔ ᜈᜅ᜔ ᜋᜅ ᜀᜋbdi>

単純？いいね！言語タグを作成するときは、できるだけシンプルで短くすることを忘れないでください。 lang="bik-bcl"のように具体的にする必要がない場合は、そうしないでください。単に lang="bik"を使用してください。これは特にブログに当てはまります。したがって、ブログがフィリピン語（タガログ語ではない！）である場合は、次を使用します。

1

<html lang="fil">

必要な場合、またはサイトが主にその特定のオーディエンスや地域に対応している場合にのみ具体的にしてください。さらに、他の言語やスクリプトを使用する場合は（おそらく使用するでしょう）、上記のBaybayinの例で示したように、常にspanまたはdiv要素で囲みます。

簡単？はい、そうです。慣れるまでには時間がかかりますが、最初は混乱します。しかし、最終的にはコツをつかむでしょう。続けて今すぐWebサイトを更新し、正しい言語とスクリプトでコンテンツをマークする練習を始めてください。

注意：Google翻訳