コンテンツへスキップ妻と僕。ブログ完全初心者のサイトです。アニメや食べ物の感想。wordpressについて経験したことを記述します。Seventeen」を使用してブログをカスタマイズしていきます。このページは、カスタマイズについて記述した記事のサイトマップ(目次)的なものとお考えください。カスタマイズの関連記事をアップするたびにここを更新していく予定です。縦と横のダブルレクタングルとスマホ表示の切換えコメント欄を開閉するスタイリッシュなボタンを設置テーマを編集する時に絶対役立つツールブログを始めてから4ヶ月。「WordPress」という言葉さえ知らなかったブログ超絶初心者の僕です。初心者の僕がテーマをカスタマイズできているのは、Google先生がなんでも優しく教えてくれるのと、ドラえもんの道具みたいに便利な『デベロッパーツール』を使用しているから。テーマのカスタマイズにおいて、この『デベロッパーツール』を知っているか知っていないかで、カスタマイズのしやすさに天と地ほどの差がでるので、知らなかった人は是非使ってみてください。子テーマの作成テーマのカスタマイズ前に絶対しておきたいのが子テーマの作成です。テーマを直接変更した場合、一生懸命カスタマイズしたにもかかわらずテーマのアップデートで全てが白紙になってしまいます。子テーマでカスタマイズしていればその心配はありません。オリジナルのデータをそのままバックアップしておけるのでとても利点があります。カスタマイズする前に、子テーマを作成しましょう。Seventeen」のメニューバー(グローバルナビゲーション)を設置するのはとても簡単です。上下にスクロールした時に常に画面トップに追従してくれます。ここでは、この便利な機能の設置方法とその外観を自分の好みの色にカスタマイズする方法を記述します。Seventeen」の記事とサイドバーの横の領域はレスポンシブデザインとなっており、画面のサイズによって柔軟に変化します。幅の最大値が決まっているため、どんなに大きな画面サイズでも記事の幅は最大524.313pxにしかなりません。ここでは、レスポンシブの機能を損なわずに記事とサイドバーの幅をカスタマイズする方法を記述します。Seventeen」の全体背景色は白です。簡単カスタマイズで黒にも出来るようですが、どちらも全体が一色で染まるためメリハリがなく少し読みにくい印象があります。そこで、記事の背景色を白にしたまま全体の背景色を変えることで記事部分を強調し、メリハリのある見やすいデザインにカスタマイズします。Seventeen」のリンク文字は黒で、そこに黒い下線を引いてリンクの目印としている。リンクにマウスを合わせると下線がひとまわり太く表示されるよう設定されており、さらに、背景色を変更してみると白の下線も引かれている箇所があることに気づきます。僕としてはリンク文字は青というイメージが強く、また、マウスを合わせたときに太く表示される下線が見た目にあまり好みではなかったので、このリンク文字色と下線についてカスタマイズしたいと思います。Seventeen」のアイキャッチ画像領域は、記事とサイドバーの上に画面横幅いっぱいにスペースが設けられている。アイキャッチ!とばかりに主張するこのレイアウトですが、画像サイズの全体とのバランスが難しい。画像サイズが大きいとアイキャッチが主張しすぎるし、画像が小さいと左右の余白が広く少し寂しく感じます。そこで、この画面横幅いっぱいの領域を削除し、記事上に記事幅の領域内で表示されるようカスタマイズしたいと思う。Seventeen」は、画面サイズの横幅によってフォントサイズが変化するレスポンシブ対応です。そのため、フォントサイズの設定も少し複雑でカスタマイズするのを面倒に思ってしまう人もいると思うのです。そこで、少しでも文字サイズをカスタマイズしやすいように主要な箇所をまとめてみました。文字のカスタマイズは様々なパターンがあると思うので、ここでは初期状態のままの文字サイズ・色・行高のコードを載せます。カスタマイズしたい箇所のコードをコピーしstyle.cssに貼り付けた後、好みに変更してください。Seventeen」の記事一覧ページは、全ての記事をそのままつらつらと並べただけでとにかく見にくいです。「moreタグ」を使って多少はすっきりとできますが、それでもぱっと見どのような記事があるのか分かりにくく、サイトに訪問してくれた方に対して優しいものではありません。そこで、各記事の情報をコンパクトにまとめて表示し、それをタイル状に敷き詰めることで見やすく、そしてスタイリッシュな記事一覧ページにカスタマイズしたいと思います。Plugin」を使用して関連記事を表示し、どんな画面サイズでも綺麗に整列するようにカスタマイズしました。画面の幅が変化すると、それに応じて関連記事の画像も拡大縮小し、常に綺麗に表示されます。関連記事の画像が大きくなりすぎたり、小さくなりすぎたりしないように画面サイズにあわせて画像の横並びの個数を指定します(例えば、PCでは4列。モバイルでは3列に表示)。記事に目次を設置し、トップメニューによる位置ずれを回避するここでは、記事に目次を設置する方法を解説します。この記事にも設置していますが、目次をクリックすると記事内の任意の場所にジャンプします。簡単に設置できるので、プラグインを使用しません。次のような問題も回避します。僕のブログのようにグローバルナビゲーション(トップメニュー)を設置している場合、設置した目次の移動先がトップメニューの影に隠れてしまうというものです。設置した目次もこれではかっこ悪いので、スマートに回避したいと思います。【この記事を読む】ページトップへ戻るボタンを設置する前回の記事では、クリックすると記事内の任意の場所にジャンプするという「目次」を設置しました。今回はその逆バージョンです。「TOPへ戻るボタン」をクリックすると記事の一番上にするするっと移動します。「目次」の設置も簡単でしたが、「トップへ戻るボタン」はもっと簡単ですので、気軽に設置可能です。Seventeen」は画面サイズに応じて表示が変わるレスポンシブデザインです。このレスポンシブ機能を維持したまま、記事を下へスクロールしたときにサイドバーが下端で追従し、フッター手前で止まるように設定します。Seventeen」でのカスタマイズの実例を紹介します。このテーマをご使用されていて実装さえできればいいという方は、次の目次から後半へジャンプしてください。Seventeen」の固定ページは、1カラムと2カラムを選択することができる。カラムの設定は投稿ページには採用されず、あくまで固定ページのみに反映されます。以前、投稿ページについて、記事幅や背景色のカスタマイズ方法を記述しましたが、ここでは、固定ページの(カラム・幅・背景色)のカスタマイズ方法について記述したいと思う。縦と横のダブルレクタングルとスマホ表示の切換え当サイトで記事下にアドセンス広告(レクタングル)を2つ並べて表示していますが、その並びは画面のサイズにより変化します。具体的には、表示画面の幅が2つの広告を横に並べて表示できる場合は横並びのダブルレクタングル、幅が狭ければ縦並びのダブルレクタングル。スマホの場合は1つのみの広告を表示します。Seventeen』でのカスタマイズ方法を記述しますが、他のテーマでも基本的な考え方は一緒ですので参考にしてください。最近、僕の記事にコメントをいただく機会が増えました。内容は様々ですが、コメントをいただくというのは、記事が読まれていると実感できて嬉しいものです。そんな僕の心を満たすコメント欄ですが、コメント数が多くなると結構なスペースを占領し、コメントを必要としない訪問者にとって優しくないページになってしまうことに気付きました。そこで、コメント欄を開閉式にし、ボタンをクリックすることでコメント欄の表示・非表示の切り替えが出来るよう設定します。開閉ボタンもマウスホバーでキューブ状にクルッと回転するスタイリッシュなデザインにしましたので参考になればと思います。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。