はじめに
こういう、無料サービスじゃないブログってどうやって構築してるんだって気になる人向けに書いておきます。
FC2ブログやnoteみたいな無料サービスは手軽なんですが、サービス終了の危険性があります。
特にFC2なんてそれ系のジャンルのせいで悪名高すぎるので使ってて怖かったです。
もし興味を持っていただけたら、まずは無料ブログで初めてみて本格的にはまったら自前のサーバを契約すると面白いですよ。
どっかで聞いたのですが、個人ブログって9割ぐらいが短期間で飽きて終了するらしいです。
アフィリエイトなんて今の時代厳しいし、何らかのモチベーションが無いと続けるのは難しいんでしょうね。
このブログは超ニッチ戦略で非営利の「刺さる人には刺さりまくる」ブログを目指しています。
この世の誰かの役に立ったらそれで十分なのです。
あとアクセス解析で今日は何人来てくれた…を見るのが地味に楽しみだったりします。
私は特に、別界隈のブログをFC2からWordPressに移行したこともあります。
データがいっぱいあって大変でした。
移行用データはCSVかなんかでエクスポートできるのですが、FC2のデータがガタガタになってて結構苦労しました。。
なにより自前サーバのほうがカスタマイズ幅が段違いなのでね。
広告を付ける際の制限もありません。
サーバ契約
サーバはXserverのレンタルサーバを利用しています。
レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】
高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】稼働率99.99％以上の高い安定性で、業界トップクラスの高コストパフォーマンスを誇る高品質レンタルサーバーです。月額693円(税込)から利用可能。まずは無料お試し10日間。
レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】
12ヶ月まとめて支払うと、毎月990円です。
この会社はサポートが充実していて好きです。
DifyもXServerのVPSサービスを契約して遊んでました。
ドメイン名取得【XServerドメイン】
ドメイン取得サービス【XServerドメイン】は格安1円から取得可能！人気の.com/.net/.jpは1円からご利用いただけます。
ドメイン名取得【XServerドメイン】
ドメインもXServerのサービスを使っています。
XServerレンタルサーバと合わせるとドメイン登録がとっても楽です。
ドメイン無料特典とかを使わなかった場合、例えばこのブログのドメイン「.info」は年間2000円ぐらいです。
.comとか.co.jpはもっと高いです。
WordPressの構成とか
構築
XServerのWordPress簡単インストールという機能を使っています。
複雑な知識無しでWordPressが構築できます。
まじで構築だけなら5分で終わります。（実際にアクセス出来るようになるまでは1時間ぐらいかかりますが）
テーマカスタマイズなど
Cocoonというテーマを使っています。
よく分からんけど有名なので。
以下、主要なカスタマイズ内容を掲載します。
スキン：アリス（ローズ）※カスタマイズしまくってます
カスタムCSS：
CSS
:root {
--text-orange: #FFE99A;
--light-orange: #fff0d2;
--lightest-orange: #fffcf6;
--radius-default: 7px;
}
/*********角をまるめる*********/
/*画像*/
img{
border-radius: var(--radius-default) !important;
}
/******************************/
/***埋め込みURLのサムネイルサイズ****/
.blogcard-thumbnail {
/* デフォルト160pxを上書き */
width: 190px !important;
}
@media screen and (max-width: 834px) {
.blogcard-thumbnail{
/* デフォルト120pxを上書き */
width: 150px !important;
}
}
.blogcard .blogcard-thumbnail img {
width: 100% !important;
height: auto !important;
}
/******************************/
/*********全体の背景とか*********/
body{
background-color: white !important;
}
/* ヘッダとフッタのしましま */
.header, .footer {
background-color: #fffceb;
background-image: linear-gradient(-90deg, #ffce8080 50%, transparent 50%),linear-gradient(#ffce8080 50%, transparent 50%);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;
/*以下のサイトで生成できます
develop.tools/css-checkered
*/
}
/*テーブル背景色*/
table tr:nth-of-type(2n+1) {
background-color: var(--lightest-orange);
}
/*フッタ背景、モバイルメニュー*/
#footer,
.mobile-menu-buttons{
background: var(--light-orange);
}
/******************************/
/*******見出し、サイドバー*******/
h2, h3, .sidebar h3 {
border-left: none !important;
border-radius: var(--radius-default) !important;
background-color: var(--light-orange) !important;
}
.sidebar h3 {
border-bottom: none;
}
.pagination-next-link,
.toggle-button,
.cat-link{
background-color: var(--light-orange) !important;
}
/*検索ボックス*/
[type="submit"].search-submit{
background-color: var(--light-orange);
}
.search-edit{
border: 2px solid var(--light-orange) !important;
}
/******************************/
/*********文字色など*********/
/*カテゴリの区切り線*/
.widget_categories ul li a{
border-bottom: 2px dashed var(--light-orange);
}
.tagline,/*サブタイトル*/
.breadcrumb-caption,/*パンくずリスト*/
.entry-title,/*本文タイトル*/
.related-entry-card-title,/*関連記事*/
.fa,
.entry-card-title/*カテゴリ内タイトル*/,
.pagination-next-link,/*次のページ*/
.toggle-button,
.toggle-button::before,
.cat-link,
#slide-in-sidebar,
/*もくじ*/
.toc-title,.toc a
{
color: var(--cocoon-text-color);
}
/******************************/
/**********太字指定***********/
.site-name-text{
font-weight: 500;
}
/******************************/
/***********もくじ***********/
.toc {
border-radius: 10px;
border: 3px dashed var(--text-orange);
background: white;
}
ol.toc-list > li:before,
.toc ol li ol a::before {
background: var(--text-orange);
}
/*****************************/
/*インデックスからカテゴリを消す*/
/*カテゴリページの不要文字消去*/
.cat-label,
.archive-title{
display: none;
}
/*********フォントサイズ*********/
/*「目次」の文字*/
.toc-title {
font-size: 20px;
}
/*キャッチフレーズ*/
.tagline{
font-size: 15px;
}
/*パンくずリスト*/
#breadcrumb{
font-size: 15px;
}
/*カテゴリ画面のタイトル*/
.entry-card-title{
font-size: 15px;
}
.menu-caption{
font-size: 13px !important;
}
/*プロフィールの文字*/
.author-box{
font-size: 16px;
}
/*****************************/
/***********余白調整***********/
/*フッタ*/
.footer,
.footer-bottom{
margin-top: 0px;
}
/*記事エリア下部*/
.main{
padding-top:0px !important;
padding-bottom:0px !important;
}
h2{
margin-top: 15px !important;
margin-bottom: 15px !important;
}
h3{
margin-top: 10px !important;
}
/*画像の下*/
.wp-block-image{
margin-bottom: 4px !important;
}
/*ヘッダの下*/
.tagline{
margin: 0 0 20px 0;
}
/*パンくずリスト*/
/*アイコン色は .fa で変化してます*/
#breadcrumb{
margin-top: 0px;
margin-bottom: 0px;
}
/*カテゴリ画面のタイトル*/
.entry-card-title{
padding-top: 10px;
padding-bottom: 10px;
padding-left: 6px;
}
/****************************/
/*******アニメーション解除*******/
* {
transition: none !important;
transition-duration: 0s !important;
}
.a-wrap:hover {
transform: none !important;
box-shadow: none !important;
background: none !important;
}
.pagination-next-link:hover {
color: var(--cocoon-text-color) !important;
}
/*******************************/
主なプラグイン
| 名前 | 機能 |
| Category Order and Taxonomy Terms Order | カテゴリの並び替え。 オプションで自動ソートONにしないと動かないので注意。 |
| Code Block Pro | コードのシンタックスハイライトがきれいになる。 |
| Envira Gallery Lite | ブログトップのここちゃん写真集（タイル）の表示に利用。 |
| EWWW Image Optimizer | アップした画像の縮小とEXIF情報を除去してくれる。 |
| WP 2FA – (2要素認証) Two-factor authentication for WordPress | ログイン時に二要素認証をしてくれる。 怖いのでなんとなく入れている。 |
| XO Security | ログインのログ保存とかログインURL変更ができる。 URL変更は必須かと思う。 |
| XML Sitemap Generator for Google | Googleサーチコンソールとかで使うサイトマップを作ってくれる。 例えばこんなやつ↓ https://cute-dolls.info/post-sitemap.xml |
| BackWPup | ブログデータを世代指定で保存してくれる。 いつか役に立つかもね。 |
| WP Multibyte Patch | マルチバイト文字関連のバグを直してくれるらしいけど効果は知らん。 |