HOME  /WordPress(初級)
 /Twenty twelveのヘッダーのカスタマイズ事例
2020年03月27日

Twenty twelveのヘッダーのカスタマイズ事例

 ­メモ

このドキュメントは2016年の初期サイトの時に作成したドキュメントです。

WordPressが全然わからない状態から、とりあえず動く状態まで持っていったやり方を記述しています。

ある程度判っている方は応用編を参照してください。

現在サイトはこの応用編の技術で作成されています。

ヘッダーはWEBサイトの顔になりますがTwenty Twelveのヘッダーは貧弱です。

ヘッダーはタイトル、説明及びメニューから構成されており、このドキュメントはこれらをカスタマイズする方法が記載されています。

 Twenty twelveのデフォルトのヘッダーは下記の様な画面になっています。

基本画面①

タイトルは良いとして、description(説明)の文字が小さいうえに、メニューが目立たない。

そこで、この画面を下記にような形に変更したいと思います。

 変更画面②

この変更はstyle.cssで行います。

1.Twenty Twelveのヘッダー表示をCSSで変更する

下記のコードをCSSの一番最後に追加してください。

/*******************************************************************/
/* ヘッダーエリア要素の変更 */
/*******************************************************************/
.site-header h1{font-size:24px;}
.site-header h2{font-size:15px;}
/* 枠線の変更 */
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {padding-top:7px;padding-bottom:7px;border-top:1px solid #c0c0c0;border-bottom:1px solid #c0c0c0;}
/* メニュ(ボックス要素)を変更する */
.main-navigation {margin-top:20px;}
.main-navigation li {float:left;width:100px;height:30px;text-align:center;margin-right:15px;background-color:#1e73be;box-shadow:2px 2px 10px #c0c0c0;border-radius:3px;}
.main-navigation li a{color:#ffffff;font-size:12px;line-height:30px;text-transform:uppercase;}
.main-navigation li a:visited{color:#ffffff;}

上記のCSSコマンドを追加した後、スーパリロードで表示を更新してみてください。

変更画面②の表示に変わります。

以下に各コマンドの説明を記載します。 

①タイトルとdescriptionの変更の説明

・タイトル:.site-header h1

・description(説明):.site-header h2

になりますので、フォント、フォントサイズ、色等はここで修正して下さい。

②枠線表示の変更の説明

基本画面①をよく見るとメニューの上下に薄い横線が引かれています。

これはもっと目立つように変更した物が下記に下記になります。

Paddingでメニューから幅を取って、線の色を変えてもう少し目立つように変更しています。

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {padding-top:7px;padding-bottom:7px;border-top:1px solid #c0c0c0;border-bottom:1px solid #c0c0c0;}

③メニュー表示変更方法の説明

descriptionとメニューの開始の位置の間隔を指定しているコマンドが下記になります。

.main-navigation{margin-top:20px;}

次にメニューはリスト形式でブロック要素として出力されます。よってli要素として下記の定義をしています。

.main-navigation li {float:left;width:100px;height:30px;text-align:center;margin-right:15px;background-color:#1e73be;box-shadow:2px 2px 10px #c0c0c0;border-radius:3px;}

※1.flot:ブロック要素は左詰めで表示しろ。これを省くとセンター表示になります。

※2.width:100px;height:30px;text-align:center:ブロックは100×30pxで、文字位置はセンター。

※3.margin-right:15px:ブロックと次のブロックは15px開けろ!という指定です。

※4.background-color:#1e73be:ブロックの背景色は青色を指定しています。

※5.box-shadow:2px 2px 10px #c0c0c0;border-radius:3px;ブロックに影を付けています。

最後にリストブロックに書かれる文字の変数名は.main-navigation li aで下記を定義しています。

.main-navigation li a{color:#ffffff;font-size:12px;line-height:30px;text-transform:uppercase;}
.main-navigation li a:visited{color:#ffffff;}

※1.font-size:12px:文字サイズは12px

※2.line-height:30px:文字幅は30pxでブロック高さの30pxと合わせる事によりブロックの真ん中に書く

※3.text-transform:uppercase:小文字がある場合は大文字に変換する。

尚、文字色は訪問される前(.main-navigation li a)は#ffffff(白)で、訪問された後(.main-navigation li a:visited)も#ffffff(白)にしろ!という指定です。

 

<ドキュメントガイド>

前のテーマ:Twenty Twelveのメニューを設定するtutorial android

次のテーマ:パンくずリストのインストールと使い方

以上でこのドキュメントの説明は完了です。

関連ドキュメントは下記の関連記事一覧から探して下さい。


<関連記事一覧>

「wordpress」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

WordPressをインストールするとディフォルトではサイトURLはドメイン名/WordPressフォルダになります。これをドメイン名だけにする為にSynologyの仮想ホスト機能を使います。本ドキュメントはこの使い方を解説しています。

WordPressの動作環境を変更すると、DBをダイレクトに変更しなければならないケースがあります。このドキュメントはphpMyAdminのエクスポートとインポートを使って修正した事例を紹介しています。

ここではSynoligyサーバを「Hyper Backup」アプリケーションで、Googleドライブにバックアップ/リストアする方法を解説しています。

Synologyを複数台持っている場合は、Synology間でバックアップを相互に持たせる事ができます。ここではその方法を解説しています。

SynologyのMariaDBから、mysqldumpを使ってDBを定期的にダンプする方法と、それを利用してWordPressを過去の時点に戻す方法を解説しています。

フロントページやカテゴリページを使って最終的なメニュ構成を作成する方法を紹介しています。

Contact Form 7では確認用のe-mailアドレスをチェックする方法がありません。このドキュメントはContact Form 7のフィルターフックの機能をfunctions.phpに記述する事によりこれを可能にする方法を紹介しています。

固定ページに必要なのは、読者からの問い合わせを受けるメールフォームです。これを実現する為に『Contact Form 7』のインストールと設定、更にメールを送るためのSMTPとして、『WP-Mail-SMTP』のインストールと設定事例を紹介しています。

カテゴリページの表示を抜粋表示に変更してもこのカテゴリーの何処にどの様なドキュメントがあるか?は良く分かりません。そこで解説ページを固定ページに書き、カテゴリページの表示の時に、この固定ページを表示させる方法を解説しています。

このドキュメントは投稿ページと固定ページの違いや固定ページのプログラム構造を説明し、この固定ページを広幅表示に変更するための具体的カスタマイズ方法を紹介し更に固定ページのタイトルを非表示にする方法も解説しています。

Twenty twelve 投稿ページには各種の一覧ページがありこの表示方法に全文表示と抜粋表示があります。その中で検索ページは抜粋表示ですがそれ以外は総て全文表示になっています。このドキュメントは一覧表示の物は総て抜粋表示にする方法が記載されています。

このドキュメントはウィジェットエリアの考え方とCSSを編集して少し見栄えの良いウィジェットエリアする方法を解説しています。

一般のテキストボックスを使ってPHP/HTMLソースを記述するとhttp画面で正しく表示されない問題が発生します。
このドキュメントはTinyMCE Advancedに整形済みテキスト(preformatted text)を使ったボックスを作成する方法を紹介しています。

このドキュメントはsingle.phpとcontent.phpをカスタマイズし、投稿ページの<前の記事><次の記事>のリンクを削除。メタ情報はカテゴリと投稿日を削除し編集のみとし、最後に記事タイトルの前に更新日をいれ、記事タイトルを装飾した事例です。

Twenty Twelve のフッターには『Proudly powered by WordPress』という文字が出力されます。これを通常サイトの様に『Copyright表現』に変更する方法を記載しています。

本ドキュメントではBreadcrumb NavXTのインストールからそれを表示させる為のheader.php及びCSSの編集方法と表示されたパンくずリストをビジュアルアイコンを使ってよりビジュアルにする方法を説明しています。

アイコンも文字を使ったWEBサイトをよく目にしますが、WPのビジュアルエディタで使えるプラグインが『WordPress Visual Icon Fonts』です。このドキュメントには、インストールの仕方と簡単な使い方を紹介しています。

このドキュメントはTinyMCEのビジュアルエディタとhttp画面を一致させる設定や、見出しや段落等のテキストエリア要素の設定、テキストボックスの新設方法、及び表がビジュアルエディタで利用できる設定等TinyMCEの使いこなす為のテクニックを紹介しています。

このドキュメントはCSSのカスタマイズ編です。内容はTwenty Twelveの画面構成解説、子テーマの作り方、CSSを編集する際の注意点、具体的なCSSカスタマイズ事例。事例はスマートデバイスにも対応させる為に%指定をしています。

本投稿はTwenty Twelveの投稿のカテゴリ設定や文書の作成について事例と注意点を記載しています。

WordPressをインストールする時に、ログインユーザ名を指定しますが、デフォルトのままではブログの表示名も上記ログインユーザ名が使われます。これを変更する方法を解説しています。

WordPressをインストールして、WPのテーマを『Twenty Twelve』決めた次に悩んだのは、ダッシュボードにある『設定』をどの様に設定したら良いか?です。本ドキュメントではこのWEBサイトの設定をどの様にしたのか?を解説しています。

本サイトのWordPressのテーマは、Twenty Twelveで構築しました。本ドキュメントでは何故、このテーマを選択したのか?の背景と設定方法を解説しています。

WordPressのCSSファイルやPHPファイルを編集する為には『UTF-8 の BOM なし』のテキストエディタが必要になります。本稿ではこのサイトで使っているEmEditor Free版の利用事例を紹介しています。

SynologyのWordpressパッケージをインストールする方法を解説しています。

画像を取り込むツールとしてOnePerss Image Elevator、サムネールの再構築にRegenerate Thumbnailsを利用しています。このドキュメントは画像に関するツールと管理方法について解説しています。

SynologyのNASに日本語版WordPressをインストールするやり方を解説しています。複数のWordPressも同一手法で稼動させることができます。