グローバルメニュー作ってみました! ↑にある「TOP」「MOVIE」「BOOK」「GIMP」のバーです。想像以上に大変で時間もかかりましたが、なんとか用意することができました(結局なんやかんや2時間ぐらいかかったのかな……なんでや?)。これで当ブログのPV数も……増えると……いいん……だけど……(無理だワナ)。, 文字の色(白)にどんな背景色が合うんだとか、メニューバーの横幅をページいっぱいに(余白なく)広がっているように見せるとか(できてるよね?)。マウスオーバー時に文字や背景のカラーを変化させることとか。そのカラーは何にするかとか。とかとかとかとかとかとかとかとかとかとかとかとかとっととか。, ため息ばかりついているのもアレなので、僕がやったことをご紹介しましょう……その、前に……と。, 以下の説明ははてなブログ初期のブログテーマを装飾することを想定しています。数値やカラーは各自で変更してください(「各CSSコードの説明」の項でどの数値やアルファベットを変えればいいかを説明しています。ご参考ください)。, また、元に戻したい場合、追記したコードを消せば大丈夫です(こちらもはてなブログの場合)。, , ↑のコードをコピーしてメモ帳等に貼り付けてから、↓のようにURL部分を皆さんのブログのURLに修正してください。, の前のXXXの部分には表示させたい単語(TOP、BOOKなど)を入力してください。, 貼り付ける場所はココ↓(はてなブログの場合)。すでに何かのコードが書かれているときは、一番下に貼り付けます。, (「ダッシュボード」→「デザイン」→「カスタマイズタブ」(左上のスパナのアイコン)→「ヘッダ」の順でクリックしていくと、↑の画面に辿り着きます。), この段階ではページの左上にTOPのように表示されるだけです。↓のCSSの追加で立派なメニューバーに作りかえます。, /* グローバルナビゲーション */.nav {width: 170%; /* 幅を指定 */padding: 0 0; /* 余白を指定 */margin-left: -286px;margin-top: -50px;}.nav ul{padding: 0;overflow:hidden; /* 高さを出すために指定 */list-style-type: none; /* リストスタイルを指定 */background:#688226; /* 背景色を指定 */margin-bottom:100px; /* 枠の下周囲の余白を指定 */text-align: center; /* 文字を真ん中に表示 */height: 50px;  /* 高さを指定 */}.nav li{float: left; /* 左に詰めて表示をする */text-align: center;width:20%; /* 幅を指定 */margin: 0;}.nav li a{display: block; /* ブロック表示にする */margin: 0;line-height:50px; /* 高さを指定 */color: #fff; /* 文字色の指定 */font-size: 17px; /* 文字の大きさを指定 */text-decoration: none; /* アンダーラインを消す */}.nav a:hover{color: #fff799; /* マウスオーバー時の文字色を指定 */background:#f7546d; /* マウスオーバー時の背景色を指定 */}, (HTMLのときと同様にデザイン‐カスタマイズ画面に行き、「デザインCSS」をクリックします。), これで終了です。上手くできましたでしょうか(右側のプレビュー画面で確認できます)。, デザイン画面の右側のプレビューが変になってしまった場合は、「管理画面に戻る」↓でダッシュボードに戻ると変更は保存されません。, 今回の記事でグローバルメニューバーの横幅の調整が一番苦労しました。↓のサイトにも書いてあるように何かを横幅いっぱいに表示するのってなかなか難しいんですよね。bodyの設定を変えたくないし……。う~ん、うっふ~ん。取り消しはしない。, /* グローバルナビゲーション */.nav {width: 170%; /* 幅を指定 */padding: 0 0; /* 余白を指定 */margin-left: -286px;margin-top: -50px;}, 青の部分が参考にしたCSSを修正した箇所です。「margin-top」でグローバルメニューとタイトルロゴの間隔を調整し、「margin-left」と「width」の数値をいじることで左右の隙間を埋めました(時間かかった)。, 続いて、グローバルメニューの背景色や高さを調整します。背景色を何にするかは非常に大切ですので、↓のカラーコードサイトなども参考にしながら慎重に決定してください。, .nav ul{padding: 0;overflow:hidden; /* 高さを出すために指定 */list-style-type: none; /* リストスタイルを指定 */background:#688226; /* 背景色を指定 */margin-bottom:100px; /* 枠の下周囲の余白を指定 */text-align: center; /* 文字を真ん中に表示 */height: 50px;  /* 高さを指定 */}, を変更することができます。今使っている緑茶(#688226)のほかにオレンジ(#f3c75b)、茶色(#b39241)などいろいろ検討して思案しました。かなり迷いましたね。, なお、メニューバーの高さを変えるには二つ↓の項で説明している「文字の高さ」も同じ数値に変える必要があります。, .nav li{float: left; /* 左に詰めて表示をする */text-align: center;width:20%; /* 幅を指定 */margin: 0;}, ここで言うことは特にないです(float: left; で文章を画像に回り込ませることができるんですね。leftをrightに変更したら文字を右に寄せられるそう。勉強になりました)。, .nav li a{display: block; /* ブロック表示にする */margin: 0;line-height:50px; /* 高さを指定 */color: #fff; /* 文字色の指定 */font-size: 17px; /* 文字の大きさを指定 */text-decoration: none; /* アンダーラインを消す */}, ↑のcolorとfont-sizeの数値やアルファベットを変更することで文字の色や大きさを変えられます。メニューバーの背景を緑茶っぽい暗く濃い色に設定しましたので、文字色は白(#fff)の方が際立ちました。逆に「背景色の指定」で背景を薄い色にして、文字を黒や青にする選択肢もあります。, line-heightは↑で説明した「メニューバーの高さの調整」のheightと同じ数値にしてください。, .nav a:hover{color: #fff799; /* マウスオーバー時の文字色を指定 */background:#f7546d; /* マウスオーバー時の背景色を指定 */}, これがラストのコード部分。マウスを重ねたとき(マウスオーバー時)の色の変化を示しています。文字色はグレーや黒(+緑)も試したのですが、薄い黄色(#fff799)が一番赤(#f7546d)に合いましたので、それに設定しました。, 以上で説明は終わりです。グローバルメニューを作成しておくことで、「お、このブログ面白い。他にどんな記事があるんだろう」とビジターが思った時にクリックしてもらいやすくなりますね。PV数は向上する……ハズ。, と勇気を持ちながらブログをやっていきたく候(「そうろう」で早漏改善とでるのやめてねGoogleさん)。, ↓参考にした書籍。「見出しのカスタマイズ」「SNSボタンのカスタマイズ」などCSSを使用した見やすいブログの作り方がわかりやすく説明されています。, ayaeyegoさんは、はてなブログを使っています。あなたもはてなブログをはじめてみませんか?, Powered by Hatena Blog
ヘッダーバーを固定することでサイトのコンテンツ領域が狭くなったり、バーが目立ちすぎてしまうという懸念がありますが、ユーザービリティの観点からヘッダーバーの透明度や背景色を調整することでサイトに馴染むデザインにすることが可能です。, ヘッダーバーを固定せずに使用するときはワンクリックで解除できます。PCでは通常の固定位置にして、スマートフォンでは画面最上部に固定させるという手もあります。, また、ヘッダーメニューとグローバルメニューはそれぞれ独立しているので、片方をサイトマップ的な役割で使用し、もう片方をLPへの導線するなど、ダイナミックな使い分けができるのも大きな特長です。, Copyright ©  WordPressテーマ「ANGEL (tcd047)」, 国内トップクラスのデザイン・機能・実用性を備えたWordPressテーマTCD一覧, 【新機能】セミナー集客ページやメルマガ登録ページが簡単に作れる「ランディングページビルダー」. 今後の記事作成の参考とさせて頂きます!, TCDテーマSKIN:カスタム投稿タイプで自動的に表示される文言とスラッグ(URL)を変更する方法, TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。, カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。 もし参考になりましたら、下のボタンで教えてください。 Webデザイン, TCDテーマ活用のヒント. 2017.01.13. 『跳ぶ技術2割』 2. この記事は2016年1月13日に更新されたもので、内容が古い可能性がありますのでご注意ください。, グローバルメニューに複数の項目を設定した場合、一つ一つのメニューの幅を調整出来ませんか? 国内トップクラスのデザイン・機能・実用性を備えたWordPressテーマTCD一覧. 走り幅跳びは、跳ぶ技術と同時に、スピードや筋力が求められる割合がとても高い のです。 割合としては 1. 当テーマではグローバルメニューとヘッダーメニューの2つを利用することができます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。, TCDテーマGENSEN:検索結果ページとカテゴリー一覧の並べ替え条件の各文言を変更する方法, TCDテーマAVALON:トップページスクロールコンテンツの説明文でHTMLタグを使用する方法. テーマオプションやウィジェット設定コンテンツの注力のみで一流サイトが出来上がる. TCD Opinionテーマのカスタマイズですが、今回はヘッダーの固定化と、それに伴うグローバルメニューのデザイン変更を説明します。, もうすぐデザインをリニューアルします。Optionテーマを使っていた時のトップページは下記です。, タブで色分け(管理画面でカテゴリー毎に設定)できるテーマですが、あえて単色とし、更に下へスクロールしても上部にタイトルやグローバルメニューが残るようしました。, 肝心なのは、#header_wrap(style_pc.css)の position:fixed; z-index:999; width:100%; です。, #global_menu を #header_wrap 内に移動する必要があります。, OPTIONテーマ内のheader.phpをテキストエディタで開いて、ソースコード(6行あたり)の位置を確認してください。, でも、そのままですとデザインが崩れるので、float解除のコードを差し込みました。, なお、header_wrap の中に何を含めるかで height などは違ってきますので、その辺は固定ヘッダーに取り込む要素で適宜変更してください。, バレンシア・スペイン留学の場合は広告スペースが不要ですし、記事が長めなのでヘッダーを薄く押さえました。また、box-shadow:0 5px 3px -3px #ccc; でシャドウをつけて、ヘッダーの固定感?をはっきりさせました。, グローバルメニューを固定ヘッダーに取り込んだので、width:1150px に変更。メニューをたくさん置けて嬉しい!(右サイドバーは、マイナスマージンを0にしヘッダー下に配置), バレンシア・スペイン留学も「お問い合せ」を目立たせるために1つ別モノ扱い風にしています。, 1952年生まれの68歳。もうすぐ化石になりますが、その前にちょっとブログを楽しみます。このおばあさん、HTMLやCSSはそこそこ使えます。WordPress歴15年!. 今後の記事作成の参考とさせて頂きます!, TCDテーマSKIN:カスタム投稿タイプで自動的に表示される文言とスラッグ(URL)を変更する方法, TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。, カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。 もし参考になりましたら、下のボタンで教えてください。 ヘッダーメニューは画面右上に固定されますが、グローバルメニューはスクロールに合わせて、追従して表示されます。 | ① TCDテーマを使ったクールなWEBサ … ※最初にpaddingの左右の幅を狭めて、グローバルメニューの表示をご確認ください。それでも2列となっている場合はfont-sizeを調整ください。 関連記事. 当テーマではグローバルメニューとヘッダーメニューの2つを利用することができます。ヘッダーメニューは画面右上に固定されますが、グローバルメニューはスクロールに合わせて、追従して表示されます。 2タイプのサイドバーと全6種類から選択できる多彩なサイトレイアウト . TCD; TCD GALLERY; TCD MUSEUM; PHOTO MARCHE; COMPANY; WordPressテーマTCDのカスタマイズを研究するサイト. Canvas(TCD017) 横幅の調整, グローバル … ハンバーガーメニューとは? WordPressのトップページを見ると. 2018.04.04. TCDテーマ活用のヒント . q.

.

Jcom ルーター 2台 8, 胃腸炎 薬 処方 8, マイクラ Way Of The Bee 攻略 21, リース 買取 勘定科目 6, イシュガルド復興 マクロ 高難易度 10, 高級車 内装 比較 4, 土木 深さ 記号 8, 三相 不平衡 電流 計算 4, デリカ D5 オーディオ 交換 4, 閉店 アナウンス 例文 年末 5, 永野芽郁 Cm カルピス 4, 坊ちゃんとメイド 長期休載 理由 10, 小学校 要録 評定 5, ファミマ おにぎり 塩分 14, Python 色が つか ない 6, 東芝 冷蔵庫 扉が勝手に開く 31, グーグルマップ 名前 非表示 7, 零 濡鴉ノ巫女 相関図 5, 心不全 ガイドライン 2020 30, 新ダイワ Rb18 部品図 10, ベンツ エアコン 設定 5, ブロリー 3 極限 5, 日能研 日特 2020 11, 東工大 編入 問題 9, 縫製 内職 大阪 4, メッツラー Z8m 寿命 5, サンライズ瀬戸 喫煙車両 臭い 46, Xbox コード 入力 10, フォートナイト バトルパス V バックス 18, Bobo ドラム 奥さん 12, 出席率 計算 人数 10, 折り曲げ厳禁 水濡れ厳禁 書き方 12, Kat Tun Dvd おすすめ 14, Ps4 スポーツ 格闘技 4, アウディ デイライト 消したい 4, Bt9 Hcg 200以上 15, ポケモンusum 努力値 学習装置 9, パオパオ シュウマイ カロリー 12, 無印 パジャマ アトピー 21, Marp 画像 サイズ 19, Excel 縦書き スペース 4, Wake On Lan リピータ 5, Z34 クラッチ エア抜き 4, Xim Apex 価格 7, ドライバー 音 うるさい 4, ステータスを 振れる ゲームアプリ 6, スパロボ オリジナル キャラ 最強 7, いきものがかり Yell 主題歌 4, シャニマス ライブ 1st 6, Youは何しに日本へ ディレクター 土方 23, ルベル イオ かゆい 7, タブレット Select Boot Mode 24, 通行区分違反 右側 通行 4, アパート 退去 汚い 10, Bts キャラクター チミー 6, エレクトーン 子供 天才 7, Parallels Desktop Ubuntu 日本語入力 8, Led 蛍光灯 15w 10, ユーチューブ Perfume カラオケ 6, パワプロ2014 収録 選手 10, いつも ご教示 ありがとう ござい ます 29, レストア 車 サンドブラスト 15, エンダードラゴンの 育て方 Minecraft 19, さくら市 三協 火事 5, Fire Tv タブレット 4, Camera Fv 5 Apk 8, ベガルタ ジュニアユース 掲示板 5,