はてなブログで、ブログタイトル(画像)下にメッセージを書いたり、リンクを貼ったりなど、HTMLを記述していろいろなことができる機能があります。タイトル画像と同じく、トップページや記事のページに常に表示されるため、必ず目にする場所になります。そのスペースには、多くの方がカテゴリーページへのリンクを設置しており、シンプルなものから凝ったデザインまでいろいろと工夫されています。「どうやってカテゴリーのページへのリンクボタンを作るの?」と悩んでいる方に、作り方を説明していきたいと思います。シンプルなデザインをベースに説明しますので、興味のある方は、ぜひ試してみてください。作成イメージリンク用のボタン画像の作成ボタン画像をはてなフォトに保存ボタン画像のアドレスを確認するタイトル画像下にリンクボタンを設置カテゴリーページの設定カテゴリー装飾CSS(おまけ)まとめ作成イメージ本ブログで設置しているリンクボタンをもとに説明していきます。タイトル画像の下に設置しており、クリックすると各カテゴリーページに飛んでいきます。カテゴリページでは見出しと、説明文を表示します。右:カテゴリーページリンク用のボタン画像の作成ボタン画像は無料で作成できるホームページを使います。box.aflat.comページ内でボタンのサイズ、色、文字などを設定し(1)、「createボタン」を押すと(2)、ボタン画像が作成されます(3)。作成されたボタン画像を保存します。一般的な右クリックで画像保存でOKです。画像のファイル形式はGIF形式です。作成したボタン画像をはてなのフォトライフにアップロードします。はてなのメインページのはてなサービスから、フォトライフを選択します。アップロードを選択し、作成したボタン画像をアップロードします。保存先は任意でOKです。Blog」内で問題ありません。ボタン画像のアドレスを確認するあとでボタン画像を貼るときに必要な画像のアドレスを確認します。先ほどの画面の右端のHatenaBlog(任意)の横の「編集」をクリックします。アップロードされている画像一覧が表示されるため、確認したい画像のボックスをクリックしてチェックを入れます。「ブログに貼り付ける」を押すと画像のアドレスが表示されます。メモ帳などに控えておきましょう。タイトル画像下にリンクボタンを設置はてなブログのダッシュボードのメニューから「デザイン」-「工具マーク」を選択し、「ヘッダ」-「タイトル下」のテキストボックスにHTMLで記述します。</a>を繰り返して記述すればOKです。すべて記述が終わったら、「変更を保存する」ボタンを押して完了です。カテゴリーページの設定ダッシュボードから「カテゴリー」を選択するとカテゴリー一覧が表示されます。各カテゴリーの「編集」をクリックすると、編集画面が表示されます。カテゴリーページを開いて表示されるのは、「見出し」と「説明文」になります。この内容を自由に編集します。HTMLタグが使用できるので、文字の色、サイズ等を自由に変更可能です。変更が終わったら「変更する」ボタンを押します。これで、一通りの作業は完了です。タイトル画像の下のボタンをクリックすると、カテゴリーページが表示されるようになりました。最後はおまけですが、カテゴリーページの見出し、説明文を装飾するCSSを紹介します。カテゴリー装飾CSS(おまけ)カテゴリーページの見出しと説明文を枠で囲って、影を付けたいと思います。ダッシュボードの「デザイン」-「工具マーク」ー「デザインCSS」に、以下のCSSを追加します。色見本はこのページが参考になります。好きな色で設定してください。見出しと説明文の文字の色です。説明文に関しては、カテゴリー編集時のHTML側が優先されます。見出しと説明文の色分けが可能です。10px;はボックス内の枠からどのくらい離して文字を入れるかの設定です。順番に、上、右、下、左の設定になります。まとめタイトル(画像)の下にカテゴリーページへのリンクボタンを作る方法を紹介しました。ボタン画像を作るのも簡単ですし、リンクの設定も難しくなく、シンプルに設置できるかと思います。他にももっとシンプルな方法や見た目が綺麗なものなど、色々あるかと思いますが、「タイトル下にリンクボタンを設置したい」と思っている方に、少しでも参考になれば幸いです。ブログで写真を...2019-07-20サイゼリヤの間違い探しはやっぱり難しすぎる!街中でよくみかけるイタリアンレストラン「サイゼリヤ」。<愛知県・田原市>[2020/2/12]ブログを始めて1年。<愛知県・半田市>[2020/2/5]知多半島で海鮮グルメに絶景スポット。>[2020/2/2]全記事一覧[2020/2/12]記事Noと作成日追加。見やすいようにレイアウト微調整。はてなブログスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。