IT関連

WordPressで作ったブログにアイコンをつける

投稿日:

私のブログのアイコンはこの方法でつけました。

アイコンを付けたい箇所は3ヶ所。

  1. ブラウザのタイトル左の小さいアイコン
  2. YouTubeのチャンネルページに貼るリンク左のアイコン
  3. iPhoneお気に入りのタイトル左のアイコン
  4. iPhoneトップ画面に並ぶ少し大きめのアイコン

です。1~3は同じです。4は違います。

1~3は小、4は中で以降説明していきます。

 

アイコン取得方法

取得したフリーサイトや取得サイズ、加工などを説明します。

 

サイト

私はこちらのサイトから頂きました。フリーで会員登録も不要です。

ICOOON MONO

アイコンなので簡単なもので良いと思いますので丁度よかったです。

取得サイズ

小は16pxで、中は128pxを選びました。

拡張子

両方ともPNGでダウンロードしました。

色は適当に選びました。

ファイル名

小はfavicon.icoにしなければならない決まりがあるようなので、pngでダウンロードした後に拡張子ごと名前を変更します。

中はappleicon.pngにしました。

透過になっている

ここからダウンロードしたアイコンは透過(背景透明)です。

透過だと例えばアイコンを設置する場所の背景が黒なら黒のアイコンは見えません。

背景が白なら白いアイコンは見えません。

私はブルー系にしたのでどちらでも大丈夫ですが、必要ならば画像処理ソフト(WinならJTrimなど)を使って背景に色を付けましょう。

 

WordPress側にアップロード

作成したアイコンファイルをサイト側にアップロードします。

FTPを使います。

FTPの説明は割愛します、さすがにこれはご存知ですよね。

設置場所は小と中の両方とも

DocumentRoot/wp-content/themes/テーマ名/

の直下です。

 

テーマの編集

アイコンを表示するようにHTMLにコードを追記しなければなりません。

WordPressの管理画面から、「外観」、「テーマの編集」に進みます。

テンプレートheader.phpを選択し、</head>の上くらいにコードを書きます。

 

 

 

こんな感じです。

両者の違いはrelとファイル名の違いだけです。

 

一応これでうまくいきましたので備忘録として残します。

スポンサーリンク




スポンサーリンク




-IT関連
-, ,

執筆者:


comment

Your email address will not be published. Required fields are marked *

関連記事

Windows10 C# 学習環境構築方法

簡単なWindows上でのC#開発環境構築の備忘録です。 ドットインストールでC#を勉強しようと思ったけど、WindowsなのでVagrantとか知らないので。   ファイルの置き場所 とり …

Laravel JOINの種類と違い クエリビルダ

JOINの種類 言葉としてよく聞くのはこれだけ。CROSS JOINはほぼ使わないので除外。 JOIN INNER JOIN LEFT JOIN RIGHT JOIN LEFT OUTER JOIN …

Vimエディタ 備忘録

基本コマンド エディタの起動

  保存せず終了

&nbsp …

ヒューレットパッカードHPパソコンにある右下の?の消し方

最近会社に入ってきたHPのノートパソコンProBook 430 G7。   第10世代のCore i5のCPUで、メモリも8GBあり、HDDも256GBあるのでわりかし使い勝手が良いお利口さ …

AS400/IBMi 長いカラムを途中で折り返しで表示する

長いカラムを画面表示で端で折り返すのは自動的にAS400がやってくれる。同じ長さのカラムをDDS に用意すればいい。 ただ、このやり方では一番右端まで表示してから折り返すことになる。これを途中で折り返 …

Adsense広告




文字で検索

人気記事

なぜだか人気記事

読んでほしい順に