こんにちは bibaです。

前回の記事に書きましたが、WordPressテーマを「Cocoon」にしてから、一部デザインのカスタマイズにも取り組みました。WordPressテーマ「Cocoon」では便利な「Cocoon設定」という機能を使えば、ほとんどのカスタマイズができます。

初心者にオススメ!WordPress無料テーマ「Cocoon」でお手軽カスタマイズをやってみました

とは言っても、ユーザーの希望のすべてが実現できるわけではありません。そのため、場合によってはstyle.cssやPHPファイルに修正する必要があります。

そのため、今回の作業では、私もstyle.cssやPHPファイルに数カ所の加筆を行いました。その中で、タイトルにしたことに関して悩んでしまったので、簡単な記事として残しておくことにします。

スポンサーリンク
スポンサーリンク

Safariでは「position: sticky 」が機能しない

カスタマイズのために、style.cssに加筆した内容の中で、なかなか思い通りに制御できないところがありました。

その内容は、タイトルとグローバルメニューの表示されているヘッダー部分をスクロールさせないで固定表示にするということです。

そのために、次のような内容をstyle.cssに加筆しました。

.header-container {
position: sticky;
top:0;
}

その後、ブラウザーChromeを使ってブログをスクロールさせると、きちんとタイトルヘッダーの部分が固定されているのを確認できました。

これで完成と思いましたが・・・

再確認の意味で、今度はSafariを使って同じことをやってみました。すると、タイトルヘッダーの部分が固定されずに流れてしまいます。クッキーを削除しても、状況は変わりませんでした。

ブラウザーによっては「position: sticky」が機能しない

調べてみると、要素を簡単に固定できる便利な「position: sticky」は、ブラウザーによって機能しないということが、その理由であることがわかりました。

まずIEには対応していません。また、Safariの場合は、ベンダープレフィックス-webkit-を追記する必要があるとのことでした。

今回は、Safariで要素固定を実現することが目的だったので、先に示した内容を次のようにしました。

.header-container {
position: sticky;
position: -webkit-sticky;
top:0;
}

その後、改めてSafariを使って確認すると、Chromeと同じにように固定した表示が実現できていました。

ちなみに、stickyの対応ブラウザはこちらで確認できます。

おわりに

このように、素人が行うブログテーマのカスタマイズ作業は思い通りにできない場合も少なくありません。時間をかけて考えるのも楽しいのですが、できれば記事を書く時間を増やしたいと考えています。そうなると、やはり有料テーマの導入ということが視野に入ってくるのですが・・・

とりあず、Safariで「position: sticky 」を機能させる方法がわかって、今は満足しています。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
スポンサーリンク
スポンサーリンク
bibalogue