2017年1月12日木曜日

ページの追加とメニューの調整 ~Blogger テンプレートを作るよ! (38)~

こんにちはー!

今回は、ブログのメニューに項目を増やしたりしたので、それに合わせて機能を修正したりしてみました。


まどうぐ工房のトップページ。メニューの項目が増えている


主な変更点(ブログ)

メニューの項目変更

今までホームだけだったメニューが、以下のような構造になりました。
  • ホーム
    • まどうぐ工房とは
      • 筆者プロフィール
    • ブログ記事
      • 製作日誌

ページ追加

まどうぐ工房とは筆者プロフィールは設定画面の「ページ」タブで作成したものですので、ページリストでそのまま追加することが出来ます。

ちなみにこの時、ページ名をまず英語で書いて一旦公開し、その後日本語のページ名に変更すると、自分の好きな URL とページ名にすることができます。

URL にしたい言葉をページ名に入れて「公開」ボタンを押し、
そのあと日本語名に変更する

そうすると、URL を英語で表記したままで
ページ名を自分好みに変更することができる
ページ名に日本語が入っているとページ名を URL にしてくれません。URLは「blog-page」とかそんな感じの名前になってしまい、まったくページの意味を推察できなくなってしまいます。

Blogger の仕組み上、少し手間になってしまいますがこれもホームページのクオリティを高く見せる……というか通常のウェブページでは普通にできることなので、どちらかというと安っぽく見せないようにするコツですね。

ページにもカスタムパーマリンクが設定できるようになると嬉しいんですけどね~。

URL 直打ち&検索ページの活用術

さて、少し話が変わりまして、今作っているテンプレートではトップページは単なるブログ記事を並べたものではなく、表紙として利用しています。もしかすると、トップページに最新記事のリストがないようなデザインとかも考えることがあるかもしれません。

そういうときに最新記事一覧を見れないと困ってしまうので、ブログ記事を一覧表示できるリンクをメニューに用意することにしました。

非常に簡単です。検索ページへのリンクを貼るだけです。検索ページは、検索ワードや検索方法の指定がない場合、記事が最新のものから順に一定の件数表示されます。ですので、そのページを表示してしまうのが最も手っ取り早いのです。

まどうぐ工房であれば、以下の URL がそれに該当します。ブログの URL に /search を追加するだけです。

https://madoug-kobo.blogspot.jp/search

ということで、ページリストの設定で直接URLを打ち込んで項目を作りました。

ページタイトルはブログ記事とし、ウェブアドレスは
ブログのアドレスに /search を追加したものを指定

これでメニューからブログ記事をクリックするとブログ検索の最初のページに飛ぶことができるようになりました。トップページと違って表紙セクションが表示されず、記事にアクセスしやすくなりました。

ラベルガジェットの利用

ブログ記事の子項目として記事のカテゴリとして利用しているラベルを登録することにしました。

ページリストの階層化と同様に階層化コマンドを使用し、ラベルガジェットの名前を 「@ブログ記事」にしました。後は必要なカテゴリとして利用しているラベルを選択し、ラベル別の投稿数を表示します。

ラベルウィジェットに階層化コマンドを使う

特に難しいことはないですね。今は製作日誌ラベルしか表示させていませんけど。

主な変更点(テンプレート)

メニュー項目のデザイン

メニュー項目の空間のとり方が丁度良くなるようにスタイルを変更することにしました。空間のとり方には個人的にはとても気になるので、念入りに調整しています。ただ、次に行った仕様変更の影響でそのうちまたボロが出ると思うので、そのときに再調整を行うことになると思います。

仕様変更

実は、「どんなウィジェットでも階層化コマンドを使用できるようにする」という変更もこっそり行っています。

この変更は今回必須ではなかったのですが、メニュー内に画像ウィジェットとかを差し込めるようになってると嬉しいなと思ったのがきっかけです。


と、今回変更したのはこんなところです!

また次回をお楽しみに~!

0 件のコメント :

コメントを投稿