プログラミングWordPressでブログやサイトを経営している人の中には、カスタマイズがしやすいSimplicity2をテーマにしている人は多いのではないでしょうか?当サイトでもSimplicity2を使用しています。カスタマイズする上で、個性を出すためにはアイコンを使うと効果的になります。注意点とすることで、より見やすく、完成度が高くなります。Awesomeの使い方を紹介します。Awesomeについての使い方は以下の記事を見てください。5では約2500種類のアイコンが用意されています。そのうち、約950種類が無料で使用することができます。すべての種類を使いたい方はProモード($60...約6300円)に登録することで使用することができるようになります。Awesomeのサイトは以下を参照してください。Awesomeを使えるようにしましょう。以下のコードをheader.phpの<head>...</head>に挿入してください。5を使えるようにするためのもので、下のものが後述するアニメーション機能を使えるようにするコードです。出来るかもしれませんが、もし出来なかった場合は直接FTPソフトなどを用いて、親テーマのheader.phpを編集してください。FTPソフトについて分からない方がいらっしゃいましたら、以下のサイトで詳しく解説されていますので参考にしてみてください。【FileZillaの使い方】WordPressでFTPソフトを使おう「FTPソフトとは何?」というところから「WordPressでFTPソフトを使うメリット」「FileZillaの使い方」まで詳しく解説します。Awesomeを使いましょう。Awesome公式サイトへ行き、使いたいアイコンを選びます。1のところにチェックを入れると無料で使えるアイコンのみが表示されます。2のように薄い色のアイコンは有料のものなので、通常は使えません。1のようにFreeにチェックを入れて表示しないようにしておいて結構だと思います。3の部分は検索欄です。英語のみですが、キーワードの英単語を入れれば使いたいアイコンの候補が出てきます。4以下の部分はカテゴリー名が並んでいます。チェックすることである程度候補が絞られます。2.使いたいアイコンが見つかったらコードをコピーします。矢印の先のをクリックするとコピーができます。3.WordPressなどの編集画面でコードを貼り付けましょう。WordPressの場合は「ビジュアル」ではなく「テキスト」の方で編集してください。注意点Simplicity2を使用している場合、「テキスト」で編集するとしっかりコードが書かれているのに、「ビジュアル」にするとアイコンが表示されなかったり、□となっている場合があります。この場合焦るかもしれませんが、記事を公開してWeb上で見るときにはしっかりと表示されるので心配しないでください。Awesomeを使えるようにするコードがheader.phpの中に書かれているか確認してみてください。AwesomeではHTMLのクラスの中を書き加えることで様々なカスタマイズをすることができます。以下でそれらを紹介します。Awesomeのサイト上でコピーしたコードをそのまま貼り付けると、アイコンによって左右の余白が異なるため、以下のようにズレが生じます。fa-2x"></i>TwitterLINETwitterこれを直すにはfa-fwというのを付け足します。fa-fw"></i>TwitterLINETwitterのように文字の始まり位置が揃い、アイコンの余白が調整されたことがわかります。このfa-fwはほとんどの場合で用いるのが良いでしょう。スペースで調整するよりも簡単に余白を合わせることができます。アイコンのサイズ変更<h1>や<h2>などの見出し部分でアイコンを使うときは自動的にサイズが変更されますが、任意の場所でアイコンサイズを大きくしたいと思ったときは以下の方法でサイズを変更しましょう。fa-4x"></i>4倍のサイズ通常サイズ4倍のサイズ他にも次のように変更できます。fa-10xアイコンの色を変えるCSSでも変更できますがHTMLだけでもアイコンの色を変えることができます。style=”color:◯◯”の◯◯の中に英語でredやwhiteと色を入れてもいいですし、16進法の色コードを指定しても構いません。style="color:#3c5898"></i>アイコンの向きを変える、反転させるもともとあるアイコンの向きを変えたいときは以下のようにします。「90」のところを180や270に変更すればそれぞれの角度回転します。左右反転や上下反転は次のように指定します。Awesomeでは多くのアニメーションを加えることができます。状況に応じて加えてみてください。使えるエフェクトです。animatedアイコンを重ねる2つのアイコンを重ねることもできます。fa-stackをspanのclassに指定します。アイコンの大きい方をfa-stack-2x、小さい方をfa-stack-1xとします。具体例は以下を見てみましょう。style="color:white"></i></span>まとめいかがでしたか。様々な効果を加えることができるのがお分かりいただけたと思います。これらを駆使してぜひ、自分らしいWebページを作ってみてください。Chromeを使っていてCSSが反映されない時の対処法を紹介します。World”プログラミング言語はたくさんあって、どれが何に向いているかは気になるところですよね。Pythonの7つを比較してみたいと思います。記事を読むコピペで簡単!Simplicityでも使えるシンプルな見出しデザインでカスタマイズしよう!見出し部分のカスタマイズ方法を紹介します。初心者の方でもわかりやすいよう詳しく解説しています。SimplicityなどのWordPressテーマを使っている方はぜひ利用してみてください。\LaTeX$のような数式を表示させる方法を紹介します。コメントをキャンセルメールアドレスが公開されることはありません。*サイトPROFILE当サイト管理人は基本的に機械チックなものが好きです。見やすく、分かりやすい情報提供を目指しています。