賢威のワードプレステンプレートにアイコンを追加する方法
今日は賢威にアイコンを追加する方法をお伝えします。
今回は賢威のワードプレステンプレートの場合です。
賢威には下記のようなアイコンが用意されています。
アイコンを使うためには<p>タグを使用することで使う事が出来ます。
詳しくは賢威のサポートページをご覧下さい。
それでは今回は昨日の記事で作ったチェックマークを登録してみます。
昨日作ったチェックマークをまずはサーバーにアップロードします。
サーバーへのアップロードはお使いのサーバーのFTP接続を使うか、
FFFTPを使ってアップロードしてください。
今回は私が使っているヘテムルで説明します。
ヘテムルのログイン画面に行き、
heteml FTPをクリックします。
するとheteml FTPのログイン画面になりますので、
FTPアカウントとパスワードを入力しログインをクリックします。
ログインできたらチェックマークをアップロードするフォルダーへ行きます。
ヘテムルの場合はwebというフォルダーの中に、
各ドメインが入っています。
webをクリックします。
今回はこのブログの賢威に入れますので、
このブログのドメインを選びます。
賢威はwp-contentというフォルダーに入っていますので、
wp-contentをクリックします。
次にthemesをクリックします。
このkeni62_wp_corp_151007に賢威が格納されています。
※これは賢威のコーポレート版ですので、
他のテンプレートではフォルダ名が違いますので、
賢威が格納されているフォルダーを選んでください。
keni62_wp_corp_151007をクリックします。
imagesをクリックします。
次にiconをクリックします。
この中に昨日作ったチェックマークをアップロードします。
開いたらファイルアップロードをクリックします。
ファイルを選択するをクリックします。
昨日作ったチェックマークを選んで開くをクリックします。
するとファイルのアップロードが始まります。
アップロードが終わったらファイルがあるかどうかを確認します。
赤で囲ったところにありますので、
正常にアップロードできました。
アップロードが終わったのでサーバーFTPはここで閉じておきます。
次はワードプレスにいきます。
ワードプレスのログイン画面で、
ユーザー名、パスワードを入力しログインをクリックします。
ログイン出来たら外観からテーマの編集をクリックします。
編集画面になりますので、
その画面の右下にあるスタイルシートの中の、
advanced.cssをクリックします。
このadvanced.cssの中にアイコン設定のコードが書いてあります。
cssの編集画面になりますので、
赤で囲った文字列の前にアイコンと書かれている部分を探します。
見つけたら今回はPDFのアイコンと同じサイズで作っていますので、
赤で囲ったPDFのアイコンのコードをコピーします。
コピーしたら改行でスペースをあけ、そこにペーストします。
ペーストしたら赤で囲ったように書き換えます。
PDFアイコンはチェックアイコンへ、
.pdfは.chekuへ、
icon-pdf.pngをicon-cheku.pngへ書き換えます。
ファイル名をchekuにしているのは、
checkは他のファイルで使われているので、
わざとこれにしています。
つづりを間違っている訳ではありませんよ。
書き換えたらファイルを更新をクリックします。
これで、<p>タグでチェックマークを使えるようになりました。
それでは実際に使ってみましょう。
投稿から新規追加をクリックします。
上の画像のようにタグを打ちプレビューをクリックします。
表示してみるとチェックマークがちゃんと表示されています。
これで賢威にアイコンを追加することができました。
今回チェックマークを作った理由は、
賢威のサポートページで見たアイコンに、
チェックマークがなかったからです。
あると<p>タグで簡単に使えるので作ったのです。
でもファイルをアップロードするときに、
このように賢威のサポートページには載っていない画像がいっぱいあります。
なんか嫌な予感がしたんですよね。
試しに赤で囲ったファイルをクリックしてみると、
なんとチェックマークが。
あるんか~い!!と一人突っ込みました。
なんだよあるんかよと思ってタグを打ってみても表示されません。
画像はあるのですが、<p>タグで使えるようにはなっていませんでした。
どのみちタグの追加は必要だったのです。
でも、バナープラスで作業していたら、
楽しかったので良いですけどね。
この手順を使えば色んなアイコンを、
賢威で手軽に使えるようになりますので、
ぜひ挑戦してみて下さいね。
今日は賢威にアイコンを追加する方法でした。
私が実際に購入して使ってみたバナープラスのレビュー記事は、
下のボタンをクリックすると確認できますよ。
このブログの気になるランキングは下のバナーをクリックすると確認できますよ。
結構いいところにいます。
宜しければ応援お願いします。
Googleアドセンスで
月に3万円稼げるようになりました。
Googleアドセンスで
月に3万円稼いだ方法は
下のバナーをクリックして読んで下さい。