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 Laravel-Excelで文字化けするので文字コードを変換する

Laravel-Excelというのを見つけたので使ってみたのだが、いかんせんAS400だと色々と面倒くさい。   AS400はEBCDICという文字コードらしく、そこからODBCかPDOで引 …

AS400/IBMi からデータを取得 ExcelVBA カラム名COLHDG取得編

注意 これは私の環境下における私の備忘録です。お使いの環境によっては内容が異なる場合があります。システム管理者でない方は絶対にやらないでください。システムにはログが残るものなので、万が一があればクビに …

Windows10 複合機からのスキャンができない

スキャンとは、複合機のガラス面に紙を載せるか、シュイーンと紙を吸い込ませると、紙のデータをPCに取り込める機能のこと。   最近Windows10の関係でその複合機のスキャンがうまくいかない …

Windows 自PCのXAMPPテスト環境に別PCからアクセスする

会社で自分のPCにXAMPPを入れて、テスト用Webサーバにしています。   バーチャルホストにしているので、通常の80とは別に5つほどポートを割り当てている。   ある日上司から …

さくらVPS kusanagiでLet’s Encrypt手動更新ができなくて焦った

今日は土曜日だったが、いつものように朝起きて、iPhoneを開きツイッターや株価やダウ平均のチェックをする。   そしてGoogleAnalyticsを開き、私の拙いブログへ訪問してくださる …

Adsense広告




文字で検索

人気記事

なぜだか人気記事

読んでほしい順に