GIMPでSimplicityのトップへ戻るアイコン作成してみた!!(初心者用)

ブログ上に「トップへ戻るアイコン」の作成

 

当ブログ「愛知発のお出かけ情報と雑記ブログ」はワードプレスのSimplicityという無料のテーマで運営しています。今回は簡単に無料の画像編集ソフトのGIMPを使ってブログをカスタマイズしたので、GIMPの使い方などに参考にして下さい。

 

無料素材サイトでダウンロード

 

当ブログの画像は無料でダウンロードができて、商用利用もOKなイラストACを多数利用しています。無料イラストなら【イラストAC】

 

  • イラストACに無料会員登録をして、イラストをダウンロードします。

  • このアイコンをpngファイルで保存します。
    (pngファイルとは背景がない画像で矢印以外の背景を透過しています)

 

注意※画像が豊富にあり、選択しているだけで時間が大幅に消費してしまいます。

 

GIMPをダウンロードします

 

無料画像編集ソフトGIMP(ダウンロードサイトへジャンプ

 

  • GIMPをダウンロードして、デスクトップ上に保存して、GIMPを立ち上げます。

 

GIMPが起動したら、「ファイル」「新しい画像」をクリックして、幅150・高さ150「OK」をクリックします。

 

幅・高さは自由に設定してできますが、150cmぐらいがサイト上、適正なサイズです。
  • 次に「ファイル」、「開く/インポート」で画像ファイルを開くで矢印画像を選択し開きます。

「画像」「画像の拡大・縮小」幅100・高さ100「拡大縮小」をクリックします。

 

  • 新しい画像に矢印画像を貼り付ける。

「新しい画像」を幅150・高さ150から「ファイル」「レイヤーとして開く」から先程の編集した、幅100・高さ100の矢印ファイルを選択して「開く」をクリックします。

 

  • 画像を移動させる。

 

左の赤枠アイコンをクリックして、矢印アイコンをドロップさせて、上に移動させる。

 

  • テキストを入力する

 

左の赤枠のアイコンをクリックして、緑色矢印の少し下にテキストの文字を入力します。
ここではTOPと入力します。

 

  • いらない部分をカットする。

 

左の赤枠のアイコンをクリックして、いらない部分をカットします。
画像ファイルを小さくします。

最後にファイルを保存する

 

  • 最後に矢印アイコンのファイルを保存します。

GIMP画面で「ファイル」「名前を付けてエクスポート」で保存先やファイル名を変更して(そのままでも可)「エクスポート」をクリックします。

 

Simplicityで「トップへ戻るアイコン」を反映させる

 

ワードプレスのSimplicityという無料テーマで「トップへ戻るアイコン」を反映させる方法を紹介します。

 

ワードプレスの管理画面で

  1. 「外観」
  2. 「カスタマイズ」
  3. 「レイアウト全体・リスト」

「トップへ戻るボタンに画像を指定」

「画像の変更」で矢印アイコンファイルを選択して終了です。

 

おまけ・・スマホでアイコン画像の大きさは?

 

この矢印アイコンはサイズが横95 × 高さ120です。画面サイズ5.1インチのスマホ画面で「トップへ戻る画面に反映させる」と・・・

 

 

こちらの画像もGIMPで無料イラストなら【イラストAC】でダウンロードして編集していますが、サイズは 横113× 高さ90です。同じく5.1インチのスマホ画面で「トップへ戻る画面に反映させる」と・・

 

 

こんな感じになります。

 

今回はワードプレスのSimplicityという無料テーマで「トップへ戻る画面に反映させる」方法とGIMPでアイコンを編集する方法をお伝えしました。参考にしてもらえれば幸いです。


現在はワードプレステーマはsangoを使用しています。(有料テーマ)

 

コメントを残す

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