忍者ブログ

タイトルは仮称・中身も仮設・勢い先行でもとりあえずやってみよう

アイス狂騒曲

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

スポンサーリンク

コピペOK！忍者ブログに施したデザインカスタマイズまとめ

logo

幣ブログ改良化計画（未定）｜雑記｜アイス狂騒曲幣ブログ改良化計画（未定）｜雑記｜アイス狂騒曲　

前回のblog記事で検討していた改良化計画の内容はともかく、このblogのデザインそのものを色々と試行錯誤してみたので、今回はビフォーアフター形式で紹介していきます。
ソースコードも載せているので、デザインカスタマイズを検討されている方は参考にしてみてください。


全体図の見比べ

まずはビフォーから。

かつての幣blogデザイン
blogを立ち上げた当時に少しだけ流行っていた・いやどちらかと言えば流行りが廃れ始める直前（←）だった「本文の文字サイズを小さめで固定する」デザインを取り入れたり、もはや導入理由は忘れましたが全体的に黒系の配色を多めに取り入れたりしていました。
このblogデザインを今回は次のようにカスタマイズ。

今回のデザイン
ビフォーに対するアフターとして、今回のデザインでは全体的に明るい配色を意識して取り入れました。
また文字サイズに関してもごく一部を除いて数値指定を取りやめ、px指定ではなくem指定をメインで使うなど閲覧側に委ねる設定にしています。

それでは以下、実際にカスタマイズを行った箇所について解説していきます。

デザインカスタマイズ（トップページ周り）

これまでblog記事だけをご覧になっていた方々は意識したことがなかったかもしれませんが、実はこのblogのトップページはhttp://804ch.indiesj.com/blogではなくhttp://804ch.indiesj.com/の方だったりします（ぉ
blogそのものを1つの疑似的なwebサイトとみなし、その中のコンテンツの1つとしてblogページがある、という考え方ですね。

そんなトップページ周りのカスタマイズは次の通りです。

トップページのカスタム箇所
上から順番に見ていきましょう。

トップのロゴを変更・css見直し

まずはトップに掲げていた画をガラッと入れ替えました。
以前は「A列車で行こう9」のゲーム画面（自分の開発したマップ）を加工してトップ画としていましたが、今回はDesignEvoというサービスを使用して作成したロゴを利用しています。
また以前のトップ画はウィンドウサイズの横幅が縮まったとき、画像の一部しか表示されず修正方法も当時はよく分からなかったので放置していたのですが、今回はもう少しcssを聞きかじって条件分岐で振り分けています。

具体的には、

#MainBlock > header {
  padding: 10px 10px 180px;
  background-color: ;
  background-image: url(http://blog.cnobi.jp/v1/blog/user/73d14f4b3c840378b8388be2a7eb09bd/1552198038);
  background-repeat: no-repeat;
  background-size: contain;
}

まずこちらがPC向け（横幅が広いウィンドウ向け）の処理で、background-repeat: no-repeat;によりトップ画像を1度だけ表示（※指定をしない場合は縦横それぞれ繰り返し表示となるのがデフォ）するよう指定し、background-size: contain;で画像を切り取ったり縦横比を崩したりすることなく、要素内で画像ができるだけ大きくなるよう拡大縮小させています。

続いてウィンドウの横幅が980pxを下回ったとき、

@media screen and (max-width: 980px) {
  #MainBlock {
    width: 100%;
  }
  #MainBlock > header {
    width: 100%;
    height: 300px;
    margin: 0;
    padding: 0;
    background-image: url(http://blog.cnobi.jp/v1/blog/user/73d14f4b3c840378b8388be2a7eb09bd/1552190294);
    background-position:center;
    background-size: 500px 300px;
  }

#MainBlockのwidth: 100%;は2カラム表示を1カラムに変えるためのおまじないで、background-position:center;でロゴが中央に来るよう配置し直しheight: 300px;とbackground-size: 500px 300px;で画像が切り取られたりしないようサイズを固定しています。
あ、この時点でブログのタイトル（アイス狂騒曲）やブログの説明（PC向けの一番上に表示されている「タイトルは仮称・中身も仮設・勢い先行でもとりあえずやってみよう」の一文）をdisplay: none;により消しているので、ロゴの中にブログタイトルを入れる形で微妙に差し替えています。

ここから先は、更にウィンドウの横幅が480pxを下回ったときで条件分岐をかけてあり、

@media screen and (max-width: 480px) {
  #MainBlock > header {
    background-size: cover;
  }

