Green』のデモブログ。はてなブログカスタマイズや、HTML、CSSなどについて書いています。ブログカスタマイズ-ヘッダ周りブログのタイトルロゴの右横にSNSフォローボタンが並んでいるレイアウトをWordPressなどではよく見かけますよね。無料テーマなのに超優秀な人気テーマ「simplicity」などもそうですよね。WordPressの場合は自由にHTMLでヘッダーの構造をいじれるのですが、はてなブログではヘッダーのHTML構造は変えることができません。そこで、HTMLを自由に書ける「ヘッダのタイトル下」部分をCSSで調整して表示することになります。absolute;で位置を絶対指定することで表現します。positionプロパティとはCSSのpositionプロパティについてはとてもわかりやすい説明がサルワカさんでありますのでそちらをご参照下さい(他力)。0;}とすると左上ピッタリに配置されます。position:absolute;は親要素にposition:relative;を指定して、親要素の左上を基準点に位置を絶対指定することが多いのですが、今回は単独で使っています。単独で指定した場合(親要素がposition:static;初期値のとき)はブラウザウィンドウの左上が基準点となります。タイトル横にSNSフォローボタンを並べるHTMLダッシュボード→デザイン→カスタマイズ→ヘッダ→タイトル下に以下のHTMLコードを挿入します。各SNSのURLに書き換えて下さい。aria-hidden="true"></i></a></li></ul></div>.heaer-rightは絶対位置指定用のclassです。Awesomeのアイコンを使うのでまだ読み込んでない人はフッタなどに以下のコードを入れて下さい。30px;}}このように表示されますPCスマートフォン位置指定はこのようになっています。タイトル横に記事検索ボックスを付ける記事検索ボックスをよく使うブログなどの場合はファーストビューに検索ボックスがあると便利です。HTMLブログURLのところをご自分のブログのURLに置き換えて下さい。150px;}}さっきとほぼ同じですが、topの位置を調整しています。検索ボックスのデザインははてなブログではデフォルトのCSSで既に指定されているので記述する必要はありません。こんな感じになりますPCスマートフォンちょっとしたカスタマイズですが、ファーストビューにこだわる方には案外使えるかもしれません。00:54あわせて読みたい☆引用の範囲内でしたらこのブログの画像・文章・コード転載OKです。引用元をリンク付きでご明記下さい。この記事のURLとタイトルをコピーする最後までお読み下さりありがとうございます。»Recommend本格的なカスタマイズをするならはてなブログProがおすすめです。Green』『stripe』『yumekawa』『Haruni』はてなブログテーマを制作しています。HTML/CSS/WordPressとはてなブログカスタマイズがメインコンテンツ。特定商取引法に基づく表記このブログについてのお問い合わせお見積り・ご相談ブログのカスタマイズご依頼についてのお見積はこちら↑。このブログで紹介しているコードは、ご使用のテーマによっては調整が必要な場合があります。あらゆる場面、状況に対応することは難しいためです。ここで紹介しているコードはあくまでも一例で、各自ご自身の責任の元で調整してください。このブログで紹介しているコードは、一般的なブログであれば問題ないと認識しておりますが、全てのブログに適しているとは保証できません。万一トラブルが発生したとしても、それに対する一切の保証をいたしかねます。ご自身の判断と責任においてご利用いただくことをご了承下さい。☆引用の範囲内でしたらこのブログの画像・文章・コード転載OKです。引用元をリンク付きでご明記下さい。ヘルプマークとは?ヘルプマークは見えない障害、義足や人工関節を使用している方、内部障害や難病の方、妊娠初期の方など、援助や配慮が必要な方が付けるマークです。(1)PopularSozaifreepikAboutこのブログではサイト制作やHTML・CSS、はてなブログカスタマイズ、WordPressについて書いています。最新記事スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。