【ウェブページで外部のリソースを借りるには？】 - Webサイト専門プログラマの言いたい放題

f:id:wp-lesson:20170504164819p:plain

添付のようなアイコンは、
画像として配布されているものもあれば、
ウェブフォントとして配布されているもの
もあります。
　
画像の場合は、色が変更できませんし、
CSSで大きさを変更するため引き伸ばすと
画像がひどく荒れてしまいます。
　
しかしウェブフォントの場合は、
「あ」や「漢」のように、１つ１つの
アイコンが文字として登録されているので、
　
CSSで色を変更することもできますし、
CSSで大きさを変えても荒れません。
　
特に、画像ソフトを使わなくても
自分のサイトにアイコンを設置できる
手軽さは最大のメリットだと思います。
　
さて、
　
このようなウェブフォントは、
WordPressをインストールしただけで
自動的に組み込まれたりはしません。
　
テーマの中には、
Googleフォントなど無料のフォントが
あらかじめ組み込まれているものも
ありますが、
　
基本的には、フォントのデータは
WordPressの中にはありませんから、
ネット上にある外部リソースを借りる
という形を取ります。
　
Googleフォントも
その他のウェブフォントも、
　
フォントのデータファイルがネット上に
公開されているなら直接リンクを張り、
そうでなければデータをダウンロードして
自分のサイトが置いてあるサーバーに
アップロードして、そこにリンクさせる
ことになります。
　
いずれにしても、
　
ウェブページに外部のリソースを組み込むには、
HTMLに何らかの記述を追加して、
　
ブラウザに
　
「このリソースを使いたいから、
　読み込んでくださいね」
　
という指示をしなければなりません。
　
CSSで提供されているウェブフォントなら、

<link href="...." rel="stylesheet">

　
をHTMLに組み込むことになります。

▼Googleフォントの例
f:id:wp-lesson:20170504164759p:plain
　
それがWordPressだろうと、
普通のHTMLでできたサイトだろうと、
ECサイトだろうと、
　
ブラウザで表示されるページならば、
全て事情は同じです。

PR

CODEMYのマンツーマンレッスンでは、WordPressや
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
　
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
　
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
　
『WordPressのツボとコツがゼッタイにわかる本』
　
▼Amazonで概要を見る
http://amzn.to/2nd7Ia5
　
『ホームページ作成のツボとコツがゼッタイにわかる本』
　
▼Amazonで概要を見る
http://amzn.to/2bXJkbs
　
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
　
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
　
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
　
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓無料体験はこちら
http://bit.ly/2hw7mIy