Sticky Headerその後

閲覧数: 43(0)

Sticky Headerをやりたくて、その名もずばり「Sticky Header」と言うプラグインを入れましたが、デザインに統一感を出すためのカスタマイズに手作業(設定では対応できないので、直接コードを修正する)が多いのでメンテナンス性が悪いのと、そこまで手を入れてもまだデザイン的に納得いかなかったので、違うプラグインを探し出して入れたのが「Awesome Sticky Header」プラグイン。現在はこのプラグインでヘッダー固定を実現しています。

このプラグインがいいのは、設定項目が多いので手作業を一切入れていないこと。設定項目に含まれない変更はプラグインの設定画面から直接追加のCSSなどを入れられること。このプラグインのメンテナンス性はピカイチです。

実際のところ、設定項目以外で入れた変更はこれだけ。hoverのカラーは設定項目にもあるけど、設定できるのはメニューだけだったので、タイトルも含めてマウスオーバーした時の色を追加設定しました。

.asmh-header {
font-family: "Cabin Sketch", cursive;
text-transform: uppercase;
}
.asmh-header a:hover{
color: #1fa0ae !important;
}

ちなみに、このヘッダー固定はスマホ画面では見られませんw ある程度画面サイズのあるパソコンからご覧いただくと、何をやりたかったのかわかると思いますので、お時間のある時にパソコンの画面でご確認くださいw

プラグインの機能で、サイト説明をタイトルの下に表示できたり、検索バーを標準で追加できたり、文字の色、サイズ、など細かく設定できるので、どうやって設定するのかわかってしまえば自分なりのカスタマイズが簡単にできる良いプラグインだと思います。

ただ、標準設定では、固定ヘッダーの上部に1pxの隙間を開けたり、上下に1pxのボーダーが付加されたりと、デザインセンスは「なんか違うなぁ」なんですが、最初に表示される「標準」ヘッダーをぐっと我慢して一つ一つ修正するとほぼ思い通りのことが出来ると思います。

残念ながら「Sticky Header」の時にも発生していた、「Home Categories」との相性は悪く、サイドバーの表示項目を変更しています。具体的には、本来は「公開」設定されたエントリーのみサイドバーにランキング表示したいのですが、一覧表示から個別ページへ遷移した時に、カテゴリー制限が引き継がれない現象が出てしまい対応に時間がかかりそうなので、応急処置で回避しています。

画像表示した時に、クローズボタンが固定ヘッダーの下に隠れてしまう現象は、今回はZ-Indexの設定で回避できていたので、下に移動したクローズボタンは、また右上へ戻しました。

ちなみに、タイトル画像は本社のそばのコーヒーショップに掲示してありました。こんなルールを自分が決められたらいいですけどねw

ところで、話は変わりますが走行距離が7,777Kmになりました。これまでのところ車載の燃費計だと14.3Km/ℓを表示していますが、実測の平均燃費は13.42Km/ℓで、平均単価は85.72円/ℓでした。都内を走行すると言う条件にしてはかなり良い結果だと思います。

img_1789

そうそう九州へ出張した時に、八代外港へ行ったのですが、工場の目の前は海でした。右手が工場の敷地です。空港からシャトルバス(と言ってもマイクロバス)で1時間半ほどで神園交通の外港車庫というバス停に到着します。そこから徒歩10分ぐらいで工場です。天気が良ければ徒歩でもOKです。

img_1790

【最終更新日: 2019年6月16日】
カテゴリーIT閑話, 公開タグ
検索結果のカテゴリー制限
blank

検索ネタを連発しておりますが、、、今回はテーマとプラグインどっちで修正するかという課題に挑戦しました  続きを読む

ページナビのテキスト
blank

記事ページの下部に前後の記事(投稿)へのリンクが表示される仕様なのだが、「カテゴリーに制限」をかけて  続きを読む

Elasticsearch 5.6.5
blank

少し古い記事の「検索に悩む」で紹介した「Elasticsearch」ですがWordPressやMed  続きを読む

タイトルを抜粋する
blank

関連記事プラグインを使って、記事本文の下に「関連記事」を表示している。情報としては、タイトル、画像、  続きを読む

カテゴリー制限をかける
blank

一般公開とログイン後公開と非公開、この3パターンをカテゴリー制限で実現するプラグインとして、「Hom  続きを読む

カテゴリーを制限する
blank

過去に何度も書いた「カテゴリー制限」の話、元はと言えば初期に書かれた「非公開」の記事が原因です。トッ  続きを読む

スポンサーリンク

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください