はてなブログ カテゴリー編集機能活用法。サマリで雑記ブログを分かりやすく体系化する。

  • URLをコピーしました!

なごみです。昨日は、新しく加わったカテゴリー編集機能を活用してこのブログのカテゴリーを整理しました。雑記ブログの悩みであるごちゃごちゃを整理して体系化することが目的です。

2017年9月25日にはてなブログからWordPressへ移転しました。今のブログとはデザインが全く異なりますがご了承ください。

ポイントはサマリを表示することです。要約してそこに何が書いてあるかパッと見て分かるようにする。ごちゃっとただ表示されている記事一覧をすっきりと見せる。

まだ作業途中ですが、分かりやすくなってきました。ずっとやりたかった事ですので嬉しいです。

どうやったのかご紹介しますね。

目次

こんなページをつくりました

例えば料理のカテゴリーです

パソコン画面

f:id:yururimaaruku:20170830092956p:plain

スマホ画面

f:id:yururimaaruku:20170830093058p:image

今までは記事一覧が表示されていただけでしたが、上の部分に画像や文字を入れられるようになりました。HTMLが使えます。パソコンもスマホも共通のページですので作業は1回で済みます。

色々な使い方ができそうですが、このブログではスクロールしなくてもカテゴリーの全体が分かるように、要約を入れました。自分が見て欲しいようにページが自由に編集できるのが嬉しいところです。

私は各項目にページへのリンクを貼っていますが、数が多い場合はカテゴリーページへリンクしてもいいし、まとめの記事へのリンクを貼っても良いでしょう。私もそうする予定です。

いちいち記事のタイトルを読まなくても全体像が分かるのは読者に親切です。まとめている内に自分自身の頭も整理されてきました。

バナーを作ってこのページにリンクさせることでミニブログのような使い方もできると思います。出来ればトップページにもこの編集機能があればうれしい。はてな開発者様よろしくお願いします。

カテゴリーページの作り方

しかし、カテゴリー編集画面の入力枠はとても小さく、ここだけでやろうとするとやりにくいです。そこで一工夫しました。この方法だと簡単ですよ。

1.記事の下書き機能を使ってページを作成する

記事作成画面で一旦サマリ記事を作成します。いつも通りの作業だからお手の物ですね。スマホとPCどちらからでも見やすいよう心がけます。

2.HTML編集に切り替えてHTMLをコピーする

編集画面のタブを「HTML編集」に切り替えます。するとこのようなタグを使った表示に切り替わります。この中身をCTRL+A(同時に押す)でコピーします。

f:id:yururimaaruku:20170830091828p:plain

3.カテゴリーの編集画面を開く

管理画面の「カテゴリー」をクリックして該当のカテゴリーの「編集」ボタンをクリックします。

f:id:yururimaaruku:20170830092115p:plain

4.コードを貼り付ける

小窓が開きます。説明文を記述できますという所の上の枠でクリック。CTRL+Vで先ほどのコードを貼り付けます。

f:id:yururimaaruku:20170830092312p:plain

次に編集する時は枠内でCTRL+Aを押してからすぐにCTRL+Vを押すと、手早く全体を置き換えられます。おすすめ。

5.タイトルを編集する

こうなってくるとカテゴリーページのタイトルを直したくなるのですが、ちょっと待った!カテゴリー名は編集しない方がよいです。カテゴリー名を変えるとここへ貼ったリンクがリンク切れになり、面倒な作業が発生します。

ここは下の「記事一覧ページにタイトルを設定する」のがおすすめです。チェックを入れて表示させたいタイトルを入力しましょう。

f:id:yururimaaruku:20170830092553p:plain

最後に「変更する」をクリックして完了です。HTMLのコピペは面倒ですが、カテゴリ編集画面がもっと分かりやすくなるまでは仕方ないですね。

そのカテゴリーページにアクセスしてページが正しく表示されているか確認してみましょう。

* * *

