前回の記事の続きです。
⇒勉強する気力がびっくりするくらい湧かないしWordPressでアフィブログ作ろうと思った話

前回のあらすじ

ドメイン取得してレンタルサーバー借りてWordPressインストールしました。
宣伝⇒できたブログ

サーバー設定でやり忘れてたこと

SSLの設定

どうもGoogle先生はSSL設定してないサイトが嫌いみたいなので一応設定しました。
こうするとhttpでもhttpsでもどっちでもアクセスできるようになります。サーバーの管理コンソールからぽちぽちやったらできました。
Secureになって何がうれしいのかはよくわかりません。

WordPressの設定をいじる

SEO対策の設定まわり

だいたいこのあたりのサイトを見ながらやっておきました。

WordPressインストール後すぐやっておきたい６つの初期設定

SEO的にもいいらしいです。

デザインテーマの設定をする

LION BLOGってテーマがイケてるって話だったので使ってみました。
管理用のダッシュボードで検索しても出てこないのでググったら公式っぽいのが出てきました。（はい）
zipがダウンロードできるので何も考えずに解凍したんですけどzipのままぶっこめってなってて少し損しました。
細かい設定はよくわからないのであんまり弄ってないです。

プラグインをいれる

ゴテゴテにプラグイン入れてるサイトもあるみたいですけど重くなるし個人的にも管理しきれないなってことで相当絞ってます。
以下入れたやつ

1. Akismet Anti-Spam
   スパムコメント勝手に消してくれるマン。インストールしたら最初っから入っていたので有効にしておきました。
2. Edit Author Slug
   WordPressで作ってるサイトってURL末尾に/?author=IDをつけるとIDが見れちゃうみたいでそれをガードしてくれます。設定方法はググってください。
3. EWWW Image Optimizer
   画像をいい感じに圧縮してくれる。らしいです。詳しくはわからないですけど位置情報とかも消してくれるみたいなのでこのまま入れておこうと思います。
4. Google XML Sitemaps
   サイトマップのXMLを勝手に作ってくれる？よくわからない子です。おすすめされてたので入れました。
5. All In One SEO Pack SEO対策をあれこれやってくれる。たぶん。これ入れると微妙にサイトのレスポンス悪くなるらしいので入れたくない人はいれなくていいかもです。

Googleにゴマすりをする

Google先生にゴマすりしないとサイトのアクセスが増えないみたいなのでやっておきます。
詳しくはよくわからないんですけどググったらサーチコンソールとGoogleアナリティクスがどうのこうのって書いてあったので登録しておきました。たぶん全然活用できてないです。

おわりに

たぶんここまでやったらまあまあ問題ないページなんじゃないでしょうか。あとはたぶん宣伝用にSNS周りの設定が必要だと思うんですけどめんどくさかったのでやってないです。
クラウドワークスとかでWordPressのページ作成３万とかで受けてる人マジですげーなって思いました。
おわり。

Stylus を使ってサイトデザインを自分好みに変えよう、って話です。今回は GitHub README のスタイルをいじります。

Stylus

Stylus は閲覧するサイトの CSS を変更できるブラウザ拡張機能です。

• Stylus - Chrome ウェブストア
• Stylus – ? Firefox (ja) 向け拡張機能を入手

CSS

ブラウザの開発者ツールを使って変更したい CSS クラスを探し、Stylus に以下を登録します。

.markdown-body h2 {
    margin-top: 2rem;
    border-bottom: solid 1px #FF7F50 !important;
}

.markdown-body h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-left: 0.5em;
    border-left: solid 4px #FF7F50 !important;
}

.markdown-body em {
    text-decoration: underline;
}

.markdown-body strong {
    text-decoration: underline;
}

.Label--outline {
    background-color: #FFA500;
}

こんな感じになります

Before	After

個人的に <h2> と <h3> が判別しにくかったので、色をつけてマージンを追加しています。

あと Private repository のバッジが見にくいので色を付けました。

