カミュプリィの雑多なメモ

タグ: HTML

  • [HTML]サイトアイコン（ファビコン）を設定します

    [HTML]サイトアイコン（ファビコン）を設定します

    　ウェブサイト毎に独自のアイコンが設定されているサイトを目にしますが、ワードプレスのアイコンをそのまま使っているサイトも見かけます
    　このアイコンを変更してみましょう

    画像

    　サイズが異なる画像（シンボル）がいくつか必要になります

    favicon.ico（ふぁびこん）

    　縦横ともに48ピクセルの画像で用意します
    　ファイルをFTPでサイトのルートフォルダに保存します
    例：www.commuply.co.jp/favicon.ico

    apple-touch-icon.png

    　縦横ともに180ピクセルの画像で用意します
    　ファイルをFTPでサイトのルートフォルダに保存します
    例：www.commuply.co.jp/apple-touch-icon.png

    サイトアイコン

    　縦横ともに150ピクセル以上のアイコンを用意しましょう
    　検索エンジンは48ピクセルの倍数がよいそうなので、48ピクセルの4倍にあたる192ピクセルにします

    HTMLファイルのばあい

    HTMLの<head>の中に次の行を書きます。

    <link rel="icon" href="/favicon.ico.ico"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

    WordPress（ワードプレス）のばあい

    　[メディア]に192ピクセルの画像を登録します

    　192ピクセルの画像を、[外観]からテーマの[サイトアイコン]を設定します。テーマ毎に具体的な設定場所が異なります

    　[Ogp Plus]プラグインを登録して、デフォルトOGP画像に192ピクセルの画像を登録します

    　[Head & Footer Code]プラグインを登録して、[HEAD Code]欄に次のコードを登録します

    <link rel="icon" href="/favicon.ico.ico"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

    BaserCSM（ベーサーシーエムエス）のばあい

    サイトのフォルダ/app/webroot/favicon.icoを更新します。

  • [HTML]テンプレート

    　HTMLの書き方は人それぞれ多種多様ではないかとおもいます。
    しかしながら初めてHTMLを書こうと思い立ったひとは、やることが多すぎて困ってしまうのかなとおもいます。
    そんなわけでこんな感じでどうでしょうか？というテンプレートをつくってみました。

    <!doctype html>
    <html lang=”ja”>
    <head>
    <meta charset=”utf-8″>
    <meta name=”viewport” content=”width=device-width,initial-scale=1″>
    <meta name=”description” content=”ページの要約”>
    <meta name=”keywords” content=”キーワード1,キーワード2″>
    <title>ページのタイトル</title>
    <link rel=”shortcut icon” href=”./favicon.ico”>
    <link rel=”stylesheet” href=”./スタイルシートのファイル名.css”>
    <script type=”text/javascript” src=”./スクリプトのファイル名.js”></script>
    <meta property=”og:site_name” content=”サイト名”>
    <meta property=”og:type” content=”website”>
    <meta property=”og:url” content=”サイトのパス”>
    <meta name=”twitter:card” content=”summary”>
    <meta name=”twitter:domain” content=”サイト名”>
    </head>
    <body>
    <header>
    /* ここにページの上部を書く */
    </header>
    <main>
    /* ここにページの本文を書く */
    </main>
    <footer>
    <small>Copyright &copy; 2022 <a href=”著作者のサイトのパス”>著作者名</a></small>
    </footer>
    </html>

  • [HTML]改行をそのまま表示します

    改行を含んだ値を、そのまま表示するには次のようにします。

    <pre>値<pre>

  • [PHP]お問い合わせフォームをつくりました

    　HTMLとPHPをつかって、お問い合わせ内容をメールで送信するものをつくりました。

    HTML

    <form action="PHPファイル名.php" method="post">
    
<p>ご返信先メールアドレス<br>
    
<input name="email" type="email" size="40"></p>
    
<br>
    
<p>ご用件を教えてください<br>
    
<textarea name="body" required cols="40" rows="6" placeholder="ウェブサイト作成のご依頼ほか"></textarea></p>
    
<p><input type="submit" value="送信"></p>
    
</form>

    PHP

    <!doctype html>
    
<html lang="ja">
    
<head>
    
<meta charset="utf-8">
    
</head>
    
<body>
    
<main>
    
<?php
    
$email = $_POST['email'];
    
$body = $_POST['body'];
    
mb_language("Japanese");
    
mb_internal_encoding("UTF-8");
    
$headers = "From: $email";
    
mb_send_mail($email, "お問い合わせ", $body, $headers);
    
print ("お問い合わせありがとうございます");
    
?>
    
</body>
    
</html>