[CSS]背景をいじるだけ！俺のブログ…キレイだろ？

ブログのデザインって、読む人にとって結構重要なポイントだったりします。ブログの管理者としても、プレビューで確認する記事がおしゃれだったらやる気が起きますよね。

今回参考にしたのは石川真弓さん(以下、うらまゆさん）(@mayumine)が運営するURAMAYUというブログ。
高校時代からよく見てるロイヤルカスタマーと言っていいほどよく見てるブログなのですが、そのうらまゆさんが2017年にブログデザインを一新したんです。

その際にめちゃくちゃ写真が映えて綺麗だなぁと感じたので、僕も似せてみました。

当ブログの背景デザインを簡単にオシャレにしちゃったので、どこをどう変えたか、失敗しながら学んだ僕がお伝えします！

背景のデザイン詳細

うらまゆさんのブログのbodyタグ内は二つの層に分かれているように見えます。背景の層と記事のそうです。記事に写真を載せると、写真は記事の層の横幅いっぱいに広がります。また、背景はアイキャッチ画像をぼかしたものになっており、縦スクロールしても動きません。

一方Nth waveでは少し特殊なテンプレートを使ってしまっているみたいで、層が二つでは収まりきりません。当初は写真をいっぱいに広げるためにいろんなclassの幅をかえ、試行錯誤していましたが、センタリングされなくなったり、背景を一つの層にまとめるのに苦労したので、諦めました。笑

僕のブログでは写真の左右に余白が空いてしまっています。まぁこれはmarginなどの調整でなんとかなる問題かもしれません。まだ試してないのでなんとも言えませんが。。。

他にも、header.phpが記事ページとトップページで共有されているので、トップページの背景も最新から2番目のアイキャッチ画像になっていますが、そこは味の一言で片付けることにします。笑

背景デザインの変え方

僕はアイキャッチ画像をphpで読み込んでcssで画像を調整し、bodyタグ内に出力するようにしています。

アイキャッチ画像のデータを取得する関数はwp_get_attachment_url( get_post_thumbnail_id() )です。

これでアイキャッチ画像のURLを取得することができたので、何かの変数に落とし、bodyタグ内のphpによって呼び出します。また、bodyタグにidをつけることで、背景にぼかしをかけます。

また、僕のサイトの画像は、クレジットのウォーターマークをつけていることが多いので、背景画像はセンタリングをしました。

実際のコードを下に載せます。変更するのはheader.phpのみでいいと思います。お好みでCSSを別にお書きください。僕はphpファイル内に直書きしてしまっています。

参考にしたサイト

Design Colorさん
CSSで背景画像にぼかし加工と半透明カラー加工を同時に行う – Qiita

上の二つのサイトを参考にさせていただきました。ありがとうございました。

ついでに見出しも変えたよ

見出しも一新しました。今までのリボンみたいなやつは、少し重い感じがして、モダンなデザインでもなかったので、スタイリッシュにしてみました。最初の文字だけはこのブログのイメージカラーでもある#ac75acを採用。

こちらもセンタリングすることでみやすさを向上させています。

マーカーもつけて行こうかな

このブログの強調文字(bold）は太文字のみでしたが、今回新たにマーカーを付け加えてみました。

しかも、二種類！strongタグの部分はSEO的にも強調されるらしいので、検索ワードに引っかかりそうな重要なことに関してはstrongタグで、それ以外にみやすさを重視したい部分(そんな強調しなくてもいいんだけど…)という部分に関してはspanタグで実装しています。

こちらも実際のコードを下に載せておきますね。

See the Pen wmPXGV by yuta fujii (@yutahand) on CodePen.

スニペットツールがオススメ！

wordpressのテキストエディタには便利なショートカット機能がありますが、cssなどを変える際は「スニペットツール」というものをお勧めします。

簡単に言えば「タイピング補助ツール」のこと。例えば僕は、今回CSSを変更した後に、見出しタグを追加する際、”,h2″と打つことで、h2タグ(任意のクラス名を指定したもの)が出るようにしています。
また、自動的にタグの間にカーソルが行くようにしています。

スニペットツールを使うことで、普段のコーディング作業の時間短縮にもなりますし、わざわざタグを打つ際にマウスを使う必要もありません。

二つのタグで囲むhtml言語は、コーディングする際はめんどくさいですよね。wordpressの便利なショートカットボタンを押すにも、二回の手間がかかります。

ぜひ一度、試してみてください！

「TextExpande」が有名ですが、僕は「Dash」をお勧めします。無料でもほぼ一生使えるのではないでしょうか。今の所僕も課金していません。