BoI

後悔しないアルバイト選びをすべての人に

【DUDE】ヘッダータイトルから「ホームページ」にジャンプする方法

f:id:aitokichoco:20200516184730j:plain


 

 

はてなブログのデザインテーマ【DUDE】を使い始めてから、一カ月が経過しました。

 

今回は、これまで私がやってきた【DUDE】カスタマイズのうちの一つ、ヘッダータイトルから「ホームページ」にジャンプする方法を紹介したいと思います。

 

 

 

 

 

DUDE

 

本題に入る前に、【DUDE】のテーマを使ったことがない人はDUDEのデザインテーマをブログに導入してください。

 

ただ、【DUDE】を導入するうえで、注意点が一つだけあります。

 

それは、「レスポンシブ対応していない」ことです。

 

「レスポンシブ対応していない」ので、スマホ版では別にコードを書き換えなければいけません。スマホ版【DUDE】のカスタマイズについても、おいおい紹介していきたいと思います。

 

基本的なカスタマイズ方法については、DUDEの制作者であるtsukuruiroiroさんがLITERALLYにてカスタマイズ方法を紹介しているので、まずは、そちらを参考にしてください。

 

 

LITERALLYで紹介されている、PC版【DUDE】のカスタマイズ内容を簡単にまとめると以下の通りです。

 

  • ブログ名とは別のタイトルを付ける方法(今回のテーマであるヘッダータイトルに関連することです)
  • タイトルバーに画像&紹介文を表示させる方法
  • サイドバーのカスタマイズ(ソーシャルボタンを含む)

 

その他にも、【スマホ版】DUDEカスタマイズの記事もあるのでこちらも参考にしてください。

 

今回はヘッダータイトルを扱うので、一応、ヘッダータイトルの付け方を説明しますが、すでにヘッダータイトルを付け終わっている方は飛ばし読みしていただいて結構です。

 

ヘッダータイトルの付け方

 

最初に、「設定したブログ名」をデザイン設定で隠します。

以下のコードをデザインCSSに張り付けてください。

 

/*タイトルをブログ名と違うものにする*/
#title:before {
content: "ここに実際に表示させるタイトルを入れる";
color: white;
font-family: 'quicksand', sans-serif; }

#title a { display: none; }

 

これで、ブログタイトルが左上に移動しているはずです。

「大見出し」「中見出し」「小見出し」のコードを張り付けたい人もいるかと思いますが、大見出しに関しては後々消すことになるので今回は優先しませんでした。

 

一応、下にコードを張っておくので、ヘッダータイトルから「ホームページ」にジャンプできるようになってから一番上の「大見出し」に関するコードを消して貼り付けてもらえればと思います。

 

<div class="headimg"><h4>大見出し</h4>
<h5>中見出し</h5>
<div class="recommendlist">
<h6><a href="おすすめ記事1のURL">おすすめ記事1のタイトル</a></h6>
<h6><a href="おすすめ記事2のURL">おすすめ記事2のタイトル</a></h6>
<h6><a href="おすすめ記事3のURL">おすすめ記事3のタイトル</a></h6>
</div>
</div>

 

注意
ヘッダーに貼り付けです。デザインCSSに貼り付けると反映されません。

 

 

 

f:id:aitokichoco:20200516152350p:plain

 

ここまで出来たら、いよいよ本題に入ります。

 

ヘッダータイトルから「ホームページ」にジャンプする方法

 

お待たせしました。

ここからが本題のヘッダータイトルから「ホームページ」にジャンプする方法です。

 

<div class="headimg">
<h4><a href=自分のブログのURL><font color="フォントの色">ヘッダータイトル名</font></a></h4>
</div>

 

上のHTMLを、デザイン→🔧カスタマイズ→ヘッダー→タイトル下に追加してください。

 

もともと、中央に表示させていた大見出し(ヘッダータイトル)のコードは消していただいて大丈夫です。分からない人はいないと思いますが、大見出しのコードは<div class="headimg"><h4>大見出し</h4>のことです。

 

反映させてみると、ヘッダータイトルからホームページに飛ぶようになっているはずです。

 

さて、少しだけ上のコードの説明をしたいと思います。

反映されて満足した方は、このまま離脱していただいて構いません。

 

下では、私のようなプログラミング初心者向けに解説をしています。

 

まず、<a href>のことを「ハイパーリンク」と呼びます。

ハイパーリンクは、簡単に説明すると文章にURLを埋め込むことです。 そのハイパーリンクを使って、今回はホームページにジャンプできるようにしました。

 

補足として、大見出しの文字をカスタマイズするコードも貼っておきます。

 

.headimg h4 {
font-size: 9.0em;color:#FFB6C1;font-family: 'Tangerine', cursive;
text-shadow: 2px 2px 5px black;

 

上から順に説明すると、

 

.headimg h4 {

ヘッダータイトル
font-size: 9.0em;color:#FFB6C1;font-family: 'Tangerine', cursive;

フォントサイズ:フォントカラー:フォントの書体
text-shadow: 2px 2px 5px black;

フォントの陰影:右、下、5pxぼかした黒

 

フォントカラーを変更したい場合は、私がいつも使用している、こちらのサイトをどうぞ。

ちなみに、フォントのの書体はGoogle Fontsから持ってきています。

 

以下、Google Fontsの導入の流れです。

 

  1. お気に入りのフォントを見つけたあと、右側にあるSelect this styleの部分をクリックしてコードを表示させる。
  2. <link>の中に表示されたコードを「設定」→「詳細設定」→「headに要素を追加」の欄に張り付ける。
  3. <link>の下に表示されているCSSをコピーして「デザインCSS」に追加

 

これで、反映されるはずです。

 

注意
「headに要素を追加」を忘れると、上手く反映されないのでご注意を。

 

まとめ

今回はヘッダータイトルから「ホームページ」にジャンプする方法を紹介しました。

上手くいかない点があれば、コメントにて教えてもらえるとありがたいです。

 

次回は、この記事の右上にあるようなグローバルメニューについて記事にしたいと思います。

読者登録して、お待ちいただけると幸いです。