CategoryArchives
Web

まだ設置してないの?サイトの第二の顔、faviconを設置しよう

2019.07.07

クハク

faviconとは?

favicon→favorite iconの事で、webページを見たときにタブに付いてる小さいアイコンや、ブックマークをした時横に付いてるアイコンを見たことがあると思う。
サイトのシンボルマークとして、また、サイトイメージに効果のあるfaviconを設置してみよう。

faviconを制作

まずはじめに、favicon制作をしよう。必ず正方形で、サイズは260*260(px)以上必要だ。最近は推奨サイズが512*512(px)以上になっているようなので 私はサイズを700*700(px)、Illustratorを使用し、ping形式で作成した。
作成するfaviconはとても小さくなるので、シンプルなデザインがオススメ。

一括で画像サイズを自動生成する

以下のサービスを利用し、一括で画像を自動で生成した。
様々なファビコンを一括生成。favicon generator
画像ファイルを選択→任意の画像を選択→ファビコン一括生成の順に、しばらくすると沢山の画像が表示されるので、ファビコンダウンロードボタンをクリック。
faviconz.zipファイルがダウンロード出来たら、展開しよう。

WordPressにfavicon設置

WordPressは非常に簡単に設置が可能。びっくりするくらい簡単だったので、未設置にしておくのは勿体無い。是非設置しよう!
先程一括生成したfaviconから、512*512(px)のサイズを使用する。
WordPress管理画面→外観→サイト基本情報をクリック。”サイトアイコンの画像を選択”または”画像の変更”をクリックし、先程のfaviconの512*512(px)サイズをアップロード。
サイトアイコンのプレビューが表示されれば成功。”保存して公開”をクリックで完了。

favicon設置のまとめ

  • 必ず正方形で作成しよう
  • サイズは推奨サイズより大きめにしよう
  • デザインはシンプルにしよう


参考にしたサイト
【2019年版】Webサイトのファビコンや各種アイコンの正しい設定方法
【2019年版】ホームページのタブ画像(favicon/touch-icon)作成と設定方法まとめ
WordPressでファビコンやアイコンを設定する方法

Category:Web
Tags:,

RSS feed設置の落とし穴!ハマった時の解決策

2019.07.06 |2019.07.07

クハク

RSS feedの設置方法

今回はRSSfeed設置方法と、ハマった時の解決策について書いていく。 まず、wordpressでRSSfeed設置の方法だが、何パターンかある中で今回チョイスした方法は function.phpに以下を そして、RSS feedのボタンに以下のリンクのコード 以上でボタンをクリックし、feed一覧ページに移動すれば成功!

エラーを吐き出す場合は以下を試してみよう!

function.phpの先頭に空行が含まれてないかを確認→ある場合は、改行を消そう。
不可視文字が入っていて、エラーを出している可能性もある。見つけるのが困難な不可視文字。以下のサイトで確認が出来る。
https://validator.w3.org/feed/
不可視文字が原因の場合→テキストエディタで消そう。

RSS feed自体にエラーは見受けられず

そして今回ハマったのは、先程のサイトで問題なしの判断が出るが、feedボタンをクリックするとダウンロードダイアログが出現する。
もしやブラウザがオカシイのかと調べた結果…
私の使用しているforefoxはRSS feedの開発終了。プラグインを追加する事で、feedをブラウザ上で閲覧出来ると。
他のブラウザも見るようにしようと思う。

RSS feed設置まとめ

  • function.phpにadd_theme_support( ‘automatic-feed-links’ );
  • RSSのリンクを設置する
  • RSS feedエラーがある場合はfunction.phpの先頭に空行が無いか、ソースファイルに不可視文字が無いかチェック
  • fire foxブラウザでの挙動チェックの場合、RSS feedプラグインを必ず入れる

今回参考にしたサイト
サイトのRSSフィードが更新されないときの解決方法

WordPressCodex

Gigazine

Category:Web
Tags: