名刺　兼　ストアカード風

1. 理念など　活動説明　場所
2. エンブレム ＝ Logo
3. 氏名
4. メールアドレス
5. HP　LINE　TEL

デザイン案

• ベーシック　横
• ベーシック　縦
• ストアカード風
• 表（裏）はロゴのみ

#FFFFFF Sample Text 1234

#2C4F66

ここ #f2f2f2

カラーは表示できない…

sample text Color red

DBの準備

既存のサイトからの流用の場合は、インポートする

root
localhost

DBの作成
DB NAME
DB PASS

既存のサイトの、DBをエクスポートする（ダウンロード）
開発のサイトの、DBにインポートする

フォルダの設置
wp-config.phpの編集
DB

wordpressディレクトリの直下に設置
ドメインの書き換え

2026/04/17
Website

WordPress

2018.12.12

1. 画像の準備
2. コードの追記

Webサイトで用意しておくべきアイコン画像

700px and 180px

ファビコン(favicon)
スマホ用アイコン(apple-touch-icon)
Windows8, 10用アイコン

head

<link rel="icon" href="./favicon.ico">
 or
<link rel="icon" type="image/png" href="/favicon.png">
 or
<link rel="icon" href="/asset/img/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/asset/img//touch-icon.png">

Windows

<meta name="application-name" content="{サイト名}"/>
<meta name="msapplication-square70x70logo" content="small.jpg"/>
<meta name="msapplication-square150x150logo" content="medium.jpg"/>
<meta name="msapplication-wide310x150logo" content="wide.jpg"/>
<meta name="msapplication-square310x310logo" content="large.jpg"/>
<meta name="msapplication-TileColor" content="#FAA500"/>

これいつだろ？メモに残ってたけど

small mobile
mobile
tablet
desktop
…
これは、大きさで分けた方がいいような気もする

例えば、
320 – 375 – 640 – 800 – 1024
デザインのパターンは
A B C パターン
S　M　L　の方がわかりやすい？
S : max-width: 374px
M : 指定なし
S : min-width: 640px

br.br-on-on-off : 639pxまで改行する

/* 画面幅が 768px 以上の時に適用（タブレット・PC） */
@media (min-width: 768px) {

含んでるね

/* 画面幅が768px以下の時に適用 */
@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

含んでるね

on-on-

Ex ) br
モバイルでは改行ディスクトップでは改行しない

moblie = on
desktop = off

 表示する量による

少ない場合、多い場合で、手間を考えて作る

iOS

– metal

android

– View

– Surface View

– openGL ES

HTML5

– canvas (javascript)

– openGL

– jpeg

– gif

スマホサイト

PCサイト

androidアプリ

iOSアプリ

色々調べた比較

描画速度

量

– 少

– 多

	環境	手間	量 – 多い
Metal	iosのみ	9	OK
view	androidアプリのみ	3	NG
surfaceView	androidアプリのみ	4	NG
openGL ES	広く使える	8	NG
canvas	ブラウザ  android	5	NG
openGL	広く使える	8	NG
jpeg gif	広く使える	5	5

---

問題点は

jpeg、gif　では、準備する画像が多くなる上表示するサイズが固定ではない「迷う、曖昧になる」ため明確なロジックが説明できない。