NANISURU

なにする?

はてな向け:シンプルカードタイル型デザインテーマを1ヶ月の知識無知が制作して投稿してみた

f:id:taniyanno:20170906002438j:plain

なんでも挑戦してみたい人間のどうもたにやん(@taniyantoiu)です。CSS、HTMLなんてさっぱり知らない初心者がかれこれ実質1ヶ月ほど色々触って楽しんだ結果としてひとつのカスタマイズテーマを投稿してみた話。
最初に言わせていただきたいですが興味本位でやっているので辛口コメントはご遠慮ください。優しい言葉は歓迎。1ヶ月弱なんだから

なんとなくSIMPLEなテーマ投稿

はてなブログへは気分でやってきてブログを書かなくてはいけないはずが、CSSなどのカスタマイズに興味を持ってしまい、書くことはほぼ放置でカスタマイズの記事や本ばかりを読んでいる始末。

それでも楽しいから自分的には良いのだが、色々なテーマを見ていて私も投稿したいとふと思い、投稿してみたという話。

まったくの初心者でCSSなどの知識も2ヶ月もないくらい実質1ヶ月?の知識で簡単なテーマを投稿したけど、間違っている箇所や無駄な記述が多いのではないかと思うが、なんせ初心者なので間違っていても気づかない。分からない。

テーマ紹介文にもしっかり書いておきました。

※全くの初心者1ヶ月目の未経験のテーマ投稿ですので間違い点などある場合もございます。その際は優しく教えていただけると助かります。なんでも、挑戦、やりたい症候群のウズウズ感に耐えられませんでした。

わかりますか?なんでも挑戦してやってみないとウズウズする性格の人がいるって言うことを。

思ったら即行動、やってみないと始まらない。間違ってて迷惑かけたら謝るさ。ってことでもしよろしければ下記のリンクから

テーマ紹介

SIMPLE CARD YAN

こちらが投稿テーマのリンクです。と言ってもこのブログとデザイン一緒だと思いますけど。このブログから更にナビなどを外した裸みたいなものです。

SIMPLE CARD YAN - テーマ ストア

デモページはコチラから
テスト用に背景はかわいらしくしてあります。

レスポンシブ対応なのでPCから見ている時はマウスでサイズを小さくしてみて下さい。

適用しなくてもいいのであなた自身のブログをプレビューで表示を見てみて下さい。

トップページの表示形式(PC版) :一覧表示のみカード型になります。Pro推奨です。

記事にはアイキャッチ画像を設定して下さいね。

全文表示の場合はカード型にはなりませんが使用することは出来ます。

本当にSIMPLEすぎますけど。レスポンシブなのでパソコンの人も画面サイズをドラッグして小さくしてみてください。

ほとんど、はてなさんが公開しているカスタマイズ用デザインの初期状態と変わらないけど。

※合えて背景色変えてます。

ちなみに「SIMPLE CARD YAN」シンプルカードやん!という関西風で。

PC表示

スマホを横にしたくらいの大きさからパソコン表示はよくあるカード型となっています。

若干、影をつけたりとSIMPLEで終わっています。

タブレットだとサイドバーが下にいきメインがドーン。

f:id:taniyanno:20170906002611p:plain


スマホ表示

スマホサイズはカード型を小さな画面でも見やすく横並びにしてみました。

f:id:taniyanno:20170901155756p:plain


あとは、カテゴリーリンクへ飛んだ際の一覧も同じようにカード型にしたり、関連記事は2分割並びになってたり。

それ以外はほとんど触っていないのでカスタマイズもしやすいと思う、思う、思うはず。

背景カラー

背景色はカスタマイズの背景色設定から選択していただければ気軽に変更できます。あなたのお好きな色、または画像をお使い下さい。

文字フォント

ちなにみメインフォントはGoogleフォント使っていますので、設定→詳細設定→headに要素を追加に以下

を追加するとCSSに既にフォント指定してあるので文字が丸っこく可愛くなります。このブログでも使用しています。今読んでる文字がそうだと思う。

ス ポ ン サ ー リ ン ク Ads

サイズ

メインは680px

一番手頃な大きさなのかと。

サイドバーは336px

グーグルアドセンスなどレクタングルの人気のサイズは336×280なのであわせてあります。

その他

こちらでのスピードチェックも PageSpeed Insights

f:id:taniyanno:20170901163937j:plain

83/70なのでまずまずかと。けど何度かすると85になったりするよね。

またシェアボタンやグローバルナビなどの追加カスタマイズは既に優良記事がたくさんあるのでそちらを参考に追加していくといいです。

SIMPLEに抑えているので、CSSタグなど抹殺、干渉することも少ないと思います。

ただ何度も言いますが1ヶ月ほどの初心者なので変な場合は教えてください。

投稿カスタマイズテーマは削除ができないようです。非公開にはできますけど。

なにかコメント等あれば適当にお願いします。

たにやん(@taniyantoiu

初心者の私が読んだ関連本

作りながら学ぶHTML/CSS デザインの教科書

なんとこの本は、先月末の私の誕生日にAmazon欲しいものリストから送られてきたものです。本当にありがとう。送ってくれた方大好きやで。

HTML5&CSS3 デザインブック

レスポンシブに特化した本。とても読みやすく分かりやすかったです。

HTML&CSS 標準デザイン講座

これもいただきものですがちょくちょく読んでます!理解しよう!CSSとHTML。しかしまだ分からない。

はてなブログ Perfect Guide Book

はてなブログで書いているなら基本中のことはこの1冊でできるかな!

おわりに

本当に難しいからこそ楽しい。なんでもやってみたくなる症候群ですが、自分で言うのおかしいけど私仕事できる人なんだよこれでも。一応、社長してるんだから!カスタマイズも半年後にはかなり上達してるのではないかと我ながら思う。

とにかくコピペとかじゃなく自分で書けるようにのほほんと趣味のひとつとしてCSSなどやっていきます。現在、Javascriptに興味あり。

この先、生きている間には絶対なくならないものだから趣味にするのは良いことかもね。

自分の仕事の気分転換にフリーランスの特権。時間結構あるから。

このテーマを1人でも使用してくれたら感動する。0人でも文句言える立場じゃないしね。

けど投稿したことによってウズウズしてた気持ちはなくなりました。笑。もう達成感あるから。けどお試し、宣伝お願いします。

SIMPLE CARD YAN - テーマ ストア

28個!ブログ初心者に役立つ無料ツール・サービス・サイト - NANISURU

おわり。