先ほどまではトップのロゴを横500px×縦300pxの固定にしていましたが、480px以下の場合はbackground-size: cover;に上書きし、これによって画像の縦横比が要素と異なった場合に空き領域が残らないよう上下または左右のどちらかを切り取る設定とすることで、画像ができるだけ大きくなるよう拡大縮小させています。

・・・ただ根本的に、条件分岐を480px以下と設定しているにもかかわらず、なぜトップのロゴを横500pxで用意してしまったのかって話なのですが← #単純ミス

見出しの装飾

「見出しの装飾」と言いつつ、class指定はblogの記事タイトルと同じものを使いまわしているのですが、

.EntryTextBox header .EntryTitle {
  margin: 0 0 0.3em;
  padding: 0.5em 0 0 0.3em;
  font-size: 150%;
  font-weight: bold;
  border-bottom: #004096 4px solid;
  border-right: #DD0982 4px solid;
  background: #FFD;
}

まぁ色々とごちゃごちゃつけているのはともかく、基本的にはbackground: #FFD;で見出しの背景を薄い黄色にし、border-bottom: #004096 4px solid;が青の下線の設定・border-right: #DD0982 4px solid;が右端の赤の縦線の設定ですね。

なお筆者は「アイスが好き」というキャラクターが一部界隈に浸透していたので、今回の配色では某○ーティーワンアイスクリーム（←）のロゴで使われている赤・青・黄色のRGBのうち、赤と青はモロにそのまんま・黄色はバランスを考えて少しずらして利用しています。
ほ、ほら、ロゴをパクったわけではなく配色を「参考」にしただけだから（ぇ

記事のサムネイルを表示

これ、忍者ブログでは実装が厳しいかと思っていましたが、忍者ブログの「独自タグ」と呼ばれるものをフル活用することでなんとか実装出来ました。

<!--plugin_entry-->
<div class="plugin_data">
<!--if_entry_image-->
<a href="<!--$plugin_entry_link-->"><img src="<!--$entry_image-->" align="left" title="<!--$entry_title-->" width="80" height="80"/>【<!--$plugin_entry_year-->/<!--$plugin_entry_mon-->/<!--$plugin_entry_day-->】<br /><!--$plugin_entry_title--></a><br clear="both">
<!--/if_entry_image-->
<!--if_not_entry_image-->
<a href="<!--$plugin_entry_link-->"><img src="http://blog.cnobi.jp/v1/blog/user/73d14f4b3c840378b8388be2a7eb09bd/1551626683" align="left" title="<!--$entry_title-->" width="80" height="80" />【<!--$plugin_entry_year-->/<!--$plugin_entry_mon-->/<!--$plugin_entry_day-->】<br /><!--$plugin_entry_title--></a><br clear="both">
<!--/if_not_entry_image--> 
</div>
<br />
<!--/plugin_entry-->

独自タグなので忍者ツールを使っていない人にはチンプンカンプンでしょうが、大まかに説明すると<!--if_entry_image-->＝記事中に画像がある場合および<!--if_not_entry_image-->＝記事中に画像がない場合で条件分岐を行い、記事中に画像がある場合は<!--$entry_image-->で記事中の1番目の画像を呼び出しています。
そして記事中に画像が無い場合は、別途用意したNo Image用の画像を呼び出しています。

No Image用の画像
No Image用の画像としては、今回このような画像を用意しました。この画像もトップ画同様DesignEvoを使用して作成したロゴです。

見出しの装飾（h2, h3）

h2, h3の装飾
続いて見出しの装飾のつづきです。この記事でも既に何度も出てきているので順番が前後してしまいましたが、ここで解説を行います。
まずはh2タグ。

.EntryText h2 {
  font-size: 130%;
  line-height: 1.4em;
  text-indent: -0.1em;
  border-bottom: #004096 4px solid;
}
.EntryText h2:first-letter {
  font-size: 140%;
  color: #DD0982;
}

「1文字目を大きくして色を変える」といったありきたりなデザインですが、これはh2:first-letterによって実装可能です。青色の下線は少し上で解説した通りborder-bottom: #004096 4px solid;を使えば一発ですね。

続いてh3タグ。

.EntryText h3 {
  position: relative;
  padding-left: 1.4em;
  font-size:120%;
}
.EntryText h3:before {
  content: "●";
  position: absolute;
  left:0;
  top:-0.25em;
  font-size: 120%;
  color: #DD0982;
}
.EntryText h3:after {
  content: "▼";
  position: absolute;
  left:0.35em;
  top:0.25em;
  transform: rotate(-30deg);
  color: #004096;
}

