はてなブログの見た目の変更は、テーマのインストール等で行います。6月から現在のテーマ「コンテンツ」に変更するにはしたものの、細かいところは放置していました。
100記事到達したのを機に、細かいところを改善しました。いろいろ調べましたが、次やるときはすっかり忘れていると思うので、メモを残しておきます。
ベースのテーマ:CONTENS
開発されたのは2016年、1万インストール超え。スマホでもPCでも統一デザインで閲覧できるレスポンシブルデザインです。紺色ベースのシンプルさが気に入ってインストールしました。
blog.hatena.ne.jp
グローバル(トップ下)メニューのレスポンシブ対応
テーマ「CONTENTS」では、グローバルメニューを表示させるにはHTMLとCSSのコピペが必要。
PCやタブレットでは紺色のリンクバーになりますが、スマホでは3番線のハンバーガーボタンの表示に変わります。
HTML & CSS
- <code>
- <div class="navi">
- <div class="toggle"><a href="#">MENU</a>
- </div>
- <ul class="menu">
- <li><a href="https://driveon43.com/archive/category/100%E8%A8%98%E4%BA%8B">100記事</a></li>
- <li><a href="https://driveon43.com/archive/category/%E6%9B%B8%E3%81%8F%E4%BD%9C%E6%A5%AD">書く作業</a></li>
- <li><a href="https://driveon43.com/archive/category/%E9%81%93%E8%B7%AF">道路</a></li>
- <li><a href="https://driveon43.com/archive/category/%E5%82%99%E5%BF%98%E9%8C%B2" target="_blank">備忘録</a></li>
- <li>
- <div class="navi-search">
- <form class="search-form" role="search" action="https://driveon43.com/search" method="get">
- <input type="text" name="q" class="search-module-input" value="" placeholder="検索" required>
- <input type="submit" value="検索" class="search-module-button" />
- </form>
- </div>
- </li>
- <li class="close">
- <a href="#">close</a>
- </li>
- </ul>
- </div>
- <!-- header部分に記載してあれば不要かも -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <script type="text/javascript">
- $(function(){
- $(".toggle").click(function(){
- $(this).next().slideToggle();
- });
- $(".close").click(function(){
- $(this).parent().slideToggle();
- return false;
- });
- $(window).resize (function(){
- var win = $(window).width();
- var resp = 767;
- if(win > resp){
- $(".menu").show();
- } else {
- $(".menu").hide();
- }
- });
- })(jQuery);
- </script>
- </code>
/* メニューのトグル化 */
.toggle,.close{
display: none;
}
@media only screen and (max-width: 767px) {
.menu{
display: none;
width: 100%;
}
.menu a:hover{
background: #ccc;
}
.toggle{
display: block;
position: relative;
width: 100%;
}
.close{
display: block;
position: relative;
width: 100%;
background: #457B9D;
}
.toggle a{
display: block;
padding: 12px 0 10px;
color: #fff;
text-align: center;
text-decoration: none;
background:#1D3557;
}
.toggle:before{
position: absolute;
font-family: "blogicon";
content: "\f003";
top: 50%;
right: 10px;
width: 20px;
height: 20px;
margin-top: -10px;
color:#fff;
}
}
/* メニューのトグル化ここまで*/
テーマの公式ブログを見ながらやりました。
レスポンシブ対応とグローバルメニューをトグルメニュー化する方法を解説 - DREAMARK
ボトムメニユー
ページトップに戻ったり、ホームやカテゴリページへのリンクなどをページの下の方に常時表示しておけるメニューも置きました。
ボトムメニューは下のサイトを参考にしました。
kazuki-iwata44.hatenablog.com
上記のサンプルコードでは、明るいグリーンのメニューなので、現在のテーマカラーの紺色に変更しました。
テーマカラーのカラーコードは、クロームの機能拡張で調べてました。その後、CSSを書き換えで簡易です。
https://chrome.google.com/webstore/detail/color-picker-for-chrome/clldacgmdnnanihiibdgemajcfkmfhiachrome.google.com
更新日を表示して、アイコンをつける
ブログの作成日と更新日の見栄えを変更しました。
追記 2023/08/23
はてな公式の機能に更新日表示が追加されました
driveon43.com
追記:2023/12/07
本ブログも、更新日表示ははてな公式機能に移行しました
以下は公式機能導入前の追加方法になります
アイコンを表示するには、アイコンの読み込みが必要です。ヘッダーにアイコンセットを書き込みます。
その後、下記サイトを参考にHTMLとCSSを書き込みました。
cxememo.com
cxememo.com
確認している不具合
リンク
help.hatenablog.com
折りたたみメニューの作り方は下記ブログに教えていただきました。
クリックすると展開表示する"折りたたみメニュー"を簡単に作る方法 - ゲマステ!- 新作ゲームレビュー, マイクラ, ゲームMOD情報まとめ