ただいまの人気記事はこれ!おすすめ記事いろいろ

【Markdown】無料はてなブログからWordPress Cocoon移行,比較

hatenablog-wordpress-cocoon-markdown-thumnailWeb制作/Webサービス
コウシ
コウシ

3度目のサイト引っ越し。王国騎士ロボットのコウシ(@koshishirai)だ!

はてなブログからWordPressへの移行記事が死ぬ程情報が溢れているが, Markdown難民のための処置がほとんど見受けられなかった.

実際に起こった悩み

・ 個人サイトで最安なサーバーとドメインは何か?
・ WordPress高速テーマは, 結局どれ...
・ コードがシンタックスハイライトできない
・ どのMarkdownプラグインがおすすめか
・ HTMLやMarkdown変換の挙動がおかしい
・ 吹き出し使えたり, 使えなかったり.
・ はてなブログでの記法とWordPressとの違いとは

WordPressでMarkdown環境を構築するには若干の手間があったが, はてなブログよりも書くのがさらに楽しくなった.

Markdownで無ければ生きていけない私のための覚書ですが, お役にたてば幸いです.

移行動機

  • 無料はてなブログでGoogle Adsenseに敗北した. サイトマップ停止の絶望.
【2020年6月】無料はてなブログGoogle Adsense合格失敗物語 サイトの停止または利用不可の絶望
無料はてなブログでGoogle Adsense合格するために約3か月間挑戦しましたが無理ゲーでした.価値の低い広告枠,コロナの影響でサイトを審査できません,サイトの停止または利用不可問題はどうあがいても解決できない.GoogleAdsenseと無料はてなブログの相性は本当に悪かったからです.
スポンサーリンク

WordPressテーマ「Cocoon」選定理由

  • PageSpeed Insightのスコアが高得点
    • 高速ページかつ高スコアだと気持ちいい
  • テーマのカスタマイズやマニュアルの情報量が多い
    • 機能の便利さに頼りたい
  • テーマのデザインが好み
    • モチベーション維持に必要不可欠

PageSpeed Insightのスコアが高得点

WordPress 高速テーマ調査手順

  1. 今頭に思い浮かぶ方のWordPressサイトを調査.
  2. PageSpeed Insightに3回かける
    • 平均スコアが高いサイトを上位に並べる
  3. スコアが腑に落ちないので再調査・測定
    • スコアはプラグイン, サーバー, 時間帯などの状態により変動する.
    • 面白くてつい計40サイトに達した
  4. モバイル70, パソコン90以上のサイトに絞る
  5. 早いテーマが見えてくる
  6. 「テーマ カスタマイズ・評判・メリット・おすすめ」などでggる
  7. Cocoon」に決定

PageSpeed Insight 測定結果(2020.06.09), 降順

Theme1回目2回目3回目1位サイト(私圏内)最安価格
JIN90,9589,9589,95kaisen-boy.com¥14,800(税込)
SANGO73,9372,9476,93infornography.blue¥11,000(税込)
THE THOR71,9472,9364,92hiroyukisuzuki.com¥14,800(税別)
Cocoon67,9560,9761,97noshilog.com無料
Xeory Base57,9452, 9551,95saruwakakun.com無料
Manablog Copy69,8766,6666 ,66manablog.org¥6,980(税込)
JSTORK45,8361,8342,84made-in-hashimo.com¥11,000(税込)

テーマのマニュアルやカスタマイズの情報量が多い

Cocoonのマニュアルページがすごい。

テーマ利用マニュアル
テーマの利用方法を見やすく一覧にしたマニュアルです。
  • 公式情報やカスタマイズの解説ブログが非常に多いのが良い
  • みんなで問題を解決していくスタイル好き
  • 進化している
  • テーマの独自仕様 Cocoon設定が簡単
    • URLだけでブログカード作れる
    • ショートコードが便利
    • 吹き出しや目次ができる
    • アクセス解析によって関連記事を選んでくれる

テーマのデザインが好み

noshilog.com

  • こちらのスマホ表示がシンプルな記事一覧の表示とロゴの組み合わせが今一番好みだった.
  • 真似したくなった.

hatenablog-wordpress-cocoon-markdown_1

ロリポップ ムームードメイン契約

ロリポップとムームードメイン, この組み合わせが私に合う最安プランだと判断.

