【用語解説】HTML

見えてはいるけどなかなか越える気にならないハードル。

それがかの有名な【HTML】と【CSS】ですね。

僕も未だに何がなんなのかよく分かっていませんが、漠然と以下の様なイメージで接しています。

【HTML】=骨(基礎)

 【CSS】=肉(飾り)
 
 

難しい話するとイライラしてくるので、単純にこう覚えとけば大丈夫です。ワードプレステーマは最初から『HTML』による骨組みが完成している状態で配布されているのでまだ勉強しなくてもOK。

深いカスタマイズをする場合は必要になってきますが、それは遠い未来の話。

今早急に必要なのは『CSSの知識』です。これは直接的に骨組みを触らないので、基本的に『いじったら壊れた』という事はありませんし、初心者でも簡単に手を加える事ができます。

とは言っても『HTMLじゃないとできない事がある』のも事実。

今回は使用頻度の高い『画像つきリンク』を実際に作って、HTMLとはどんな物なのかイメージだけでも掴んでおきましょう。

 

新規テキストドキュメントを用意する

【PCデスクトップ】【右クリック】【新規作成】【テキストドキュメント】【新しいテキストドキュメント要するにまっさらのメモ帳を用意してください

 

HTMLコードをコピペする

HTML
<center><a href=リンクURL><img src=画像URL></a></center>

メモ帳に上記コードをコピペしてください。太字の部分2箇所を必要な情報で埋めるだけで画像つきリンクが完成します。

【a href=】はリンクURLを指定します

【img src=】は表示させる画像を指定します 

【center】はコンテンツを中央に配置します

【/a】は『リンクはここまで』というストッパーです。これを付けないと以下に存在するテキストや画像にも全てリンクが適用されます。【a href】とセットで使います。

【/center】は『中央表示はここまで』というストッパーです。これを付けないと以下に存在するテキストや画像全てが中央表示になります。もちろん【center】とセットで使います。

HTMLは基本的にこんな感じで【頭】と【お尻】のコードで挟むように書きます。今回挟まれているのは【img】要するに画像ですが、この部分をテキストに変えれば『テキストリンク』が完成します。後で例をお見せします。

 

リンクURLを取得する

リンクURLとは『画像をクリックしたら飛ぶリンク先のURL』の事。今回は試しに当サイトのトップページへリンクさせてみましょう。

以下のURLをリンクURLの上に上書きペーストします。

 

リンク先の例
https://marumado.net/airon-bi-zu-sukarumiryo-ne/

 

画像URLを取得する

【左メニュー】【メディア】を開き、アップロードされた画像の中から1つだけ選んでクリック

画像には『chobiblog.com』と表示されていますが、それはこの【丸窓のワードプレスメモ】の起源となった昔のサイトのドメインなので気にしないでください

 

アップロードされた画像には全て自動的にURLが与えられています。上記の部分が画像URLになりますので全文コピーしてください。これを【画像URL】の部分に上書きペーストします。

画像URLの例

https://wordpress.marumado.net/wp-content/uploads/2018/02/IMG_1632.jpg

 

画像リンクのHTMLコードは完成

HTML
<center><a href=リンクURL><img src=画像URL></a></center>
HTML

<center><a href=https://marumado.net/airon-bi-zu-sukarumiryo-ne/><img src=https://wordpress.marumado.net/wp-content/uploads/2018/02/IMG_1632.jpg></a></center>

2つ太字項目がURLに差し替わり、上記の様なコードが完成しました。

これがもうすでにHTMLコードですが、存在している場所がメモ帳なのでただの文字列に過ぎません。『HTMLコードと認識してくれる場所』に貼る必要があります。

 

サイドバーに貼る

【外観】【ウィジェット】【テキスト】は『HTMLコードと認識してくれる場所』です。このウィジェットをメインサイドバーへ追加し、作成したHTMLコードをペーストすればHTMLコードとして機能します。