参考までに私の下書き一覧画面です。カテゴリ用に作った下書き専用の記事なので、分かりやすく【カテゴリ】をつけています。画像もアイキャッチに入るので分かりやすい。

下書きに入れて置けば、キーワードで検索もできる。「カテゴリ編集用」というタグをつけたらいいだろうと思ってつけましたが、残念ながら公開していない記事のタグはプルダウンに表示されないのです。残念

f:id:yururimaaruku:20170830081444p:plain

サマリ(要約)を作るコツ

サマリを作る時の手順です。

.カテゴリー内の記事を眺めながら、書いてあることを一言でピックアップしていく。短くコンパクトに。タブブラウザを使って、編集画面と一覧画面を同時に閲覧するとやりやすいです。またはパソコンとiPhoneなど。同時に眺める。

例:タイトル「うちの「変わり餃子4種」ホットプレートでプリプリ。失敗しない焼き方。」

→「変わり餃子」

.サマリ全体が出来たら、カテゴリ一覧からひとつずつアクセスしてリンクをURL欄からコピーする。

.記事編集画面でキーワードを選択してCTRL+V

「選択範囲」にチェックを入れ貼り付ける。f:id:yururimaaruku:20170830094351p:plain

選択範囲を選ぶと書いてあるキーワードはそのままで、リンクを貼る事が出来て楽です。

その他のカスタマイズ

今回、手を加えた部分です。

メニューボタンの項目にアイコンを入れた

f:id:yururimaaruku:20170830093148p:image

デジタル生活の左にある小さなアイコンです。このページのアイコンを使いました。タグを貼り付けるだけなので簡単です。

Font Awesome Icons

スマホのカテゴリ一覧を固定ページで作った

スマホ用のカテゴリ一覧の新しく加わった「固定ページ」の機能で作成しました。トップ(タイトル下)にリンクを配置していつでもアクセスできるようにしました。

実はこのページ最初は、パソコン用のサイドバーのカテゴリー一覧をコピー&ペーストして作りました。非常に手っ取り早いです。ただ、この方法だと余計なタグがたくさんくっついてくるのでおすすめはできませんが、大したことはありませんので取り急ぎ作りたい方はにはおすすめです。

私のページはこれをベースにHTML画面から余計なタグを取るなどして編集しました。一つ一つリンクを貼らなくてよいのがいいです。

f:id:yururimaaruku:20170830093757p:plain

カテゴリ一覧に小さなアイコンを入れました。

f:id:yururimaaruku:20170830093832p:plain

最終更新日を挿入した

タイトル上に最終更新日が表示されるようにしました。

* * *

短い夏休み第二弾が終わろうとしています。今回はブログ漬けのお休みでした。このカテゴリーの整理作業は手間がかかります。

でもきっと今後ブログを展開していく上で大事な土台になると思っています。だから少しづつ時間を作って作業していきます。

ではまたお会いしましょう。

あわせて読みたい
Udemy始めました。安くても十分学べる。オンラインWEBデザイン講座がおすすめ。 最近オンラインでWEBデザインの講座を受講し始めました。Udemyという世界最大のオンライン学習サービスです。講座の数が豊富すぎてびっくりしちゃいました。講座数は450...

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

このブログのWordPressテーマ

なごみ

テーマをSWELLに変えてから快適でブログを触るのが楽しくなりました。初心者の方にも超おすすめです。 ほんとによくできてます。

\ 詳しくはこちら /

Author

「ゆるりまあるく」はシステム管理者で主婦のなごみの「暮らしの工夫 」や暮らしを楽しむ実践を等身大でお届けするブログです。
2022年4月で6周年を迎えました。なかなか最近は書けていないですが、元気に暮らしています。今までの中で一番楽しくやっています。少しづつ更新していきます。
twitterでもちょこちょこつぶやいています。

★なごみのプロフィール

★姉妹サイト★
「実践で使うExcelとAccessの話」

目次