読者です 読者をやめる 読者になる 読者になる

Milkのメモ帳

日々の思いつきを忘れないようにのメモ用です。

サイトリニューアル!!【スカルフェイスバージョン】

日記 デザイン

この度、サイトデザインや「Markdown記法」での記述に対応するために、サイト大改造を行いました。

目に見えての違いはそれほど出てないかもですけど(笑)

しかし、一日かかりましたね・・・

いやはや・・・

h2タグを有効化

まず「Markdown記法」で記述出来るようにするため、あれこれと下準備が必要でした。

なにしろ、今までがh3〜h5のタグを使っていたためです。

過去記事とこれからの記事で、タグ使用が異なってきます。

どうしよう・・・

と悩み、探しまくった結果以下の対応となりました。

www.milkmemo.com

参考にさせて頂いた記事に、感謝感激です。

デザインを変えたいな

サイトオープンから空をイメージしたデザインで来ましたが、ちょっとダークで中二病っぽいデザインにしたくなりました(笑)

気が向いたら、また変わるかも知れません。

一番に思いついたのが、「スカルフェイス」

ただし、これがまた大変で・・・

思ったようにCSSが動かない!

本当はと言うと、PCサイトの場合、画面上部全てを「チェキータのスカルフェイス」で埋め尽くしたかったんです。

CSSをいじり倒しました。

がしかし!!

思ったように動かない。

あちこちのサイトを調べまくって、それと同じことをしてみましたがお手上げ。

多分ですが、このサイトに適応しているデザインテンプレートのCSSが上に被さって来ていて、要素を上書きしてるっぽいんですよね。

なので、せっかくあれこれ書いても無効化されてしまう。

なので、ちょろちょろっといじって終わらそうと思ったのに、結局一日かかってました(;´Д`)

「Milkのメモ帳」ってタイトル文字を白くしたいだけなのに受け付けなかったり、ヘッダーの画像範囲を広げたくてPadding等の操作をしてみても受け付けられなかったり・・・

久しぶりに、ブラウザのデバッグモードを開いて、要素とにらめっこ。

f:id:maxminkun:20161106070113j:plain

たぶん・・・本気のWeb系のお仕事されてる方から見たら、「バカなんじゃない?」ってぐらいめちゃくちゃなことになってるかも(汗)

あれこれ弄くって、取り敢えずは縦幅を変えることには成功しました。

ということで、「チェキータのスカルフェイス」は入れられることになったのです。

文字入れをするよ

CSSを弄った結果、文字の色が変更できなかった!(本当はタイトル等を白にしたかった)

これもテンプレートのCSSで被せられてるんじゃないかな・・・ほんとあれこれ、強制コマンドっぽいのも試しましたが無理。

いいもん!そしたら文字入れるもん!!

という考えに至り、「スカルフェイス」に文字入れを行うことに・・・

本当は、GIMP等の本格的なPhotoShop に匹敵するほどの加工ソフトを利用すべきなんでしょうけど、私は初心者。

と言うことで、Pintaというソフトを使っています。画像加工はだいたいこれで済ませています。

f:id:maxminkun:20161106071827j:plain

クロスプラットフォームで、Windows、Mac、Linux に対応しているようです。

Pinta: Painting Made Simple! - PintaProject/Pinta

もちろん、UbuntuならUbuntuSoftware経由で入れられますよ!

さて、日本語で文字入れるのもなんか・・・ダサいし・・・ということで、なんちゃって英語で文字を入れることに。

f:id:maxminkun:20161106071457j:plain

後は、これをPCサイトのヘッダー画像として登録。

もう、タイトル及びサブタイトル表示は、非表示にして画面を押すとページトップになるように修正しました。

f:id:maxminkun:20161106071855j:plain

スマホサイトも修正するよ!

後は、スマホサイトの修正です。

これは意外とすんなり行けた。

今まで、真ん中に狐さんがいたと思うですけど、どう考えても「チェキータ」に食われてるようにしか見えないので、非表示にしました(笑)

あと、サイトタイトル、サブタイトルも非表示に変更。

スマホサイトもカテゴリー対応したよ!

後は、スマホサイトもカテゴリーで記事を絞り込むことが出来るようにしました。

参考にしたのは以下のサイトです。(ありがとうございます。)

www.ituore.com

JavaScriptを埋め込んでっと・・・

すると以下のように、スマホサイトの下にカテゴリーを選択する場所が出来ました!




押すと、一覧が表示されます。




選択すると、記事が絞り込めますよ!

ここだけの話、C#カテゴリは修正しました。どうやら半角の「#」が特殊文字で受け付けてくれないらしく、エラーとなったので、大文字の「#」に変更。記事のタグを入れ替えるはめに・・・

最後に

いやぁ・・・思ったより時間がかかった。

全ては、CSSが原因だ!!

テンプレートのCSSが修正出来ればいいんだけど・・・そしたら何してるか一発で分かるし、なんで受け付けられないかの理由も分かるんだけどなぁ・・・

ほんと手探りで弄り倒しました。

もう、しばらくCSSは見たくないなぁ(;´Д`)

因みに、ヨメレバ・カエレバのCSSもこのテンプレートはどうも相性が悪い感じが・・・妙な動きするんだよね。原因は不明。使うのやめようかな(汗)

まぁ・・・それは置いといて、ちょっと中二病っぽいサイトに生まれ変わっちゃいました。

またデザインに飽きたら、修正しようかな!

それではまた。

adios!!

スラスラわかるCSSデザインのきほん

スラスラわかるCSSデザインのきほん