Welcome to my blog

Although the world is full of suffering,
it is full of the overcoming of it.
- Helen Keller

08

ブログ改変を進めています

大学生の時に何気なく初めて、このブログを運営し続けて今年(2020年)で9年になります。その前に1年ちょっとほど運営していたものも含むと、ブログ運営は10年していたことになります。

特に誰かに届けたいとかいう目的観はなく、気軽に人の目気にせずに自分の思ったことや作った作品を公開できる場として使い続けてきました。リア友やネットの知り合いとかが私のブログ見ることもあったり、創作素材が思いのほかダウンロードされていることに驚くこともあったりしています。

さて、ブログには「テンプレート」というのがあります。一から自分でHTMLやPHPを組み立てられる人ばかりではないので、あらかじめ用意されている雛形を使ってブログを作っていきます。

スマートフォンが台頭するまではブログと言えば3カラムのデザインが主流でしたが、スマホやタブレットが普及してあらゆる大きさの端末に最適なページレイアウトをするレスポンシブデザインが一般的になってきてからは、様々なデザインのテンプレートが出てきました。またHTML5とCSS3の登場で、一昔前のパソコン臭い無機質な感じから、アーティスティックでお洒落なデザインが豊富になりました。

テンプレート選びは、自分の部屋の模様替えをするみたいで楽しいです。過去9年間でこのブログのテンプレートは何回か変えてきました。

しかし、私にはテンプレートを選ぶ以上に好きなことがあります。それはテンプレートの改変です。ヘッダーを自作イラストなどの好きな画像に変えたり、文字の大きさを調整したり。まだWEB業界を志す前からやっていました。なのでいくつかのHTMLタグは、此処から覚えたものもあります。

より自分好みでスタイリッシュなブログを目指して

最近はヘッダー部分や各記事リンクのレイアウト、マウスオーバーの挙動など、より凝った部分の改変をすることも多いですが、側だけでなく記事そのもののデザインにもいろいろ手を加えています。

一般的に個人ブログは、余白は全て改行、見出しもなくただ気分で文字の大きさや色を変えてるだけってことが多いです。一方アフィリエイトやトレンドブログだったりすると、見やすさを意識して見出しの使用やマークアップへの意識があるようです。私の場合は専ら個人ブログなので別にマークアップとか気にしなくても良いのですが、自分がWEBコーダーだという自負とか、仕事で覚えたことをやってみたいとか、どうせなら一つの記事と胸を張れるぐらい立派なものにしたいという気持ちがあります。なので昨年の11月ぐらいから、HTML5のタグをただのブログ記事なのにじゃんじゃん登用して、見やすさを考えてCSSを追加したりしてきました。h2の2色の下線や、h3のグレーの縦線も、独自につけたものです。

より凝ったこともするように

自分でテンプレート(HTML/CSS)をいじって思い通りにできるとなると、もっと凝ったこともしたくなるわけです。例えば 外部リンク(または別タブで記事を開く)場合には、自動でfontawesomeの外部リンクの記号がつくようにしてみたり、細かい画像は毎回別タブで画像だけを表示させるのではなく、Fancyboxを適用し、ポップアップで画像を簡単に拡大できるようにしました。またFancyboxについては、最新版がモバイルファーストで作られているので、以前適用していたバージョンは破棄し、最新版を適用させよりスタイリッシュになるようにしました。

しかも拡大できるという表示が、PCでは画像マウスオーバー、タブレット以下では「タップで拡大できます」という文言を表示するというように切り替えています。

blog200707.jpg

そして、私がずっと気になっていたけどなかなかできなかった、ブログカードなるものも遂に適用できました。このブログテンプレの開発者さんのブログをじっくり読んで手順を踏んだら、出来るようになったんです。しかもこれについても自分で改変し、マウスオーバーしたときの挙動やPCとタブレットでの表示の変化などを独自につけました。

↓これがブログカード

ブログカードのブックマークレットを作成しました

SSL化後の悩ましい作業のひとつ ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。 * 2018年現在ではSSL対応しています。...

特記事項専用の枠

特別際立たせたい内容や、注釈の説明などのためのデザイン。概ね普通の文章レイアウトでは見逃されやすいコンテンツを目立たせたいときに使う。シンプルだがないのとあるのとでは随分違う。

大昔の記事は敢えてそのままにしておくことも

去年11月より前の記事は、マークアップガン無視で改行による余白とか多いので、気が向いたときにマークアップを直しています。しかし、海外旅行記をはじめ気に入っている記事以外のものはもうどうでもいいかなと思っています。

FC2ブログのファビコン変えられるって知ってた?

ファビコンというのは、サイトのシンボルマークです。PCではサイトタイトルの先頭に、スマホなどではサイトのアイコンとして出てきます。複数のタブを開いてWebページの閲覧しているときや、お気に入り(Google Chromeの場合はブックマーク)を表示させた際にサイトやページを判別する目印となります。

Webサイトのトレードマーク「ファビコン」の役割と事例紹介 | ビジネスとIT活用に役立つ情報

Webサイトにファビコンは設置していますか? ファビコンはWebサイトのシンボルマークとなり、ブランディングにも効果的です。 今回は、ファビコンの役割と設置方法と設置事例を紹介していきます。 ファビコンとは ファビコンと...

FC2ブログのデフォルトでは赤いユニコーンになっていますが、自分で変えられると知って、ブログのオリジナリティ出すためにも変えようと思いました。Yukiyanagiサイトに関連づけるため、同じオオカミのアイコンの色違いにしています。

apple-touch-icon-180x180.png
ブログのファビコン
apple-touch-icon.png
サイトのファビコン

0 Comments

Leave a comment