リポジトリ一覧ページ	個別リポジトリページ

オススメの公開テーマ

Qiita Dark

• Qiita Dark Theme - もう眩しくないよ - Qiita

GitHub Dark

• StylishThemes/GitHub-Dark: Dark GitHub style

サイトデザインに不満があるからといって、サービス運営側に要望を出しても解決されることはまずないでしょうから、オリジナルのスタイルを適用しちゃいましょう。

次のページで行っていることを Arch Linux で確認しました。
絶対つまずかないGulp 4入門（2019年版）

Node.js と npm は既にインストールされているものとします。

$ node --version
v11.12.0
$ npm --version
6.9.0

1) 作業フォルダーの作成

mkdir gulp-test
cd gulp-test

2) package.json の作成

npm init -y

3) ライブラリーのインストール

npm install -D gulp
npm install -D gulp gulp-sass

4) gulpfile.js の用意

gulpfile.js

// gulpプラグインの読み込み
const gulp = require("gulp")
// Sassをコンパイルするプラグインの読み込み
const sass = require("gulp-sass")

// style.scssをタスクを作成する
gulp.task("default", function() {
  // style.scssファイルを取得
  return (
    gulp
      .src("css/style.scss")
      // Sassのコンパイルを実行
      .pipe(sass(
{
          outputStyle: "expanded"
        }
))
      // cssフォルダー以下に保存
      .pipe(gulp.dest("css"))
  )
})

5) css/style.scss の用意

css/style.scss

$split-grid: 3;

@for $i from 1 through $split-grid {
  .col-$i {
    flex: 0 0 100% / $split-grid * $i;
    max-width: 100% / $split-grid * $i;
  }
}

6) css/style.css への変換

npx gulp

css/style.css が作成されます。

css/style.css

