【WordPress】Twenty Twelveをよりブログ向けにするカスタマイズ

WordPressの公式テーマであるTwenty Twelveはブログに適したシンプルな2カラムテーマです。

そのままでも使いやすいものの、インデックスページや見出しのフォントサイズなど微妙に気になるところがあります。

そこで自分好みにカスタマイズしました。子テーマとして作成しているので、Twenty TwelveをインストールしているWordPressで使用できます。

成果物はこちらからダウンロードしてください。

スポンサーリンク

カスタマイズしたポイント

ヘッダー

メニューのリンクはテキスト部分にしか判定がなかったのですが、リストのブロック範囲でクリックできるようにしました。

あとパンくずがなかったのでメニュー下に追加しました。

スマホやタブレットではメニューを展開するボタンが表示されます。

サイドバーは下に回り込み、右側のSIDEBARボタンをタップするとサイドバーまでジャンプできます。

展開するとこんな感じ。

サイドバー

サイドバーの見出しがかなり小さかったので大きくして目立つようにしています。

スマホ表示だと最下部にTOPボタンがあり、これをタップするとページ最上部へジャンプします。

メインカラム

max-widthが960pxだったのを1200pxにして、メインカラムの横幅を広げています。

アーカイブの表示は、元は全文表示ですが抜粋のみを表示します。

サムネイルがある場合は左側に表示します。

アーカイブページの見出しが小さかったので大きくしました。

よく使う見出し2~4に装飾をつけてレベルをわかりやすくしました。

Gutenbergエディタ

変更した見出しのデザインがGutenbergでも表示されます。

ファビコン

ファビコンを設定しています。image/favicon.icoを入れ替えたら変わります。

コード

style.css

Twenty Twelveを親テーマとして使う場合、CSSの冒頭コメントのTempleteに親テーマのディレクトリを正確に入力する必要があります。

Twenty Twelveの場合は「twentytwleve」というディレクトリ名なのでその通り記述します。

そうすることで親テーマのstyle.cssを読み込んだ後に、子テーマのstyle.cssを読み込んでくれます。

functions.php

editor-style.css

content.php

header.php

index.php

sidebar.php

js/scroll.js

コメント

タイトルとURLをコピーしました