はてなブックマーク

テーマ「Twenty Seventeen」の固定ページは、１カラムと２カラムを選択することができる。カラムの設定は投稿ページには採用されず、あくまで固定ページのみに反映されます。 以前、投稿ページについて、記事幅や背景色のカスタマイズ方法を記述しましたが、ここでは、固定ページの（カラム・幅・背景色）のカスタマイズ方法について記述したいと思う。 カスタマイズのまとめページはこちら⇒『テーマ Twenty Seventeen を使ってブログをカスタマイズ（目次）』 スポンサーリンク 《 目 次 》 固定ページのカラム設定方法 １カラムの固定ページをカスタマイズ（フロントページを除く） フロントページに設定した１カラムの固定ページをカスタマイズ ２カラムの固定ページをカスタマイズ 固定ページのカラム設定方法 固定ページのカラム数を１カラムと２カラムから選択します。カラム数はダッシュボードの左側「

僕の使用しているテーマ「Twenty Seventeen」は画面サイズに応じて表示が変わるレスポンシブデザインです。このレスポンシブ機能を維持したまま、記事を下へスクロールしたときにサイドバーが下端で追従し、フッター手前で止まるように設定します。 これから、前半でHTMLやCSS、jQueryの解説を行い、後半は「Twenty Seventeen」でのカスタマイズの実例を紹介します。このテーマをご使用されていて実装さえできればいいという方は、次の目次から後半へジャンプしてください。コピペでとっても簡単です！ スポンサーリンク 《 目 次 》 関係するレスポンシブ機能の確認 HTMLの構成とレイアウト サイドバーが表示された時のCSS サイドバー追従とpositionプロパティ jQueryの解説 Twenty Seventeenでの実装 関係するレスポンシブ機能の確認 このテーマのレスポン

前回の記事では、クリックすると記事内の任意の場所にジャンプするという「目次」を設置しました。今回はその逆バージョンです。「TOPへ戻るボタン」をクリックすると記事の一番上にするするっと移動します。「目次」の設置も簡単でしたが、「トップへ戻るボタン」はもっと簡単ですので、気軽に設置可能です。 スポンサーリンク 《 目 次 》 今回変更するPHP footer.phpの変更 戻るボタンのCSS（実質ここで完了） 下にスクロールされたらボタンを表示する スムーススクロールの実装 マウスオーバー時のCSS（参考） 今回変更するPHP 今回手を加えるPHPは「header.php」と「footer.php」です。まだ子テーマにコピーしていない人は、親テーマからコピーしましょう。 PHP「header」と「footer」を子テーマへ footer.phpの変更 下記コードをコピーし、footer.ph

妻と僕。 人生初ブログ。ブログ完全初心者のサイトです。アニメや食べ物の感想。そしてwordpressについて経験したことを記述します。 「Twenty Seventeen」のアイキャッチ画像領域は、記事とサイドバーの上に画面横幅いっぱいにスペースが設けられている。まさにアイキャッチ！とばかりに主張するこのレイアウトですが、画像サイズの全体とのバランスが難しい。 「表示画面の横幅いっぱいにあるアイキャッチ領域」 画像サイズが大きいとアイキャッチが主張しすぎるし、画像が小さいと左右の余白が広く少し寂しく感じます。そこで、この画面横幅いっぱいの領域を削除し、記事上に記事幅の領域内で表示されるようカスタマイズしたいと思う。 このカスタマイズで変更するPHPファイル 今回のカスタマイズで手を加えるのは、「style.css」の他に「header.php」と「single.php」です。手を加える箇所

