Haruni

はてなブログテーマ"Haruni"のデモページです。今後更新はないので読者登録は必要ありません。

着せ替え用CSS 水色・紫・黒系グラデーションサンプルコード【訂正あり】

デザインCSSに貼るコード 水色グラデーション 紫グラデーションCSS 黒・グレー系グラデーション コンテンツ部分のグレー背景を変更する ピンクグラデーションを変えたい場合は以下のサンプルコードを参考にアレンジしてみてください。グラデーションジェネレ…

背景色変更でフラットデザイン風の単色カラーに

はてなブログの管理画面>デザイン>カスタマイズ>背景色からグラデーション部分の簡単に背景色は変更出来ます。但しはてなブログで用意されているのは単色カラーです。 またここで変更出来るのはbodyの背景色だけです。カテゴリーボタンや文字色は変わらな…

着せ替え用コードに修正があります。

ユーザー様からご報告があり、グラデーションの着せ替え用コードのmedia queryのサイズがテーマとズレていました。お手数ですが修正をお願いします。 media only screen and (max-width:991px) ↓ media only screen and (max-width:1139px)にして下さい。tes…

ヘッダータイトル画像の調整 コンテンツ幅を揃える・スマートフォン最適化

タイトル画像を設置したときの表示を調整出来ます。 スマートフォンで見切れないようにしたい。 1141px以下での表示でタイトル画像の縦横比を維持します。 padding-top: 20%;/* タイトル画像の高さ÷横幅% */のところは各自のタイトル画像のサイズに合わせて…

スマートフォンのタイトル画像の高さを調整する 見切れ対策など

タイトル画像を設置したとき、スマートフォンで高さを小さくしたい場合は以下のコードのように調整して下さい。(デザインCSSに追加) テキスト無しでタイトル画像のみ設置したとき @media (max-width: 480px){ .header-image-only #blog-title #blog-title-…

サムネイルが無い時の表示

サムネイル画像が無い時の表示です。一応表示されますが、ちょっと間が抜けた感じがするので、やはりアイキャッチ画像は設定されることをおすすめします。お手数ですがよろしくお願いします。

背景画像を設定する方法 タイトル画像を重ねて表示出来ます。

はてなブログ管理画面>デザイン>背景画像で背景画像を設定した場合はグラデーションの代わりに背景画像が表示されます。(ヘッダーとフッター部分) 背景画像アップロード機能 ↑でお好きな写真をアップロード、表示を調整出来ます。 こんな感じ ↑の例では…

着せ替え用CSS 水色・紫・黒系グラデーションサンプルコード【訂正あり】

デザインCSSに貼るコード 水色グラデーション 紫グラデーションCSS 黒・グレー系グラデーション コンテンツ部分のグレー背景を変更する ピンクグラデーションを変えたい場合は以下のサンプルコードを参考にアレンジしてみてください。グラデーションジェネレ…

サイドバーのフォローボタン

このデモブログと同じサイドバーのフォローボタンを設置するには、以下のコードをサイドバーのHTMLモジュールに貼り付けて下さい。ブログドメインはhttp:抜きです。 適宜変更してお使い下さい。注意:はてなブログのフォローボタン(読者登録)4箇所変更する…

シンプルなシェアボタン

このブログと同じシェアボタンを設置するには、以下のコードを管理画面>デザイン>カスタマイズ>記事>記事下に追加して下さい。 またFontAwesomeを導入してない方は導入して下さい。 FontAwesomeの呼び出し headに貼り付けて下さい。既にどこかに記述済み…

フッター・Copyright表示(はてなブログPro向け)

はてなブログ標準のフッターを消しているはてなブログPro向けユーザー向けのカスタマイズです。以下はCopyright表示をするためのコードです。このデモブログと同じデザインです。ユーザー名、ブログドメイン(http:抜き)、ブログURL(http:付き)、フォロー…

グローバルメニューの設置方法 訂正あり

管理画面>デザイン>カスタマイズ>ヘッダ>タイトル下に以下のコードを追加してください。「URLを入力」のところは 各自のURLに書き換えてください。FontAwesomeを導入していない方は導入して下さい。 最後の閉じるのリストはPC版は非表示ですが、スマート…

長い長い長い長い長い長い長い長い長い長い長い長い長い長い長い記事タイトル

春にして君を想う

サンプルエントリー見出し確認

H2見出し 大見出し 中見出し 小見出し H2見出し 大見出し 中見出し 小見出し