ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

WordPress[Stinger3] サイドバーのアイコンを変更する方法

      2015/02/16

WordPress[Stinger3] サイドバーのアイコンを変更する方法

WordPressの人気テーマStinger3のサイドバーのデフォルトアイコンはこちらですが、

WordPress[Stinger3] サイドバーのアイコンを変更する方法

変更後はこのようになります。

スポンサーリンク

WordPress[Stinger3] サイドバーのアイコンを変更する方法

今日はこのアイコンを変更する備忘録を残したいと思います。今回変更するにあたって参考にさせて頂いたブログはNAIFIXさんの

です。こちらも合わせてご覧ください。今回もOSXローカル環境にwordpressをインストールする方法で構築したWordPressの環境で作業して行きたいと思います。

アイコンフォントをダウンロード

今回変更するアイコンは画像ではなくフォントの一種のアイコンフォントらしくサイズも色も自由に変更出来ます。まずは下記のリンクからアイコンフォントをダウンロードしてください。

ダウンロードリンクはページの一番下になります。

WordPress[Stinger3] サイドバーのアイコンを変更する方法

スポンサーリンク

アイコンフォントをアップロード

ダウンロードしたアイコンフォントをブログで使用出来るようにアップロードします。ここではTransmitのようなFTPアプリが必要なので用意してください。

Transmit
カテゴリ: ユーティリティ
現在の価格: ¥3,400

ご自身のサーバーのテーマフォルダの中の「stinger3ver20140124」(こちらは最新バージョンのStinger3です)の中に「font」と云う名前のフォルダを作成します。その中に先程ダウンロードしてZip解凍したアイコンフォントの

WordPress[Stinger3] サイドバーのアイコンを変更する方法

LigatureSymbols-2.11.woff
LigatureSymbols-2.11.ttf
LigatureSymbols-2.11.svg
LigatureSymbols-2.11.otf
LigatureSymbols-2.11.eot

の五種類を先程作成した「fonts」フォルダの中にアップロードします。

WordPress[Stinger3] サイドバーのアイコンを変更する方法

アイコンフォントのアップロードはこれで終了です。

style.cssにコードを記入

管理画面 → 外観 → テーマ編集 → スタイルシート(style.css)を開くか、Transmit(FTPアプリ)でstyle.cssを開いてください。開いたstyle.cssの11行目の「@charset “UTF-8”;」の次の行ぐらいに下記のコードを足します。

最終的にこのようになれば大丈夫です。

WordPress[Stinger3] サイドバーのアイコンを変更する方法

次にTransmitだと595行目ぐらいに「.menu_underh2 {」という記述がありますが、そこを修正します。デフォルトだとこんな感じですが、

WordPress[Stinger3] サイドバーのアイコンを変更する方法

下記のコードに変更します。

変更した部分は「padding-left: 35px;」を含めて下3行です。

次に、今変更を加えた「.menu_underh2 {」のセクション(全部で11行ぐらいあります)の下に追加でコードを足します。現状だとこうなってるはずです。

WordPress[Stinger3] サイドバーのアイコンを変更する方法

605行目の次に下記のコードをコピペしてください。

最終的にこのようになります。

WordPress[Stinger3] サイドバーのアイコンを変更する方法

そして使用するアイコンの指定なのですが、先程のアイコンフォントをダウンロードしたページに表が出てるので番号を確認します。

自分はこのlaughというアイコンにします。

スポンサーリンク

WordPress[Stinger3] サイドバーのアイコンを変更する方法

右側の「¥E07f」をコピーします。(¥マークも含めてコピーします。ペーストすると自動的に「\」に変換されます)

コピーしたアイコンの番号を先程の、

WordPress[Stinger3] サイドバーのアイコンを変更する方法

の「content:」の「\E038」部分に貼付けます。貼付け後、保存をして終了です。

完成

ブログを見て変更されているか確認しましょう。読んで頂いてありがとうございました。

 - WORDPRESS

Comment

  1. semiboze より:

    こんにちは、毎日実用的な内容なので漏らさず購読してます。
    ところで「WordPress[Stinger3] サイドバーのアイコンを変更する方法」という記事について質問させてください。

    オリジナルのStingerのテーマに子テーマを作って使っていますが、その場合アップロード先は子テーマのディレクトリ下なのかオリジナルのディレクトリ下なのか教えてください。

    それともアイコンフォントを読み込む指示をするCSSファイルの位置から見てどこかという考え方をすればよいのでしょうか。
    素人なもので初歩的なのかもしれませんがご教示おねがいします。

    • DM より:

      semiboze様

      コメントありがとうございます。文章とかあんまり得意じゃないので誤字脱字も多くて申しわけないですが、読んで頂けて大変嬉しいです。このFontsの入れる場所は自分も最初同じ状況になりました(笑)子テーマをお使いの場合、アップロード先は子テーマのディレクトリ下だった気がします!今後ともよろしくお願いいたします。

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

驚くほど効果があった無料CDNサーバー「CloudFlare」の導入
驚くほど効果があった無料CDNサーバー「CloudFlare」の導入
WordPressの過去記事を決まった時間に自動ツイートする方法
WordPressの過去記事を決まった時間に自動ツイートする方法
WordPress[MAMP] ローカル環境へ本番環境を復元する
WordPress[MAMP] ローカル環境へ本番環境を復元する
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法
WordPress[Stinger3]Amazonアソシエイトの自動ランキングを導入
WordPress[Stinger3] Amazonアソシエイトの自動ランキングを導入
WordPress 蛍光ペン風テキスト装飾をCSSに設定
WordPress 蛍光ペン風テキスト装飾をCSSに設定
WordPressの人気テーマ「Stinger3」の追尾型SNSボックスを削除する方法
WordPressの人気テーマ「Stinger3」の追尾型SNSボックスを削除する方法
WordPress[Table Press] 表を作成してブログに表示
WordPress[Table Press] 表を作成してブログに表示
WordPress[Stinger5] プラグインなしで背景を画像にする
WordPress[Stinger5] プラグインなしで背景を画像にする
WordPressテーマ「Stinger3」見出しから自動的に目次を作ってくれるプラグインを導入
WordPressテーマ「Stinger3」見出しから自動的に目次を作ってくれるプラグインを導入