ドメインとサーバーの相性が良さそう.(実際良かった)

初期費用 計 ¥2926円.

1年間運営した場合: 4576円

ドメインとサーバーを購入したら, 当日すぐ使えるようになる.

レンタルサーバーはロリポップ

レンタルサーバー私条件

・ WordPress可 → 主にブログ
・ 無料SSL(共有SSLでOK, 自動更新あり) → 「保護されていない通信」回避
・ セキュリティ・安全性 → 設定やプラグインなどで何とかやってみる
・ 最安価格 → 維持費
・ 知名度・評判 → 企業の信頼性. 88serverみたいな破格なところは使いにくそう.

レンタルサーバーは, この3つの中で迷った.

サーバーロリポップさくらのレンタルサーバエックスサーバー
月額(税別)ライトプラン 250円〜スタンダード 524円~X10 1,000円
容量50GB80GB200GB
WordPress
WebサーバーApachenginxnginx
ストレージHDDHDD ※DBはSSDSSD
転送量100GB/日80GB/日70GB/日
サポートメール電話・メール電話・メール
初期費用1,500円1,048円3,000円
公式サイトロリポップ!さくらのレンタルサーバエックスサーバー
  • エックスサーバーは評判は良いが, 長期的に見ると高すぎる
  • さくらのレンタルサーバはプラン変更ができないという落とし穴.

リーズナブルな価格だと思い込んでしまいそうな最後の残り物, ロリポップにしました.

他にもクラウド型レンタルサーバーやWordPress専用サーバーを調べた. 安い・高性能・高速なのが売りらしいが, ssl化やsshが利用できないそうなのでやめた.

ドメイン取得はムームードメイン

ドメイン取得は, これら4つの中から選ぶのに悩みました.

ドメイン取得お名前.comムームードメインエックスドメインスタードメイン
価格4つの中で安い普通普通普通
種類圧倒的に多い4072443
管理画面分かりにくい分かりやすい普通普通
評判なんか悪いらしい賛否賛否賛否
公式サイトお名前.comムームードメインエックスドメインスタードメイン

お名前.comは, 知名度が高くなおかつ安いが大量メールやドメイン取得時にWhois情報公開代行の設定をし忘れるとオプション追加費用がかかるため, 断念.
エックスドメインやスタードメインは, ドメインの種類が少ない.

最後は, 管理画面が分かりやすくて, ネームサーバーの変更もロリポップなら簡単そうだったムームードメインを選びました.

ムームードメイン ドメイン取得

ムームードメインでドメインを決め, カートに追加, 購入を申し込む.

ドメイン名は,koshiki.site(公式サイト)みたいなクリエイティブな名前もたくさん考えたが, 長続きしそうなはてなブログの時と同じkoshishirai.com(名前 +.com)にしました.

ムームードメインのユーザー登録をし, 届いたメールアドレスのリンク先から, 購入手続きに進む.

[ドメイン設定]

  • WHOIS公開情報 → 弊社の情報を代理公開する
    • 個人情報を公開したくない場合は, 代理を選択する
  • ネームサーバ(DNS) → ムームーDNS
    • ロリポップ!の場合, ムームードメインにするとネームサーバーの変更が簡単だよということが示されている.
  • ドメインの契約年数 → 1年~10年の中から選べる
  • お支払方法 → クレジットカード決済と銀行振込を選べる

[連携サービス]

キャンペーンです.内容を無視して, [次のステップに進む]

mu_mu_domain_formlolipop_service

[内容確認] よく確認しました.

[ドメイン取得中] ドメインロック, 滅多にお目にかかれないので, 記念にとりました.

mu_mu_domain_confirmationmu_mu_domain_domain_lock

ドメインの取得が完了しました.

mu_mu_domain_complete

スポンサーリンク

ロリポップ! サーバー契約

続けて, ムームードメイン からロリポップ!に申し込みます. そうすると登録の手間が省けます.
ロリポップ!からでも大丈夫です.

ロリポップ!では毎週土日, 初期費用無料キャンペーンを行っているのでそのタイミングで私は申し込んだ.(2020)

[レンタルサーバーを申し込む] → [簡単申し込みへ→]
ムームードメインのコントロールパネルのトップに、ロリポップ! レンタルサーバー申し込みの文面が表示されています.

