読者です 読者をやめる 読者になる 読者になる

Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

サイドバーの記事一覧モジュールで、変数を用いた高度なカスタマイズをする方法

f:id:syofuso:20170420001432p:plain
先日はてなブログのサイドバーモジュールに新しい機能が追加されましたね。
staff.hatenablog.com
何か出来ないかなあと、カスタマイズを試してみました。

色々な表現が出来ると思うのですが、今回は以下の2点を取り入れたデザインを作ります。


サイドバーのカスタマイズ・サムネイルにリボン(帯)を付ける
・2列表示にする(段組み)

続きを読む

Nコンの課題曲について思うこと 合唱曲が好きなんだ!

f:id:syofuso:20170416055029p:plain
NHK全国学校音楽コンクール、Nコンの2017年の課題曲「願いごとの持ち腐れ」(秋元康作詞)の模範演奏がAKB48の選抜メンバーで放映されてから批判が表に出てきました。
dot.asahi.com

こうしたNコンの課題曲に対する批判はJ-POP路線が強くなった10年くらい前からありました。
それでも当初は「まあこういう曲もありよね」って好意的に受け止められてきた向きも多かったと思います。
ですが何年もずーっとJ-POP偏重傾向が続き、しかも「合唱曲としても質が低い」楽曲が課題曲として続くにすれ、これはおかしいんじゃないかと危機感を抱いて疑問を呈する方も増えてきました。

顧問の先生方が大変苦労して指導されてきたのだと思います。
ポップスの曲として作られた詩や歌を無理に合唱曲として合わせて歌うのは大変だと思います。課題曲の譜面がどうなっているのかわかりませんが、指導されている先生方も困惑されているのがわかります。

私はNHK全国音楽コンクールに参加し、合唱を愛するものとして合唱の多様な面を知ってほしいと思い本エントリーを書きます。このエントリーでは音楽性がどうのということは書きません。ただの、思い出話、ノスタルジーです。         

1998年のNコン高校課題曲 「また、あした」

続きを読む

はてなブログのサイドバーに画像を貼り付ける方法

f:id:syofuso:20170408210313j:plain
最近Adobe CCを導入してIllustratorを使っています。なんだかんだ言って有料のソフトウェアは使いやすいですね。解説もネットに多いですし。
印刷物を作る機会が増えて、無料の画像編集ソフトでは限界がありましたが、Adobe CC導入して良かったです。まだ全然使いこなせてませんが…

続きを読む

よく使う.htaccessの書き方まとめ 301リダイレクト

f:id:syofuso:20170408210312j:plain
スマートフォンサイトを制作してPCサイトとスマートフォンサイトをデバイスによって振り分けるときや、サイトのURLが変わった時にリダイレクト転送する際などに使う.htaccessの書き方についてまとめました。
よく使うけれど、サーバー周りのことはよくわからないので、備忘録につかうコピペ用です。詳しい解説はありません。

  • .htaccessとは
  • .htaccessファイルの作り方
  • ページ単位のリダイレクト
  • ディレクトリ単位のリダイレクト
  • ドメイン単位のリダイレクト
  • 特定のディレクトリをリダイレクトから除外する
  • www無しのURLに統一(URLの正規化)
    • www有りのURLに統一
    • index.html無しのURLに統一
  • httpからhttpsへ301リダイレクト
    • 上位ディレクトリがhttpsへリダイレクトされるときサブディレクトリを除外する設定
  • スマートフォンサイトをデバイスによって振り分ける
    • アノテーション:alternateとcanonicalの記述

.htaccessとは

続きを読む

数字表記におすすめのGoogle Font はてなブログの日付にどうぞ

f:id:syofuso:20170408210311j:plain
このブログではブログタイトルと日付にGoogle FontのJosefin Sansを指定しています。全体にWeb Fontを指定すると見出しやタイトルなど一部分にフォント指定すると、デザインのアクセントになりおすすめです。今回は日付の表示、数字の表示に最適なGoogle Fontについて書いていきます。

はてなブログテーマMinimal Greenでは日付は

    .entry-header .date {font-family: Helvetica, Arial, sans-serif;}

と指定しています。 Arialではこんな感じ。
f:id:syofuso:20170318171503p:plain
Helvetica, Arialもとても見やすいフォントなのでこのままでも良いんですが、ちょっとデザインを印象的に見せたい時にはディテールに変化を付けると良いと思うので、日付のデザインを変えてみましょう。

  • Lato
    • フォント読み込み・指定
  • Roboto
    • フォント読み込み・指定
  • Josefin Sans
    • フォント読み込み・指定
  • Montserrat
    • フォント読み込み・指定

Lato

続きを読む