そういえばhandmadeサイトのメニュー上部をプルダウンにしたのでメモ。

こんな感じです。
参考はこちら。
というか丸々引っ張って来ました。

サイトを参考に「共通部分」のCSSを/使用してるテーマ/layouts/css/使用しているスタイルシートファイルにコピペ。
わたしの場合１.普通のドロップダウンメニューを使用させていただいたので それを/使用しているテーマ/layouts/partials/headwe.htmlの＜nav＞内にhtml部分をコピペ

実行してからだいぶ時間が経ったので忘れてしまいましたが、
確かこれだけでは動かなくて何か苦戦したようなしてないような…？
このブログもプルダウンにしたいと思っているのでまた失敗したら書けばいいか…？

lightboxの適用についても表記に間違いがあってそこで何度もハマってしまったので
できればもう一度書き直したいですね。ちゃんと。

大体の目立った不具合も直せてきたので新しいテーマ適用させてみます。

工具チャーム出来ました。

すごい細かい自己満なんですけど使い所の分からなかったネジパーツに歯車や時計の針載せてます

完成品で見るとこんな感じ。
大したことは書いてないけど一応制作過程はこちらになります。

さあ、プルダウンと戦いますか。
CSSでスライドショーというのも今気になってるんですよねえ…

hugoのテーマを作ろうとデフォルトから色々いじってました。
多少いじるぐらいの予定だったんですけど、やりたいことが多すぎて
でもうまくいかなくて、の繰り返し。

ヘッダー用に画像も用意したんですけど

結局ヘッダーにうまく貼り付ける方法がわからなくて

取り敢えずフォント変えるかーと思ってやってみたんですけど

あ、これあかん画像できたとこでみーとんと丸かぶりするやつや

てことで今までの作ってきた素材を再利用しつつ出来上がったのがこれ

とてもIT系には見えない…
そしてよくわからないエラーが出てるので取り敢えず保留。

アイキャッチ画像も表示されなくて試行錯誤したけど
そもそもこのテーマでアイキャッチ画像いらなくね？？？ってなってやめました。

そしてlightboxがまた個別記事でのみ反応しない。
最終的に/の入れ忘れだったんですけどこの失敗二度目っていう

すらっしゅ大事
それだけ書きにきた…
昨日の朝から寝てないからいい加減寝ます…

Read moreの文字を書き換えました。
今まで探せなかった原因はおそらく閲覧環境によって表示される文字が変わるタグになっていたらしく
そんなもの初めて聞いたので探し出せずにいました…。
因みにわたしの場合summary.htmlに。
aタグで囲まれたものをそのまま日本語で書き換えちゃいました。 後続きを分けてない記事の場合に続きを読むを表示させないようにもしました。

参考はhugo公式のこちら
続きを読む をリンクしているaタグがあるのでそれを探して
{{ if .Trancend }} を前につけ {{ end }}で囲む

後は記事作成時に自動で挿入される冒頭の＋＋＋で囲まれた部分ですが
/テーマディレクトリ/archetypes/post.mdにありました。
しかし作成する度並び順が変わるのは変えられない…。

フォントも変えました。
こちらを参考に初めてのフォントを使用してみました。
使用しているテーマから変更するのは探すのが大変だったので上書き状態です…

ついでに記事一覧の表示方法も変更しました。
index.htmlにありました。

昨日更新したやりたいことリストの半分は消化したので
後は今日から始まったデレステのイベントにエネルギー消費…！
タップ無反応と戦いつつやっとmastarフルコンしました。

2000位以内記念にスクショ…
維持とかは無理です。
週末が忙しくなりそうなので始めに走っておきたい。
というか早く10000ptで輝子欲しいんや…

と言いつつ今日赤のクリスタルの日なのでユフィメインのわたしはDFFOOも頑張らなければ…？
どうでもいいけどラグナのHP攻撃が「志村ぁ！」にしか聞こえなくて後ろ後ろー

アクセサリーの作成の方も材料が揃っているので今日あたりさっさと作ってしまいたいです。
やること多いな。

何も写真がないのもアレなので
ギャラリーサイトも地道に更新してます。

次はこいつらをどうにかするつもり。

何から書こうか…
しばらく行事続きで疲労で寝込んでました。
あとものづくりなどをしていました。

超大作が！やっと出来たんですよ！！！！

まだメインブログにまとめてないんでまとめたら制作過程貼りますね。
追記：制作過程です。

ついでにかわいいしたがる（わたしとむすめの影響）むすこにも初めて作ってあげました。

車のヘアピン。
なぜかヘアピンめっちゃ好きなんですよむすこ…

まあかわ…はしゃぎすぎて撮られへんわ

そんなこっちゃでやっとこちらでみーとんに出されたお題？もクリアしました。
結局わかんなくてほとんど聞いたんですけど。
意味は全くわかってないけどコマンドでアップロード出来るようになってやっとhugoの便利さが！

と思ったらみーとんにのブログ侵食した。失敗した。
みーとんのいう通りにしただけだもん！わたしわるくないもん！！！！！（号泣

とりあえず忘れないようにアップロードのコマンドだけメモします

hugoのディレクトリに移動
yarn run deploy
これだけ！！！！！！！

ついでなのでみーとんに教えてもらって実行出来てないこともメモしておきます

自分のサイト内のリンクを貼るときは
(/mdファイルのあるディレクトリ/ファイル名)

拡張子とかいらないんですね…。
アドレスバーに表示されてる部分を見たらわかりやすいです。

