C1 Express

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

はてなブログをちょこちょこカスタマイズ②サイドバー編




前回書いた、カスタマイズについての続きです。サイドバーを自分好みにカスタマイズしていきます。ちなみにLITERALLYさんの「DUDE」テンプレートを元にCSSを変更していくので他のテンプレートをお使いの場合はカスタマイズ方法が異なることがあります。



■メニュータイトルのカスタマイズ



DUDEテンプレートのサイドバーのメニュータイトルの左側にはポイントがありますが、これをまず消します。

デザイン >カスタマイズ >デザインCSS

デザインCSSに以下を追加します。

.hatena-module-title {border-left: none;}

メニュータイトルを中央寄せしたい場合は

text-align: center;

メニュータイトルの文字色を変えたい場合は#の後に6ケタのカラーコードを。
カラーコードが分からない場合は【色の名前とカラーコードが一目でわかるWEB色見本】がわかりやすいです。

color: #c9bbcd;

まとめると、DUDEテンプレートでポイントを消す+メニュータイトルを中央寄せ+メニュータイトルの文字色を変更=以下をデザインCSSに書き込む。

.hatena-module-title {
border-left: none;
text-align: center;
color: #c9bbcd;
}

上のCSSを書き込んでも文字色が変わらないメニュータイトルがある場合は、以下も追加する。

.hatena-module-title a {color: #c9bbcd;}

#のあとに、上と同じカラーコードを入力すればOK。

やっぱり、LITERALLYさんがカスタマイズ方法で言及されている通り、メニュータイトルは英語のほうが良いと思います。デフォルトで設定されている「Montserrat」というフォントが美しいので、ぜひぜひ英語でMontserratを表示させたい!


【おまけ】サイドバーのHTMLモジュールのメニュータイトルを非表示

.hatena-module-html.hatena-module-title {display: none;}



■検索バーのメニュータイトルだけを非表示にする。



デザイン >カスタマイズ >デザインCSSに以下を追加します。

.hatena-module-search-box .hatena-module-title {display: none;}



■新着記事一覧のリンク色の変更

以下を デザインCSS に追加します。

li.urllist-item.recent-entries-item a:link {color: #333333;}
li.urllist-item.recent-entries-item a:hover {color: #666666;} /* マウスを乗せたとき */
li.urllist-item.recent-entries-item a:active {color: #666666;} /* マウスでクリック時*/
li.urllist-item.recent-entries-item a:visited {color: #333333;} /* リンク済み */

今日はこのあたりで終了。また追記します!

 



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



先日、ブログに書いたように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記事未満なのでコードを書きこんで更新していますが、記事数が多いとめんどうなのでおすすめできません…。


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




はてなブログがやっぱり良い。Ameba Owndから引っ越ししたい




アメブロでおなじみのサイバーエージェントが2015年3月からサービスをスタートさせた「Ameba Ownd」を使ってみたという記事をちょっと前に書きました。

その記事を書いてから、たった2週間しか経っていないんですが…はてなブログで作っておけば良かったと後悔しています。

アメブロと違って広告も少なくて、シンプルで、ある程度は自由にカスタマイズできて、アメブロより表現の自由度もあって、良かったんですけど…。なんか壁にぶちあたったのでそのへんのことを書きます。



インデックスされない



まだ始めて2週間なのでなんとも分かりませんが(その辺りのことも詳しくないですし)、インデックスされているかチェックすると…あれ?

カテゴリーしかインデックスされていない!それぞれの記事をインデックスしてほしいんですが。Owndを利用している有名サイト、例えばスターバックスジャパンとかはちゃんと各記事でインデックスされているので、まだ日が浅いということも原因かも。

で、スターバックスジャパンのOwndでさえも検索に弱いということが下の竜胆(りんどう)Webデザインさんの記事に掲載されています。OwndでもSEOいけてんじゃん。という声もあるので微妙なんですが。とりあえず、Google search consoleでサイトマップを送信したりして観察中です。

Ameba Owndでブログを書くのは無駄な努力だって知っていましたか?
http://rriinnddoouu.com/archives/209



カスタマイズはアメブロよりできる



アメブロのように広告がぺたぺたとあるわけではないので、見た目はすっきりとしたテンプレートを作れます。

しかし、CSSの編集のタブはこれ以上大きくできないので見づらい。よってメモパッドとかで打ってコピペする。

スマートフォン用テンプレートのカスタマイズは無料はてなブログに比べるとOwndのほうに軍配が上がる。

HTMLは編集できないものの、カスタマイズの面では大体好きなことができていいんだけどなー。


まあ、何が言いたいかというと「検索に弱い」「同じサイバーのサービスならアメブロのほうがSEO強い」ということ。

Owndの利用者が少ないからか「Ameba Ownd」で検索しても公式のヘルプページしか出てこないし、

やはり他のメディアで有名な人、Instagramとかアメブロとかのまとめページ的なものに向いているのかなーと思います(しかし、アメブロで有名な海老蔵さんのOwndですら検索結果がかなり下位なのは気になる)。