English+Music

英語ネタ、音楽ネタ、その他諸々雑記にて。

ウェブデザインをもっと知りたいけど目が死ぬ話

ブログを開設して良かったことは、自分の言いたい事を言える場所が持てた事、ブログを通して様々な人と知り合えた事、の他に「コンピューター用語に少し慣れた!」という事があります。ブログをやっていなかったら、ウェブサイトを見た時に「これどうやって表示するんだろう?」と興味を持つことも無かったし、恐ろしく長いアルファベットの羅列みたいなコードを知ろうとも思わなかったと思います。

 

何の知識もないまま、そして周りにサポートしてくれる人、コンピューターに詳しい人が居ない中ブログを開設。こんな、ただただ手順通りにピッと設定するだけの

はてなブログでさえ開設するが大変でした(笑)。

 

そしてしばらく経った頃に、「みんなのブログについてるメニューが欲しい!」って思って死ぬほど苦労したのも今では良い思い出(?)です。

www.funkeys-english-music.com

いやぁ、分からな具合が酷い。(笑)。

 

やっとこさっとこグローバルナビゲーションをPCに付けたけど、スマホの方は長い事付けられなかったなぁ。色々なサイトを読んだけど、どれも「コピペで出来る!」ってあるけど、そのコピペをどこに貼るのか?が分からなくて全然違うとこに貼ったりして無駄に時間を費やしていました。(いや、ちゃんと「ここに貼ってね」って書いてくれてるんだけど、それがどこにあるのか見つけられなかったんだよね。)

 

この頃から、どうやらブログをカスタマイズするには「HTMLというものとCSSというものがあるらしい。」と気付き始めました。「何かを作動させるためには、この二つを決まった所(それぞれ別の場所)に貼り付けないとならないらしい」という事にも気づき始めました。これって凄い進歩。だってそういう概念すらない人がどのカスタマイズ用のサイト読んだって意味不明なんだから。

 

ほうほう!と分かってきたところで、「セリフの吹き出しみたいになってるやつつけたい!」ってなってPCではつけられたんだけど、スマホではつけられない…という時期が長く続きました。(てか諦めて放置してた。)そしてスマホのCSSの所には意味不明なコピペしたコードだらけになって、もう、一体何がどこまでなんだか分からない状態。カオス。のまま放置すること2年。


そして、今、再びカスタマイズに燃え出したのです。

「字が読みやすいブログにしたい!」

がテーマです。

 

ということで、長年お世話になったテンプレートから「読みやすそうなテンプレート」に変えようと思いました。で、スマホのレスポンシブデザインのやつ何個か選んで試したんだけど、グローバルナビゲーションがどうしても良い感じで作動しない。どれもなんか変になる!でも今の私の知識ではコードのどの部分を変えれば良いのか、全く分からない…。

 

ぐぅぅぅぅ

 

結局、レスポンシブデザインを諦め、スマホは別設定にすることにしました。グローバルナビゲーションはそれで何とか良い形に収まったけど、そうすると、PCでは効いている「見出し」の装飾効果がスマホでは無くなっちゃうから、とても見にくい…。

こっちを取ればあっちがなくなる…。

状態でここ数日悶絶しておりました。

 

けれど、あーでもないこーでもないとグルグルと色々なサイトを見て回るうちに、少し私の中に知識のようなものが溜まってきたのでしょうか。「あ!こうしてみたら良いんじゃない?」と閃いたものがありました。

 

スマホに「見出し」の効果を別に設定する! です。

(大した閃きでもないとお思いでしょうが、ド素人からしたら凄い閃きなんです)

 

そして、見出しのコードをゲット!

※こんな感じのやつ

<style type="text/css">
h2 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}
</style>

そして、コード貼り付け完了!

ダッシュボード→デザイン→スマホの絵の所→記事→記事上 の所に貼る

 

無事、スマホでも見やすいブログになりました!

ここで気を良くした私は、「セリフの吹き出しも、スマホで別設定すれば良いんじゃないの?!」と思い至り、吹き出し用のHTMLをゲットし、「ダッシュボード→デザイン→スマホの絵の所→ヘッダースマートフォン用にHTMLを設定するにマークを入れて出てきた枠 の所」に貼ってみました。よし!!これでいける!と思いましたが、全然作動せず(笑)。

 

そこでもう少し検索してみたら、このHTMLを <style></style>に入れ込むと良い、という情報をゲット!

※ <style>ここにHTMLを入れる</style>

 

そして試したところ、無事スマホでもセリフの吹き出した稼働しました!

苦節2年!!(笑)

 

段々用語に慣れてきて、どうやら、こういうもので「囲む」らしい、とか「このアルファベットはこういう意味らしい」と分かってきたところで、やっともう少し自分の好きなようにカスタマイズできるかも!という所に辿り着いたというわけです。

 

で、もっとウェブデザイン(?)の事、知りたい!欲が湧いてきたのですが、

これは本当にもう目にとっては地獄でしかないんですよねぇ。

だって耳では学べないし、実際PCと睨めっこしてあれこれしないといけないし、あぁぁ、ツラ…。ってなります。しかも、思わず長い事やっちゃうってのも目には良くないよねぇ。

 

でも、せっかく湧いてきた興味だし、これからこういう事を知っている方が何かと便利そうなので、ボチボチでも良いので(というかボチボチやらないと目が死ぬ)勉強していきたいな、と思っています。

 

新たな挑戦です。

目と折り合い付けながら頑張ろう。

 

スマホでも吹き出しになっているだろぅ?フフフフフ