.wpcf7-submit:disabled{cursor:not-allowed}よく試し、よく作るブログ実験室naelabスマホ画面上固定のグローバルメニューにブログタイトルを埋め込む方法(はてなブログのカスタマイズ)はてなブログ2016.05.18こんにちは、NAEです。先日のブログデザイン変更でやったことの詳細編第2弾です。スマホ画面上部に固定されたグローバルメニューの中にブログタイトルを埋め込む方法をご紹介します。この方法ははてなブログのテーマBrooklynに特化したカスタマイズです。標準装備のグローバルメニューを利用し、かつレスポンシブデザインを利用する前提です。その他の組み合わせにおける動作は保証しかねますのでご了承くださいまた、タイトル画像を埋め込む方法もあるにはありますが、今回はタイトルはテキストのみである前提です注意:本番ブログをカスタマイズする前にテスト環境をつくっておくことを強くおすすめします!テスト用ブログを作ろう!はてなブログでカスタマイズを安全に行う方法ブログをカスタマイズしていると誰もが一度は経験する「前のに戻したいけど戻せない問題」。バックアップを取るよりも便利な方法がありますのでご紹介。bloglab.naenote.net2016.05.28目次コピペコード外部ファイルの読み込みHTMLJavascriptCSSまとめコピペコードはてなブログのカスタマイズにおいていじる要素は主に3つです。必要な外部ファイルの読み込み(Webフォントなど)表示するものの定義(HTML)その装飾や動きの指定(CSS、Javascript)それぞれのいじり方を順番にご紹介します。外部ファイルの読み込みWebフォントを使わないのであれば特に何もする必要はありません。文字のみタイトルということで見た目が最高にクールなWebフォントを使いたい!ということであれば、外部から読み込んであげる必要があります。おすすめ英語Webフォントはこちらの記事をどうぞ。ブログタイトルにおすすめ!雰囲気たっぷりの英語Webフォント16選ブログタイトルはブログの雰囲気を司る存在。Webフォントを効果的に使ってブログを演出してみては。おすすめフォントやWebフォントを使う際のTipsを紹介します。bloglab.naenote.net2016.10.25コピペコードお好きなWebフォントのページで紹介されているコピペコードを参照ください。本ブログではGoogleの提供するGruppoというWebフォントを使っています。ヒントWebフォントには日本語用と英語用のものが存在します。英語用のものはアルファベットや記号などしか含まれないためデータ量が少ないのですが、日本語用は漢字などを含むため非常にデータ量が大きく、それだけブログの表示に時間がかかってしまいます。日本語のWebフォントは相当こだわりがある場合のみ使うようにすることをオススメします。HTMLはてなブログにデフォルトで定義されているブログタイトル(#title)と説明(#blog-description)は調整が効きにくいため、今回はブログタイトルと説明を表示するためのHTMLを別途準備します。id="mobile-blog-description"></span></a></div>上記コードをスマホ向けグローバルメニューを指すHTML要素の内側にコピペします。タイトル下ヒントこの時点ではタイトルとブログ説明は表示されません。Javascriptここでは、はてなブログのデフォルトで定義されているブログタイトル(#title)とブログ説明(#blog-description)にある文字列を取得し、上記で追加したHTML部分に追記させる処理を追加します。タイトル下ヒントもし他の部分ですでにjQueryライブラリの読み込んでいる場合は、上記コピペコードの1行目は不要です。CSS追加したブログタイトルおよび説明(HTML)に対して装飾を施していきます。ブログタイトルと説明の表示位置。デザインCSSヒントブログタイトルのみ表示させたい場合、以下の通りコードを修正してください。none;}まとめというわけで、ブログタイトルをグローバルメニューに埋め込んでみました。グローバルメニューで埋まってしまったスマホ画面上部をブログのブランディングに使ってしまえ、というアイデアがお好みの方はぜひトライしてみて下さいませ。そのデザインはダメなんだ。2016-04-22Amazonで探すKindleで探す楽天ブックスで探すはてなブログスポンサーリンクシェアTwitterFacebookはてブPocketLINEコピーフォローNAEブログ実験室naelab関連記事はてなブログはてなブログの記事編集画面が重い原因はヨメレバ・カエレバだった件はてなブログ魔改造によるはてなブログの高速化。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。管理人NAEただのブログ好き。お問合わせはこちらもしくはTwitterのDMまでどうぞ。ブログ実験室naelab.タイトルとURLをコピーしました。