ブログデザインの更新と、他人のソース引用に関すること
ブログ更新の合間時間を縫ってブログデザイン(特にスマホサイト)の調整などを行っていました。ブログデザインについて更新をしている時に色々なブログサイトを参考にしていたのですが、いい意味でも悪い意味でも参考になるサイトが多々ありました。
さらにデザインのメンテナンスをしているときに「ソース引用」について気になったことがありましたので、少し言及しておこうかなと。
スポンサーリンク
メンテナンスをしたところ
まずは私のブログサイトのメンテナンスをした部分についてです。参考にしたサイトの方をあわせて紹介したいなと思います。
シェアボタンの見た目変更(PC、スマートフォン)
まずは記事終了後のシェアボタンの見た目を変更しました。こちらはPC、スマホサイトともに更新をしました。今のところ私のサイトでは記事の一番上にシェアボタンをつけるメリットはないなと思っていますので、あくまで記事の下部のみにつけています。あくまで記事を見て頂いて、シェアしたいなと思った方にシェアして頂きたいと思ったからです。
見た目としては以下画像の通りです。
■ PC版デザイン
■ スマホ版デザイン
参考にしたのはゆきひーさんとこの以下の記事です。ここから自分のブログに合わせたデザインに変更しています。アイコンのデザインは、別にいいものがあれば変更の予定です。
ソース？公開しませんよ。
読者になるボタンの見た目変更(スマートフォン)
先ほどのシェアボタンのデザインにあわせ、読者になるボタンの見た目を変更しました。今までははてなブログ公式の「読者になる」ボタンに似せたレイアウトにしていたのですが、シェアボタン変更に伴い、「塗りつぶし + 白文字」というものにしました。見た目としては以下の通りです。こちらは特に他のサイトを参考にしたわけではありません。CSSでボタンのデザインを作成し、htmlでリンク付ボタンを作成しただけです。
ちなみに記事を書いていて気づいたのですが、Feedly用のボタンを作成し忘れていましたので、作成したら記事更新します。
ソース？公開しませんよ。
シェアボタン(固定)の作成(スマートフォン)
記事の下とは別に、どこでもシェアができるようシェアボタンを別途作成しました。先ほど「記事を見て頂いてシェアして欲しい」って言いましたが、何か気になる言葉などがあった際に、その場でシェアできるようにという意図で画面下部の固定シェアボタンを作成しました。
このシェアボタンですが、以下のような動きをしています。仕様としては以下のような感じですが、実際の挙動はスマートフォンでサイトを見てみてください。
- 画面下部に固定のシェアボタン(はてブ、Twitter、Facebook)を作成
- 画面移動時にはシェアボタンを隠す
- 画面が固定されてから1秒後に、再度固定のシェアボタンがゆっくり表示される
これを導入するために、ゆきひーさんの以下の記事を参考にしました。ここにはjQueryのソースコードは記載されていないので、上記仕様を満たすためすようなプログラムを作成しました。
ソース？公開しませんよ。
【今後更新したい】ブログの視線誘導とフォント(PC、スマートフォン)
ブログデザインの変更にあたり、CSS周りはゆきひーさんのものを参考にしました。それとは別に、ブログの視認性については以下記事を参考にしました。ブログの視認性はこのうちF型と呼ばれるものが一番多いです。
Webサイトの場合はF型の視線誘導が一番多いだろうと思ったのですが、どうやらスマートフォンサイトでも同様の視線誘導だというのを、以下サイトがアイトラッキングデータから検証しています。
上記を踏まえ、今後は文章間の改行幅やフォントサイズの調整(特に見出し部分)を行っていこうかなと考えています。こういう地味な作業が意外とブログの視認性に影響が出ると思っています。ちなみにフォント面に関する点についてはshunさんのこの記事を参考にしながら視認性向上に努めようかなと。
各サイトはここを見直して欲しい
スマートフォンサイトにおいて色々なブログを見ていて「ここを直して欲しいな、確認して欲しいな」と思っている点があります。それはフリック時の挙動です。私のスマートフォンだけなのかはわからないのですが、レイアウトによってスライドバーが複数出ており、スマートフォンでブログを見ている際にスライドが引っ掛かることがあります。これは某人気サイトでも見かけることです。
記事の内容の精査をするのにブログデザインの挙動の確認をしないの？と言ってしまうとトゲがありますが、少なくとも自分のスマートフォンでだけでもサイトの挙動の確認をしておいたほうがいいと私は思います。
欲を言えば更新用のダミーサイトを作っておいて、ダミーサイトでの動作検証を行ってから本番のブログサイトにリリースすることをオススメします。
他人のソース引用と著作権
今回の記事ではソースコードの引用や自分で作成したもののソースの開示は行いませんでした。理由は「他人のソースにも著作権がある」ため。ネットに転がっているものを使うことについては私は悪いことではないと思っていますが、開示されたソースをさも自分が作成したもののように公開するということについてはどうかなと思いますし、自分の作ったものが変な形で拡散されるのも怖いなぁと。
他人のイラスト、作曲物、プログラムのソースなど、形のないものに対する著作権の侵害はTwitterなどでも散見します。わかっていても引用をする人が多いこのご時世、自分のソースを公開することに対し私は恐怖感を頂いています。イラストを描く方は自分の著作物だということを示すためのサインを入れてたりしますが、プログラムのソースはコードだけ抜き取れば簡単にコピーされてしまうので困りものです。
もちろん公開側もクリエイティブコモンズ・ライセンスなどを使って自分の著作権を主張するのもアリかと思いますが、ソースコードは著作権を主張するには難しいですし、こういう縛りを設けていても『パクる人は無断でパクる』ので、ある程度はあきらめないといけないのかもしれませんね。頭の痛い話です。
ブログデザインは他人に自分のブログを見てもらう上で重要な点だと思います。カスタマイズを行って見栄えをよくするのは大切ですが、本当に見やすいのかどうかを自分で検証すること、他の方の情報を引用した場合はその方への敬意を払い、無断なソース転載を行わないようにすることが大切じゃないかな。