妻と僕。 人生初ブログ。ブログ完全初心者のサイトです。アニメや食べ物の感想。そしてwordpressについて経験したことを記述します。 テーマ「Twenty Seventeen」は、画面サイズの横幅によってフォントサイズが変化するレスポンシブ対応です。そのため、フォントサイズの設定も少し複雑でカスタマイズするのを面倒に思ってしまう人もいると思うのです。 そこで、少しでも文字サイズをカスタマイズしやすいように主要な箇所をまとめてみました。文字のカスタマイズは様々なパターンがあると思うので、ここでは初期状態のままの文字サイズ・色・行高のコードを載せます。ですので、カスタマイズしたい箇所のコードをコピーしstyle.cssに貼り付けた後、好みに変更してください。 スポンサーリンク カスタマイズする前に確認 フォントサイズのpxとrem 「Twenty Seventeen」のフォントサイズにはpx

WordPressの初心者が無料のテーマ「Twenty Seventeen」を使用してブログをカスタマイズしていきます。 このページは、カスタマイズについて記述した記事のサイトマップ（目次）的なものとお考えください。ですので、カスタマイズの関連記事をアップするたびにここを更新していく予定です。 スポンサーリンク テーマを編集する時に絶対役立つツール ブログを始めてから４ヶ月。「WordPress」という言葉さえ知らなかったブログ超絶初心者の僕です。初心者の僕がテーマをカスタマイズできているのは、Google先生がなんでも優しく教えてくれるのと、ドラえもんの道具みたいに便利な『デベロッパーツール』を使用しているから。テーマのカスタマイズにおいて、この『デベロッパーツール』を知っているか知っていないかで、カスタマイズのしやすさに天と地ほどの差がでるので、知らなかった人は是非使ってみてください。

妻と僕。 人生初ブログ。ブログ完全初心者のサイトです。アニメや食べ物の感想。そしてwordpressについて経験したことを記述します。 テーマ「Twenty Seventeen」のグローバルナビゲーション（メニューバー）をカスタマイズします。設置はとても簡単です。しかも、上下にスクロールしても常にトップに追従してくれるのでとても便利です。 ここでは、さらにメニューバーの背景色等を自分の好みにカスタマイズするための方法を記述します。初心者の僕でもできたので、ここをみれば好みの色にカスタマイズできると思います。 メニューバーの設置方法 管理画面の左サイドバーから、「外観」⇒「メニュー」を選択します。 メニュー名を入力し、メニューを作成する。 「固定ページ」「投稿」「カスタムリンク」「カテゴリー」の中から項目を選択し、「メニューに追加」をクリックすると、「メニュー構造」に選択したものが表示されま

妻と僕。 人生初ブログ。ブログ完全初心者のサイトです。アニメや食べ物の感想。そしてwordpressについて経験したことを記述します。 「Twenty Seventeen」の全体背景色は白です。簡単カスタマイズで黒にも出来るようですが、どちらも全体が一色で染まるためメリハリがなく少し読みにくい印象があります。そこで、記事の背景色を白にしたまま全体の背景色を変えることで記事部分を強調し、メリハリのある見やすいデザインにカスタマイズします。 背景色の変更 背景色を変更するためのコードは下記のとおりです。コピーして子テーマのstyle.cssに追記します。 /* 記事の背景色と枠線 */ .post { border: 1px solid rgb(204, 204, 204);/*記事の枠線の太さと色①*/ background-color: #fff;/*記事の背景色①*/ padding:

妻と僕。 人生初ブログ。ブログ完全初心者のサイトです。アニメや食べ物の感想。そしてwordpressについて経験したことを記述します。 テーマ「Twenty Seventeen」について、記事とサイドバーの幅をカスタマイズします。 僕がこのテーマの幅を気にしたのは、アドセンスに合格してから。広告をどのように貼り付けるか調べていて、記事下に広告を２つ横に並べるダブルレクタングルをしたいと思ったからです。 レクタングルの１つの幅は小さいタイプで300pxあるので２つ横に並べるには最低でも600pxの幅が必要になります。しかし、「Twenty Seventeen」の記事幅は524pxしかありません。ですので、広告を横並びにするために記事の幅を広げたいと思います。 レスポンシブに注意 Twenty Seventeenのレスポンシブデザインで大きな変化点は、画面サイズの横幅が48em（768px）未