サルでき流 WordPressではじめる企業サイトの作り方

第47回 Webサイトが劇的にカッコよくなる!「ショートコード」を使いこなせ!(実践編)

この記事を読むのに必要な時間:およそ 5 分

Font Awesomeを使ってみよう

はいみなさま,おつかれさまでした!

13種類,どうでしたか?今すぐ使えるものばかりでしたね。

「最近のWebサイトは,見た目がものすごく良いんだけど,一体どうすればこんな風にできるの?っていうか,そのためにはどれだけの技術が必要なの?」

みなさんがイマドキのサイトを見た時に思う,そんな疑問の多くが解消されたんじゃないかと思います。

そうそう,みんな,⁠ある程度は)カンタンにできるから成り立っている」のですよ。うんうん,ホッとしましたね。

さてさて,ではこの流れで最後にもうひとつ。

ショートコードとはちょっと違うのですが,⁠見た目を良くするためのショートなコード」という強引なつながりで,「Font Awesome」という便利な仕組みについて紹介したいと思います。

みなさんは,「絵文字」って使いますか?

そうそう,携帯メールなんかで使われるアレです。

一般的にああいう絵文字は,⁠機種依存文字」で作られていまして。⁠自分の環境では見えるけれども,他の人の環境では見えない」なんてことがよくあります。

様々な環境から見られるWebサイトでは,使いにくい要素です。

今回ご紹介する「Font Awesome」は,Webサイトでも使える絵文字アイコンの仕組みです。

こんな感じ。ビジネス用途のものが多いです

こんな感じ。ビジネス用途のものが多いです

このFont Awesomeも,イマドキのテーマには既に入っていたりします。イマドキのテーマって何でも入ってますねえ……。

ですが,標準テーマや無料テーマの中には入っていないものもまだまだたくさんありますので,ゼロからでも使えるようにする方法を順番に見ていきましょう。

ちなみに。

WordPressで機能を追加するといえば,⁠プラグイン」でしたね。

「Font Awesome」にもプラグインはあるにはあるのですが……,実は,最新のアイコンセットに対応していないようなのです。ですので,今回は少々いつもと違う方法で行います。

STEP1:テーマのヘッダーファイルに1行追加

まず,メニューの「外観」から「テーマの編集」に進んでください。

触ってはいけない雰囲気がプンプンと

触ってはいけない雰囲気がプンプンと

ものすごくプログラムっぽいものが並んでいますね,⁠大正解」です。ここには,⁠テーマを構成するプログラムファイル」がズラッと並んでいます。

お使いのテーマをプルダウンから選んだ上で,右の「テンプレート」と書かれた欄を上から見ていくと,⁠ヘッダー(header.php⁠⁠」という項目があると思います。これをクリック。

このファイル

このファイル

ファイルの中身は使っているテーマによって異なるのですが,プログラムを1行ずつ順番に見ていくと,⁠<head>」「</head>」で囲まれた場所があるはずです。

結構上のほうにあります

結構上のほうにあります

そこに,このコードをコピペしてください。

コード:<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

コピペ,

コピペ,と

このコード,Font Awesomeのこのページに書いてあります

このコード,Font Awesomeのこのページに書いてあります

「ファイルを更新」ボタンを押したら完了です。

著者プロフィール

カワサキタカシ(かわさきたかし)

元アイ・ビー・エムERPコンサルタント,元アップル教育ソリューション開発者兼営業,他にも様々な経験を経て,人材育成会社『株式会社マイウェイ』を夫婦で起業。現在,同社の取締役兼なんでも担当。

「Webサイト」から「iPhoneアプリ」,「ビジネスサービス」から「会社」まで,『作ること』が好き。そして作る楽しさを誰かに『教えること』も好き。楽しく作る技術を学ぶコミュニティ,『サルでき.jp』をぐーたら管理中。

著書に『iPhoneアプリ開発塾』(技術評論社),『サルにもできるiPhone同人誌の創り方』(飛鳥新社)がある。

株式会社マイウェイ Webサイト
株式会社マイウェイ Facebook
カワサキタカシ Facebook
サルでき.jp


企業サイト作り(運用)にお困りの経営者さま・Webご担当者さま。ワタシ,『企業サイトを楽しく作る(育てる)ためのサポートサービス』もやっております。困り果てて現実逃避の小旅行に出かける前に,是非一度弊社Webサイトまでお気軽にご相談くださいませ。