こんにちは、ゆとぶです。
前回以下の記事で設定したやる事リストにあった「サイト構成の変更」がやっとできました。一個ずつは簡単なんですが、ちょいちょいはまってかなり時間がかかった。。
サイト構成の変更は他の人も実施することだと思うので、一例としてこのブログで実施したことを記載しておきます。正直、自分へのメモ目的が大きいです。
かなりいろんなサイトを参考にしたので、もうどれがどこから得た情報なのか全く覚えていません。本来は各サイトを紹介できるとよかったんですが、サイトのカスタマイズについてのページはいっぱいあるので、ここでやり方がわからない場合には検索してみてください。
使用したテーマ (Innocent)
まずはテーマから変更しました。
もともとは Afternoon というテーマを使っていましたが、変更したいところが多かったのでシンプルなやつを使う事にしました。最初は最もシンプルそうな Blankを使おうと思いましたが、同じところが出しているInnocentの方が人気があったのでこれを使う事にしました。
トップページを記事一覧に変更
記事一つずつに [続きを読む] を入れていなかったので、トップページがかなり長くなってきました。せっかくなので、トップページを記事一覧に変更しました。
変更方法
[ダッシュボード] - [設定] - [詳細設定] を開き、[検索エンジン最適化] の [headに要素を追加] というところに以下を記載します。
記事一覧ページは <ブログのURL>\archive として既定で用意されています。上のコードはトップページにきたアクセスをすべて /archive にリダイレクトしているだけ。ちなみに上のコードを使う場合には以下の変更をお忘れなく
- 2 行目, 3 行目, 7 行目の http://yutokatagami.hatenablog.com を自分の URL に変更する
- 7 行目の "ゆとぶ - 片上裕翔のブログ" を自分のブログタイトルに変更
見出しの見た目を変更
見出しの見た目を以下のように変更
大見出し(h3)
中見出し(h4)
小見出し(h5)
変更方法
[ダッシュボード] - [デザイン] - [カスタマイズ (スパナマーク)] - [{}デザインCSS] というところに以下を記載します。
記事のタイトル
記事のタイトルも目立つように変更
変更方法
[ダッシュボード] - [デザイン] - [カスタマイズ (スパナマーク)] - [{}デザインCSS] というところに以下を記載します。
リンクの色を変更
はてなブログのリンクは既定ではグレーなので、IE の既定の色と合わせて変更。
変更方法
[ダッシュボード] - [デザイン] - [カスタマイズ (スパナマーク)] - [{}デザインCSS] というところに以下を記載します。
サイドバーのタイトルを変更
サイドバーの見た目も変更。サイドバーのタイトルの左側に各種エントリを表すアイコンを設置。
変更方法
[ダッシュボード] - [デザイン] - [カスタマイズ (スパナマーク)] - [{}デザインCSS] というところに以下を記載します。
上のコードを追加しても左側にアイコンが表示されない場合には FontAwesome を使えるようになっていません。FontAwesome を有効化するためには、 [ダッシュボード] - [設定] - [詳細設定] を開き、[検索エンジン最適化] の [headに要素を追加] というところに以下のコードを追記します。
強調文字を作成
今までは強調文字を手動でこんな感じの見た目にしてましたが、これをこんな感じにきれいにハイライトされるように変更。
変更方法
[ダッシュボード] - [デザイン] - [カスタマイズ (スパナマーク)] - [{}デザインCSS] というところに以下を記載します。
使うためには対象の文字を HTML の <span class="ul_blue"> と</span> で囲みます。
例：以下のように HTML で入力すると
- 文章の中の<span class="ul_blue">ここをハイライト</span>します。
実際の表示はこうなります。
- 文章の中のここをハイライトします。
シェアボタンとフォローボタンとアドセンスの設置場所
シェアボタンとフォローボタンを記事下に追加しました。追加方法は主にこのサイトを参考にしていますが、「はてなブログ シェアボタン」などで検索すると大量に情報がでてきます。
コードの変更方法も記載していこうと思いましたが、一個ずつわかりやすく書くのは結構大変なので今日はあきらめます。やったこととしては
- シェアボタンとフォローボタンを記事下に設置。
- 記事下の場所が気に入らなかったので、ちょっと上に変更
- アドセンスも記事下に二つ並べた状態
- 広告と本記事がごちゃごちゃになると見栄えが悪いので、薄く境界線を書く
ファビコン設定
このブログを開くと表示されるアイコンを作成。129x129 のサイズの画像を作って、[ダッシュボード] - [設定] - [ブログアイコン] に指定する。
携帯サイトもカスタマイズ
普段はパソコンで操作をしているのであまり変更する機会がなかったけど、これを機にスマホの画面の表示方法も変更。
- 既定のヘッダー画像を消す
- ヘッダー画像をとりあえず文字で置き換える(将来的には画像と置き換えたい)
- ヘッダーの一番上にあるはてなブログへのリンクを消す
- 記事内の見出しの見た目を編集(PC と同じ変更）
- 記事一覧の画像を大きくしたり、見栄えを少し変更
- リンクの色(PC と同じ変更）
- 記事のタイトルの見た目を変更
- 強調箇所をハイライトするやつを携帯でも見れるように設定
- フッターに表示されるはてなブログを始めようを消す
- フッターに表示されるはてなブログ開発ブログ等のリンクを消す
- メニューバーを画面下に設置
- フッターにアーカイブフォルダを追加
- PC のサイドバーは携帯のフッターに落ちてくる。これの見た目を変更
最後に
書ききれなかった。。。今回説明できなかった編集方法については別途わかりやすく書こうと思っていますが、ざっとこんな感じでサイトを構成しました。すっごい時間がかかりましたが、おかげでちょっと css が理解できてきた気がします。
そしてなんと この記事をまとめている間に読者さんが 4 人も増えました。たまたまかもしれませんが、こういう変更って効果絶大かもしれません。
何よりも、出来栄えには結構満足しています！がんばった！
