Blogをカスタマイズしたので自分用のメモ φ(..)メモメモ 作成

2016.11.04

こんにちは、るぅ（@ru_rin）です。
Blogのカスタマイズをしたので、自分用のメモとして書くことにしました。

Blogの変えたいところ

  • サイト全体のフォントをゴシック体から明朝体にしたい
  • アイキャッチ画像がない時に自動で特定の画像をアイキャッチ画像にしたい
  • タイトル文字をカスタマイズしたい
  • 小見出しや引用部分などを自分の好きなデザインにしたい

WordPressテーマの変更

今まで使っていたWordPressのテーマはSimplicity1.8でした。
シンプルなデザインが好きだし、ある程度のカスタマイズ（SNSボタンのデザインが複数選べたり、いくつかスキンが配布されている）ができるので使用していました。
「もっとシンプルなのがいい！」とShotokuを使っていた時期もあるのですが、画像がものを言うテーマなので諦めました。

自分がしたい事（カスタマイズ）ができるテーマはないかと探してみたところ、Simplicityの2がリリースされていました。
子テーマやスキンが使えるのは以前と同じですが、２ではパーツスキンという機能が追加されています。
Simplicitパーツデザインの着せ替えができる「パーツスキン」機能の使い方と仕様のページを読んでみると、私のしたい「小見出しや引用部分などを自分の好きなデザインにする」ができそう！→Simplicityの2にテーマを変更しました。

サイト全体のフォントをゴシック体から明朝体にしたい

Simplicityの2はフォントがゴシック体になっています。
style.cssでワードプレスのフォントを一括でゴシックや明朝に変える方法を参考に、WordPressの管理画面の「外観」→「テーマの編集」→「Simplicity2 child: スタイルシート (style.css)」にソースコードを追加

[css]
/* Simplicity子テーマ用のスタイルを書く */
body {
font-family: “游明朝体”, “Yu Mincho”, YuMincho, “Hiragino Kaku Gothic ProN”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, “ＭＳ ゴシック”, sans-serif;
}
[/css]

無事、サイト全体が明朝体になりました＼(^o^)／
（パソコンからら明朝体になってるのですが、スマホからはゴシックのまま・・・（ ; ; ））

アイキャッチ画像がない時に自動で特定の画像をアイキャッチ画像にしたい

普段からなるべく写真を撮って、Blogではアイキャッチ画像を設定できるようにしなくちゃだけれど、ない時も多い。
毎回アイコン画像をアイキャッチに指定するのは面倒なので、何か方法はないかと検索してみたら「アイキャッチ画像を自動で設定してくれるプラグイン「Default Featured Image」」という記事を発見。
早速Default featured imageをインストールして動作確認してみたら、ちゃんと表示されていました＼(^o^)／

タイトル文字をカスタマイズしたい

サイト全体は明朝体でいいんだけれど、サイトのタイトル「Digital Travelersnote」はアルファベットだし、webフォントを使ってみたい。
フォントサイズの変更もしたい。
GoogleFontのShadows Into Lightが好み♪

Simplicity2の親テーマのstyle.cssを見て（読んで？）サイトのタイトルは「#site-title」で指定するっぽいな、とアタリをつける。（注意：親テーマスタイルシートはなるべく触らない）
Simplicitパーツデザインの着せ替えができる「パーツスキン」機能の使い方と仕様を参考に「article-sitetytle-0001.css」というファイルを作成。
使うMacアプリは「CotEditor」

[css]
#site-title{
font-family: ‘Shadows Into Light’, cursive;
margin-top:16px;
margin-bottom:30px;
font-size: 30px;
line-height: 100%;
}

#site-title a{
text-decoration:none;
color:#222;
font-size:50px;
font-weight:normal;
}
[/css]

マージンボトムも10pxから30pxにしたっけ？（うろ覚え）

WordPressの管理画面の「外観」→「テーマの編集」→「Simplicity2 child: スタイルシート (style.css)」にソースコードを追加
一行目に

[css]
@charset “UTF-8”;
[/css]

があるので、二行目に

[css]
@import url(‘https://fonts.googleapis.com/css?family=Shadows+Into+Light’);
[/css]

を追加。

タイトル画像-変更後
ちゃんと変更されてるー!! (ノ≧∀)ﾉわぁ～い♪

さいごに

ひとまずこれくらいでいいかな。
そのうち広告位置や「前ページ」「次ページ」へのリンクの位置も変更したいです。
インターネットが一般化した頃、HTMLを少し触ったことはあるけれど、CSSが出始めた頃に離れてしまったので、パーツスキンでカスタマイズできるのがCSSに慣れるのにちょうどいいです。
ここには書かなかったけれど、WordPressの管理画面からの投稿でMarkdown記法を使えるようにするプラグインをいれたので、少しずつMarkdown記法にも慣れて、記事を書くスピードも早くなるといいな♪

それではまた。

コメント