自分は、2025年6月に「はてなブログ」を開始したブログ初心者です。
今回は、「はてなブログ」で表示されている項目のスタイルを変更するために、項目の情報を取得してみました。
備忘録として、実施した内容を残しておきたいと思います。
ちなみに、取得した結果をもとに、スマホ向けレイアウトの見直しで実施した内容を次の記事で書いています。ご興味ありましたら、お読みいただければと思います。
レイアウト変更したい項目の情報取得手順
(1)修正対象記事のソースを表示
①修正対象となる記事を表示
②記事上で右クリックして表示されるコンテキストの中から、「ページのソースを表示」をクリック
③ 修正対象の記事のソースを確認
(2)変更対象項目の情報取得（例１）
④スタイルを変更する項目のテキストを取得
⑤ソースから該当項目を検索
今回は11か所あるため、さらに絞り込みを行います。
スタイルを変更する項目の上には、日付が表示されていたため、日付表示の近くにある項目を検索します。
今回の場合、スタイルを変更する項目の上位にある「<h1 class="entry-title">」の中の、「class」の値：「entry-title」がスタイルを変更する項目の情報となります。
(3)変更対象項目の情報取得（例２）
④スタイルを変更する項目のテキストを取得
⑤ソースから該当項目を検索
今回の場合、スタイルを変更する項目の上位にある「<div id="blog-title-inner">」の中の、「id」の値：「blog-title-inner」がスタイルを変更する項目の情報となります。
補足：レイアウト定義方法
項目の情報が次のどちらかでレイアウト定義方法が異なるので、念のため、補足しておきます。
- classの値
- idの値
(1)項目の情報がclassの値の場合
レイアウト定義方法として、「.」を利用して、次のように定義します。
.entry-title {
/* 適用したいスタイルを定義 */・・・
}
(2)項目の情報がidの値の場合
レイアウト定義方法として、「#」を利用して、次のように定義します。
#blog-title-inner {
/* 適用したいスタイルを定義 */・・・
}
記事は以上となります。
最後までお読みいただき、ありがとうございました。
※「ブログ関連」の記事をいくつか書いています。
ご興味ありましたら、お読みいただければと思います。
