新デザインブログへようこそ★新ブログの歩き方
本記事では当ブログをより便利にお使い頂くためのご案内をいたしております。ブログカスタマイズ中に私が参考にさせて頂いた参照先のサイト様もご紹介いたしております。是非一度お目通しいただけたらと思います(^^)
全文表示タイプから要約表示タイプへ…新ブログの便利機能
これまで雪愛のブログは一つのページに７つの記事がすべて表示されるタイプのブログでした。
記事内の絵や文をいっぺんに見渡せることがいちばんのメリットだったと思います。
しかし、一つ一つの記事が長い場合などスクロールするのが大変だったり、一度に表示する画像が多いためページ全体が
重くなってしまうデメリットもありました。
改装後のブログでは記事内に何枚かの絵があっても、看板にできるのは一枚だけになってしまったこと、
何より記事を覗いて行って頂くために１クリックの手間をおかけしなくてはならなくなったことは大変申し訳ございません。
本記事では個別記事になったからこそ活かせる新ブログならではの便利機能をご紹介いたします。
少しでもお立ち寄りくださった皆様の手助けになれますことを願っています。。。
目次（TOC）を導入しました
この記事に書かれていることは一体何についての事なのだろうか…？
私の記事はたいてい長文になりがちで、絵以外に関しては何が書いてあるのかさっぱり分かりにくいものでした（笑）。
ですがこれからは目次を見ればだいたいの内容を知って頂くことができると思います。（主要な過去記事にも導入済みです）
目次のリンクから一発で選んだ内容のところまで移動できます。どうぞ記事のスクロールの時短にお役立てください。
但し、記事が短かったり一つの話題しか扱っていない場合、ストーリー作品がメインで目次があると景観を損なう（笑）
場合などには目次を置かない記事もありますのでよろしくお願いします。。。
・TOCの導入にあたって参考及び実践させて頂いたサイト様・
※TOCとは…記事内の見出し（<h1>○○</h1>や<h2>□□</h2>）を自動的に取得し目次リンクに変換して表示できる便利ツール（？）です。
ページ内の移動がラクになりました
- ▼===PAGE END===▼（記事の先頭右端）
- スルスル～っと記事の最後まで連れて行ってくれます。お急ぎの方はぜひご活用ください★
- ▲ | ▼（各見出しの右端）
- ▲で目次に戻ります。▼では次の話題に進めます。
- ▲===PAGE TOP===▲（記事の一番下右端）
- 記事の一番上（タイトル部分）まで戻れます。
ブログ外観にもスクロールボタンがあります
雪愛のこだわり＆新しく取り入れた新要素！
HP運営の頃から引き継いでいるちょっとした工夫や今回新しく採り入れてみた小技などのご紹介です。
私にできるのはネットで調べたHTMLやCSSのコピペに若干のアレンジをする程度ですが、それだけでも十分思い通りに
カスタマイズができています♪
実例や参考にさせて頂いたサイト様もご紹介いたしております。少しでもお役に立てましたら幸いです。
リンクのアニメーションや追記の開閉・スクロールバーのデザイン
リンクボタンのアニメーション
リンクのところが動きましたね？ブログの中のリンクがある個所に可能な限り適用させています★
これは私の活動拠点が（という程のものでもありませんでしたが…）ホームページだった頃からのこだわりです。
この小さな動きがあるだけで「ここにはリンクがあって先に進めますよ」と、感覚的に示しやすいと感じたんです。
HTMLのお勉強を始めて間もない時でしたから私にもできそうな簡単なものを探して色々試していた時期でした。
スマホが普及した今ではリンクボタンは指で隠れてしまうのでほとんど意味を成しませんが（汗）私自身ブログの管理は
PCが主体ですのでこれからも使い続けるでしょう。
さすがに昔のこと過ぎてどのサイト様を参考にしたのか覚えていませんので私が使っているCSSコードをご紹介します。
a:hover {
position:relative ;top:1px ;left:1px;
color:#******;
}
イメージとしては
- a:hover :（マウスホバー時）
- position:relative ;top:1px ;left:1px: （上から１px、左から１pxずらす）
- color:#******: （お好みのカラーコード指定でホバー時に色を変えられます）
テキストリンクも画像のリンクもたったこれだけでOKです★これならできそうな気がしてきませんか？？？
お試し頂く場合はお使いのブログテンプレートのスタイルシート編集の一番下辺りにコピペしてみてください(^^)
追記（［続きを読む］）の開閉
本来、追記は個別記事の中ではオープン状態になるのがデフォルトの仕様です。
ですが当ブログでは追記は初めからは開かない仕様になっています★
私のブログでは追記は頂いた拍手コメントに返信を書かせて頂く場になっています。その内容はコメントを下さった方が
目を通して下さればいいですよね。それから元々記事の本文自体が長いことも多いので、追記がはじめから表示されると
ページがさらに長～くなってしまうのを回避したかったのです。。。
これと似た方法でサイドメニューのプラグイン「当ブログについて」の内容を開閉式にしています。
ブログ内スクロールバーデザイン
範囲の小さなサイドメニュー用と範囲の広い本文用、それぞれのバーの太さを変えています♪
ただ、大変申し訳ありませんがが全てのブラウザでの表示には対応していないようです(^^;)
私の調べた限りでGoogle Chrome、Safariなら表示されるとの事です。
（私が使っているブラウザはGoogle Chromeです）
・追記の開閉とスクロールバーデザインについて参考及び実践させて頂いたサイト様・
フォントの大きさや色、見出しやリストなどのデザイン
読みやすいブログ本文とは？？？
今回お借りしたテンプレートは背景色が暗い色なので初期値では白文字があてられていました。
…が！何度も言っていますが私の記事は長文なことが多いです（汗）ですから背景と文字にコントラスト差があると
非っ常～に目が疲れます(^^;)このことは実際に改装中、カスタマイズやら記事の直しやらで散々文字を眺めていましたので
かなり身に染みています（笑）
それと、強調して伝えたい部分をよく太字にしていましたが、改装に合わせてマーカーラインも取り入れてみました。
とりあえずマークしたところが多分最重要ポイントなんだ、と思ってもらう形でも全然アリなのでよろしくお願いします!(^^)!
キャラクターの命が顏であるならば、ブログの命は本文の文字ではないだろうか（真に受けないでください）。。。
なるべく目に優しい可読性と視認性を実現したフォントサイズや字間・行間を私なりに追及した結果が
現在お読み頂いている本文です。
本文のフォントはやや大きめ？の1.63rem
フォントカラーは"絹鼠 きぬねず#dddcd6"というやや黄味がかった灰色です。
正直これでもまだ目に刺さる気がしているので、もしかしたら今後も調整が入るかも知れません。。。
でもあんまり暗くすると文字が周りに比べて沈んでしまい、本文感がなくなってしまうのが難しいところなんです。
その他の記事本文のフォント関連設定は
line-height（行間）が1.66、
letter-spacing（字間）は0.01emを設定しています。（今後気になる部分が出てきたらその都度修正していきます。）
それと、winとmac、スマホそれぞれブラウザごとに対応できるフォントが違っていたりするので、せっかく選んだフォントがきちんと表示されずに環境によっては自分が想定するものと全く違ってるものになってた(＠▽＠;)！？
というのが怖かったりします。。。
ブログテンプレート自体のCSSの設定ではほとんどがこのことを考慮して下さっていますので考えすぎる必要はありませんが、
例えばブログのタイトル文字や見出しの文字などに好きなフォントを導入しようかな～？と思った時には注意が必要です。
しかし！世の中には素晴らしいツールを開発して下さる方がいらっしゃるものです。私の一押しはFont-familyメーカーです。
win、mac、スマホのフォントを和文・欧文ともに分かりやすく比較できるとっても便利でありがた～いツールです。
これを元にwin・mac共通で表示できるフォントやお互いに似ているフォントを選んでおけば安心です！
見出しやリストマーカーにもこだわってみる
今回の改装から”目次”が登場し、記事内に見出しをつける必要が出てきました。見出しがあることでブログの記事が何を言わんとしているか伝えやすくなります。書き手も一つ一つの話題がまとめやすくなり、次の話題の事も考えられるようになるので一つの章が冗長になるのを防げる気がしています（もう既に長文ですが(^^;)）。
ちなみに見出しとは<h1>から<h2><h3>・・・<h6>まであり、
SEO的な解釈では数字の小さいものほど事の重大性を示すものになるとのこと。
ブログのタイトルや記事のタイトルは割と重要ポイントですから多くの場合<h1>が割り当てられるようです。
当ブログの記事内の見出しも記事タイトルが<h1>大きな区切りが<h2>◆型の見出しが<h3>●は<h4>を割り当てています。
リストマーカーはなにもアレンジしなければたいてい
・こんな感じになりますが、
CSSデザイン次第で
- こうできたりするんです（←変換で出てくる矢印に色を付けたわけではないんですよ！）
・フォント関連や見出し・リストマーカーについて参考及び実践させて頂いたサイト様・
- 原色大辞典
- font-familyの書き方まとめ：CSSでフォント種類を指定しよう
- Font-familyメーカー
- 読みやすい行間と文字サイズ
- CSSでも字詰ができる！font-feature-settingsで美しい日本語フォントのカーニング
- 【HTML】見出しタグの使い方：h1〜h6はどう使い分ける？
- 【HTML・CSS】コピペで簡単！リストデザイン記事まとめ
- シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50
- CSSマーカー線（蛍光ペン風）の解説【４２色のサンプル付き】
- CSS で蛍光ペン風マーカーを指定したら iPhone 上で transparent の部分が黒くなってしまった話
改装をきっかけにして改めて気付いたこと、新しく学んだこと
記事の分類にはカテゴリーよりもユーザータグが便利
一つの記事に頂き物のイラストや自作のイラスト、お酒の話題等々雑多な話題が詰め込んである場合など、
カテゴリーだけでは記事をジャンル分けすることが難しいことがあります（ほぼ自分の事です（汗））。
そこで気付いたのがユーザータグの存在でした。（当ブログのユーザータグのリストは記事の下左側にあります）
記事内で扱っている話題や内容の方向性、
絵のジャンルやキャラクターについてなどなど好きな名称で最大10個の項目に分類することができます。
これまでかなり適当な扱いしかしていなかったんですが（汗）改装を機に一挙にタグの付け直しをしてみました。
お絵かき研究メモや漫画練習といった記事内容だけでなく坊ちゃまやもっちーなどキャラクター別にも分けることができ、
使いようによってはかなり便利なものだったんだと改めて気づくことができました。。。
（ちなみに当ブログでは専らブログ内検索用としてタグを使おうと考えているので、記事の投稿時に”タグをリンクにする”には初めからチェックが入らないようにしています。）
タグリストTOP30
上記のタグのリンクからも同じタグが付いた記事を探すことができますが、FC2の共有プラグインにタグに関連した便利なツールがありましたのでご紹介します。
私が使わせて頂いているのは、
使用頻度が高いタグ順に並べて表示できるプラグインです。
タグが付いた記事の件数も分かるようになっています★
ここではTOP30になっていますがデフォルトでは20個表示です。
タグリストTOP30は当ブログのフッター付近（下の方）にあります♪
FC2ブログの管理画面内にあるプラグインの設定で好きな表示数が
設定できます。ご興味ございましたら是非、共有プラグインの検索でタグリスト TOP20（作者maruafiさん）を探してみて下さい★
タグ関連のプラグインは他にも工夫を凝らした面白いものがありますのでお好みに合わせてぜひ活用されてみて下さい♪
当ブログはレスポンシブに対応しました★
今回使わせて頂いたテンプレートはレスポンシブデザインです。
PCでもスマホでも同デザイン・同コンセプトな形でブログをご覧頂くことができます♪
…と言われても少し以前の私にはピンとこない話だったりしたんですが(^^;)今回の改装でCSSをゴニョゴニョ弄り回させて
頂いたおかげでほんの少しだけですがレスポンシブというものについてなるほどな～と思ったことがありました。。。
↑のタグリストTOP30の本文もレスポンシブです
解像度が横幅1281以上のディスプレイでご覧の方は、画像と文章が横に並んだ状態でご覧頂いているかと思います。。。
ブラウザの幅を縮めて行って頂き1280を切ったとき、または初めからそれ以下の解像度でご覧頂く場合には画像と文章が縦並びで表示される仕様になっています。
というのがザックリとレスポンシブ、という理解でおります、今のところ。。。理解が足りておらず上手く言い表せませんが
少なくとも1281px以上のディスプレイではdisplay: flex;で横並びの状態になっている画像とテキストを@media screen and (max-width: 1280px)というブレイクポイントを設けて、最大で1280pxまでのディスプレイではちょっと手狭なのでflex-direction:column;で縦並びにして下さい、という指令をCSSの中で言うことで実現しています。
（これが思うように成功するまでトータルで10時間以上かかったのは内緒）ちなみに私のPCのディスプレイ解像度は1920×1080です。
ブログそのものは初めからレスポンシブデザインです
ブログ全体につきましてはテンプレート作者様が大変素晴らしいスキルをお持ちの方でいらして、
改装前に載せてしまっていた画像などについてもブラウザが小さくなれば画像が等倍で縮んでくれる仕様になっています。
（と言っても他所様のテンプレートの事は分からないので今はどれもそういう仕様でしたら済みません）
もしスマホなどのブラウザに横スクロールのバーが表れてしまった場合は私の記事の書き方に問題がある時です（汗）
直したい記事がまだ結構あるんですがいい加減にブログいじりはいったん置いとこうと思っています…。
ここ一ヶ月絵を描く時間もないぐらいブログカスタマイズに注力してしまったものでさすがに不安になってきました(^^;)
・レスポンシブの考え方、flexbox等について参考及び実践させて頂いたサイト様・
あとがき・テンプレート作者様に感謝
リスト間の余白、目次内の項目の詰まり具合、リストマーカーの色や文字の空き具合、その他諸々…
気になりだしたら止まらないことがわんさかとあったものですから、ほぼ一ヶ月をブログ改装につぎ込むこととなりました。
さらに過去記事のヘンな言い回しの直し(^^;)とか目次のための見出し作りなんかにも想定よりかなり時間を使ってしまい…
（SSL化もいちおーは想定してて、リンクのhttp://のhttp:を一つ一つ削ったりとかもしてたのも敗因かと思います(笑)）。
直近一年分ぐらいまでテコ入れすればいいかなぁ、と初めは考えていたんですがなんとな～くメインのお絵かき練習関連記事はやっぱり全部面倒見るか…とか思ってしまったんですよね。。。
４年分で100件ちょいぐらいの亀ペースなのがむしろ幸いしたと思っております（笑）300も500もあったらさすがに手に負えなかったと思うので…。（それ以前の記事も主要な記事よりはてけとーにですが一応は修正作業をしております）
Mochaとの出会いは私にとって衝撃的なものだった
４月の中旬から末頃…、苦手にトライしたは良かったものの完成が遅れに遅れてしまっている絵にテンパっていた時です。
たまたま何気なく最近のブログテンプレ事情はどうなっているのかな～と息抜きも兼ねて色々と見て回っていました。
テンプレート追加のページでトップページだけはプレビューで自分のブログに置き換えて見ることができますよね。
そこでこのテンプレート、Mochaに出会ってしまったんです…。。。
これまであまり自分で採り入れたことのなかったダークな色合いと画像と要約文のセットがレンガのように互い違いに並んだオシャレすぎるレイアウト…！私にとって本当に衝撃的な出会いでした。。。
元々自分で作り上げた黒とピンク、ドットとストライプのファンシー(笑)なデザインも好きでしたが、Mochaの洗練された雰囲気を知ってしまってからはもう元に戻ることができませんでした。
そこから私のブログいじりに火が付き、気が付けば６月になっておりました…。
実はカスタマイズについてテンプレート作者のAkiraさんに二度ほどご相談をいたしました。入口の大きな画像のスライダー部分の縦幅をほんの少し小さくできないか、という事と関連記事の欄のレスポンシブ化の方法、目次の導入がどうしてもうまくいかず対処法をお聞きしたんです。。。
いつもご回答くださるのがとても迅速で、私の至らない質問に懇切丁寧なご解説と具体策をご教示くださいました。
その節は本当に大変ありがたく感謝感激でした。ありがとうございました。。。
AkiraさんはMochaの他にも全文表示タイプ・要約表示タイプ共に多くの素晴らしいテンプレートをお作りになられています。
FC2の共有テンプレートの検索でもvanillaice (Akira) [vanillaice000]名義で展示されていますがAkiraさんご自身のブログでも配布されています。ブログでは各テンプレートごとのカスタマイズについてだけでなく、ブログそのものに関する考え方や新しく追加されたシステムの扱いなどにも言及されていて大変勉強になることばかりでした。
どれもがスタイリッシュで惚れ惚れするようなデザインばかりでしたので私は再三迷った中からこのMochaを選びました。
ぜひ皆様も一度ご自分のブログで美しさと機能性を兼ね備えたテンプレートをご堪能ください★
・Mochaテンプレート作者・Akiraさんのブログ・
改装後初の記事でいろいろ語りたいことがあったとはいえ詰め込み過ぎました…(^^;)
ブログに鍵が付いた状態（プライベートモード）では訪問履歴が残せない上に来て頂いたのも分からない仕様だったこと
など実際やってみるまで全然知らなかったことなどなどまだ書き足りてないこともありますが今回はもう自粛します。
後々機会があれば述べさせていただくことがあるかも知れません。。。
なるべくなら目次なんて要らないぐらいに絵も一枚か二枚程度で簡潔に書いていけるほうが良いのかな～と思ってはいるんですがなかなか思うようにはいかないのが悲しいところです。。。
これを言うのも何度目か分からないぐらいですが
次回こそはヴァンパイアもっちーに秘められたネタの絵と記事を更新します！マジで！！！
面目次第もございません。日を改めてまた遊びに参ります。今後とも当ブログをなにとぞよろしくお願いいたします。。。
いつも大変ありがたく拝読いたしております。
拍手コメントは６月17日現在、都合により非公開設定にさせて頂いているため追記内での返信はお休みしています。
状況により通常設定に戻りますのでなにとぞよろしくお願いいたします。。。（2019.06.17追記）
リンクボタンのアニメーション、読みやすいブログ本文とは？？？、本文のフォントはやや大きめ？の1.63rem、
記事の分類にはカテゴリーよりもユーザータグが便利の内容を加筆・一部修正、
その他デザイン上の細微な修正・変更をしました。（2019.06.19）
当ブログのSSL化に伴い参照先のサイト様へ移動できなくなっていた箇所を修正しました。
大変申し訳ございませんでした。（2019.09.11）
（今回は絵に関連のない記事なので総合バナーを貼っています(^^;)）
個別記事内ですが追記があっても初めは閉じています★
