2021-12-09

最近飲んでる酒【バーリアル】

beer

www.topvalu.net

これです。
これの青いやつ「バーリアルリッチテイスト」。

350ml 1本税込85円

安い美味いで文句なし。
この前の酒税が増えて値上がりしても懐の痛まない価格。
ほんとありがたい。

発泡酒は値下げして発泡性は値上がりしたから
キリンの淡麗も一緒に買ってる。

普通に金麦だけ買ってるよりは安いような。

でも結局プラマイゼロかな。

最後は「こだわりレモン酒場」の追いレモンでAlc 5%のロング缶を飲んで寝る。

これがいつものルーティン♪

イオンのトップバリュー酒でも記録していこうか。
まずは「バーリアル」から攻めて、次はウィスキーかな？

話変わるけど、同じ発泡性（第３のビール）ばっか飲んでると急にマズく感じて銘柄チェンジします、2ヶ月に1回くらい。

金麦だったりのどごし生だったり本麒麟だったり。

2021-11-24

WordPressテーマ作成

wordpress

シンプルなブログテーマの作り方。

必要なファイルはindex.phpとstyle.cssの２つ。

テーマの名前はとりあえず「myblog」で。

/*
Theme Name: myblog
*/
@charset "utf-8";

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>myblog</title>
</head>
<body>
    
</body>
</html>

各ページでヘッダーとフッターを使いまわせるようにindex.phpをheader.phpとfooter.phpに分けます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
    <title><?php the_title(); ?></title>
       <?php wp_head(); ?>
</head>
<body>

<?php wp_footer() ?>
</body>
</html>

<?php get_header(); ?>

<!-- サイトの内容 -->

<?php get_footer(); ?>

これで準備完了。

投稿を表示させよう

index.php内に以下のコードをコピペしてください。

<?php if ( have_posts() ) : ?>
  <?php while( have_posts() ) : the_post(); ?>
            <span><?php the_time('Y年n月j日'); ?></span>
      <h2><?php the_title(); ?></h2>
      <p><?php the_content(); ?></p>
            <hr>
  <?php endwhile;?>
<?php endif; ?>

完成

index.php

<?php get_header(); ?>

<?php if ( have_posts() ) : ?>
  <?php while( have_posts() ) : the_post(); ?>
            <time><?php the_time('Y年n月j日'); ?></time>
      <h2><?php the_title(); ?></h2>
      <p><?php the_content(); ?></p>
            <hr>
  <?php endwhile;?>
<?php endif; ?>

<?php get_footer(); ?>

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sanitize.css">
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
    <title><?php the_title(); ?></title>
    <?php wp_head(); ?>
</head>
<body>
    <header style="text-align: center;">
        <h1><?php bloginfo( 'name' ); ?></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

footer.php

<footer style="text-align: center;">
    <small>
        2021 @ <?php bloginfo( 'name' ); ?>
    </small>
</footer>

<?php wp_footer() ?>
</body>
</html>

style.css

/*
Theme Name: myblog
*/
@charset "utf-8";
html {
  max-width: 100vw;
}
body {
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  max-width: 100vw;
  width: 720px;
  padding: 0 12px;
  margin: 0 auto;
}
a {
  color: #06f;
}
a:hover {
  opacity: 0.7;
}
img {
  max-width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav a {
  margin: 0 8px;
}

備考

cssフォルダにsanitize.cssを入れて、header.phpから読み込んでます。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sanitize.css">

以上でWordPressで簡単なブログサイトのテーマを作成してみました。

これ以外に

トップページ
記事一覧
アーカイブ
個別ページ
404ページ
個別記事ページ

など色々作っていくともっと凝ったブログを作ることも可能。

その他の基本

リンク

<a href="<?php echo home_url(); ?>">

固定ページへのリンク

<a href="<?php echo home_url(); ?>/スラッグ名">

画像のパス

<img src="<?php echo get_template_directory_uri(); ?>/images/headline_01.png">

header.phpの読み込み

<?php get_header(); ?>

sidebar.phpの読み込み

<?php get_sidebar(); ?>

footer.phpの読み込み

<?php get_footer(); ?>

プラグインが正しく動作するために

<?php wp_footer(); ?>
</body>

ログイン時に上部に管理バーが表示されない場合はwp_footerが抜けている時が多い。

2021-09-17

Express-generatorとEJSとSocket.io でチャット作成

node.js

node.js初心者です。

expressとsocet.ioでチャットを作る方法はたくさん見つかりますが、express-generatorでチャットを作る記事はなかなか見つかりません。

そんな中、こちらの記事を参考にさせていただきました。

gup.monster

こちらの記事ではsocket.ioのバージョンが2.3.0ですが

自分はsocket.io 4.2.0でインストールしていて、コピペしたままだとエラーでうまく動きませんでした。

その他のバージョンですが

node v12.18.0
express@4.16.4
socket.io@4.2.0
ejs@2.6.2

動くように修正したポイントは２カ所です。

/models/chat.js

/models/chat.jsの4行目あたり

const sio = socketio.listen(server);

この行でエラーが発生していました。

調べたところ、新しいsocket.ioはlisten()メソッドが使えなくなったようです。

新しいバージョンでは

const sio = socketio(server);

が正しい記述法となるようです。

▼参考

Node.js - node.js の socket.io listen でエラーが発生します。｜teratail

/views/index.js

次に、/views/index.js で読み込んでいるCDNのsocket.ioのバージョンを4.2.0に書き換えます。

16行目あたり

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>

▼修正

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.2.0/socket.io.js"></script>

自分の場合は上記２カ所の修正で動くようになりました。

チャットにいろんな機能を追加していきたいのですが道のりは長そうです。

ユーザー登録・認証機能

チャットルーム分け

チャット内容保存

チャット内容編集・削除

データベース使ったりセキュリティとか考えないとダメなんだろうけど、全然その域にまで達してないので一つ一つ作れるように頑張ってまいります。

おわり

2021-09-16

Markdown記法試してみた。

ソースコードを試す。

HTML

  <p class="content">段落</p>

```html
<p class="content">段落</p>
```

CSS

.content {
  color: #0000ff;
}

```css
.content {
color: #0000ff;
}
```

Javascript

const hoge = document.querySelector(".content");

```javascript
const hoge = document.querySelector(".content");
```

学び

```のあとに言語を指定するとシンタックスハイライトしてくれる。
```のまえに\を入れるとエスケープできる。
htmlのソースコードをマークダウン記法を表示させるとき<は<pにしないとうまく表示されない。

以上、Markdown記法試してみたでした〜。

2021-09-16

初投稿

はじめまして、●●●●です。

よろしくです。

今回はいろいろ試してみました。

大見出し
- 中見出し
- はてなブログとは

大見出し

標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準太字太字標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準

中見出し

太字太字標準太字太字標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準

小見出し

標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準標準

beerpleasedontgoのブログ

箇条書き

12345
67890
あかさたな
はまやらわ

番号付きリスト

誠実
友情
礼儀
親切
快活
質素
勇敢
感謝

はてなブログとは

はてなブログは、あなたの思いや考えを残したり、
さまざまな人が綴った多様な価値観に触れたりできる場所です。

Beer please don't go

酒のアテにもならない話。