デザインセンスに自信がない人間のブログデザイン奮闘記:CSS編

ブログの記事が少しずつ増えてきて、内部リンクを貼ることが増えてきました。

今までリンク用のボックスはストークのショートコードにあるものを使っていたのですが、もう少し自分好みの色に変えたくなったんですよ。

そこでそろそろ「あわせて読みたい」の時に使われるようなリンク用のボックスを作ろうと思い、今まで避けていたCSSにちょこっと手を付け始めました。

作ったボックスはこんな感じ。

 
タイトル

ここにリンクを入れるよ

 

あと、ずっと憧れていた蛍光ペン風のマーカーも作りました!

 

こういうやつ。

 

きっちり反映されるまで意外と苦戦したので、備忘録として成功するまでの過程を公開していきますね~。

スポンサーリンク

参考にしたサイト

リンクボックス

リンクボックスはこちらの記事にあるテンプレを使用させていただきました!

 

check!STORKカスタマイズ!「第4弾:リンク用ボックス・マーク」

 

外側タイトルのコードをカラー以外はそのまんまで使っています。

ボックスとマークのテンプレが複数用意されていて好みのものを選べる&分かりやすいのでとってもオススメ!

 

リンクボックス番外編

今回のリンクボックスには使用しませんでしたが、こちらの記事もたくさんのボックスがあるので目を通しておくとお気に入りのデザインが見つかるかもしれません。

 

check!【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

 

新しくボックスを作りたくなった時にお世話になりそうな予感。

たくさんのテンプレ公開に感謝、感謝でございます。

 

蛍光ペン風マーカー

蛍光ペン風マーカーはこちらの記事にあるテンプレを使用させていただきました!

 

check!蛍光マーカー風の下線をCSSの文字装飾で作る方法

 

いくつかの記事を見たところ「background」「repeat scroll」の部分はある場合とない場合があったので、コードをシンプルにするために削っちゃいました。

あとは太さとカラーを変えて使っています。

CSS初心者でも分かりやすい記事なのでオススメですよ~。

 

びすけ
分かりやすいテンプレをありがとうございました~!

 

数々の失敗例を紹介

上記のサイトを参考にしてなんとかブログに反映させることができましたが、無事に反映させるまでになんと2日もかかりました。

普通にやってれば1時間もあれば終わる作業なはずなんですけどね…。

「こんなことしてると余計な時間かかるぞ」という反省&備忘録として、失敗したときの行動を片っ端から振り返ってみます。

 

コードの意味を知らないまま検証を見てコード再現をしようとする

CSSの知識がからっきしで作りたいものに使用されているコードだとかが全っ然分からないので、そもそもどうやって検索すればいいのかさえ見当がつかなかったんですよ。

だからまずは「このデザインがやりたい!」って思うところがあったら、「検証からコードを確認してから真似てみる」という作業をやってました。

ただCSS知識のなさ故にどこがどう対応しているのかサッパリだったんで、一度も成功したことがありませんでした。

多分コードの一部だけしか入力できていないのに、全部書き写した気分になってたんだと思います。

この方法は初心者にはおすすめしません。

 

ブラウザのキャッシュを気に留めないままコピペOKのサイトからテンプレを拝借する

検証のコードをいくつか見ていく内に何を検索すればいいのかうっすらと分かってきまして、ここでやっと説明ページにたどり着けるようになります。

そんでコピペOKのテンプレをそのまんま使ったんですけど、何故か失敗。

この時は自分が何かミスしたんだろうとしか感じませんでしたが、あまりに失敗しまくるので原因の候補を調べることにしました。

そこでブラウザのキャッシュが原因でCSSの反映が大きく遅れることがあると知りました。

コピペしたのになんでか失敗してしまった時はキャッシュを削除するか、別ブラウザで確認してみましょう。

 

ダブルコーテーションが全角になっていた

コピペ+別ブラウザでの確認でリンクボックスは無事に反映されたのですが、蛍光ペン風マーカーが一向に反映されなかったんですよ。

「どこか記述ミスでもしたかぁ?」と一字ずつコードを見比べてもどこも間違えている様子がない…。

もはや蛍光ペン風マーカーが使えない呪いにでもかかっているのかと思っていたら、見かねた姉がコードを確認してくれました。

CSS部分には問題がなさそうだったのですが、HTML部分を見ている時に「なんかダブルコーテーションが変。全角になってない?」と言われ、ちゃんと半角になっているだろうと思いつつ打ち直してみたところ、なんと本当に全角になっていたようです。

これ、コードに馴染みのない人間だとなかなか気付けないので注意した方がいいですよ!

 

比較画像がこちら(ストークのHTMLでの表記)。

 
ダブルコーテーション比較
 

こんなん事前に知らなきゃ到底分からないよ!!!!(涙)

 

「半角=痩せてる、全角=おデブちゃん」と認識していた人間だったので、全く気付けずにいました…。

コピペしたのに何故ダブルコーテーションだけ全角になっていたかは不明ですが、これに気付けなかったが故に丸一日も戦い続けるはめになったので、くれぐれもお気をつけ下さい。

 

記号があったら問答無用で半角修正!!!これ必須!!!

 

もともと半角だろうがやっといた方が安心だよ!!!

 

初心者でも案外できるぞ!

リンクボックス+蛍光ペン風マーカーを反映させるのだけに2日もかかった人間が言うのも説得力がないかもしれませんが、作業自体は複雑なものではなく、やってみると案外あっさり導入できるものです。

ちょっといじるだけでもブログの読みやすさが変わってきますので、「CSSってよく分かんない!」という方もコピペOKのサイトを探して、一度トライしてみてはいかがでしょうか。

 

今回の苦戦した甲斐あって(?)CSSに若干慣れてきたことだし、他のボックスも作ってみようかなぁ。

 

 

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA