PC用ページを勉強がてら改造中（メニューとページャー）

皆さま日々のお努めご苦労さまです。

私はまだ火曜日だというのに、すでにクタクタでございます（笑）

 

今月に入って独自ドメイン化を完了した弊ブログ。なんとなくこれまでとは見た目も変えようと思い立ち、色々といじくり倒しているところです。お読み下さってる方に於いては「ウザいから、ちょこまか見た目変えてんじゃねぇ！」と思われるかもしれませんが…しばらくの間ご容赦下さい。「しばらくの間」がどのくらいの期間かと申しますと、私が納得するまでとしか今は言えないのですが(；・∀・)

 

弊ブログは「はてなブログPRO」をプラットフォームにさせて頂いております。プラットフォーム自体が簡単なカスタマイズに対応しておりますので、最初にやることは「テーマ探し」でしょうか。

私も例にもれずまずは気に入ったテーマを探すことから始めました。今回は「トップページの一覧性」を上げたいという目標があったので、記事の表示数が多くなる横2列のテーマを選択。オシャレです。でもって何となくカシコそう（以前のテーマも独特の味があって好きでしたが…）

 

新しいテーマを適用してしばらく使ってみると、やっぱりトップに「メニュー」が欲しくなりました。特に弊ブログはカテゴリーが多すぎるので、メインのカテゴリー…例えば「腕時計の徒然」などの見出しは一覧できる場所に必要だなと感じていたワケです。

それに何ですか、Googleさんでもメニューは設置推奨だそうで(@_@。

 

というわけで、元のコードを作られた方のページを忘れちゃったんですが「ハンバーガー」をクリックすると横位置になるというちょっと変わったメニューを導入しました。恥ずかしながらほぼ「コピペ」です。ちょこっと数値をいじったくらい。それでもオッサンの頭では、理解するまで相当な時間がかかりました。

これはまだ完成というわけではなく、折を見て更新したいと考えています。ウインドウをあまりに小型化すると…なにやらアカン感じになってしまうので（汗）

 

というわけで小さなモニター用に可変させる「メディアクエリ」を勉強中です（汗） 

 

それから、なぜかはてなブログではトップページ、記事一覧の最下段に「次のページ」はあっても、いわゆる前のページに「戻る」がなくてすこぶる不便。というわけで、それもどこかの賢い方が書いて下さったJavaを利用させていただき解消しました。ちゃんとCSSまであるなんて…これはいい感じで使えています。

 

たったこれだけのこと…なんですが、私にはまあまあ高いハードルでした。しかしできると「楽しい！」。時計もそうですが、ブレスを外したりMODを使ったりの「カスタマイズ」を施すと愛着が増しますね(〃∇〃)　オッサンになっても何事も勉強ですよ！

 

今回、こんなド素人の私でもどうにかできた理由の一つに、私でも理解可能な専用のエディターを見つけることができたというのがあります。

若い頃にVBを使ったプログラミングの経験はありますが、そんなものなので素人に毛が一本生えた程度のスキルなのは間違いない私ですが、最近は老眼の進行で目の方も怪しくなって、HTMLですら読むのが辛く感じていました。

 

そんな私が出会った「CODEPEN」

https://codepen.io/

 

すんごい見やすい！私でも自分が今どこをいじって、何してるかが解りやすいです！こんな良いものがあったなんて(@_@。

素晴らしいのはこの便利なエディターが「Webアプリ」だという点。つまり、自宅のPCはもちろん、会社のPCでもネカフェのPCでも、IDとパスワードを覚えてさえいれば、いつでもどこでも「CODEPEN」の全てのサービスで享受に与れるのです。

さらに試してみたところAndroidでもきっちり動作しました。「あそこをこうしてみよう！」みたいなアイデアが浮かんだ瞬間にサラサラとスマホでCSSを書いたりできちゃう。まぁ私にそんなスキルはないのですが…でもすごい！

 

優れたツールとフォーマットを作って下さる方のおかげで、ジワジワとオリジナリティーがでてきたような気がする弊ブログです。

 

※2020.01.30

やっぱり縮小した時にバーガーメニューが変なところと重なっちゃうので、横一列のシンプルなメニューに差し替えました。いろいろ遊びつつ試したいと思います（汗）

 

私がお世話になっているのはこの2冊です。文字通り「いちばんやさしい」ですよ♪