投稿者: ujino@accorder.co.jp

文字コードの記号・アイコンを使う方法



アイコンを文字コードで使用する方法です。
メリットは、色や大きさをCSSで変更できる点です。また文字なので、大きくしてもアイコンの画像は荒れません。

参考サイト：http://fontawesome.io/icons/

【１】以下のGithubよりセットをダウンロードしてください。

https://gitlab.com/accorder/accorder_library/tree/master/07.%20html_css/%E6%96%87%E5%AD%97%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%92%E4%BD%BF%E3%81%86

セット内容の
/fonts フォルダ以下
/css/font-awesome.min.css 　をサイトにコピー

【２】<head>に追加する項目 
<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all"> <!--フォントアイコン使う-->

【３】<body>に追加する項目

classのfa の後ろに入れたいアイコンの名前を入れる。（サイトに一覧が載っています。）
<i class="fa fa-angle-down" aria-hidden="true"></i>

【４】cssファイルで以下の様に i 要素を変更する。色や大きさ等を設定できる
.products_list li i { display:block; font-size:26px; color:#fff; }

OGPタグ設定：SNSにシェアする方法（FB,ツイッター,LINE）

◆ OGP（Open Graph Protocol）設定方法◆

OGP（Open Graph Protocol） は、Facebook、Google+、Twitter、mixi、GREEなど全てのSNSで共通の機能です。 参考サイト：http://webdesign.practice.jp/ogp-facebook-twittercards

１．まず最初に、OGP用のプロパティの初期設定を <head>要素の prefix属性で書いておきます。

コレが無くてもOGPは認識されるのですが、書くのが正式です。 
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
 

２．OGPの必須プロパティ

<head>タグの中に以下を記述 
<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="article"> <!--またはwebsite, blog-->
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="画像のURL">
【OGPのオプションプロパティ】 site_nameとdescriptionは重要 
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="ページのディスクリプション">

<meta property="og:audio" content="音声ファイルのURL">
<meta property="og:video" content="動画ファイルのURL">
<meta property="og:locale" content="ローカル言語。デフォは en_US">
<meta property="og:locale:alternate" content="翻訳のための他言語">
<meta property="og:determiner" content="タイトルの前に付く単語">
 

３．Facebook専用のプロパティ（必須ではないです）

App-IDの取得方法は、http://webdesign.practice.jp/ogp-facebook-twittercards#pt5 FacebookのApp IDの取得について。 この工程は、 [1]　Facebookの「開発者（デベロッパー）登録」して、 [2]　サイトごとに「App（アプリ）」を登録して「App ID」を取り、 [3]　そのアプリを公開モードにする 
<meta property="fb:app_id" content="App-ID（15文字の半角数字）">
 

４．Twitter Cardsの記述

１行目の twitter:card にはカードの種類を書きます。 summary：デフォルト。「タイトル、説明、サムネイル、Twitterアカウント」が表示される。 summary_large_image：Summaryの画像が大きいバージョン。 photo：写真のみ。Twitterで写真を投稿した時のような表示に。 gallery：4つの写真を表示。 ２行目の twitter:site は必須ではないので、書かなくても可。 カードのフッターに「@[Twitter ID]」が表示されるだけみたいです。 
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@[Twitter ID]">（必須ではないです）
—————————————————————– 以上の記述をまとめると以下になります。 
<!DOCTYPE html>
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
 
<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="article">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="画像のURL">
<meta property="og:site_name"  content="サイト名">
<meta property="og:description" content="ページのディスクリプション">
<meta property="fb:app_id" content="App-ID">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@[Twitter ID]">
 
</head>
 

５．OGP画像のサイズは 600x315px以上で

少なくとも600x315px以上、推奨は1200x630pxかそれ以上。横長（1.91:1）の画像表示 ※普通の画像をアップしたら勝手にリサイズして表示されます。

６．Facebookの Open Graph Debuggerで設定を確認

https://developers.facebook.com/tools/debug/

７．Twitter Cardsの設定の確認

https://cards-dev.twitter.com/validator  

◆ LINEでおくる設定方法 ◆

LINEアプリが入っているスマートフォン等で、そのままアプリを起動して記事の内容を送る方法。 %0D%0A　は改行コードです。 <img>には、LINEで送るアイコンが入ります 
<a href="http://line.me/R/msg/text/?ここにページのタイトル%0D%0Ahttp://www.accorder.co.jp/xxxxxx/xxxx.html"><img src="images/xxxxxxx.png" width="44" alt="LINEで送る"></a>

◆ Pocketでシェアする方法 ◆

参考：https://creatorclip.info/2014/01/sns-btn-original-design/ 
<a href="http://getpocket.com/edit?url=共有したいＵＲＬ&title=ページタイトル" onclick="window.open(this.href, 'FBwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;">Pocket</a>

インスタグラムのサイト表示方法

１．ユーザーIDの取得 
Find an Instagram User ID
http://www.otzberg.net/iguserid/
 インスタの写真を右クリックURLをコピー＞このサイトに貼り付ける
２.　アクセストークンを取得 
インスタグラムのユーザーページ下APIをクリック
 https://www.instagram.com/developer/

にて登録していく。
 ここで最後にでてくるCLIENT IDと、URLを以下の部分にコピ―してサイトを表示

アクセストークンを入手
 https://api.instagram.com/oauth/authorize/?client_id=「CLIENT ID」&redirect_uri=「REDIRECT URI」&response_type=token

サイトがひょうじされたら、アドレス部分に
 http://www.penguin-dou.com/#access_token=0000000000000

とアクセストークンが表示される。
３．インスタフィードからダウンロード　＞　表示 
instafeed.js
 http://instafeedjs.com/

ヘッダー部分に記述
 ここで、１で取得したUSER IDと、アクセストークンをいれる。
 <!-- Instagram -->
 <script type="text/javascript" src="js/instafeed/instafeed.min.js"></script>
 <script type="text/javascript">
 var feed = new Instafeed({
 get: 'user',
 userId: 2073854337,
 limit: 6,
 resolution: 'low_resolution',
 accessToken: '2073854337.a6d2df7.947fe427d0c24cefa608875f0bed6629',
 template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" width="200" height="200" /></a></li>'
 });
 feed.run();
 </script>
 <!-- Instagram -->

表示させたい部分に
 <ul id="instafeed"></ul>

を記述。

ファビコン作成方法

サイトのタブに表示されるファビコンの作成方法です。

【１】サイズは 16px × 16px 、32px × 32px で制作する

ファビコンはサイトのタブに表示される他にIEでのブックマーク時のアイコンにもなるので 16px × 16px 、32px × 32px のふたつをマルチアイコンとして制作します。（サイズは16px、32pxの２種類で十分ですが厳密に制作する場合は各サイズを全て制作しマルチアイコンにする事もできます。）
  • 16px × 16px：IEのタブ
  • 24px × 24px：IE9の「ピン留め機能」
  • 32px × 32px：Chrome、Firefox、Safariなどのタブ
  • 48px × 48px：Windowsのサイトアイコン
  • 64px × 64px：高解像度のWindowsサイトアイコン

【２】マルチアイコンファイル作成手順

.png .jpg .gif　等でファビコンを制作して、.ico形式のマルチアイコンに変換してくれるサイトで変換します。 マルチアイコンにする場合はpng等で書きだしてから下記サービスを利用します。

◆ 複数マルチアイコンを作ろう！　　https://ao-system.net/alphaicon/

【３】ファビコンの表示設定

サイトのルートフォルダに作成したマルチアイコンを保存します。（例:favicon.ico）

HTMLのheader内で、ファビコンの表示を記述します。

<link href=”/favicon.ico” rel=”SHORTCUT ICON” type=”image/x-icon”>

 

Dreamweaver 保存時のサーバーアップ手順

Dreamweaverで作業をして保存しサーバーにファイルをアップする際、 Cmd＋Shift＋U　でサーバーにアップされます。 その際、保存ファイルの関連ファイル（CSS,JS）などもアップするかどうかの設定は a%c2%82%c2%b9a%c2%82%c2%afa%c2%83aa%c2%83%c2%bca%c2%83%c2%b3a%c2%82%c2%b7a%c2%83%c2%a7a%c2%83%c2%83a%c2%83%c2%88-2016-10-05-14-20-06 a%c2%82%c2%b9a%c2%82%c2%afa%c2%83aa%c2%83%c2%bca%c2%83%c2%b3a%c2%82%c2%b7a%c2%83%c2%a7a%c2%83%c2%83a%c2%83%c2%88-2016-10-05-14-21-01 の「依存ファイルを常に自動保存する」チェックをはずしてください。