タグ別アーカイブ: Apple

【Chrome】スマホやタブレット端末でファビコン(ショートカットアイコン)を大きく表示させる方法

  • 小
  • 中
  • 大

ファビコン(ショートカットアイコン)って意外とめんどくさい

サイトのイメージを持ってもらうために重要なファビコン(ショートカットアイコン)ですが、その設定は意外とメンドクサイですね。

画像を用意してサーバーにアップロードして、ファイルに記述して、正しく表示されているかどうか確認して…などなど、やらなければならない作業がたくさんあります。小さな画像1つのためになんでこんなに…と思う方もいらっしゃるでしょう。

しかし管理人は、なぜか昔からオリジナルのファビコン(ショートカットアイコン)が好きで、作ったサイト全てに設定するようにしております。

最近気付いたのですが、Safariでは大きなファビコン(ショートカットアイコン)が表示されているにも関わらず、Chromeでは小さなファビコン(ショートカットアイコン)が表示されてしまう場合があるということです。

最近のブラウザのシェアは、Chromeも無視できない水準にまで上がってきましたので、SafariだけでなくChromeにも対応しておいた方が無難です。

今回は、SafariでもChromeでも大きなファビコン(ショートカットアイコン)が表示されるようにする手順についてご紹介したいと思います。



ファビコン(ショートカットアイコン)の大小の差

小さいファビコン(ショートカットアイコン)まずは、Chromeにおける小さなファビコン(ショートカットアイコン)を見てみることにしましょう。

左の画像が小さなファビコン(ショートカットアイコン)の例ですが、小さいですねぇ。天下のFacebook様でも、Chromeでは小さなファビコン(ショートカットアイコン)が表示されてしまっています(記事執筆時現在)。

これを大きくすることで、サイトのイメージを持ってもらったり、サイトを印象に残してもらうために一役買ってくれます。

大きいファビコン(ショートカットアイコン)左に掲載した画像は、当サイトのChromeでのファビコン(ショートカットアイコン)です。シンプルな画像ですが、大きく表示されているため押しやすく、識別もしやすいと思います。

スマホやタブレット端末で、Chromeのファビコン(ショートカットアイコン)が小さく表示されてしまっている場合は、ぜひ大きなファビコン(ショートカットアイコン)に変更しましょう。以下では、その方法をご紹介したいと思います。

小さいファビコン(ショートカットアイコン)を大きくする方法

まずはファビコン(ショートカットアイコン)に設定したい画像をIllustratorなどで作成しましょう。72×72pxぐらいで十分です。

画像が完成したら、「apple-touch-icon.png」という名前で保存し、FTPでサーバーにアップロードしましょう。

ちなみに、PCサイトでブラウザのファビコンも同時に設定したい場合は、30x30pxぐらいで「favicon.png」という画像も用意してアップロードしておきます。

PCとタブレットとスマホ、全てで表示させるテーマを変えている場合、PC以外のテーマに下記の記述をします。テーマを1つしか使っていない場合は、そのテーマのみに記述すれば表示されるようになります。場所はheadと/headの間です。

<head>

<link rel="apple-touch-icon" href="<?php bloginfo('template_url'); ?>/images/apple-touch-icon.png" />

</head>

このように記述することで、SafariでもChromeでも、大きなファビコン(ショートカットアイコン)を表示させることができます。画像のパスは適宜差し替えて下さい。

上記の記述の他に、「apple-touch-icon-precomposed」という記述があると、うまく表示されない場合があります。

PCサイトにファビコンを設置する場合は、下記のように記述します。

<head>

<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.png" />

</head>

こちらも画像のパスは自分のサイトの設計に合わせて適宜差し替えて下さいね。

表示させるテーマ、例えばスマホ用のテーマ、タブレット端末用のテーマ、といった具合に分けている場合、それら全てに個別に画像をアップロードし、テーマファイルに記述するというのがポイントです。

以上が、Chromeでも大きなファビコン(ショートカットアイコン)を表示させる方法でした。



iPhoneでメアドを一瞬で入力する方法(ユーザ辞書の使い方)

  • 小
  • 中
  • 大

新型iPhone(6と6プラス)が発表されましたね

本日(2014年9月10日)に新型iPhoneとAppleウォッチが発表されました。新型iPhoneはiPhone5Sより画面が大きく、決済サービスにも参入し、カメラの手ぶれ補正機能等も向上したようですね。

iPhone6よりiPhone6プラスの方が画面が一回り大きいようです。個人的には、あまり大きい画面のスマートフォンは使いにくいと思いますので、買うなら6の方でしょうかね。

また身の回りのApple製品が増えそうな予感がしている管理人です。次買う時は、32GBで十分な気がします。64GBまで到達する前に新型iPhoneが発売されちゃうから、結局使い切らずに機種変更してしまう…

今回の記事の概要

今回は、新型iPhoneの発表に便乗して、iPhone関連の記事を書いてみたいと思います。

周囲にiPhoneを使っている人は多いですが、ユーザ辞書を使いこなしている人の数が驚くほど少ないので、今回記事にしてみたいと思いました。

作業効率が驚くほど向上しますので、まだユーザ辞書を活用していない方は、是非使ってみることをオススメ致します。

ユーザ辞書を使い倒そう

まさか毎回メアドを1文字ずつ手打ちしていませんよね?

もししていたら、相当時間をムダにしています。そんな方は、今すぐユーザ辞書に自分のメールアドレスを登録して、一瞬で自分のメアドを表示できるようにしちゃいましょう。やり方は簡単。

まず、設定→一般→キーボード→ユーザ辞書と進み、表示される画面の右上の「+」を押します。

ユーザ辞書に単語を登録しよう次に、左の画像のように自分のメアドを入力し、読み方に任意の文字列(3文字ぐらいがオススメ)を入力し、保存をタップします。

保存してユーザ辞書に自分のメアドを登録したら、次回からは任意の文字列を入力するだけで、自分のメールアドレスが予測変換に出現するようになります。先ほどの画像の文字列を登録したら、「めあど」と入力するだけで、「example@docomo.ne.jp」という文字列が出現するようになります。

今回はメアドを登録する方法をご紹介しましたが、メアド以外にもたくさん登録しておくことで、効率的に文章を入力することができるようになります。

難しい漢字や絵文字、よく使う慣用句、読み方がたくさんある漢字で探すのが大変なもの、サイトのURL、数字、よく使うメアド、顔文字、よく使う記号、個人名や会社名等の固有名詞などを登録して読み方を決めておけば、文字を入力するのがスムーズに行えるようになります。

ユーザ辞書をガンガン使いまくってやりましょう!

他のデバイスと一瞬で同期できるので便利

このユーザ辞書、便利なのが、1つのデバイスで登録すると、自分の持っている他のデバイスにiCloud経由で自動的に登録することができるという点です。

例えば先ほどの「example@docomo.ne.jp」と「めあど」という組み合わせをお手持ちのiPhoneで登録したとします。

すると、iCloudでサインインしている自分の他のデバイスのユーザ辞書にも、上記の組み合わせのものが自動的に登録された状態になります。

例えばiPadを持っていたら、iPhoneでユーザ辞書登録したものが、iPadでも使えるようになるということです。iPadだけでなく、iMac、MacBookなどをお持ちの場合、それらのデバイスにも自動的に登録されますので、とても重宝します。

ユーザ辞書以外にも、カレンダーや連絡先も自動的に同期されるので嬉しいですよね。iCloud、マジ便利!