Focusでヘッダ部分を画像と置き換える方法2018-01-11Focusでヘッダ部分を画像と置き換える方法カスタマイズメインブログのヘッダ部分をテキストベースから画像に変更しましたのでその方法を紹介します。以下のステップで画像へ変更可能です。最低でもPCとスマホ(縦表示)用の画像を用意しましょう。出来れば3種類あるのが良いです。PC・タブレット・スマホに合わせる感じですね。※極端にシンプルなものでしたら1種類でも構わないかもしれません。カラム数の変化に合わせたいときは以下のブレークポイントに合わせた画像を用意すると良いです。3カラム(幅1400px以上)2カラム(幅768~1399px)スマホ表示(幅767px以下)ちなみに画像の幅や高さはこの時点ではお好みで作成し、後から調整しましょう。迷ったら1800、1200、800pxくらいの幅で作成すれば調整しやすいです。作成した画像の背景を透過させたいときは以下のようなサイトを使うと便利です。画像を作成したら次は画像をはてなフォトライフ経由もしくはブログの写真を投稿するところにアップします。アップロードしたら画像のURLを取得してください。URLの取得がわからない人は一度ブログ記事に落とし込んで表示させておいて、画像を右クリックして「画像のURLをコピー」を選択すれば取得できるはずです(Windows)。画像のURLを取得したら後はデザインCSSに落とし込むだけです。ちなみに以下は私の事例です。画像のURLを入れ替えればそのまま使えます。表示したい画像の高さをここで調整できます。幅は自動的に調整されます。1024pxまでの幅のサイズ。display:none;}私の場合、取り急ぎで作ったので2つしか画像を用意しませんでした・・・。ブレークポイントも結構微妙なラインで設定しています。4実際の表示でチェックデザインCSSを設定したら、後はPCとスマホで表示をチェックしておきましょう。画像が粗かったり細かかったりして見にくくないかだと思います。変更時のポイント最後に変更時のポイントについてコメントしておきます。スマホでも確かめる表示の確認はPCではブラウザの幅を変更しながら確認しましょう。スマホ表示に関してもブラウザのデベロッパーモードではなく実際にスマホで表示させて確認しましょう。ブレークポイントを考える3カラムの人は特にブレークポイントの設定で難航しやすいです。画像の中のレイアウトともかかわってきます。時間をかけて調整するしかないです。ヘッダ画像の高さに合わせるヘッダ画像の高さを早い段階で決めておきましょう。高さによって画像の表示幅が自動で変わるためです。参考になれば幸いです。関連記事2018-01-12Focusの各アセット(吹き出しとかBOXとか)を簡単に使えるコピペデータを配布しますはてなブログテーマFocusで使用している各種アセット(デザイン...2017-11-01サイドバー内のはてなモジュールをタブ化して表示する方法はてなブログにおいてサイドバー内に配置するモジュールをタブ...2017-10-31投稿記事内で表示する目次の設定方法はてなブログテーマFocusで使用している記事内目次の設定方法に...2017-10-253カラム表示に必要な設定についてFocusで3カラム表示を実現するまでの手順をご紹介します。「ワクワクこそ最強のライフハック」を合言葉にワクワクするネタ探しの日々。2018-01-12Focusの各アセット(吹き出しとかBOXとか)を簡単に使えるコピペデータを配布します2018-01-11Focusでヘッダ部分を画像と置き換える方法2017-11-22Focusで使用しているボタンとバルーンの使い方2017-11-21Focusで使用している主なカラーコード一覧2017-11-20引用などで使えるBOXデザインの使い方2017-11-02カテゴリアーカイブ(記事一覧)ページの見出し表示をCSSで変更してみました。▲はてなブログをはじめよう!ganapati55さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。