- なぜ、はてなブログへ戻したか？
- 参考：WordPressブログのダメなところ
- 前準備
- WordPressからエクスポート
- はてなブログへインポート
- タグがカテゴリー化するので、不要ならば除去する
- ブログ内のリンクを貼り直す
- WordPressのブロック記法が残っていたので、Markdown記述に戻す
- 最後に
なぜ、はてなブログへ戻したか？
まあ、多くの方と同様に経済的な理由です。
知人らのアドバイスなどをもとに、個人サイト立ち上げるきっかけとして、まずは、アフィリエイト付きのオリジナルドメイン＋WordPressブログをはじめましたが、割に合わないので停止しました。
仮に月1,000円＋プラスドメイン料金だとすると、年間12,000円以上はかかりますよね。
ドメイン料金も払いたくないので停止し、はてはも無料プランのままとしました。
つまり、https://inuinu-tech.hatenablog.jp/entry/〜といったURLのままとしています。
参考：WordPressブログのダメなところ
WordPress(＋アフィリエイト)ブログのハードルの高さについて
WordPressについては、ざっとこんな感じでしょうか。
- サーバー選定やWordPressデザインテーマを選択するだけで、かなりの時間と精神を消耗する
- WordPressの導入や初期設定で、相当な時間を費やす
- SEO対策について、相当な時間を費やす
- 固定ページ作成に時間を費やす
- カテゴリやタグの体系づくりで時間を費やす
- ブロックエディタ特有の冗長な文字列の塊が、Markdown使いには耐えられない
さらに、多分に切っても切れないアフィリエイトについても書き加えます。
サーバー選定やWordPressデザインテーマを探す場合、ほぼ100％アフィリエイトブログにぶち当たります。
当然ながら、アフィリエイターにとって都合のいい話しか書いていません。
あまり参考にならないと思います。
これをクリアするには、有名そうなブログが何を使っているかを見るといいかもしれません。
ネットを探すと、ドメインからサーバーを検索し、さらにWordPressテーマも教えてくれるページがあったと思いますので、試してみて、それに倣う方が良いかもしれません。
あとは、某掲示板の書き込みなども参考になるかと思います。
その後、晴れて加入〜導入〜設定に移りますが、これもノウハウの収集を含め、かなりの時間を費やします。
特に注意したいのはプラグインで、ネットで見た「おすすめプラグイン」が既に時代遅れなんてことがよくあります。
また、多くのプラグインは徐々に肥大化して有料化したり、他のプラグインとバッティングする運命をたどります。
今人気のデザインテーマを導入⇒そのデザインテーマサイトがおすすめするプラグインを最低限入れてみる…という流れが賢明かと思います。
固定ページとは、自己紹介、免責事項、問い合わせフォームなどです。
問い合わせフォームはプラグインを利用しますが、その他は自分で作成する必要があります。
アフィリエイターも、ある種の個人商店みたいなものですから、下手なことは書けません。ここでプロの洗礼を受けるかと思います。
同時に自分が書きたいことの大系を考えて、カテゴリ(場合によってはディレクトリあるいはサブドメイン)を考える必要があります。
さらにアフィリエイト業者、アドセンス広告や、物販アフィリエイト、その他のアフィリエイト業者への登録が必須になると思いますが、年々厳しくなっていると思います。
さらに、アフィリエイトブログを書く場合、自分の経験に基づいた記事を書くのがセオリーですが、自分の経験が例えば「病気からの回復」だとして、それが例えば「お世話になった医療保険」とかに紐づくと、YMYLに引っかかる可能性が高まります。
私はやっていませんでしたが、DIYモノは多分行けると思いますが、これが業者にお願いするリフォームとかになると、難易度が上がるかも。
さらに、経験から「中古一戸建て・マンションの賢い買い方」となると、まあ、厳しいかもしれませんね。
ですので、B級グルメブログとか旅行記とか、家電使用記とか、そういった無難な方向に行きがちかもしれませんね。
ただライバルが多いですし、仕入れというか、売上原価が発生して旨味はほとんどなさそうですし、また、動画で配信できれば、ブログにこだわる必要もないですしね。
さらに、コツや経験をつかみつつ、どのコンテンツが当たるか？自分が記事を豊富に用意できるか？となると、相当な時間を費やすのでは？と思います。
言い方悪いですが、仕事で忙しい人には無理だと思います。
以上、こういったことのうち、いくつかが、「入門書」に書かれていますが、多分に読むだけで嫌になってしまうと思います。
私はエンジニアで、WordPress導入について興味があったので、上記を試しましたが、まあ、大変でしたね。
経験で得たものは沢山ありました(固定ページ作成は特に)。が、素人では手が出ないと思います。
物販アフィリエイトで小遣いを稼ぐならば、無料ブログで十分かと
多くの場合は、日常や趣味の延長でブログをかくと思いますので、そのついでに商品紹介でお小遣いを稼ぎたいのであれば、無料ブログで十分かと思います。
前準備
前置きが長くなりましたが、変換作業を始めていきます。
各エントリをブラウザで保存する
私の場合は、ドメイン及びサーバーの停止期限が迫っていたのと、100件程度のエントリしかなかったので、各エントリをブラウザで保存しました。
画像等でいくつか壊れた箇所がありましたが、それ以外は無事保存はできました。
これで、スタンドアロンで旧ブログのレイアウトを含めた内容が把握できます。
この保存したページは、後で、インポート後との比較(間違い探し？)をする際に使用しますが、次の点で特に役に立ちました。
ちょっと、億劫な作業ですが、やっておいた方が良いです。
WordPressからエクスポート
「ツール＞エクスポート」でエクスポートします。
個人的には「投稿」で行いましたが「すべてのコンテンツ」でも大丈夫だと思います。
はてなブログへインポート
Markdownモードにしておく(任意)
私は、普段からMarkdownで記述していましたので、Markdownモードにしておきます。
インポートする
管理画面からインポートしてください。
100件程度でしたら、わりとすぐに終わります。
エントリとURLを確認
各エントリがインポートされているか、確認してください。
さらに、URLが、WordPress推奨の形でインポートされているかも確認してください。
(私はこちらは無問題でした。)
タグがカテゴリー化するので、不要ならば除去する
多分に、最初に？？？と思う箇所はこれです。
不要なタグがあれば除去しますが、エントリも多いですし、殆どの場合は放置かと思います。
ブログ内のリンクを貼り直す
私はプログラミングテクニックのハウツーでしたので、内部リンクが多数ありましたが、こちらは表に表示されず、さらに古いURLのままです。
これを、根気よく「はてな記法」にて貼り直していきます。
URLをペーストすれば、アシスタント画面が表示されますので、そちらに従います。
WordPressのブロック記法が残っていたので、Markdown記述に戻す
こちらの作業が思いの外かかりました。
WordPressでは今流行り？のブロックエディタを使用していたので、中を見ると、それがそのまま残っています。
このままでは文字数が無駄に多くなってしまうので、ともかく、なんとかしたいところ。
修正しながら、CSSを手直ししていく
参考までに、こちらのブログのデザインテーマは、デフォルトの「Life」になります。
CSSでカスタマイズを行っています。
主な内容は、
- タイトルおよびエントリータイトルの大きさ調整
- 目次のカスタマイズ
- h2/h3/h4を目立つように、さらに前後の間隔を開ける
- strongをアンダーライン化
- preタグの色を白黒反転
- WordPressによくあるボックス表示の追加
こんなところでしょうか。
あまり凝らないように心がけます。
pタグ/brタグ
●変更前
<!-- wp:paragraph --> <p>1行目です。<br>2行目です。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>3行目です。</p> <!-- /wp:paragraph -->
●変更後
1行目です。 2行目です。 3行目です。
「1行目です。」の直後に2文字の半角スペースを挿入します。
これでbrタグの代わりになります。
これだけでも、相当スッキリします。
h2/h3/h4タグ
こちらも冗長化していますので、なんとかします。
●変更前
<!-- wp:heading --> <h2 class="wp-block-heading">これが</h2> <!-- /wp:heading -->
●変更後
## こうなる
h3の場合は###とします。
ul/olタグ
●変更前
<!-- wp:list {"className":"hoge"} -->
<ul class="foo><!-- wp:list-item -->
<li>やること1</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>やること2</li>
<!-- /wp:list-item -->
<!-- /wp:list -->
●変更後(ulタグ)
* やること1 * やること2
olタグの場合は、
1. やること1 1. やること2
となります。
これはかなり文字数が圧縮できますね。
アンダーライン
WordPress系のブログを見ていると、アンダーラインをよく見かけますよね。
こちらはWordPressの機能というよりも、テーマの機能でしょうか。
こちらをstrongに変更し、CSSでアンダーラインをつけるようにします。
CSSは「管理画面＞デザイン＞カスタマイズ(スパナのアイコン)＞{}デザインCSSのボックス内をクリック」で、エディタ(のようなもの)が開きますので、そこに記述します。
●変更前(SWELLの例)
<span class="swl-marker mark_yellow">この箇所にはアンダーラインが付きます</span>
●変更後(本文)
**この箇所にはアンダーラインが付きます**
●変更後(CSS)
.entry-content strong { font-weight: normal; background: linear-gradient(transparent 50%, yellow 50%); }
上記例はstrongでの例ですが、emタグ(*〜*)で対処したい方は、上記を応用してみてください。
WordPressテーマが用意したボックス類
私はWordPressの人気テーマ「SWELL」を使用していましたが、その他のテーマにも、見栄えを良くするオプションが多数用意されています。
代表的なものは「吹き出し」ですが、私が扱う内容はプログラミングテクニックなので、幸い無使用でした。
ただし、ボックス類はいくつか使用していました。
上記リンクで言うところの「アイコン付きボックス（小）」と「アイコン付きボックス（大）」ですね。
こちらを置き換えていきますが、こちらはMarkdownでも「はてなブログ」でも用意されていませんでしたので、以下のようにしました。
この記事に登場する「！」の例になります。
●変更後(本文)
<fieldset class="kakomi_alert"><legend class="kakomi_alert"></legend> 注意点を記述します。 </fieldset>
●変更後(CSS)
/* 共通 */ fieldset { margin-bottom: 3em; padding: 0px 20px 20px 20px; border: 2px solid; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } fieldset ::before { margin-left: 10px; margin-right: 10px; font-family:blogicon; font-size:35px; } /* 警告 */ fieldset.kakomi_alert { border-color: gold; } fieldset .kakomi_alert::before { content:"\f041"; /* blogicon-warning */ color: gold; }
変更箇所が結構な数あったため、
- そもそも、ボックスで囲む必要が本当にあるのか？
- ボックス内の文章は適切か？
というチェックを行い、不要な文章、例えばフランクな表現や、独り言のようなものは、極力削除することにし、ボックスの数を減らしました。
参考までに、以下のボックスに絞っています。
チェックアイコン：記事や章の要約、リンク先の説明
/* チェック */ fieldset.kakomi_check { border-color: limegreen; } fieldset .kakomi_check::before { content:"\f029"; /* blogicon-check */ color: limegreen; }
メモアイコン：備考、これを行う意味など
/* メモ */ fieldset.kakomi_memo { border-color: orange; } fieldset .kakomi_memo::before { content:"\f024"; /* blogicon-pen */ color: orange; }
はてなアイコン：質問
/* はてな */ fieldset.kakomi_hatena { border-color: fuchsia; } fieldset .kakomi_hatena::before { content:"\f01c"; /* blogicon-help */ color: fuchsia; }
警告アイコン：これを行うとリスクがあることを警告
/* 警告 */ fieldset.kakomi_alert { border-color: gold; } fieldset .kakomi_alert::before { content:"\f041"; /* blogicon-warning */ color: gold; }
禁止アイコン：これは不可能、あるいは禁止
/* 禁止 */ fieldset.kakomi_stop { border-color: red; } fieldset .kakomi_stop::before { content:"\f025"; /* blogicon-close */ color: red; }
preタグにもどす
私はWordPressのテーマはSWELLを使用しており、その作者が作成したと思しき、「Highlighting Code Block」というプラグインを利用しておりましたが、こちらは一般的なpreよりも、以下の利点がありました。
- 行番号の表示
- プログラム名の表示
- コピーボタン押下でソースコードがコピーできる
- プログラムごとにカラー表示
反面、以下の欠点があります。
- preタグではない(div＋codeタグ)
- 記号は
&といった参照文字に変換されてしまう
はてなブログでも```言語名でカラーリングをしてくれますが、「Highlighting Code Block」での記述箇所はインポートで変換してくれませんので、カラーリングはしてくれません。
なので、この変更は、私的には必須としました。
●変更前
<!-- wp:loos-hcb/code-block {"langType":"js","langName":"JavaScript","fileName":"hoge.js"} -->
<div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code>if (strStatus == '1') {
処理１
} else if (strStatus == '2') {
処理２
}</code></pre></div>
<!-- /wp:loos-hcb/code-block -->
●変更後(```の直後にjavascriptを付加)
if (strStatus == '1') { 処理１ } else if (strStatus == '2') { 処理２ }
&で始まる実体参照はとてもじゃないけど手作業で変換はできませんので、「前準備＞各エントリを保存する」で保存したページをブラウザで表示し、コピペしました。
(運良く、コピーボタンが生きていたので助かりました。)
テーブル
●表示例
| タグ | 発火点 | 取得方法 |
|---|---|---|
| SELECT | onchange() | elm.value |
| INPUT(radio) | onclick() | elm.value |
| INPUT(checkbox) | onclick() | elm.forEach(function (el) ⇒el.checkedを確認(true or false) |
●変更前
<!-- wp:table --> <figure class="wp-block-table"><table><thead><tr><th>タグ</th><th>発火点</th><th>取得方法</th></tr></thead><tbody><tr><td>SELECT</td><td>onchange()</td><td>elm.value</td></tr><tr><td>INPUT(radio)</td><td>onclick()</td><td>elm.value</td></tr><tr><td>INPUT(checkbox)</td><td>onclick()</td><td>elm.forEach(function (el)<br>⇒el.checkedを確認(true or false)</td></tr></tbody></table></figure> <!-- /wp:table -->
●変更後
|タグ|発火点|取得方法| |:---|:---|:---| |SELECT|onchange()|elm.value| |INPUT(radio)|onclick()|elm.value| |INPUT(checkbox)|onclick()|elm.forEach(function (el)<br>⇒el.checkedを確認(true or false)|
こちらは画面とにらめっこしないと変換できないかも…
面倒でしたら、スルーしてもいいかもしれません。
codeタグ(インラインのcode)
●変更前
<code>hoge</code>
●変更後
`hoge`
こちらは、そのままにしてもいい気がします。
最後に
以上となります。
修正することで、文字数が半分以下に圧縮できると思います。
また、意外と、誤字脱字や説明不足等を見つける、良い機会となりました。
