Zenn
🔖

自作ウェブサイト「加藤祐介ブログ」を始めました

2023/04/09に公開
CSS
HTML
ブログ
ウェブサイト
tech

はじめに

ブログを一本に絞りたくて、自作ブログを始めてみました。

URL

こちらが作成した「加藤祐介ブログ」です。
https://yusukekato.jp/

特徴

  • シンプル
    • HTMLとCSSを直書きしただけ
    • 必要最低限のことだけ記述
  • 運用しやすい
    • GitHubで管理
  • 執筆しやすい
    • HTMLを書いてGitHubにPushするだけ
    • 今のところサーバ側でPullする必要あり

HTML

シンプルに作りたかったので、最低限のHTMLを書きました。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <link rel="icon" type="image/jpg" href="./BlueTreeIcon.jpg">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  </body>
</html>

コードを記述するときは以下のように書きます。

<pre>
<code>
p=.png;c=convert;longcat -o a$p;$c xc:[500x500] b$p;for((i=360;i<720;i+=10));do $c a$p -rotate +$i c$p;t=$(echo "($i-540)*3.14/180"|bc -l);$c b$p c$p -gravity center -geometry +$(echo "-99*s($t)"|bc -l)+$(echo "99*c($t)"|bc -l) -composite i$i$p;done; $c i*$p images/a.gif
</code>
</pre>

画像を表示するときは以下のようにimgタグをdivタグで挟みます。

<div class="img">
<img src="20230408.gif">
</div>

CSS

CSSも必要最低限のことだけを書いています。

テキストの折り返し設定とページ幅の設定が重要です。

html {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
}

.img {
  text-align: center;
}

pre {
  white-space: pre-wrap;
}

@media screen and (max-width: 999px) {
  html {
    width: 90%;
    font-size: 200%;
  }
}

おわりに

自作ブログを作ったので紹介しました。

これからよろしくお願いいたします。

Discussion