.col-$i {
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

.col-$i {
  flex: 0 0 66.66667%;
  max-width: 66.66667%;
}

.col-$i {
  flex: 0 0 100%;
  max-width: 100%;
}

以下は、Chrome 拡張を作成して、指定した URL に対して任意のスタイルシートを自動で適用する方法です。

プロジェクトディレクトリを作成する

$ mkdir -p user_defined_css/www.example.com
$ cd $_

マニフェストファイルを作成する

matches にスタイルシートを適用したい URL を指定。
css に適用するスタイルシートのファイル名を指定。

manifest.json

{
  "name": "www.example.com css",
  "version": "1.0",
  "description": "CSS for www.example.com",
  "content_scripts": [
    {
      "matches": ["http://www.example.com/*"],
      "css": ["style.css"]
    }
  ],
  "manifest_version": 2
}

適用したいスタイルシートを作成する

style.css

div {
  color: green;
}

ファイルツリー

以下の状態にします。

- www.example.com/
    - manifest.json
    - style.css

作成した Chrome 拡張を読み込む

1. chrome:extensions を開く
2. 右上にある「デベロッパー モード」を有効にする
3. 「パッケージ化されていない拡張機能を読み込む」をクリック
4. 最初に作成したディレクトリ (www.example.com) を指定

• 参考

これで新規にページを開いた際に自動的にスタイルシートが適用されます。
スタイルシートを適用したいページをすでに開いていた場合はリロードします。

以下は、Chrome 拡張を作成して、指定した URL に対して任意のスタイルシートを自動で適用する方法です。

プロジェクトディレクトリを作成する

$ mkdir -p user_defined_css/www.example.com
$ cd $_

マニフェストファイルを作成する

matches にスタイルシートを適用したい URL を指定。
css に適用するスタイルシートのファイル名を指定。

manifest.json

{
  "name": "www.example.com css",
  "version": "1.0",
  "description": "CSS for www.example.com",
  "content_scripts": [
    {
      "matches": ["http://www.example.com/*"],
      "css": ["style.css"]
    }
  ],
  "manifest_version": 2
}

適用したいスタイルシートを作成する

style.css

div {
  color: green;
}

ファイルツリー

以下の状態にします。

- www.example.com/
    - manifest.json
    - style.css

作成した Chrome 拡張を読み込む

1. chrome:extensions を開く
2. 右上にある「デベロッパー モード」を有効にする
3. 「パッケージ化されていない拡張機能を読み込む」をクリック
4. 最初に作成したディレクトリ (www.example.com) を指定

• 参考

これで新規にページを開いた際に自動的にスタイルシートが適用されます。
スタイルシートを適用したいページをすでに開いていた場合はリロードします。

やってみたかった。
ただそれだけ。

最近だとSVG使えばこんな小細工いらないですが、あえてHTML要素をぐにゃぐにゃ曲げて作ってみました。

カーソルをホバーさせると上向きの矢印看板を持ってくれます（笑）
よくある右下にあるページトップまでワープするアレ。
【デモ】
https://jsfiddle.net/ahwo3yqb/

もし需要があれば、アレンジなりなんなり自由にしてもらって使ってくださいw

• 何もしていないとき

* カーソルをホバーさせているとき

bear.html

<div class="animal-wrapper">
  <div class="bear animal">
    <div class="bear-head">
      <div class="bear-eyes"></div>
      <div class="bear-face"></div>
    </div>
    <div class="bear-body">
      <div class="bear-item">
        <div class="bear-item-arrow"></div>
      </div>
      <div class="bear-hands"></div>
    </div>
  </div>
</div>

bear.css

.animal-wrapper {
  float: left;
  width: 50px;
  margin: 2px 0;
  zoom: 3;
}

.bear-item {
  visibility: hidden;
  transform: rotate(-45deg);
  position: absolute;
  background: #fff;
  border: solid 1px #333;
  width: 12px;
  height: 12px;
  top: -12px;
  left: -20px;
}

.animal-wrapper:hover .bear-item {
  visibility: visible;
}

.bear {
  margin: 0 auto;
  height: 50px;
  position: relative;
  width: 25px;
}

.bear-head {
  width: 30px;
  height: 22px;
  border-radius: 47%;
  background-color: #E39F58;
  position: relative;
}

.bear-face {
  background-color: #FCB96A;
  position: absolute;
  width: 22px;
  height: 10px;
  border-radius: 20px 20px 16px 16px;
  bottom: 1px;
  left: 4px;
}

.bear-face::before {
  width: 5px;
  height: 2px;
  border-radius: 1px 1px 3px 3px;
  position: absolute;
  content: "";
  left: 8.5px;
  display: block;
  background-color: #4B2D0B;
}

.bear-face::after {
  width: 2px;
  height: 1px;
  content: "";
  display: block;
  position: absolute;
  top: 6px;
  left: 10px;
  background-color: #F24B1F;
  border-radius: 0 0 1px 1px;
}

.bear-head::before, .bear-head::after {
  content: "";
  display: block;
  background-color: #FCB96A;
  border-radius: 50%;
  border: 2px solid #E39F58;
  width: 4px;
  height: 4px;
  position: absolute;
  top: -2px;
}

.bear-head::after {
  right: 0;
}

.bear-body {
  position: absolute;
  width: 15px;
  height: 11px;
  top: 15px;
  background-color: #F9B667;
  left: 7.8px;
  z-index: -1;
  border-radius: 50% 50% 5% 5%;
  box-shadow: inset 0 3px 0 4px #E29E57;
}

.bear-body::before, .bear-body::after, .bear-hands::before, .bear-hands::after {
  background-color: #CB8B4D;
  content: "";
  display: block;
  position: absolute;
  height: 3px;
  width: 4.7px;
  border-radius: 0 0 3px 3px;
  bottom: -3px;
}

.bear-hands::before, .bear-hands::after {
  top: 6px;
}

.bear-hands::before {
  left: -3.8px;
  transform: rotate(90deg);
}

.bear-hands::after {
  right: -3.8px;
  transform: rotate(-90deg);
}

.bear-body::before {
  left: 1px;
}

.bear-body::after {
  right: 1px;
}

.bear-eyes::before, .bear-eyes::after {
  content: "";
  display: block;
  background-color: #3B1F14;
  height: 3px;
  width: 3px;
  border: 2px solid white;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: 7px;
}

.bear-eyes::after {
  left: 16px;
}

.bear-item::before {
  width: 2px;
  height: 10px;
  background: black;
  position: absolute;
  left: 4px;
  top: 13px;
  content: "";
}

.bear-item-arrow {
  transform: rotate(45deg);
  border: 6px solid transparent;
  border-bottom-color: #333;
  position: absolute;
  top: -4px;
  left: 4px;
}

.bear-item-arrow::after {
  content: "";
  background-color: #333;
  width: 6px;
  height: 5px;
  top: 5px;
  position: absolute;
  left: -3px;
}

やってみたかった。
ただそれだけ。

最近だとSVG使えばこんな小細工いらないですが、あえてHTML要素をぐにゃぐにゃ曲げて作ってみました。

カーソルをホバーさせると上向きの矢印看板を持ってくれます（笑）
よくある右下にあるページトップまでワープするアレ。

始めに

flexboxで中央寄せにする場合は justify-content: centerを使うと思いますが、これを使うと以下のように下の部分も中央に並んでしまいます。

これを以下のように全体は中央に揃えつつ、下の部分はきちんと左から並べるようにする方法を紹介したいと思います。

やり方

やり方は単純で、ラッパーとなるflexboxの幅をアイテムが入るギリギリの幅にし、中央寄せにします。
例えばアイテムの幅が120pxの場合、4カラムを表示するには480px必要になります。この時ラッパーの幅を480pxにしてmargin: 0 autoでラッパーを中央寄せにしたら左から並べつつ全体を中央に寄せられます。
5カラムを表示するには600px必要になるので、600pxからはラッパーの幅を600pxにすればいいです。

4カラム、5カラム指定

.flex-center {
  display: flex;
  margin: 0 auto;  // ブロック全体を中央寄せになるように設定
  flex-wrap: wrap;

  // 4カラム表示のためのサイズ設定
  @media only screen and (min-width: 480px) {
    max-width: 480px;
  }

  // 5カラム表示のためのサイズ設定
  @media only screen and (min-width: 600px) {
    max-width: 600px;
  }
}

図で表すとこんな感じになります（この図で伝わるか微妙ですが・・・）

ここまで書いて後はなんとなくわかってきたと思いますが、後は表示したいカラム数ぶんだけ書いていけばいいです。CSSで書くと大変ですが、SCSSですとmixinとループが使えるので、割と簡単にできます。
このやり方の場合、途中でカラム数に限界がきてしまいますが、大体のサイトはmax-widthを設けて中央寄せにすると思うので問題ないと思います。

カラムごとの幅設定をmixinを使って指定

// カラムが収まる幅になるように段階的に調整する
// $column-width: 1カラムの幅
// $max-column: 最大カラム数
@mixin flex-fitting($column-width, $max-column) {
  @for $i from 1 through $max-column {
    @media only screen and (min-width: $i * $item-width) {
      max-width: $i * $item-width;
    }
  }
}

.flex-center {
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;

  @include flex-fitting(120px, 10);
}

終わりに

中央寄せをしつつ中身は左寄せというのは方法がなかなか思いつかなかったのですが、SCSSを駆使すれば比較的簡単に実装することができました。他の人も色々考えているようで、JSや擬似要素を使って空の要素を入れるやり方もありました（参考サイトにリンクを貼りました）。
今回の内容のサンプルコードをCodePenで書いたので、実装の詳細はこちらを参考にしてみてください。

See the Pen flex centering by wintyo (@wintyo) on CodePen.

参考サイト

• Flexbox で全体を中央に配置しつつ最後の行を左揃えにする
• Flexboxで最後の行を左寄せにレイアウトする