Mac標準アプリだけでfavicon.icoを作成する

Macの標準だけでfavicon.icoをした時のメモ。

macOSバージョン

• macOS Big Sur バージョン11.3.1

favicon.icoの作り方

1. Keynote.appを開いて適当な図を作成し、図をコピーする
2. プレビュー.appで「クリップボードから新規作成」を開く
3. ツール->サイズを調整を選択し、幅と高さを48ピクセルにする
4. ファイル->書き出すを選択し、フォーマットでMicrosoftアイコン、書き出し名にfavicon.icoを入力し、保存
5. favicon.icoができた

favicon.icoを作ってみる

1. Keynote.appを開いて適当な図を作成し、図をコピーする
2.  プレビュー.appで「クリップボードから新規作成」を開く
3. ツール->サイズを調整を選択し、幅と高さを48ピクセルにする
   • Googleの検索結果を意識するならサイズは48ピクセルの倍数がよいそう

     • Define Website Favicon for Search Results | Google Search Central

4.  ファイル->書き出すを選択、フォーマットでMicrosoftアイコンを選択、書き出し名にfavicon.icoを入力し、保存 
   • フォーマットにMicrosoftアイコンが出ない場合、フォーマットのプルダウンをoption+クリックすると出てくる
5. favicon.icoができた

   

   
    

ブラウザ標準機能だけでページ全体をキャプチャする Edge

拡張機能を使わずに、ブラウザの標準機能だけでスクロール付きの画面をキャプチャしたい時のメモ。

ブラウザバージョン（2021/11/14 現在の最新）

• バージョン 95.0.1020.53 (公式ビルド) (x86_64)

Macの場合

1. command⌘+shift+S

2. 「ページ全体をキャプチャ」を選択

Windowsの場合

1. Ctrl+shift+S

2. 「ページ全体をキャプチャ」を選択

Macで試してみる

1. command⌘+shift+Sでキャプチャのメニューを開く

2. 「ページ全体をキャプチャ」を選択

3. 結果

ブラウザ標準機能だけでページ全体をキャプチャする Safari

拡張機能を使わずに、ブラウザの標準機能だけでスクロール付きの画面をキャプチャしたい時のメモ。

ブラウザバージョン（2021/11/14 現在の最新）

• バージョン14.1 (16611.1.21.161.6)

Macの場合

1. command⌘+option+I

   • 開発者ツールを開けない場合はSafariのメニューから「Safari」->「環境設定」->「詳細タブ」から「メニューバーに”開発”メニューを表示」を有効にします

2. 「要素タブ」を選択

3. htmlタグを右クリック（control+クリック）し「スクリーンショットを取り込む」を選択

Windowsの場合（確認していません）

• Safari for Windows は既にAppleから提供されていないようなので今回は確認していません、インストールする手段はあるかもしれないですが。。

  • 参考：Where can I download Safari for Windows? - Ask Different

Macで試してみる

1. command⌘+option+Iで開発者ツールを表示

2. 1. 開発者ツールを開けない場合はSafariのメニューから「Safari」->「環境設定」->「詳細タブ」から「メニューバーに”開発”メニューを表示」を有効にします

3. 「要素タブ」を選択

4. htmlタグを右クリック（control+クリック）し「スクリーンショットを取り込む」を選択

5. 結果

   

ブラウザ標準機能だけでページ全体をキャプチャする Firefox

拡張機能を使わずに、ブラウザの標準機能だけでスクロール付きの画面をキャプチャしたい時のメモ。

ブラウザバージョン（2021/11/14 現在の最新）

• 94.0.1 (64 ビット)

Macの場合

1. 右クリック（control+クリック）し「スクリーンショットを撮影」を選択

2. 「ページ全体を保存」を選択

Windowsの場合

1. 右クリックし「スクリーンショットを撮影」を選択

2. 「ページ全体を保存」を選択

Macで試してみる

1. 右クリックし「スクリーンショットを撮影」を選択

2. 「ページ全体を保存」を選択

3. 結果

   

ブラウザ標準機能だけでページ全体をキャプチャする Chrome

拡張機能を使わずに、ブラウザの標準機能だけでスクロール付きの画面をキャプチャしたい時のメモ。

ブラウザバージョン（2021/11/14 現在の最新）

• 95.0.4638.69（Official Build） （x86_64）

Macの場合

1. command⌘+option+I

2. command⌘+shift+P

3. 検索窓で「screenshot」と入力し「Capture full size screenshot」を選択

Windowsの場合

1. Ctrl+shift+I

2. Ctrl+shift+P

3. 検索窓で「screenshot」と入力し「Capture full size screenshot」を選択

Macで試してみる

1. command⌘+option+Iでデベロッパーツールが表示される

2.  command⌘+shift+Pで検索窓が表示される 

   

3. 検索窓で「screenshot」と入力し「Capture full size screenshot」 を選択

   

4. 結果

Hatena Blog に登録してみました

日々学んだこと、体験したことをアウトプットしたいと思い、どこでアウトプットするか？を探していたところ、とても素敵な記事がありました。

WordPressで作る方法、ブログサービスで作る方法などなど紹介されていましたが、私はコストとお手軽さの観点でHatena Blogを利用することに決めました。無理せずマイペースで書いていこうと思います。

applis.io