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 *

関連記事

AS400/IBMi RunSQLScriptsでSELECTしかさせない

RunSQLScriptsでINSERTやUPDATEやDELETEをさせない、すなわちSELECTしかさせない方法。   本当はこれが調べたいわけではないのだが、一応の理解として備忘録にし …

AS400/IBMi RDi備忘録

じぶんの備忘録ですし、書きかけです。参考にはならないと思いますがご了承のほど。   導入 install.txtを読めばわかりますが、desk1とdesk2をデスクトップでもいいので同じ階層 …

AS400/IBMi キーボード 半角・(なかてん)の出し方

いままで知らなかった。   全角モードでキーボードの右下の「?」キーを押すと「・」が出る。 その変換できる状態でファンクションキーの「F8」を押せばよい。

Atomエディタ コメントの色を変更する

Atomのコメントの色を変更する方法です。   Atomのコメントはデフォルトでは灰色で見にくいので変更したほうが無難です。目が疲れます。   調べてみるとやり方は簡単に出てきたの …

Git 自分の備忘録

書きかけですし、未検証です。ご了承ください。   gitとは プログラムソースのバージョン管理システムのこと。 gitの用語で大事なのは、 作業ディレクトリ ステージングエリア リポジトリ …

Adsense広告




文字で検索

人気記事

なぜだか人気記事

読んでほしい順に