Copy」へ以降しております。このブログではmanablogでお馴染みのマナブさん(@manabubannai)が作成されたテーマ、【Minimal】を使用しています。ミニマリスト向けのWordPressテーマ『Minimal』を作りました世の中にはいろいろなWordPressテーマがあるけど、色使いがごちゃごちゃしてる気がしたので、ミニマリスト向け(シンプルデザイン)のWordPressテーマを作りました。PC、スマホに対応したシンプルなWordPressテーマです。基本的には個人のブロガー向けですが、トップページをカスタマイズすれば企業サイトにも使えるかと思います。このテーマの使用感について、当ブログでレビューしているので良かったら参考にしてみて下さい。WordPressテーマ【Minimal】の使用感などのレビュー2019年8月現在、このブログではワードプレスの有料テーマ【Minimal】を使用しています。manablogでお馴染みのマナブさんが作成されたテーマで、導入検討されている方は多いのではないでしょうか?他の有料テーマとは異なり、情報が少なくお困りの方も多いかと思います。ここでは良くも悪くも知って欲しい点を解説します。このテーマを購入した方は恐らくそんなに多くはないと思いますが、それでも色々な思いからこのテーマを購入された方がいらっしゃると思います。購入された方ならわかるかと思いますが、デフォルト状態のテーマは最低限の機能すぎて使いにくかったりしますよね。いってカスタマイズ例を解説するサイトがそんなに多くなかったりします。ここでは、ご自身のMinimalを良いものにしてもらおうという思いを込め、当ブログのカスタマイズのヒントを解説します。数少ないMinimalのカスタマイズを取り上げるサイトをも紹介します。当ブログ以外のMinimalカスタマイズを取り扱う参考記事ワードプレス有料テーマ【Minimal】のカスタマイズ内容と実装のヒントあらかじめ、ご連絡しておきます。Minimalテーマ購入前まで、プログラミングはおろかワードプレスの構造も知りませんでした。実装するにあたりとても苦労しました。勉強中はブログも書けませんでしたが、今振り返ってみれば、良い経験ができたと思います。このブログにあるものは、デフォルトにあったもの以外はすべて独学で実装しました。以下に、カスタマイズした内容を備忘録的に書き残します。カスタマイズに必要なコードについては、今(記事の初回投稿時)は公開しません。考えるヒントとなるものは書き残しておくので、ぜひご自身でカスタマイズにチャレンジしてみてください。ブログタイトルロゴの使用ロゴを自作し、WordPressでアップロード。その画像URLを表示させます。ここで注意したいのが、ロゴを表示させるための方法です。CSSを確認するとすぐわかるのですが、Minimalのテーマでは、Bootstrapのグリッドシステムが採用されている模様。Bootstrapにより12等分されるうち、いくつを使うかロゴサイズに応じて変更します。画面サイズがスマホかそれ以外かでサイズが適切に調整されるようにしています。本家manablogさんの見よう見まねです。上記タイトルロゴで設定したグリットの余りを、この文字に当てています。そんなに難しくありません。ヘッダーナビの編集ヘッダーナビを登録します。header-nav.phpには最初からサンプルとしてテンプレートが定められてあります。そこに、自分のブログに適したカテゴリを当てはめていくだけです。Awesomeを使用しています。アイコンと文字の間は半角スペースひとつあけると視認しやすくなると思います。SNSボタンの追加デフォルト状態からFacebookTwitterPocketはてなブックマークLINERSS上記の通りに変更しました。実装のヒントまずはテーマ内のsns.phpを確認し、ボタンの構造を解析します。実装したいボタンについて、既設をヒントに同様に構築します。その後、CSSでスタイルを整えます。それぞれのイメージに合った色を使用することが望ましいですね。アイコンについては、デフォルト状態ではicomoonが使用されているようです。Awesomeを使用したりもしました。サイドバーに「良く読まれている記事」一覧の追加ホシタニッキさんの情報を参考としました。昔は購入時に送られるGoogleドキュメントにこのサイトのリンク張られていましたが、今は外されたみたいですね...。ブログ高速化など】WordPressテーマMinimalの便利な設定についてまとめました。基本的にコピペで対応可能です。ホシタニッキさんでは、この内容だけではなく、カスタマイズの参考となる内容がふんだんに盛り込まれています。Minimalを使用するなら確認して損はありません。ファビコンの設定ファビコンとは、簡単に言うとサイトのシンボルマークのことです。ブラウザのタブなどに表示されます。ここも、ホシタニッキさんを参考としました。【ミニマリスト向けのシンプルなテーマ】Minimalの編集方法ミニマリスト向けのシンプルなWordPressテーマ、Minimalの編集方法です。ファビコンを含め、初期設定についての情報がふんだんにあるため、Minimalのテーマ使い始めの方におすすめです。サイドバーのプロフィールの変更デフォルトの雰囲気の良い写真も良いのですがオリジナルのアイコンを準備した方が良いでしょう。ご自身のプロフィールに書き直すのも忘れずに。一応Twitterリンクを張ったりもしています。me!とPortfolioそしてTwitterとなっていますが、CategoryInformationTwitterにしました。画像の通り、カテゴリの羅列だったり、プライバシーポリシーなどの表記となります。ここをどう使うかは特に決まりはないため、自由に使ってOKだと思います。アドセンス広告のサイズ調整レスポンシブ広告だと上手く表示されない時もあるため、divなどで広告を調整しました。Googleアドセンスのヘルプなどを参考としています。参考となる記事を紹介しますが、ヘルプ内にはこれだけではなく色々と解決策があったりしますので、必要に応じてご確認下さい。「ShareHtmlを、もっと綺麗にしたメーカー」の導入テーマ製作者であるマナブさんの作品でもあります。以下のようなリンクが簡単に作れます。美しいHTMLをシェアしよう|ShareHtmlを、もっと綺麗にしたメーカーブログ記事内で他サイトリンクをサムネイル(アイキャッチ画像)付きで表示するためのブログパーツです。デザインが洗練されているツールがなかったので作りました。美しいHTMLをシェアできる、ShareHtmlを、もっと綺麗にしたメーカーです。導入方法としては、適当なURLを打ち込むとプレビュー画面に加えてHTMLコードとCSSコードが表示されるため、CSSコードをコピーしてテーマのstyle.cssへ追記するだけです。HTMLコードは、記事の原稿にぶち込みます。その他CSSの全体的な調整を行いました。トップに戻るボタンを実装しました。スマホ使用時、スワイプ効率を高めるため画面が左右に揺れないようにしました【停止中】本家manablogと同じように最新記事より前に3つの窓を作成しました【停止中】スマホ使用時、記事幅を縮小してみましたこんな感じです。需要が高そうなものは、簡単に解説したいと思います。トップに戻るボタンの実装。当ブログを少し読み進めていただくと、スマホPC問わず画面右下に半透明の灰色の矢印が出てくると思います。「トップに戻るボタン」でググると作り方の参考となるサイトがたくさん出てきます。最新記事より前に3つの窓を作成する。manablog様より引用させて頂きます。こんな感じの窓ですね。考え方としては、ブログタイトルのロゴについて解説しているところでもお知らせしましたが、Bootstrapを使用しているというところがカギかと。単純に3分割するように設定してあげればOKですね。スマホ版では1窓ずつ表示されていますが、画面がスマホサイズかそれ以外かで分岐するようプログラムする必要があります。この窓は良くも悪くも常にトップに表示されます。スマホ版だと最新記事にたどり着くまで少しだるいので、当ブログではあえて実装見送りにしています。スマホ版で記事幅を変える。