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 物理ファイルとテーブル INTEGER系で違和感

SQLを使って物理ファイルではなくテーブルとしてファイルを作る。   その中でINT系で違和感があったので試した実験。 INT系なら何でもいいと思うが、今回はSMALLINTでカラムを作り、 …

Laravel Viewの第二引数 連想配列の渡し

私は知らなかったので忘備録。   これと

  これは [crayon-5f6da2e908596344183765 …

gitでプッシュしたのに効かない件

ブログなので皆さまのお役にたてば幸いですが、あくまで自分の忘備録なので、昔話も含めて書いております。ご了承ください。 環境は、 開発環境は自席PC(ローカル) Windows10PC XAMPP7.2 …

AS400/IBMi サブファイルで入力後にカーソルを下に移動させる SFLCSRPRG

例えばサブファイルの入出力項目が5列あったとして、ユーザがタンタンとエンターキーでカーソルを飛ばして入力していくと、通常は次のカーソルは右に移動する。   これを下に移動させるには、DDSで …

エクセルVBA 汎用プログラム サンプル集

エクセルVBAの素晴らしさを伝えたいと思って動画を作っています。 正直私は人に教えられるほどスキルは高くありませんが、素晴らしさを伝えるくらいは出来ると思っております。 下記がその動画の1回目です。現 …

Adsense広告




文字で検索

人気記事

なぜだか人気記事

読んでほしい順に