ブログ開設から1年たち、このブログが見にくいなぁ…と若干ビビった。
そこで、時間をかけずメンテナンスをし(この記事)、記事の内容についても弄った(その2)ので、忘れないうちに書き留めておきます。
(環境: OS windows10 ブラウザ Firefox)
ニッペルフアカウントでは絵を描いている。だから、できるだけその発表もしたいし、考えたことも書いておきたい。そうして記事を作ると、どうしても1記事のボリュームが厚くなり、PCの場合ぱっと見で印象が悪い。そこで、少なくとも視覚的に見やすくしようというのが目的になり、記事の一覧化、ヘッダーの変更、サイドバーの調整が今回の目標になった。
※目次※
弄る前の確認
操作する場所の確認
管理画面を開いて、出てくる左のサイドバーの「設定」を押すと、右の大枠に基本設定が出てくる。そうすると、ブログURLなどの最初に登録した情報がざらって出てくるので、一応控えておく。また、のちほどこの設定の詳細設定も使う。
デザインテンプレートとカスタマイズの確認
先ほどのサイドバーから、「デザイン」を押すと画面が切り替わる。左のサイドバーを見ると、テンプレートのデザインがあるので、好きなものを選べるが、今回、さらにその隣の①「カスタマイズ」を使う。このレンチマークを押すと、さらにバーが切り替わりいくつかの項目が出るが、今回は②の項目を使ってゆく。例えば、「ヘッダ」を押すと③の様に隠されたスライダーが出てきて、その項目について変更ができる。変更した内容は大枠の画面で確認できる。
※変更の際、④「変更を保存する」を押さないと反映されないので注意
ブログ全体の構成を変更する
デザインテーマにある色々なテンプレートを使えば楽にブログデザインができるし、CSSを弄れは自分だけのサイトを作れるが、そこまでせずともちょっとした手間で自分なりのブログを作ってみる。
トップページを記事一覧にする
記事を書く際の便利機能で適当なところで続きを読むボタンを押せば、記事を投稿した際、ホーム画面で記事自体が折りたたまれる小さくなるが、まだ情報が多く、いくつもの記事をサラッと見るのは難しい。
そこで、ブログ内のアーカイブページを利用する。簡単に言えば、ホームにアクセスした際、自動的にこのアーカイブに移動するように設定する。
試しにこのアーカイブを見てみる(http://nipplelf.hatenablog.jp/archive のように各自のホームのURL末尾に /archive を加える)と、記事ごとにアイキャッチと文章がまとめて出て、とてもすっきりしたページを見ることができる。
これをホームにしよう! これなら難しくない。管理画面の「設定」から「詳細設定」を押して、下へスクロールすると「検索エンジンの最適化」という項目があり、その中の「headに要素を追加」があるので、その枠内に以下のコードをコピペする。
<script type="text/javascript">
if( location.href == 'http://nipplelf.hatenablog.jp/'){
location.href='http://nipplelf.hatenablog.jp/archive';
}
</script>
<noscript>
<p><a href="http://nipplelf.hatenablog.jp/archive">nipplelfsblog</a></p>
</noscript>
貼り付けたら、http://nipplelf.hatenablog.jpを自分のブログのトップぺージのURLに変えて、赤字に自分のブログ名をいれる(アンカーテキストなので分かればなんでもいい)。最後にページの一番下にある「変更する」を押して完了する。
ホームから自動的にアーカイブに飛ぶので確認してほしい。もし飛ばない場合は誤ってコードを書き換えているので、もう一度やってみればいい。心が折れても全部消して、「変更する」を押せば元に戻る。
ヘッダにバナーを付ける
ブログで一番目立つし、よく見られるのはヘッダであると思う。だからここは少し綺麗にする必要がある。
「カスタマイズ」→「ヘッダ」と進むと、ヘッダの絵は親切にアップロードや見え方について指示があるので、各自好きな絵を入れる。
この際のヘッダの画像の目安は横1000pixil縦200pixilがちょうどすっぽり絵が全部入るサイズになる。
ニッペルフの場合、文章だけでなく描いた絵も見てほしいので、ヘッダ下に自分のギャラリーや絵を発表しているSNSのバナーを貼ることにした。横幅は隙間を考慮してトータルで950pixil程度を見ておけばいい。
実際の作業は
①はてなへ画像の保存→②保存場所の確認→③ヘッダでのリンクと画像の紐づけ
となる。
① 作った画像をHatenaブログの個人スペースに登録する必要があるが、一番楽な方法は「記事を書く」画面にて、本文欄に画像をドラッグすることだと思う。
こうすると自動的に右の「写真を投稿」のHatenaBlog(private)に登録される。
②この画像が保存されている場所のURLを知りたいので、記事作成の「HTML編集」を押し、https://cdn-ak・・・・・.jpg の部分をメモ帳などにコピーして控えておく。
③次に以下のコードを先ほどのカスタマイズ→ヘッダ→タイトル下 のHTMLの記入欄にコピペする。
<a href="https://www.pixiv.net" target="_blank">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/nipplelf/aaaaaaaaa.jpg" >
</a>
そして、一段目https://www.pixiv.netにはバナーで誘導したいリンクのURLに書き換えて、https://cdn-ak.・・・.jpgには先ほど控えた画像の保存先のURLを入れ込む。
横の大枠のプレビュー画面で見て、画像が表示されていれば画面左上の「変更を保存する」を押す。
いくつかバナーを入れたい場合は、繰り返しコードを加えればいい。
大きさや位置調整もあるが、面倒なのでやらない。コードで調整するより、バナー画像自体の大きさを弄った方が早いと思ったためである。
サイドバーを整える
最後にサイドバーを調整する。これはほぼ上記の繰り返しになるので、簡単に書く。
ヘッダの時と同じように、「デザイン」の「カスタマイズ」からサイドバーを調整する。
バナーを追加するときは「+モジュールを追加」でHTMLを書くが、ヘッダ変更と同じようにバナーの絵を登録し、保存元を確認したのち、同じコードのコピペと書き換えをすればいい。
最新記事、注目記事の編集では文字のみだと見にくいので、サムネイル画像を表示するにして、大きさは縦横50pixilにする。表示環境で異なるが、PCではこのくらいが見やすいし、スマフォなら下に格納されるので影響は薄いと思う。
終わりに
これだけ書いておけば、よくわからなくても何とかなると思う。特に理屈を知る必要もないし、コピペのみで特殊なコードを書く必要もないようにした。
注意点は各作業後に「変更を保存」することだと思う。よく忘れる。
今度は記事に一工夫しようと思う。(その2に続く)
☆同人CG販売中