ブログのデザインって、読む人にとって結構重要なポイントだったりします。ブログの管理者としても、プレビューで確認する記事がおしゃれだったらやる気が起きますよね。
今回参考にしたのは石川真弓さん(以下、うらまゆさん）(@mayumine)が運営するURAMAYUというブログ。
高校時代からよく見てるロイヤルカスタマーと言っていいほどよく見てるブログなのですが、そのうらまゆさんが2017年にブログデザインを一新したんです。
その際にめちゃくちゃ写真が映えて綺麗だなぁと感じたので、僕も似せてみました。
当ブログの背景デザインを簡単にオシャレにしちゃったので、どこをどう変えたか、失敗しながら学んだ僕がお伝えします！
CONTENTS [Hide]
背景のデザイン詳細
うらまゆさんのブログの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ファイル内に直書きしてしまっています。
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <style> | |
| #yuta_thumbnail{ | |
| background-size: cover; | |
| background-position: center center; | |
| position: relative; | |
| z-index: 0; | |
| } | |
| #yuta_thumbnail:before{ | |
| content: ''; | |
| background: inherit;/*背景画像を継承する*/ | |
| -webkit-filter: blur(5px); | |
| -moz-filter: blur(5px); | |
| -o-filter: blur(5px); | |
| -ms-filter: blur(5px); | |
| filter: blur(5px); | |
| position: absolute; | |
| top: -5px; | |
| left: -5px; | |
| right: -5px; | |
| bottom: -5px; | |
| z-index: -1; | |
| } | |
| </style> | |
| </head> | |
| <?php | |
| $title_bg = "style=''"; | |
| if ( has_post_thumbnail() ) { | |
| $img_url = wp_get_attachment_url( get_post_thumbnail_id() ); | |
| $title_bg = "style='background-image:url(".$img_url."); background-repeat: no-repeat; '"; | |
| } | |
| ?> | |
| <body id="yuta_thumbnail"<?php echo $title_bg; ?>> | |
| <div> | |
| # ここが本文 | |
| </div></body> | |
| </html> |
by 参考にしたサイト
Design Colorさん
CSSで背景画像にぼかし加工と半透明カラー加工を同時に行う – Qiita
上の二つのサイトを参考にさせていただきました。ありがとうございました。
ついでに見出しも変えたよ
見出しも一新しました。今までのリボンみたいなやつは、少し重い感じがして、モダンなデザインでもなかったので、スタイリッシュにしてみました。最初の文字だけはこのブログのイメージカラーでもある#ac75acを採用。
こちらもセンタリングすることでみやすさを向上させています。
マーカーもつけて行こうかな
このブログの強調文字(bold）は太文字のみでしたが、今回新たにマーカーを付け加えてみました。
しかも、二種類！strongタグの部分はSEO的にも強調されるらしいので、検索ワードに引っかかりそうな重要なことに関してはstrongタグで、それ以外にみやすさを重視したい部分(そんな強調しなくてもいいんだけど…)という部分に関してはspanタグで実装しています。
こちらも実際のコードを下に載せておきますね。
スニペットツールがオススメ！
wordpressのテキストエディタには便利なショートカット機能がありますが、cssなどを変える際は「スニペットツール」というものをお勧めします。
簡単に言えば「タイピング補助ツール」のこと。例えば僕は、今回CSSを変更した後に、見出しタグを追加する際、”,h2″と打つことで、h2タグ(任意のクラス名を指定したもの)が出るようにしています。
また、自動的にタグの間にカーソルが行くようにしています。
スニペットツールを使うことで、普段のコーディング作業の時間短縮にもなりますし、わざわざタグを打つ際にマウスを使う必要もありません。
二つのタグで囲むhtml言語は、コーディングする際はめんどくさいですよね。wordpressの便利なショートカットボタンを押すにも、二回の手間がかかります。
ぜひ一度、試してみてください！
「TextExpande」が有名ですが、僕は「Dash」をお勧めします。無料でもほぼ一生使えるのではないでしょうか。今の所僕も課金していません。
2019年1月11日 トップページに華を。JavaScriptを導入してみた。 Posted in Programming, WordPress
2018年9月12日 綺麗なリンクカード！細々したブログカスタマイズまとめ。 Posted in WordPress
2021年2月15日 ブログ、再開します Posted in Other![[迎春] 2018年の振り返りと2019年の目標](https://yutahand.com/wp-content/uploads/2018/11/20181103-DSC00678-150x150.jpg)
2019年1月4日 [迎春] 2018年の振り返りと2019年の目標 Posted in Other
2018年8月31日 導入はカンタン。Google Adsenseを追加して色んな数値の意味を調べてみた。 Posted in WordPress