[ロリポップ! 無料お試し申し込み] → [簡単お申し込み]

  • ドメイン選択 → 取得したドメイン
  • プラン選択 → ライトプラン 月額250円(税抜)~・50GB
lolipop_ applicationmu_mu_domain_application2

これだけでロリポップ!の申し込みが完了しました.

ロリポップ! WordPress 簡単インストール

早速, ロリポップ!にWordPressをインストールします.

ロリポップ!管理画面 [サイト作成ツール]→[WordPress簡単インストール]

  • サイトタイトル → [コウシキ]
  • ユーザー名 → [コウシ]
  • パスワード → [難易度高にして自動生成]
  • メールアドレス → [いつもの]
  • プライバシー → [x]検索エンジンによるサイトのインデックスを許可する
lolipop_wordpress_installlolipop_wordpress_install_1

WordPress インストール完了.

lolipop_wordpress_install_3

ロリポップ! FTP

WordPress 管理画面 [アカウント情報] → [サーバー情報]

lolipop_ftp

  • FTPサーバー → ftp.lolipop.jp
  • FTPSサーバー → ftp.lolipop.jp サーバ
  • WebDAV → https//_
  • FTP・WebDAVアカウント → *** ユーザー名
  • FTP・WebDAVパスワード → *** パスワード

これらの情報はFTP接続に必要な情報です.

ロリポップ! FTP lolipopftp.lolipop.jp

lolipop_ftp

FTPソフト 「Cyberduck」

cyberduck_ftp_1cyberduck_ftp_2
  • ブックマーク(接続先)を追加する.
  • FTP-SSL (Explicit AUTH TLS)を選択
  • ニックネーム:空欄でもOK
  • Labels: 空欄でもOK
  • サーバ: ftp.lolipop.jp
  • ポート: そのまま
  • ユーザ名: FTP・WebDAVアカウント
  • パスワード: FTP・WebDAVパスワード

Cyberduck以外にも, FFFTP, WinSCPというソフトがあります.
同じように設定すれば接続することができるはずです.

ロリポップ! サーバー 常時SSL化

ロリポップ!管理画面 [独自SSL証明書お申込み・設定 独自SSL(無料)]

SSL保護されていないドメインをチェックし, [独自SSL(無料)を設定する]

lolipop_ssl

ロリポップ! FTP [.htaccessを編集] 以下を.htaccessの先頭に追記し, 保存する.

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

lolopop_ssl_.htaccess

ムームードメイン WHOIS情報代理公開

ムームードメインのドメイン取得後にこのようなメールが届いた

  • 【ムームードメイン】【重要】2週間以内にドメイン情報認証を行ってください
  • 【重要】[ムームードメイン] ドメイン 情報認証のお願い

ドメイン情報認証のお手続きが期限内に行われない場合、該当ドメインを利用したホームページの閲覧や、メールの送受信ができなくなるので、必ず行う.

ドメイン登録者情報のメールアドレスとして情報が正しいことを確認する.

単にリンク先を開くことで, メールアドレスが認証される.

リンク先

https://www.onamae.com/domain/verification?authId=_&token=_=ja&banner_id=whoisaccuracy_approval_mail

メールアドレスの有効性認証フォーム
 Authentication-Form-of-the-Validity-of-the-e-mail-address
メールアドレスの有効性を確認させていただきました
mu_mu_domain_whoisAuthentication-Form-of-the-Validity-of-the-e-mail-address
ドメイン情報認証されていないメールアドレス認証
スポンサーリンク

はてなブログ 記事エクスポート

はてなブログ インポート前

  • WordPressにインポートした記事を最初から公開したい場合は, [公開]にする
    • 最初から公開したくない場合は, [下書きに戻す]にする.

記事のエクスポート方法

ブログの記事とコメントを、MT(MovableType)形式のテキストファイルで書き出します.

はてなブログ [設定]→[詳細設定]→[エクスポート]→[記事のバックアップと製本サービス]

[エクスポートしなおす]→作成日時が最新になったら[ダウンロードする]

○○.hatenablog.com.export.txt

はてなブログ 画像エクスポート

サクラエディタとDSダウンローダーというソフトをダウンロード&インストール

こちらのやり方そのまま実行すると成功した

はてなブログ内の画像を一括でダウンロードする簡単な方法
今回は、はてなブログの中で使っている画像を一括でダウンロードする方法について紹介します。 WordPressへの移行時にも大活躍する技なので、ぜひ覚えておいてもらえればと思います。 はてなブログでは、

