日記ブログに１カラムテーマ「Saka」がおすすめな理由とカスタマイズ紹介。

こんにちは、水那田ねこです。

日記やエッセイを書いてるブログの方で、最近テーマを変更しました。このブログです。

UMI＊MEMO -日記とエッセイ-

今回選んだテーマはとてもシンプルな「Saka」という１カラムのテーマです。これを少々カスタマイズしてミニマルで好みの感じに仕上がりましたのでその内容を記しておきたいと思います。

この記事はこんな人におすすめ

シンプルなテーマを探してる人
書くことに集中できるブログを探してる人
エッセイや日記向きテーマを探してる人
１カラムのテーマを探してる人

シンプルな１カラムテーマ「Saka」
- このテーマを選ぶ意味
カスタマイズの手順
- テーマのインストール
- コードをコピペ
アウトプットの訓練のために

シンプルな１カラムテーマ「Saka」

このテーマを選ぶ意味

たぶん、今回のテーマ選択とカスタマイズはほとんどのブロガーさんたちには興味のないものなのかも知れません。

SEO対策に凝ってるわけでもなくSNSボタンもない、見た目がほとんど昔ながらの日記ブログのような、機能の削ぎ落とされたブログだからです。わざわざWordPressでこのようなテーマを使う意味が本来ならあまりないかと思います。

しかし、このテーマを選択する意味としては、メインに書くほどでもないような気軽な記事を書いていくサブブログとして、ものを書くことに集中できるブログとして、かつ他のブログサービスにはない広告なしの美しい見た目にこだわる場合として、というものがあると思います。

収益とは関係ないブログ
サブで持つブログ
美しい見た目のブログ

このような用途でブログを持ちたいと思ってらっしゃる方にはこの記事はとても参考になるかと思います！

カスタマイズの手順

では、簡単に手順を書いておきますね。後にCSSも載せてますのでよければ試してみてください。

WordPressテーマ「Saka」をダウンロードしてインストール。
追加CSSへコードを追加。
内容は、まずフォントの変更。ブログ全体のフォントをちょっとコロンとしてかわいい「M PLUS 1p」に変更(グーグルフォントからのリンク)。
本文フォントの大きさとタイトル文字の大きさを調整。
画像は全てモノクロに表示されるように。
リンクの下線は全て消去。
完成。

すごくザッとしてますが、だいたい手順はこんな感じです。

あまりに無駄のない飾りのないテーマなので少し水那田しい気もしますが、まあ、ここはサブブログなのでこれくらい本命ブログと差がありメリハリがついてる方がいいとかも知れません。

テーマのインストール

WordPress管理画面のテーマ変更から新しいテーマを検索します。

Saka

と入れてみるとすぐ出てきますので選択して、インストールします。プレビューで表示されるので「有効」ボタンを押します。

コードをコピペ

テーマをダウンロードしたなら、基本設定などを行った後、以下のCSSコードをテーマカスタマイズの追加CSSの部分にコピペするだけです。

/*GoogleFontsを導入*/ 
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p&display=swap');
/ *GoogleFontsを適用*/
 #page{
font-family: 'M PLUS 1p', sans-serif; font-size:13px;
}
/ *文字の大きさ調整・下線を消去*/
 .site-header{
width:370px;padding-top:20px;font-size:20px;
} 
.entry-title a{
text-decoration:none;
} 
.entry-meta a{
text-decoration:none;
} 
/*リンクの色・下線を消去*/ 
a,.logged-in-as a,.nav-links a{
text-decoration:none;color:#6a1917;
} 
.site-credit a{
text-decoration:none;
} 
/*送信ボタンの色*/
 #submit{
background-color:#eee7e0;
} 
/*アイキャッチを隠す*/
 .entry-thumbnail img{
display:none;
}
 /*画像を白黒に*/
 img{
filter: grayscale(100%);
}
 /*文字間隔の調整*/
 .entry-content{
letter-spacing:1px;
}
 /*記事下のカテゴリーを消す*/ 
.entry-footer{
display:none;
}

コピペすると、プレビューでどんな感じに仕上がるか見ることができますので、もし気に入ったなら、保存ボタンを押しましょう。

これで終了です。