大東 信仁（ものくろ） 当ブログ ものくろぼっくす の外観を変更しました。今回も有料テーマを購入しまして、LIQUID DESIGNさんのMAGAZINEをチョイスしました。
6時間ほど、調整していい感じになりました。
知ったきっかけ
このテーマを知ったきっかけは、facebookだった思います。そして、「あなたのスイッチを押すブログ」さんにて、姉妹関係になるテーマ MAGAZINE-Pが使われているを見つけて、気になっていました。
年明けのタイミング（2016年1月）に、facebookのメッセージが届かない記事にアクセス集中がありまして、嬉しかったのですが、レンタルサーバーから規制によってサーバーダウン、その後、すぐに網元AMIさんを契約して、ブログを引越しました。その時は、バズ部さんが配布されているテーマを使って、カスタマイズを行う予定でした。
ところが、ありがたいことに、お仕事の依頼もたくさんいただきまして、部分的には調整しつつも、根本的な部分は手付かずの状態に。いつまでもカスタマイズに着手できていない状態だったので、思い切って有料テーマを購入しました。
結果、買って正解でした。半日の作業でかなり効率良く、情報発信するベースとなる状態を作れました。
このテーマのGood
関連記事も表示でき、人気記事はプラグイン（WordPress Popular Posts）をインストール・有効化するだけで最適化された表示ができます。
テーマのファイルサイズがコンパクトでいい感じです。ライセンスがGPLに準拠されています。
子テーマにてカスタマイズ
テーマファイルを直接書き換えると、後々の管理が大変になります。カスタマイズとメンテナンスを両立させるために、子テーマを使ってカスタマイズしています。
子テーマを設定するときも、functions.phpは使うことが推奨されています。
詳しくはこちらの記事をご覧下さい。
カスタマイズしたCSS
フォントの調整
日本語・欧文フォントにはこだわりがあります。昔 LaTexをやっていたので組版が好きなのです。読みやすさにこだわって調整しました。本当はWebフォントを使いたいのですが、表示速度を優先して、採用を見送りました。また、記事本文のマージン領域もちょっと工夫して見やすくしています。
参考にした記事はこちらです。
見出しの調整
見出し部分の文字サイズと並びも調整しています。文字と文字の間は少しゆったりにしています。
AmazonJS表示部分もカスタマイズ
テーマとは違いますが、Amazonのリンクを作成しているプラグイン AmazonJSのレイアウトも読みやすくなるように設定しています。
写真のレイアウト
写真はセンタリングの配置へ変更し、枠を書くようにしました。iPhoneのスクリーンショットなどを掲載した時に、背景と同化する場合があるためです。
パンクズ リスト
パンクズ リストの記事タイトル部分の表示も控えめに調整しました。
サブタイトル
スマートフォンでの表示にて、タイトルロゴとサブタイトルが窮屈だったため、配置を変更しています。
CSSソースコード
ロゴは変えずに
ロゴは愛着があります。そして、感謝しているので、変更していません。ロゴ誕生の秘話はこちらの記事をご覧下さい。
もう一つ、記事を読んで行かれませんか？
- functions.phpを使ってますか？WordPress 子テーマの作り方間違ってたのに気づきました。 : ものくろぼっくす
- 「視覚マーケティング実践講座 ブログデザインで自分ブランドを魅せる」絶版だけど、ブログのデザインを考えるのに役立つ凄い本 : ものくろぼっくす
- facebookいいねボタン（バイラルメディア風？）を子テーマをカスタマイズして、記事下に設置しました。 : ものくろぼっくす
- ものくろキャンプのWebサイトをリニューアルしました。すっきりと情報をまとめる形を求めて : ものくろぼっくす
- 【ものくろな2013年総括 第4回】東京・名古屋など6つのセミナーに参加し、ブログのデザインを見つめ直した月でした。（第4回/全12回） : ものくろぼっくす
- デザインを考えている今、参考にしている6つのサイトさん 私的な覚え書き : ものくろぼっくす
- 2013年4月は人との繋がりに助けられ、ブログデザインを学びました。 : ものくろぼっくす
[amazonjs asin=”4844327518″ locale=”JP” title=”視覚マーケティング実践講座 ブログデザインで自分ブランドを魅せる”]
[amazonjs asin=”4844365711″ locale=”JP” title=”デザイナーのラフスケッチ デザインのアイデアを形にする過程”]
[amazonjs asin=”4416115016″ locale=”JP” title=”アートディレクションの「型」。: デザインを伝わるものにする30のルール”]