※記事中に貼っていた画像のみ

WordPress 記事インポート

パーマリンク設定

インポート後の記事のURLが変にならないためにするには, パーマリンクというのを設定する

WordPress 管理画面 [設定]→[パーマリンク設定]→[共通設定]→[カスタム構造]

hatenablog_custom_url

  1. カスタムURLの場合

カスタムURLの例: 〇〇.hatenablog.com/entry/mac-vtuber

カスタム構造: /entry/%postname%/と入力し, [変更を保存].

  1. 日付URLの場合

日付URLの例: 〇〇.hatenablog.com/entry/2020/06/11/213021

/entry/%year%/%monthnum%/%day%/%hour%%minute%%second%と入力し, [変更を保存].

記事インポート方法

WordPress 管理画面 [ツール]→[インポート]

tool_import

Movable Type と TypePad→今すぐインストール
(プラグイン: Movable Type and TypePad Importer | 作成者 wordpressdotorg)

mt_install

インポーターのインストールを完了したら, [インポーターを実行]

importer_start

[ファイルを選択], [ファイルをアップロードしてインポート]

upload_import

[投稿者の割り当て] 自分のユーザを選択

import_post_user

hatenablog-to-wordpress-complete

インポートが終わったら, 記事を確認する.

  • ○○.com/entry/post-nameになっているか
  • markdownはhtmlに変換される.(html→markdown変換は後述)

確認し終わったら, これからWordpressの記事URLの構造を決める.

[設定]→[パーマリンク設定]

おすすめは, [投稿名] https://○○.com/sample-post/

Googleは分かりやすいURL名を推奨しているため, それに従う.

permalink_post_name

WordPress 画像インポート

今回はFTPソフト「Cyberduck」を使って画像をアップロードする

Cyberduckのダウンロード

自サイトのFTPに接続し, ダウンロードした画像を次のディレクトリに一括アップロードする.

画像のアップロード先は自分でルールを決める.
私の場合, WordPress標準の月別にアップロードする設定にした.

例: /wp-content/uploads/2020/06 ←最新年月
区別したい場合の例: /wp-content/uploads/2020/hatena_photo

ftp_img_upload

「Media from FTP」 画像をメディアライブラリに認識させる

上記のやり方でWordPressに画像をインポートしただけでは, メディアライブラリには認識されない.

そこで, Media from FTPというプラグインを使用すれば はてなブログに挙げていた画像をメディアライブラリに認識させることができる.

WordPress 管理画面 [プラグイン] → [新規追加] → [Media from FTP 検索,インストール, 有効化]

Media from FTPのダウンロード

[プラグイン] → [Media from FTP]

まずは, デフォルトの数を増やしたいので, [設定]へ進む

media_ftp_setting

[登録]

media_ftp_setting_search

画像ファイルの日付/時刻の項目です. 現在の状態を維持する場合は, 一番上にチェックします.

  • [x] 現在の日付/時刻を使用するように更新します
  • ファイルの日時を取得し, それに基づいて更新します. 必要に応じて変更してください
  • Exif情報の日時があれば優先的に取得します
  • 修正された日付・時刻の使用に更新します
  • [x] アップロードしたファイルを年月ベースのフォルダーに整理
  • [x] Date Time Picker (jQuery プラグイン) Data and time Input assistance

[検索]

media_to_ftp_setting_search

  • ページ送り : ページごとに表示する項目数: 999 (デフォルト: 20)

[Search & Register]

media_to_ftp_search_and_register

全ての画像を選択したら, メディアを更新を実行する.

media_to_ftp_beforemedia_to_ftp_after
メディアライブラリ認識前メディアライブラリ認識後

WordPressテーマ「Cocoon」 インストール

WordPress 5.4.1 デフォルトテーマ「Twenty Twenty」からCocoonに変更する.

Cocoonの親テーマと子テーマをダウンロード.(親テーマだけでも動く)

Cocoonのダウンロード

テーマのインストールは主に2通りある

  1. WordPressからzipをアップロードする
  2. FTPからアップロードする

方法1 WordPressからzipをアップロードする

WordPress 管理画面 [外観]→[テーマ]

appearance_theme

[新規追加]→[テーマのアップロード]

theme_upload

