WordPressテーマ「XWRITE」のテーマ紹介と簡単なカスタマイズ

ワードプレステーマ「XWRITE」を使い始めました。

XWRITEとは

はじめてのブログに最適なWordPressテーマ『XWRITE（エックスライト）』がおすすめ！

『XWRITE（エックスライト）』は、
ブログ運営に役立つ機能を多数搭載し、誰でも簡単に使えるシンプルな操作性を実現。
軽量設計で高速表示。読み込みのストレスなくお使いいただけます。

価格

わたしは買い切りプランとサブスクリプションプランでテーマ本体の機能に違いはないとのことなのでエックスサーバーから買い切りプランを購入しました。

買い切りプランを選んだ理由は上記の料金表だと、サブスクリプションプランにしないとアップデートなどのサービスが継続的に受けられないように感じますが、買い切りプランでもアップデートなどのサービスを受けられるとのことだったからです。

その場合１年以上サブスクリプションプランを継続する予定なら買い切りプランにしたほうが１年以上経過時点で安いということになりますので買い切りプランに決めました。１年未満の利用で試しにXWRITEを使ってみたい場合のみサブスクリプションプランがおすすめです。

※詳しい違いは購入前に公式にて確認ください。

見出し装飾（１２種類）

あらかじめ用意された見出し装飾が充実しています。

追加cssによるプチカスタマイズ

スキンがあらかじめ用意されているXWRITEは「テーマ導入後すぐに記事を書き始められる」という点がメリットとなっているテーマですが、「ほんの少しだけ文字を太くしたい」「ここの余白を少し抑えたい」などのプチカスタマイズを一部ご紹介します。

コピペで対応可能です。

グローバルナビの文字を太字にする

.header .gNavList a, .header-fix .gNavList a{
	font-weight:bold;
}

グローバルナビのホバー時の色を変更する

.header .gNavList a:hover, .header-fix .gNavList a:hover{
	color:#000000;/* 変更したいカラーコード */
}

スマホハンバーガーメニューのボタンから「menu」を消す

.gnav-fix .drawer__open::after, .header-fix .drawer__open::after{
	display:none;
}

スマホハンバーガーメニューのボタンの「menu」を任意の文字に変更する

.gnav-fix .drawer__open::after, .header-fix .drawer__open::after{
	content:"ここに表示させたい文字を記述";
}

サイトタイトル（テキストの場合）のフォントサイズ。文字間、太さを調整する

.siteInfo__logo a{
	font-size:2.5rem;/* フォントサイズ */
	letter-spacing:1.5px;/* 文字間 */
	font-weight:bold;/* 太さ */
}

ヘッダー下部とフッター上部に点線を入れる

.header{
	border-bottom:dotted 2px #eee;
}
.footer{
	border-top:dotted 2px #eee;
}

記事下部の次の記事、前の記事に背景色をつけて余白を入れる

.articlePager a{
	background:#fff;/* 背景色 */
	padding:1em;/* 内側余白 */
	border-radius:10px;/* 角丸 */
}

XWRITE

WordPressテーマ「XWRITE」公式サイト