< pocket

期間限定でブログを春デザインにしました!テーマ作成でお世話になったサイトを紹介

期間限定でブログを春デザインにしました!テーマ作成でお世話になったサイトを紹介

春らしくなって少しずつ暖かくなってきましたね〜!というわけで、ブログデザインの春テーマを作りました(PC版のみ)。春の間の期間限定で公開してます。

今回はテーマ作成にあたってのポイントやお世話になったサイトを紹介します!

テーマは藤と桜!

春ということで、藤と桜をテーマにデザインしました!スマホ版は作っていないので、PC版で見てくださいねー!

Design Color 春デザイン

お気に入りはactywayあくちー(@actywav)さんが作成した桜のプラグイン!このテーマでは桜の花びらの色を変えて藤の花びらとして使用しています。藤の花が上から降ってくるイメージ。

Design Color春デザイン

サイトに桜を降らせることができるあくちーさんのスクリプトはこちらで配布しています!あくちーさん素敵なスクリプトをありがとうございます〜!

春風そよよ〜!桜の花びらがヒラヒラ舞い落ちる JavaScript だよー!
サイトに桜を降らせるスクリプト!

サムネイルサイズ変更にあたりPHPでデザインを切り替えて表示

テーマ変更にあたり、サムネイルのサイズを大きくしました。そうすると、サムネイルまわりのデザインも変わってしまうんですよね…。画像が以前より小さくなる分にはサムネイルを切り出して再生成すれば済む話なんですが、大きくするとなるとそうはいきません。途中からPHPでデザインを切り替える必要が発生してしまいました。

loop.phpでサムネイルの切り替え

プログラムが苦手なため、テーマの途中からサムネイルサイズを切り替える作業にかなり苦戦しました。基本的には以下のような方法で、サムネイルサイズが変わった日を境に出力を切り替えています。表示したい内容をデータとして取得し、いったん変数に入れてから出力する感じですね。

<?php
	$date = get_the_time('Ymd');//投稿日を取得
	if ($date >= '20150317') {//投稿日が3月17日以降なら
		echo 'サムネイルサイズ大のデザイン';//サムネイルサイズ大のデザインを表示
	}else{
		echo 'サムネイル小のデザイン';//サムネイルサイズ小のデザインを表示
	}
 ?>

今度忘れないように記事にしようかと思いますが、もっとスマートなやり方があるよ!というご意見があればぜひ教えてください!

オリジナルSNSシェアボタンを導入

今までは公式のSNSシェアボタンを設置していましたが、オリジナルのボタンを設置してみました。

オリジナルSNSボタン

以前にPHPでシェア数を取得してオリジナルSNSボタンを設置するという記事を書きましたが、これと同じ方法で実装できました!

SNSボタンをオリジナルデザインに!設置方法&シェア数の取得方法まとめ | Design Color
以前に書いた記事

シェア数や記事URLの取得などはWordpress用の表記にする必要がありますが、基本的なやり方は同じです。これも忘れないように近いうちに記事に書こうかなーと思います!

日本語Webフォントに挑戦

少し和風っぽい雰囲気を出したかったので、日本語のフリーフォントをWebフォントとして表示してみました。

Webフォント

今回使用させていただいたのはTyping Artさんの「はんなり明朝」。和風の明朝体なのに読みやすく、優しい雰囲気のフォントです。

はんなり明朝

Webフォントとしてフリーフォントを使用する際に、ライセンスの明示方法についてとても悩みました。色々調べたところ、こちらの記事にライセンスの解説や明示方法がわかりやすく記載されていました。ありがとうございます!

Web フォントとライセンス
Webフォントのライセンス明示方法

はんなり明朝は「IPAフォントライセンスv1.0」に準じているため、以下の項目をcssのソースコードに記載しています。

  • IPA フォントライセンス v1.0に準じていること
  • 配布元のURL
  • IPAフォントのURL
  • IPA フォントライセンス v1.0のURL

具体的な表記方法は以下の記事が参考になります。ライセンスごとに明示方法がまとめられていて、とても助かりました。また他のライセンスのWebフォントを使用する際、お世話になると思います!

WebフォントのCSSとライセンス記載まとめ – 樂印
Webフォントのライセンス記載方法のまとめ

さいごに

このデザインは春の間のみということで、4月末くらいまでの期間限定テーマです。そのうち秋や冬など全季節のテーマを作れたらいいなと思っています。

大急ぎで作成したテーマなので、何か不具合等があったら教えて下さると助かります!よろしくお願いします!

以上、彩がお伝えしましたー!

この記事をシェアする!

コメント

0件のコメント

コメント

もし何かコメントをいただければ幸いです。また、ご指摘等も大歓迎です。
よろしくお願いします。(※Eメールアドレスは公開されません)

トラックバック

トップに戻る