2017年10月現在においてWordPress標準の最新テーマである「twenty seventeen」ですが、本サイトもこのテーマをベースにカスタマイズしております。日々少しずつカスタマイズしてきましたが、このテーマ特有のカスタマイズに限定したネタをまとめて一挙公開します。
恐らく、このページ以上に「twenty seventeen」特有のカスタマズ方法を紹介しているページはないのではないかという位にまとめてみました。まとめたと言っても、今まで少しずつ記事にしてきたことをまとめて紹介するページと思ってください。
私も2017年6月よりWordPressでサイト運営を開始しましたが、最新テーマの「twenty seventeen」が一番斬新的な感じがして採用したのですが、実際に使ってみると直してみたくなる部分が多数出てきましたね。もう原型を感じさせないサイトになってしまいました。しかし、この「twenty seventeen」は新しい試みもされており、今からWordPressでサイト運営をするのであれば、間違いなくこのテーマが良いと思います。
他のテーマを選択するとしたら、私なら有料のテンプレートを利用します。しかし私は無料である標準テーマを選択しました。自分でサイトを成長させたかったことと、これを機にWordPressの仕組みを学びたかったこともあります。私のサイトに記載されていることは恐らく、有料で購入する本と同じくらいの価値があると自負しております。それなので、有意義なサイトであると感じた方は「はてブ」やFacebookの「いいね！」をしてくれると、私への励みとなり更に良い情報を提供できる糧となりますのでよろしくお願いいたします！
「twenty seventeen」のカスタマイズ方法の紹介
この標準テーマですがヘッダーイメージのインパクトが凄い！このようなサイトはアート系のサイトにはもしかしたら向いているかもしれません。これが一番大きな特徴なのですが、少し煩わしさを感じる部分。あとはSNS連携が標準装備されている。この連携アイコンにはSVGファイルという最新の仕組みを採用していることも特徴として挙げられます。
しかし残念なことに日本仕様にはなっていない。ここら辺がシステムエンジニアの血が騒ぎますね。根本的な仕組みを理解してカスタマイズしてやろう！ってな感じで。
カスタマイズの前に絶対にやっておくべきこと
カスタマイズ前には必ず子テーマを作成しておいてください！それをしていない方はまず下の記事を読んでからこちらのカスタマイズに取り組んでください！
見出し(ヘッダー)「h2」「h3」のデザインを変更する方法
あまりにもシンプルなテーマであるため、見出しも文字が大きいという程度で少しインパクトに欠ける部分があり、区切りがわかりずらい。そんなこともあり記事中の「h2｣「h3」タグについては少しばかり装飾を施したいところ。これは「h4」もしても構わないと思います。下の記事で本サイトで装飾した一例を挙げていますので参考にしてみて下さい。
「投稿」という文字を削除する方法
「twenty seventeen」ですがフロントページを「最新の投稿」にしている場合に、何故か「投稿」という文字が表示されます。しかもこの「投稿」という文字列の為に「h2」タグが利用されています。これは非常に勿体ない利用の仕方です。SEO対策を考慮するのであれば、記事一覧の各記事のタイトルに「h2」タグを利用する方が全然良いです。この「投稿」を削除する方法を下の記事で紹介していますので参考にしてみて下さい！
アーカイブの「カテゴリ」表示を非表示にする方法
サイドバーにカテゴリを表示している場合、そのカテゴリをクリックするとそのカテゴリ内の記事一覧が表示されます。この時に何故か「カテゴリ；カメラ」みたいな感じで「カテゴリ；」って不要じゃない？って思わされます。どちらにせよ、パン屑リストを利用する場合にはこの表示自体がいらないのですが・・・。この対応方法について下の記事で紹介していますので参考にしてみて下さい！
トップページ記事一覧のタイトルを見出し2「h2」に変更する方法
これは上記の「投稿」の削除と「カテゴリ」の削除をした上で行うと効果的です。これで「h2」タグがメインページから取り除かれたので、記事一覧に利用される各記事のタイトルを「h3」から「h2」へ格上げです。その方法について下の記事で紹介していますので参考にしてみて下さい！
WordPress【twenty seventeen】トップページに記事一覧表示のタイトルを「見出し2（h2）」に変更する方法
アイキャッチ画像の表示位置を変更する方法
「twenty seventeen」ですがアイキャッチ画像を設定してある実際の記事を表示すると何故か知りませんが、記事のタイトルの上にアイキャッチ画像が表示されるんですよね。これってどうなの？ってビックリしました！普通は記事タイトルの下にアイキャッチ画像が表示される方が一般的であるような気がするのですが不思議でならない。これを修正する方法を下の記事で紹介していますので参考にしてみて下さい！
パン屑リストを設置する方法
パン屑リストとは「HOME > カメラ > ISO感度を使いこなせ！暗闇の室内でもピンボケしない撮影方法！」な階層表示のことを示しています。このパン屑リストですがSEO効果も高く大抵のサイトで見かけると思います。今、どこをカテゴリの記事を見ているのかが分かりやすく、このパン屑リストで違う記事を探すケースもあることから設置して損はしないものです。本サイトで設置した例を下の記事で紹介していますので参考にしてみて下さい！
一覧表示で「…続きを読む」みたいにする方法
トップページやカテゴリ表示をした時にデフォルトのままですと、全ての記事が羅列されて表示されてしまします。それをどこかで区切りを入れて一覧表示に変更したくなります。「...続きを読む」みたいな形ですね。これは記事を作る時に「More」というものを入れるケースと自動で文字数で区切りを入れて表示するケースがあるのですが、本サイトでは後者を選択しました。その方法について下の記事で紹介していますので参考にしてみて下さい！
「Proudly powered by WordPress」を変更する方法
フッター部分にどんなサイトでも「CopyRight©」みたいな標記があると思うのですが、WordPressのデフォルトは「Proudly powered by WordPress」となっています。これを変更する方法を下の記事で紹介していますので参考にしてみて下さい！
WordPress【twenty seventeen】「Proudly powered by WordPress」を変更する方法
固定ページのデザインを変更する方法
「twenty seventeen」に限ったことではないと思うのですが、固定ページを作成する場合に、あまりにも通常の記事投稿ページとテンプレートが違いすぎてビックリしました。それなので、通常の記事と同じようなテンプレートを作成してしまいました。テンプレートは一度作成すれば他の固定ページにも適用できます。サイトによっては固定ページをトップページにしているケースもあります。こちらの方がデザインに融通が利くのが特徴ですね。実際に本サイトで固定ページのテンプレートを作成した例を下の記事で紹介していますので参考にしてみて下さい！
WordPress【twenty seventeen】固定ページのデザインを投稿記事と同様にサイドバーとタイトル表示および新規テンプレート作成方法
標準のソーシャルリンクメニューを作成する方法
この機能は恐らく「twenty seventeen」から搭載された機能ではないかと思います。折角標準であるのだからこれを利用しない手はないと私は思っています。標準である機能を利用しないでプラグイン頼りではいけない。きっと次のテーマになると更に改善されてくると私は考えます。WordPressみたいな素晴らしいソフトウェアはどんどん進化します。標準で利用できるのであれば標準機能を利用すべし！っという事で下の記事で利用方法を紹介していますので参考にしてみて下さい！
リンクを新規ウィンドウで表示させる方法
ソーシャルリンクも含むのですが、「twenty seventeen」に限ったことではなく何故かリンクを貼る時に「新規ウィンドウで開く」という指定ができない。WordPressのデフォルト設定がそのようになっているからです。HTMLでリンク記述するときに「target=”_blank”」という指定になります。実はコレ、簡単に設定可能です。下の記事で紹介していますので参考にしてみて下さい！
トップページのヘッダー画像の高さを変更・カスタマイズする方法
「twenty seventeen」の一番特徴的なヘッダー画像の大きさ！このインパクトは魅力的でもあるのですが、モバイルで見る場合にはちょっとウザイ感じがしますね。これ悩まれている方、非常に多いと思います。画像の高さを抑えて設定しても高さは変わりません。かなり意味不明な動作をします。これに関してはネット上に殆ど情報がありません。それなので私は仕組みをすべて追いました。その結果一番簡単で理想的な方法が下の記事で紹介していますので参考にしてみて下さい！
WordPress【twenty seventeen】トップページのヘッダー画像の高さを簡単に変更・カスタマイズする方法
標準ソーシャルリンクに「はてなブックマーク」を追加する方法
「twenty seventeen」ですが折角標準ソーシャルリンク機能が搭載されているのですが、日本仕様になっていない。日本では「はてなブックマーク（通称：はてブ）」という素晴らしいサービス利用者が多いです。しかし残念なことにこれが実装されていません。それなのでアイコンの作成から実装方法までを一挙公開しています。
「svg-icons.svg」へ「はてなブックマーク」アイコンを追加する方法
このアイコンが無いが為に標準のソーシャルリンク機能を利用されていない方が多いのではないかと感じています。本サイトでこのSVGファイルアイコンを作成しました。下の記事で作成方法までを紹介していますので参考にしてみて下さい！
標準ソーシャルリンクメニューに「はてブ」アイコンを実装する方法
上記で作成した「はてなブックマーク」アイコンを実際に標準ソーシャルリンク機能として利用する方法を下の記事で紹介していますので参考にしてみて下さい！
WordPress【twenty seventeen】標準ソーシャルリンクメニューに「はてブ（はてなブックマーク）」アイコンを実装する方法
SVGファイルの良いところは利用する場面で形や大きさを自由に変更できる点である。HTML5に準拠しているみたいなのですが、今後このファイル形式は流行ると思います。一つのファイルで表現方法を変更できるメリットは大きいと私個人的には思っています。そんなアイコンの形やサイズ、マージンの変更方法について下の記事で紹介していますので参考にしてみて下さい！
WordPress【twenty seventeen】標準ソーシャルリンクメニューアイコンの形を丸型から四角っぽく変更しアイコンサイズと間隔を変更する方法
標準ソーシャルリンクメニューに「Feedly・RSS」アイコンを実装する方法
これは意外だったのですが「はてなブックマーク」アイコンと全く同じです。基本的に同じようにアイコンを追加して実装すれば良いだけとなります。この方法については下の記事で紹介していますので参考にしてみて下さい！
WordPress【twenty seventeen】標準ソーシャルリンクメニューに「Feedly・RSS」アイコンを実装する方法
標準のソーシャルリンクメニューをサイドバーに実装する方法
標準のソーシャルリンクメニューを設定するとフッターに表示されるように設定されています。それをサイドバーにも表示する方法となります。これは少しばかりカスタマイズが必要となりました。下の記事で紹介していますので参考にしてみて下さい！
標準ソーシャルリンクアイコンをウィジェット化する方法
これは上記の「サイドバーに実装する方法」よりも進化した形となります。ウィジェット化することにより配置に自由が生まれます。サイドバーの一番上か一番下にしか配置しないケースは良いのですが、ウィジェット化することにより自由な配置が実現します！
「twentyseventeen-featured-image」スタイルシートで画像の回り込み制御ができません
これはビックリしましたね。当初本サイトでは一覧表示時にアイキャッチ画像を大きく表示していたのですが、それを小さい表示に変更し文章を回り込みさせる表示に変更しようとスタイルシートを修正して試みたときに上手く動作しませんでした。これは何か魔物が住み着いていると思いましたね。本来ならスタイルシートでしてした通り表示されるはずなのですが、何故か上手くいかない。仕方がないのでちょっとばかりやりたくない修正を行いました。それが下の記事で紹介されていますので参考にしてみて下さい！
WordPress【twenty seventeen】「twentyseventeen-featured-image」スタイルシートでの画像の回り込み制御が出来ない
最後に「twenty seventeen」というテーマをまとめると
テーマと言うよりもWordPressがどんどん進化しているのが分かったような気がします。私自体は2017年6月からWordPressを触り始めました。WordPressというもの自体が初めてであり、かつ「twenty seventeen」について取上げているサイトは非常に少ない状態でサイト作成したこともあり、少しばかり時間が掛かってしまいました（4か月）。WordPressの本質は変わっていないのですが、ネットで調べていると違いますね。もう他サイトの情報が古すぎるために、微妙に設定等が変わっています。
これからWordPressでサイト運営を始める方に少しでもお役に立てればと思いWordPressネタを取り上げてきましたが、「twenty seventeen」特有なものも含め大体ネタを出し切ったような気がします。今後、自分のサイトをカスタマイズしたいと思ったときに新たなものが出てきたら記事にしますが、本サイトは大体デザインと仕組みは仕上がったような気がしています。
そんなこともあり、今回WordPressの集大成のページを作成に至りました。このページは「twenty seventeen」に限定したことを中心に取り上げています。
恐らくここまで詳細に解説しているサイトや本はありません。皆様のお役に経つようでしたら、「はてブ」登録や「Twitter」のフォロー・ツイート等よろしくお願い致します。それが励みになり、これからも皆様のお役になてる記事を書いていく力になりますので。
技術評論社 (2017-01-26)
売り上げランキング: 284,885
スポンサーリンク