この度、サイトデザインや「Markdown記法」での記述に対応するために、サイト大改造を行いました。
目に見えての違いはそれほど出てないかもですけど(笑)
しかし、一日かかりましたね・・・
いやはや・・・
h2タグを有効化
まず「Markdown記法」で記述出来るようにするため、あれこれと下準備が必要でした。
なにしろ、今までがh3〜h5のタグを使っていたためです。
過去記事とこれからの記事で、タグ使用が異なってきます。
どうしよう・・・
と悩み、探しまくった結果以下の対応となりました。
参考にさせて頂いた記事に、感謝感激です。
デザインを変えたいな
サイトオープンから空をイメージしたデザインで来ましたが、ちょっとダークで中二病っぽいデザインにしたくなりました(笑)
気が向いたら、また変わるかも知れません。
一番に思いついたのが、「スカルフェイス」
ただし、これがまた大変で・・・
思ったようにCSSが動かない!
本当はと言うと、PCサイトの場合、画面上部全てを「チェキータのスカルフェイス」で埋め尽くしたかったんです。
CSSをいじり倒しました。
がしかし!!
思ったように動かない。
あちこちのサイトを調べまくって、それと同じことをしてみましたがお手上げ。
多分ですが、このサイトに適応しているデザインテンプレートのCSSが上に被さって来ていて、要素を上書きしてるっぽいんですよね。
なので、せっかくあれこれ書いても無効化されてしまう。
なので、ちょろちょろっといじって終わらそうと思ったのに、結局一日かかってました(;´Д`)
「Milkのメモ帳」ってタイトル文字を白くしたいだけなのに受け付けなかったり、ヘッダーの画像範囲を広げたくてPadding等の操作をしてみても受け付けられなかったり・・・
久しぶりに、ブラウザのデバッグモードを開いて、要素とにらめっこ。
たぶん・・・本気のWeb系のお仕事されてる方から見たら、「バカなんじゃない?」ってぐらいめちゃくちゃなことになってるかも(汗)
あれこれ弄くって、取り敢えずは縦幅を変えることには成功しました。
ということで、「チェキータのスカルフェイス」は入れられることになったのです。
文字入れをするよ
CSSを弄った結果、文字の色が変更できなかった!(本当はタイトル等を白にしたかった)
これもテンプレートのCSSで被せられてるんじゃないかな・・・ほんとあれこれ、強制コマンドっぽいのも試しましたが無理。
いいもん!そしたら文字入れるもん!!
という考えに至り、「スカルフェイス」に文字入れを行うことに・・・
本当は、GIMP等の本格的なPhotoShop に匹敵するほどの加工ソフトを利用すべきなんでしょうけど、私は初心者。
と言うことで、Pintaというソフトを使っています。画像加工はだいたいこれで済ませています。
クロスプラットフォームで、Windows、Mac、Linux に対応しているようです。
Pinta: Painting Made Simple! - PintaProject/Pinta
もちろん、UbuntuならUbuntuSoftware経由で入れられますよ!
さて、日本語で文字入れるのもなんか・・・ダサいし・・・ということで、なんちゃって英語で文字を入れることに。
後は、これをPCサイトのヘッダー画像として登録。
もう、タイトル及びサブタイトル表示は、非表示にして画面を押すとページトップになるように修正しました。
スマホサイトも修正するよ!
後は、スマホサイトの修正です。
これは意外とすんなり行けた。
今まで、真ん中に狐さんがいたと思うですけど、どう考えても「チェキータ」に食われてるようにしか見えないので、非表示にしました(笑)
あと、サイトタイトル、サブタイトルも非表示に変更。
スマホサイトもカテゴリー対応したよ!
後は、スマホサイトもカテゴリーで記事を絞り込むことが出来るようにしました。
参考にしたのは以下のサイトです。(ありがとうございます。)
JavaScriptを埋め込んでっと・・・
すると以下のように、スマホサイトの下にカテゴリーを選択する場所が出来ました!
押すと、一覧が表示されます。
選択すると、記事が絞り込めますよ!
ここだけの話、C#カテゴリは修正しました。どうやら半角の「#」が特殊文字で受け付けてくれないらしく、エラーとなったので、大文字の「#」に変更。記事のタグを入れ替えるはめに・・・
最後に
いやぁ・・・思ったより時間がかかった。
全ては、CSSが原因だ!!
テンプレートのCSSが修正出来ればいいんだけど・・・そしたら何してるか一発で分かるし、なんで受け付けられないかの理由も分かるんだけどなぁ・・・
ほんと手探りで弄り倒しました。
もう、しばらくCSSは見たくないなぁ(;´Д`)
因みに、ヨメレバ・カエレバのCSSもこのテンプレートはどうも相性が悪い感じが・・・妙な動きするんだよね。原因は不明。使うのやめようかな(汗)
まぁ・・・それは置いといて、ちょっと中二病っぽいサイトに生まれ変わっちゃいました。
またデザインに飽きたら、修正しようかな!
それではまた。
adios!!
- 作者: 狩野祐東
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2014/09/26
- メディア: 単行本
- この商品を含むブログを見る