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

C1 Express

気になったモノや備忘録・日々考えたことなどについて書いていくマイペースなブログです。

はてなブログをちょこちょこカスタマイズ①



先日、ブログに書いたようにAmeba Owndのブログをはてなブログに引っ越しさせることにしました(このブログとは別物)。出来るだけOwndで作ったデザインにそっくりしたいなあと思い、LITERALLYさんの「DUDE」というテンプレートをダウンロードしてカスタマイズすることにしました。

いろいろいじった方法のまとめを書いていきます。内容は初心者向けです(私、若葉マークなので…)


■CSS3で背景にグラデーションを設定する

新しく作るサイトとかブログ(個人の)はいつもその年にPantoneが発表する流行色を使うんだけど、今年の「カラー・オブ・ザ・イヤー」は「Rose Quartz + Serenity(ローズ・クォーツ&セレニティ)」を使ったグラデーション

で、このグラデーションをヘッダーの背景に設定したときに参考にさせていただいた記事が下▼

これで、ChromeFirefoxSafariにも無事にグラデーションが反映されました。



Google Fontsをはてなブログで使う

今回はロゴはテキストだけでいいや、と思ったので(ヘッダーの編集で読み込む画像はロゴに適用されるテンプレートじゃなかったので)Google Fontsを使いました。Google Fontsって何?という方は下の記事で使い方も一緒に紹介されています。しかし、しばらく見に行っていない間にサイトの使用が変わっていたので、新しいサイトでのWebフォントの使い方を書いておきます。



新しくなったGoogle Fontsのページはこんな感じ。見本のテキストの上にマウスオーバーすると、タブなどが表示され、『Sentence』の一番下の『Custom』を選択すれば、好きな文字を入力して見本を見れる。

使いたいフォントがあったら、右上の赤丸の『+』をクリックしてストックする。フォントを実装するために必要なコードを表示するには、右下の『SEE SPECIMEN』をクリック



選択したフォントの詳細ページに進みます。ページの右下にある(上の画像では指が指している)黒いバーをクリックするとコードなどが表示されます。

はてなブログでは直接HTMLにコードを書きこめないので、ちょっと手順が違います。下の記事を参考にしてください。




■日付のハイフンをドットに変える

このブログでもすでにやっているんですが、はてなブログの日付部分の-(ハイフン)を.(ドット)に変更します。気にならなければならないんですけど、なんか直したいんですよね…。

.hyphen {
  1. display: none;
.entry-date .date-month::before, .entry-date .date-day::before {
  1. content: '.';

上のCSSを書きこめばOK!
display: none; は使うの嫌な人もいると思うんですが、たぶんこのブログでも使っているはず…でもGoogle先生はいつも拾ってくれているのでたぶん大丈夫なんだと思います。



■シェアボタンをおしゃれにカスタマイズする(2016/7/20追記)

はてなブログのデフォルトのシェアボタンはTwitterのが高さが合ってなくて、ガタガタしているし何か恰好悪いなあと思っていたので、このブログのシェアボタンも変えてみました!下の記事ではてなブログで使えるシェアボタンがたくさん紹介されています。

blog.kaerucloud.com【はてなブログカスタマイズ】色々な「SNSシェアボタン」と「フォローボタン」を集めてみた。

その中から、だいぱんまんさんのCSSとWebフォントで作られた動作も軽いシェアボタンを使わせていただくことにしました。

が!しかし。

無料版はてなを使っているので、設定したシェアボタンが広告の下に表示されてしまうので…おしゃれで使いたかったけど忍者ツールの忍者おまとめボタンを使うことにしました。


お好みのボタンを設置できます。余計なSNSボタンは除くこともできる。

で、忍者おまとめぼたんも記事下に貼ってしまうと、当ブログのようにトップページでも全文記事が読めてしまうブログでは表示されないので、各記事に直接書きこみました。(はてなブログはおまとめツールでの設定の際に「その他のブログ」になってしまうので各記事のURL共有は自分でURLと記事タイトルを書きこまないといけないのだ!その方法はこちら

私は200記事未満なのでコードを書きこんで更新していますが、記事数が多いとめんどうなのでおすすめできません…。


つづいては、「サイドバー編」。