方法2 FTPからアップロードする

Cyberduckからテーマをアップロードすることもできます. zipは解凍し, フォルタをアップロードします.

ftp-theme-upload

はてなブログ・Markdown難民のためのCocoon設定

Google Analytics タグマネージャ Adsenseコード挿入

google_id_code_cocoon

タグマネージャとAnalyticsを使用する場合, タグマネージャのみ入力する.
理由やタグマネージャにアナリティクスを紐づける方法は解説ページに示されている.(Cocoon バージョン: 2.1.7の解説ページはリンク切れ)

私がそれに気づいたのは, アナリティクスの反応が全くなかったからです. リンク切れの解説ページは, おそらくこのページのことを示していると思います。これに従ったら, アナリティクスが解析を再開しました。

GoogleタグマネージャのトラッキングID設定方法
タグマネージャ登録をするとアナリティクスのトラッキングID登録は不要です。

Adsenseコードは, ヘッド用コードにコピペします。

Cocoonの便利さに感動した.

スポンサーリンク

「Better Search Replace」 文字列を置換する

当環境(WordPress5.4.1)でSearch Regexは反映されなかったため, Better Search Replaceを使用した.

WordPress管理画面 [プラグイン] → [新規追加]→[Better Search Replace 検索, インストール, 有効化]

Better Search Replaceのダウンロード

[ツール] → [Better Search Replace]

Tool-Better-Search-Replace

[Better Search Replace] → [Search Replace]

Better Search Replace

※実行すると元通りに戻せません. 前にバックアップしたい人はしてください.

Case. 1 はてなブログのキーワードリンク