これでサイドバーに『画像つきリンク』を設置する事ができました。

もちろん画像をクリックすれば『https://marumado.net/airon-bi-zu-sukarumiryo-ne/』へ飛びます。

 

記事コンテンツ内に『HTML』を設置する

記事に画像つきリンクを表示させたいのならば【メディアを追加】で画像を表示させ【編集】【リンク先】でカスタムURLを指定し、リンク先のURLを貼るだけ。

HTMLを使わずとも簡単に作る事ができます。

が、今回はあくまで『HTML』の話ですから、先ほどのコード使って記事コンテンツ内に『画像つきリンク』を表示させる方法を見てみましょう。

記事編集画面には【ビジュアル】【テキスト】という2つのエディタがあるのは御存じだと思います。

 

ビジュアルエディタではHTMLコードを認識しないので『HTMLを記述するにはテキストエディタを使う必要がある』という事を覚えておいてください。

しかしこれあ至難の業。テキストエディタを上手く扱うにはHTMLの知識が必要不可欠だし、素人が手を出せるような雰囲気ではありません。恐らくこのエディタを開くだけで吐き気を催す人が続出します。

なので今回は【ビジュアルエディタにHTMLを挿入する事ができるプラグイン】を使ってみたいと思います。リンク先でインストールしてください。

 

Paste Raw HTMLを使う

『Paste Raw HTML』のアイコンをクリックして表示された入力欄に、作成したHTMLコードをペーストすると『ビジュアルエディタへのHTMLコード挿入』する事ができます。

はい。

こんな感じで記事コンテンツ内にも『HTMLで』画像つきリンクを表示させる事ができました。

この方法を応用すれば『どんなHTML』でも記事に挿入する事ができます。

 

テキストリンクを作ってみよう

画像つきリンクを作れるならテキストリンクも簡単です。

HTML
<center><a href=https://marumado.net/airon-bi-zu-sukarumiryo-ne/><https://wordpress.marumado.net/wp-content/uploads/2018/02/IMG_1632.jpg></a></center>

このコードでは太字の部分(画像)にリンクが与えられているので、ここをテキストに置き換えるだけでテキストリンクが完成します。

 

HTML
<center><a href=https://marumado.net/airon-bi-zu-sukarumiryo-ne/>スカルミリョーネをアイロンビーズで作ったけど最後の最後でぶっ壊れたよ</a></center>

 

スカルミリョーネをアイロンビーズで作ったけど最後の最後でぶっ壊れたよ

 

 

せっかくですから『太文字のHTML』も使ってみましょうか。頭に<b>を置き、お尻に</b>を置くだけ。簡単です。

HTML
<center><b><a href=https://marumado.net/airon-bi-zu-sukarumiryo-ne/>スカルミリョーネをアイロンビーズで作ったけど最後の最後でぶっ壊れたよ</a></b></center>

 

スカルミリョーネをアイロンビーズで作ったけど最後の最後でぶっ壊れたよ

 

 

 

<center></center>を取り外せば左寄りになります。

HTML
<b><a href=https://marumado.net/airon-bi-zu-sukarumiryo-ne/>スカルミリョーネをアイロンビーズで作ったけど最後の最後でぶっ壊れたよ</a></b>

 

スカルミリョーネをアイロンビーズで作ったけど最後の最後でぶっ壊れたよ

 

こんな感じでHTMLにも様々な命令コードが存在しています。

今回説明したのはその中でも一番簡単なレベルの物ばかりで、ガチで本腰いれて勉強しないと理解不能な世界。

初心者の段階で頭から突っ込んで行く事はあまりおすすめしません。

とりあえず画像つきリンクの作り方だけ覚えてれば充分。

今必要なのはHTMLより【CSS】の知識です。

CSSは軽く勉強するだけでも、やれる事がかなり広がります。簡単な事から少しずつ潰していきましょう。

 

『しまじろう』は長男なのになぜ『じろう』なのか?