[Read More]

hugoにlightboxを導入するのに成功したのでメモがわりに。
参考にしたサイトはこちら

ほとんどは参考にしたサイトの記述通りだったのですが色々と違った点があったので。

参考サイトのURLからLightboxとjQueryをDLして解凍。
解凍後サイトの説明を読むと必要なファイルが書いてあるので確認。

こうなると思います。

で、実際に必要なファイルなのですが

/dist/js/lightbox-plus-jquery.min.js
/dist/js/lightbox.min.js
/dist/css/lightbox.min.css
/dist/images/close.png
/dist/images/next.png
/dist/images/prev.png /dist/images/lording.gif

これが必要なファイル一覧になります。

.js、.cssファイルは/テーマ/static/ js or css （それぞれに合ったディレクトリ）にコピペなどで保存
4つの画像ファイルはテーマディレクトリより上の/static/imgに保存。
サイトを参考/テーマ/layouts/partials/header.htmlの＜/head＞タグの直前にコピペ。

このブログで使用しているテーマの場合＜head＞タグが入ってるのがheader.htmlではなく
head.htmlというものだったのでそちらに追加しました。

関係ないけどdead.htmlって打ち間違えてものすごく恐ろしいファイル作り出してしまった

次はCSSを適用させる為にショートコードを作成します。

imgタグの部分にクラス指定でcssを振っています。（”postimg”にしました。） cssは画像の大きさや飾り枠なのでお好みでどうぞ。

これで使用する準備完了です。
最後に記事にlightboxを適用させる画像を貼りたい場合

{{＜ lightbox src=“” group=“” ＞}}
srcの後に画像パス、group指定したものがスライドショー形式で表示出来るみたいです。
＜＞を全角にしているので半角にしてあげてください。

以上です。
自分でも理解が追いついてないのもあり全くわかりやすくはないですね…。
因みに復習がてらもうひとつのサイトに自分で導入してみたのですがどうしても出来ませんでした。
ショートコードディレクトリの綴りが間違っていた…。
「音楽してる人はみんなそう書くよね！」とか言われたけどコードという単語なんて書いたことないよ？？？

というわけでアイキャッチ画像がこれでした。
ショートコードはスニペット？登録？しとくと楽ですね。
Dashというアプリを使ってます。

今回はアイキャッチ画像の設定について書いてみようと思います。
アイキャッチ画像の追加についてはこちらのサイトを参考にしました。

テーマ/layouts/index.htmlへの追記についてはそのまま、の直前に挿入する。
テーマ/layouts.li.htmlは記事一覧になっているファイルを指しているので
自分のテーマに合ったファイルを探す（わたしの使用しているテーマの場合summary.htmlでした）
{{ if and 〜〜から始まるタグがアイキャッチ画像を表示させるタグなので{{ end }}までをコピペ。
アイキャッチ画像を好みの大きさに指定する為CSSに.eyeccatchで指定
記事一覧ファイル（わたしの場合summary.html）の{{}}タグを＜div＞で囲みeyecatchをクラス指定。
準備はこれで完了です。
各記事にアイキャッチ画像を設定する場合は
+++で囲まれた部分に image = “” を追加して”“内に画像ファイルを指定する。

以上です。

書くとものすごく簡素になってしまいましたがかなり苦戦しました。

大きさ指定がうまくいかず円谷さんにめっちゃ見られたり…

せっかくなので説明してもらっても理解出来ず苦戦したSSもう一度貼っておきますね。

というかみーとんにやってもらったが為に自分で理解することが出来ずどこに何をコピペしたのかも理解出来ず…。
説明は省かないでほしいの…

そしてアイキャッチ画像の設定が出来たので
平行してはんどめいど作品のギャラリーデモサイトを作りました。

handmadeサイト

見た目はこんな感じ。
みーとんから出された第一課題はやっとクリアしたよ…。

余談ですがコマンドを叩くのにiTermを使用しているのですが背景指定出来るのがとてもいいですね。

時子様に罵られたり
幸子ちゃんを愛で続けたり出来ます。
捗　　　　らない。

どうでもいいけど今回のアイキャッチ画像、愛用しているティッシュケースなのですが

多分細かすぎて誰にも伝わらない。

似合いすぎて違和感が全くない…
つーけまつーけま・・・

サブカテゴリに毎回悩む調味料です。
ちょっと寝てないので（ちょっとどころではない）外の空気でも吸いながらと思ったら速攻でトイレ行きたくなったのでもう行ってきますさよならお外。

春の陽気が気持ちいいですね〜〜〜〜気温めっちゃ低いけど個人的に。

ということで未だにコマンドというものに慣れないので
まず記事を更新する手順を自分なりにまとめておきます。

iTermを開く
コマンド cd でhugoのディレクトリに移動←忘れやすい コマンド hugo new post/ファイル名.md
ファイルが新規作成される！こんぐらっちゅれーしょん！
新規作成されたファイルを更新する
title変更、tag、カテゴリ記入
slug = “” 記事のURLを決める（？）
image= “” アイキャッチ画像の挿入
画像は全て/static/imgにコピー。（そろそろ月ごとに分けるなど考えないと既にぐちゃぐちゃ）
本文を記入する
hugo server -t テーマディレクトリ名でローカルで確認
一旦停止して hugo -t テーマディレクトリ名で生成
アップロード

今はこんな感じでやってます。
打ちながら都度ローカルで確認。。。
特に忘れやすいのが改行…

[Read More]