キーワードリンクの数だけ実行.

  • Search for →[VTuber](https://d.hatena.ne.jp/keyword/VTuber)
  • Replace with → VTuber

Case. 2 はてなブログの画像URL

1回だけ実行, 置換後は日付である「....」を全て1つずつ消す.
はてなフォトライフに挙げていた画像ファイルの場所はWordPressでは/wp-content/uploads/2020/06へ全て指定.

  • Search for →https://cdn-ak.f.st-hatena.com/images/fotolife/k/koshishirai/2020....
  • Replace with → https://koshishirai.com/wp-content/uploads/2020/06

Better Search Replaceがgrep検索・置換できるかどうか分からなかった.
めったにこんな事はすることはないので取り急ぎ対応.
また, 既にWP Githuber MD でHTMLをMarkdownに変換してしまったため, やらざるを得ない状況に. 小1時間の思考停止の作業だった.
もっと効率の良いやり方があるなら教えてほしいくらい面倒くさかった.


  • Select tables → wp1_posts(27.3MB)
  • Case-Insensitive? → そのまま
  • Replace GUIDs? → そのまま
  • Run as dry run? → チェックを外すと実行する

「Cocoon」 ブログカード

Cocoonでは, urlを貼るだけで, サムネイル付きのブログカードを簡単に作成することができる.

  • はてなブログで使えた[:title], [:embed:cite]は使えない.
    • WordPressでもはてなブログ風ブログカードにする方法がある.

blog-card

Cocoon設定 [ブログカード] → [内部, 外部ブログカード設定] → [ブログカード表示を有効にする]

「Cocoon, WP Githuber MD」 ソースコードをシンタックスハイライトする

CocoonとWP Githuber MDを有効化している場合, シンタックスハイライトが上手くいかないことがある.(highlight.jsの競合)

WordPress 管理画面 [Cocoon 設定]→[設定]

cocoon_syntax_highlight

WordPress 管理画面 [設定]→[WP Githuber MD]→[Modules]→[Syntax Highlight_highlight.js]

[githuber_syntax_highlight

prism.jsでもコードををシンタックスハイライトすることができるが, 余分なリソースになる.
どちらか好みの方を選択する.

「Cocoon」 目次 Markdown用

Cocoonで自動生成する目次を使いたい場合.

WordPress 管理画面 [Cocoon 設定]→[目次]→[目次を表示する]のチェックを外す.

cocoon_toc

本文中では以下のCocoon独自のショートコードを使用することで,記事で目次を生成することができる.

[toc]

「Cocoon」 吹き出し Markdown用

CocoonでMarkdownエディタのプラグインを使用すると, ビジュアルエディタから吹き出しを選択することができない.

しかし, 直接記述すればMarkdownエディタでも吹き出しを使うことが出来る.

左吹き出しの例

左吹き出し

書き方

<div class="speech-wrap sb-id-11 sbs-stn sbp-l sbis-sn cf">
<div class="speech-person">
<figure class="speech-icon">
<img src="https://koshishirai.com/wp-content/uploads/images/profile.png" alt="" class="speech-icon-image"></figure>
</div>
<div class="speech-balloon">
<p>左吹き出し</p>
</div>
</div>

右吹き出しの例

右吹き出し

書き方

<div class="speech-wrap sb-id-11 sbs-stn sbp-r sbis-sn cf">
<div class="speech-person">
<figure class="speech-icon">
<img src="https://koshishirai.com/wp-content/uploads/images/profile.png" alt="" class="speech-icon-image"></figure>
</div>
<div class="speech-balloon">
<p>右吹き出し</p>
</div>
</div>
  • Cocoon 設定の吹き出しに登録しなくても使用することができる.
  • 左吹き出しはsbp-lは,右吹き出しはsbp-r,なので簡単に切り替えることができる.

余談: プラグイン導入と稼働状況

WordPress 5.4.1

  • 高速化
  • SEO
  • Markdown
  • サイトマップ

常時有効化プラグイン

1. All In One SEO Pack

All in One SEO Pack
The original WordPress SEO plugin, downloaded over 65,000,000 times since 2007.
  • バージョン 3.5.2 | 作成者: All in One SEO Team
    • SEO対策
    • 使用感:○
    • 様子見.少々重い.とりあえず入れとけって言うから...

2. WP Githuber MD

WP Githuber MD – WordPress Markdown Editor
An all-in-on WordPress Markdown Plugin provides a variety of features such as Markdown editor, live-preivew, image-paste, HTML-to-Markdown helper, and …
  • バージョン 1.15.0 | 作成者: Terry Lin
  • Markdown
  • 使用感: ◎
  • Qiitaのエディタと同じ. Markdown系プラグインはこれが最強だった.

3. Autoptimize

Autoptimize
Autoptimize は、JavaScript、CSS、画像 (遅延読み込みを含む)、HTML、Google フォントを最適化します。JavaScript の非同期化や、邪魔な絵文字の除去などを通し、サイトを高速化します。
  • バージョン 2.7.2 | 作成者: Frank Goossens (futtta)
  • HTML, CSS, JS圧縮, 遅延読み込み等
  • 使用感: ◎
  • 効果はバツグンだ

4. Native Lazyload

Native Lazyload
ブラウザーのネイティブ機能を利用してメディアを遅延読み込みします。
  • バージョン 1.0.2 | 作成者: Google
  • 遅延読み込み
  • 使用感:◎
  • Lazy load系はこれも使用. Googleなので超有効.

5. Google XML Sitemaps

Google XML Sitemaps
This plugin will improve SEO by helping search enginess better index your site using sitemaps.
  • バージョン 4.1.0 | 作成者: Arne Brachhold
  • Sitemap作成
  • 使用感: ◎
  • 自動なので有能

手動切り替え・削除・必要時に導入

4. Better Search Replace

Better Search Replace
データベース内のURLまたはその他のテキストを更新するシンプルなプラグイン。
  • バージョン 1.3.3 | 作成者: Delicious Brains
  • 文字列置換
  • 使用感: ○
  • 文字列置換に成功した.Sage Regex(バージョン 2.1)の代替.

5. Phoenix Media Rename

Phoenix Media Rename
The Phoenix Media Rename plugin allows you to easily rename (and retitle) your media files, once uploaded.
  • バージョン 1.4.0 | 作成者: crossi72
  • 画像リネーム・リンク先も変更
  • 使用感: △~○
  • 注意:実行するとMarkdown本文が勝手にHTMLに変換した.

6. UpdraftPlus - Backup/Restore

UpdraftPlus WordPress Backup Plugin
バックアップと復元を簡単に。手動または自動予約 (Dropbox、S3、Google ドライブ、Rackspace、FTP、SFTP、メール、その他) による完全なバックアップ。
  • バージョン 1.16.25 | 作成者: UpdraftPlus.Com, DavidAnderson
  • クラウドストレージにバックアップ
  • ローカルに保存するとファイルがごっちゃになるので, これが良かった.

Markdownプラグイン比較と使用感

WP Editor.md

WP Editor.md – The Perfect WordPress Markdown Editor
WP Editor.MD is a beautiful and practical Markdown document editor.
  • バージョン 10.1.2 | 作成者: LuRenJiasWorld
  • 2画面プレビュー ○
  • Markdown 編集 ○
  • WP Githuber MD より機能の数は劣る

Markdown Editor

Markdown Editor
Replaces the default WordPress editor with a Markdown editor for your posts and pages.
  • バージョン 0.1.7 | 作成者: SEO Themes
  • 2画面プレビュー ×
  • Markdown 編集 ○
  • Markdownが書けるだけ
    • シンタックスハイライトはできない

Gutenberg

Gutenberg
Gutenberg プラグインは、編集、カスタマイズ、サイト構築機能を WordPress に提供します。このベータプラグインを使えば最先端の機能をテストできます。
  • バージョン 8.3.0 | 作成者: Gutenberg Team
  • 2画面プレビュー ×
  • Markdown 編集 ×
  • Markdownで書くには不向き

WordPress 移行RTA

はてなブログからMarkdownへの完全移行は約3日くらいかかった.

日付内容
前夜ムームードメイン ドメイン取得, ロリポップ! サーバー契約, WordPressインストール, SSL化, 初期設定
1日目画像, 記事インポート・エクスポート, テーマ選定, プラグイン導入, 文字列置換
2日目Cocoon設定, 吹き出し, ショートコード,プラグイン設定・使い方, 文字列置換, 新記事作成
3日目Cocoon設定, カスタマイズ, 文章校正, 新記事作成

はてなブログよりも自由度高すぎるあまり, 時間管理が疎かになってしまった.

前回の経験があったので, 勢いに任せてゴリゴリ, いじった.

今のところは問題なし. 自サイトを持ってしまったので, 責任感が生まれた.

WordPressに移行した感想

はてなブログやQiitaよりはるかに書きやすくなった

書きやすさ WordPress = Qiita > はてなブログ
自由度 WordPress > はてなブログ, Qiita

  • CSS, Javascript, PHPが制限なく使えるようになった
  • はてなブログの窮屈さから解放された
  • Qiita記事では使えなかったCSSが使えるようになってより執筆が快適になった.

使って1日で, もうWordPressなしでは生きられなくなりそうだった.

もう少しカスタマイズしたくなったので, WordPressは昔職業訓練校で使ったこの教本を参考にしようかなと思います。

WordPressレッスンブック 5.x対応版 | エビスコム | 工学 | Kindleストア | Amazon
Amazonでエビスコムの{ProductTitle}。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。

WordPressに移行した後

【ロリポップ!爆速宣言】新サーバー環境へアップデートしてみた結果

【ロリポップ!爆速宣言】新サーバー環境へアップデートしてみた結果
ロリポップ!爆速宣言の従来のプランとの比較、アップデートによる仕様変更、新サーバー環境へアップデートする方法、アップデートした結果をお伝えします。従来のプランとの比較。アップデートによる仕様変更。アップデート後の変化。すべてのお客様、すべてのプランが対象。ロリポップの環境が大きく進化。全プランSSD、新ハードウェア、大幅スペックUP。

90日間の自動広告テストが終了するまでの成果【Google Adsense】

90日間の自動広告テストが終了するまでの成果【Google Adsense】
90日間の自動広告テストが終了するまで何をどうしていたのか、前後で変化について知りたい方向けに自動広告テストの経験談を話をします。自動広告テストは90日間終わるまで止まらない.90日間 自動広告の広告設定がいじれない.ページ除外の設定ができない. 90日間で自動広告の収益の成果が高くなるパターンを出すことができました。悩みはトップページに広告が表示されて、高速化の妨げになったことです。

WP Githuber MDの問題と解決方法,おすすめの設定,使い方【WordPress Markdown Cocoon】

WP Githuber MDの問題と解決方法,おすすめの設定,使い方【WordPress Markdown Cocoon】
WP Githuber MDで起こった問題と解決方法,おすすめの設定を紹介します。Markdownで書いた記事が全てHTMLに変換されてしまった.自動保存が効かない.一括編集すると勝手にMarkdown→HTML変換されることがある.HTML to Markdown [Convert]すると元のスタイルに戻せない(一部文章が消えるもあり)

コメント

タイトルとURLをコピーしました