h3タグの見出しの先頭に出したアクセントは画像ではなくcssでの力技で実装しており、イメージとしてはもちろん某○ーティーワンアイスクリームのアイスです（ぉ
このアイスマークは●と▼を組み合わせて表現しており、h3:beforeとh3:afterをposition: absolute;＝絶対位置へ配置させることにより、このように2つの記号を重ね合わせて1つのアイコン風にしています。
また出来るだけアイスクリーム風に表現するため、▼の方はtransform: rotate(-30deg);で30度回転させて配置しました。

続いてはblog記事ページ周りの解説です。

デザインカスタマイズ（記事ページ周り）

記事ページ（ビフォー）
まずはビフォーをご覧いただきました。この時のネタ記事も懐かしいですね！ｗ

ニコ鉄参入をお考えの皆様へ｜小ネタ｜アイス狂騒曲ニコ鉄参入をお考えの皆様へ｜小ネタ｜アイス狂騒曲　

基本的に初期設定から何もデザインを弄らず、これまで400数十記事だか500記事弱だかを書いてきたわけですが、さすがに今回のデザインカスタマイズではこのままというわけにもいきません。
記事ページ周りも次のようにカスタマイズを行いました。

記事ページ（アフター）
それでは以下、カスタマイズ箇所を確認していきましょう。

日時表記を一番上に

従来は記事タイトルの下に右揃えで表示されていましたが、これをタイトルの上に左揃えで表示されるようhtmlの順番とcssを見直しました。
見出しの装飾自体はこれまでに紹介した見出しのcssとほぼ同じですが、違いといえばこの日時表記はリストを作るulタグで実装していますので、

.EntryTextBox header ul {
  margin: 0;
  text-indent: .2em;
}
.EntryTextBox header li {
  display: inline-block;
  margin: 0 10px 0 0;
  font-size: 70%;
  font-style: oblique;
  color: #000;
}

このようにdisplay: inline-block;を使ってリストが横並びになるよう設定しています。
ただそのままだと「Date」や「Category」の文字までリストの要素内に入り込んでしまうので、

.EntryTextBox header .EntryCategory:before {
  content: "Category:";
}
.EntryTextBox header .EntryWriteDate:before {
  content: "Date:";
}

beforeタグを使って要素の外に表記しています。

「つづきはこちら」の装飾

こちらも以前との変化は装飾がメインであり、

.EntryTextBox .EntryPsText {
  text-align: center;
}
.EntryTextBox .EntryPsText a {
  color: #333333;
  display:block;
  padding:10px;
  text-decoration: none;
  background:#FFD;
}
.EntryTextBox .EntryPsText a:hover {
  background:#FFDB4F;
  color:#000000;
}

display:block;を設定することで「つづきはこちら」の文字だけではなく、要素全体を1つのリンクボタンのようにしています。
それにより、要素内であればどこにマウスカーソルを当ててもリンクとして機能するので、少しはアクセシビリティアップに繋がるかと。

記事最下部に日時表記を新設・コメント数の表示を追加

今まで日時表記はタイトルの右下にしかありませんでしたが、こちらを新たに記事本文の最後にも追加しました。
同時に、初見さんがブログ記事のトップページ（http://804ch.indiesj.com/blog）を見たとき、コメント欄へはどうやってアクセスするのか分かりづらいという事例が過去報告されていましたので、今更ながら対策を施したつもりです（ぉ

cssは記事の一番上に移設した日時表記とほぼ同じものとなっており、コメント数の表示の方を独自タグで実装した感じですね。

<a href="<!--$entry_link-->#CommentBlock"> <!--$entry_comment_num--></a>

コメント欄のURLはこのblogの場合「記事URL#CommentBlock」となっているので、記事URLを引っ張ってくる独自タグの<!--$entry_link-->を利用してリンクを作成しています。
同じくコメント数を引っ張ってくる独自タグとして<!--$entry_comment_num-->が用意されているので、これも有効活用した次第です。

あとがき

数年ぶりの大幅リニューアル（デザインカスタマイズ）ということで、確定申告準備の現実逃避も兼ねつつ1週間くらいずっと作業をしていました。
本来であればテストページを作ってカスタマイズの微調整をやるものなのですが、あまりにもめんどくさすぎて今回は本番データを直接少しずつカスタマイズする強硬策（ぇ
そのため、ひょっとするとここ1週間以内に複数回訪問してくださった方がもしおられた場合、アクセスの度にデザインが違ったり何故か背景が真っ赤になっていたり・・・といったことがあったかもしれませんねｗ

今回のデザインカスタマイズで気になっていた部分の9割以上は完了しましたので、残り1割に関しては時間とやる気と相談しながら手を付けることにします。

ちなみに今回紹介したcssは、もし気に入ったものがありましたらコピペでご自由に。（ただしノンサポート）

拍手[0回]

スポンサーリンク