淡いピンクのセットです。ルビを振っても行間が崩れないデザインのリクエストで作成しました。↓ソースまでスクロール
ページ内スクロールのスクリプトはTechAcademyマガジン様の記事を参考にして作成しました。
<ruby>を使うとChromeなどのブラウザで自動的にルビ用のスタイルが適用されてしまうようなので、今回はspanで代用しました。すでにrubyタグでルビ機能をご使用の場合はちょっとお手数ですが該当部分を差し替えてご利用ください。※HTMLを変更できない場合は行間を広く(250%以上)取るくらいの対処しか思いつきませんでした……。
文字サイズと上下位置はCSS、中央寄せ表示はjQueryで設定しています。
リンクの文字部分にタイトルを入力すると前後に鉤括弧が表示されます。不要な場合はCSS/* 長編リスト */内の.title a::beforeと.title a::afterを削除してください。
hidden_mobileのクラスを追加した要素はモバイル版で非表示になります。(このページのヘッダーに適用)
日本語の見出しにはclass="nihongo"を追加すると文字サイズが調整されます。気にならない場合はそのままでも大丈夫です。
コードを一部変更しました。
Chromeからの閲覧時にふりがなの表示が崩れていたので修正しました。
zipファイルをダウンロード(10月3日変更版)
※作ったときはバナーにしようと思ってたので全部横長です。