【コピペで簡単！】はてなブログのタイトルを改行して２行にする方法
こんにちは。こちらに来てくれる皆さんのブログを見ては、我々も見やすい記事が書きたい、もっと素敵なサイトにしたいと最近鼻息の荒いmochao&muchacoです。
お気づきの方もいらっしゃるかもしれませんが（?）、数日前にブログタイトルを変更しました。
元々は、mimosaskyだけだったのですが、購読しているブログ一覧を見ていてふと、ブログタイトルがブログの内容を反映していると分かりやすいな！と気づいたのがきっかけでした。そこで、サブタイトル的に「-カナダ ウォータールーの空の下-」と入れてみたのです。
さて、ブログタイトルが長くなって一つ困ったことが起こりました。タイトルが長すぎて勝手に改行されてしまい、ちょっとカッコ悪い。あと、あくまでもサブタイトルなのにちょっと主張しすぎな感じが出てしまいますね。
ということで、今回我々のやりたいことは以下の通り。
- ブログタイトルを任意の場所で改行する
- 上段、下段でスタイルを個別に設定する
色々調べたり試行錯誤したりで出来たのですが、これといったやり方がまとまっていないようだったので、一応ご報告します！
※ぼくたちは無料版のはてなブログを利用しているので、スマートフォン用の表示には対応できませんでした。残念。
１．やり方
管理画面→デザイン→カスタマイズ→フッタ→HTML記入欄をクリックして以下のコードをコピペします。
<script src="https://cdn.jsdelivr.net/npm/umbrellajs"></script> <script> u('#title').html("<a href=\"(ブログURL)https://hatenablog.com/\">(１行目)mimosasky<br/><span id='subtitle'>(２行目)～カナダ ウォータールーの空の下～</span></a>"); </script>
タイトルの内容などは、それぞれのサイトに合わせて変更してくださいね。
次に、管理画面→デザイン→カスタマイズ→デザインCSSをクリックして、以下のコードをコピペします。
#title{font-size: 45px;} #subtitle{font-size: 23px;}
以上の変更を加えることで、現在表示されているようなタイトルの２段表示ができました。font-sizeを変えると文字の大きさが変更できます。
２．何がどうなっているのか
タイトル部分のhtmlは元々は<h1 id='title'>ブログタイトル</h1>のような形になっていて、CSSだけでは改行やスタイリングの制御が難しいと思いました。そこで、javascriptを使って<h1>タグで囲まれた中身そのものを書き換える事にしました。
u('#title').html("文字列")
この関数で、titleというIDの中の内容が書き換わります。今回の場合は、
<a href="website URL">タイトル<br/><span id='subtitle'>サブタイトル</span></a>
という文字列を先ほどの関数に入れてあります。
- <a>タグで、閲覧者がブログタイトルをクリックしたときにトップページに戻るようにします
- <br/>タグをタイトルとサブタイトルの間に入れて改行位置を指定します
- <span id='subtitle'>というタグでサブタイトルを囲って、サブタイトルに対して異なるスタイルを適用します
続いて、CSSのコードで、初めからあった#titleと、今回追加した#subtitleという二つのIDのスタイルを指定します。今回は個別のfont-sizeを指定することで、見た目のバランスを調整してます。タイトルとサブタイトルに別々のフォントや色を指定することもできますね。
今回、javascriptのライブラリとして、「Umbrella JS」というものを使いました。わずか2.5kBという超軽量なライブラリで、今回やりたい単純な文字列の交換には十分かと思います。他の場所でjQueryをすでに読み込んでいる場合は、今回と同じ要領でjQueryを使えると思います。そもそもこれくらいjavascriptで直書きしなさいと言われそうですが、自信がないこの方がコードがシンプルにできるのでよろしいかと思います。
あと、function()などを使ってhtml読み込み後のタイミングでscriptを走らせると、タイトルが書き換わる瞬間が見えてしまうので、今回のようにhtml読み込み中にインラインで関数が実行されるように工夫が必要でした。
以下の記事を参考にしました。
ferret-plus.comstaff.hatenablog.com
色々他にいじってみたい部分もあるので、少しずつ改造していきたいと思います。
何か変な部分があったらコメントいただけたら嬉しいです。
mochao
