ブログのデザインを変えた!

Web
スポンサーリンク

はじめに

こんにちはー。

ブログのデザインを変えましたので少しだけ変えた部分を紹介します。ついでに、前前回のデザインも一緒に紹介します。

デザインの推移

Materialize – free WordPress Theme

ベースデザイン

myThem.es様の「Materialize – free WordPress Theme」です。

スクリーンショット

上記の画像は最新で取り直したため、目次やアイキャッチ用のアイコンが設定されていますが、2018年6月当時は目次や画像アイコンなどがありませんでした。

解説

2018年6月にWordPress.comからさくらサーバーに引越しして、利用していたデザインです。当時はマテリアルデザインが大好きで、SEO WPのデザインと迷って最終的にMaterializeにしました。Wordpress.com時代は好きなデザインは選べなかったので、何でも選べるというのはすごく嬉しかったです。ただ、引っ越し当時は、アイキャッチの設定をしていなかったため全体的に画像がなく、アイキャッチの設定していなくても適当な画像が表示されるプラグインなどを入れていました。

私が好きだった紫と星をイメージしたデザインに変更を加えて利用していました。

マテリアル

ベースデザイン

Nobuo_CREATE様の「マテリアル」です。

スクリーンショット

上記の画像は最新で取り直したため、当時は目次はありませんでした。

解説

2018年9月ごろに切り替えたテーマです。1か月にわたって、古い記事のタグ付け、カテゴリ分け、内容修正、アイキャッチ設定などをしていまして、ようやく設定し終わったのと、素晴らしいテーマがあったので切り替えしました。

このテーマの良いところは、非常に自由度が高く色々な設定に対応しているというところです。特にトップページでカテゴリ別で記事がいくつか表示されるという点がよかったです。私はカテゴリ分けで記事を書いているのですが、1つのカテゴリの記事をたくさん書くと、別のカテゴリの記事が流れてしまうのでそういう問題を解決できるというのは大きいです。

他にもスマホにも対応しており、上に戻るボタンとかも勝手についたり、SNS機能に標準対応していたり、今まで別途用意していたプラグインなどが不要になり非常に軽くなりました。

このころにソースコードをハイライトするプラグインも導入したり、関連記事を下に表示させたりするようなプラグインも入れました。

本テーマと同様なことが行えるプラグイン

Cocoon

ベースデザイン

わいひら様の「Cocoon」です。

スクリーンショット

解説

2019年8月に切り替えたテーマです。Googleが提唱したマテリアルデザインも好きなのですが、色々なサイトでマテリアルデザインの採用が少なかったり、Qiitaのようなシンプルなフラットデザインに憧れて切り替えしました。

このテーマの良いところは、機能が非常に充実しているところももちろんなのですが、私としては、超軽いところと、サイドバーに目次を設定できるという2点があります。早速、Qiitaっぽくサイドバーに目次を設定して、スクリプトを埋め込んで見ている場所を表示するようにしました(笑)。ついでに、ソースコードの表示用デザインもQiitaっぽくしました。

それと同一カテゴリ内で、次の記事、前の記事に移動できるのもよいですね。私は、これまで手動で以下のように改造していたのですが、本テーマは内蔵しているため改造が不要です。

// 同一カテゴリ内の前後の記事を表示できる
<h3 class="tag-header">前後</h3>
<div class="natade_post_link">
	<div class="natade_post_link_previous">
		<?php previous_post_link('%link', '前回の記事へ「%title」', true, ''); ?>
	</div>
	<div class="natade_post_link_next">
		<?php next_post_link('%link', '次回の記事へ「%title」', true, ''); ?>
	</div>
</div>

さらに更新日の表示も設定できるのが良いです。これも私は今まで手動で改造してました。

// これを
<?php the_time('Y/m/d') ?>

// このように変えていた
post:<?php the_time('Y/m/d') ?>
<?php if(get_the_time('Y/m/d') != get_the_modified_date('Y/m/d')):?>
, modified:<?php the_modified_date('Y/m/d') ?>
<?php endif;?>

記事を直接する編集ボタンも下にバーが表示されるので不要です。これも手動で改造していましたが、不要になります。

<?php edit_post_link( 'この記事を編集する' , '<span>' , '</span>'); ?>

とにかく、色々やりたいことが改造なしで出来るのがすごいです。

本テーマと同様なことが行えるプラグイン

おわりに

マテリアルデザインが好きなのですが、ばりばりのマテリアルというより、フラットデザインにマテリアルデザインを取り入れた感じが今風という感じですね。全てのマテリアルデザインで統一してしまうと、記事を紙のように扱ったりするので、横幅が短くなり文章が入らなかったり、影の分見た目がごちゃごちゃした感じに見えたりすることがあるかもです。

とりあえずは、フラットデザインでしばらくいきたいと思います。

タイトルとURLをコピーしました