【初心者用】Hugoで作成したブログに自作CSSを適応する簡単な方法【CSS】

12 15, 2018 カテゴリー開発

Hugoで作成したウェブページに自作CSSを反映させる方法についてまとめました。予想以上に簡単にできたため、CSSに詳しくない方も是非試してみてください！

南ひろあき

色々な国を巡ってノマドっぽい生活したい人。

エンジニア/ブリッジSE/中間管理職

ベトナム

【pygame】Python3を勉強する際、どのライブラリを使うべきか悩んだ話【PySDL2】

Dec 12, 2018

Pythonを勉強しよう突然ですが、実は私開発スキルの幅がかなーり少なく、まともにできるのはAndroidネイティブ開発とUnity用いたスマートフォンアプリ開発ぐらいだったりします。こりゃやべえってなったので今Web側で需要がありそうな言語調べてPythonの勉強初めてみました。なぜPython? そもそもなぜ数ある言語の中からPythonを選んだかが、ですがいくつかの理由があります。まず、自分がスマホのクライアント開発しか出来ない状態なのでWeb側で使える言語を探していました。また以前から地味に気になっていた機械学習等にPythonが非常に向いている点、かつ海外では一般的にRubyよりPythonのほうが需要があると聞き、Pythonの勉強を始めることにしました。私が選んだPythonの勉強方法とりあえず何はともあれ無料で勉強したかったので、paizaラーニングにてPython3を勉強してみることに…。 3って何？2もあるの？？というレベルの初心者ですが一応paizaのPython3コースは一通り完了。ただ最低限の文法が覚えた気がするけど、実用できる気が一切しない…。ということで、元々スマホゲームアプリは作りなれているのもあって「勉強がてらPCで動くミニゲーム作ってみよう」という結論に至りました。そしてその結果「Pythonでゲーム開発するならpygame」を使うと良いらしい、という情報をGETしました。 pygameの勉強しようとして気がついたことなにやらpygameは長年Pythonユーザーに親しまれてきたゲーム開発用のライブラリとのこと。特に疑うこともなく、「へー」と思いながらpygameを触ってみることに。で、さっそくpygameでHellowWorld作ったり、画像表示、キー入力サンプル作ってキャッキャしてた時にとあるサイトで衝撃の文章が…。 Pygameは、Pythonのゲーム制作用モジュールです。主にコンピュータグラフィクスと音声を扱うための機能が備わっています。このライブラリは複数のプラットフォームで統一的に使えるSDLというマルチメディアAPIライブラリから作られています。よって、Pygameで作られたゲームはWindows、Mac、Linux上で動かすことが出来ます。ただし、現在は開発が停止しています。(後継ライブラリはPySDL2) …あれ？ただし、現在は開発が停止しています。(後継ライブラリはPySDL2) oh… pygame、開発終了してるやん。というより後継ライブラリがいるって事はpygameもう使わない方が良いってことでは…？ pygameを使わない方が良い理由一応本当にpygame使わない方が良いの？という視点で調べて見たのですが… pygameの最新版は2009年8月にリリース。 = Python3未対応 = 64bit未対応とのこと。 pygame公式で更新が… @ 7月2018年ということでpygameの勉強は中止して、今後はPySDL2について調べてみようかな？と思ったけどpygameの公式サイトを見てみると思わぬ更新が。 pygame 1.9.4 released — 19 Jul, 2018 pygame、普通に更新来てた。しかもちゃんとPython3.7対応してるっぽいです。コレ見る限り、pygameを使うこと自体は特に問題なさそうですね。まとめ結局pygameとPySDL2どっち使おうかな？というのはまた今度調べてみます。ただそもそもPytho自体詳しくないので、最新のpygameが使いづらくなってるとかじゃなければ昔から存在する＝情報が探しやすいpygameの方を使う可能性が高めかな〜と思っています。

【初心者用】Hugoで作成したブログをGoogle検索結果に表示させる方法【Google Search Console】

Dec 12, 2018

現状の集客数が0人な件について GitHub PagesとHugoを用いてブログを作って早一週間、GoogleAnalyticsを導入して1つ気がついた事が。それはPVがあまりにも少ないということ。もちろん素人が作ったブログがPV数稼げるだなんて思ってはいませんが…、流石に自分以外0人は少なすぎるだろうと思い、理由を調べてみました。そこで可能性として上がったのが検索エンジンに登録してないということ。 Google Search Consoleで確認してみた所ーーー Google Search Console は、Google 検索結果でのサイトの掲載順位を監視、管理、改善するのに役立つ Google の無料サービスです。Search Console に登録しなくても Google 検索結果にサイトが表示されるようにすることはできますが、Search Console に登録することで、Google のサイトに対する認識を理解し、改善できるようになります。一応ここに登録しなくてもなんとかできるっぽいですが、基本的に登録しないとまともなPVは期待できなさそうな感じですね…。 Google Search Consoleに登録してみたというわけで早速登録してみました。さっき登録したばっかりなのでどれくらい検索結果に出やすくなるの？というのは未実証ですが、登録内容/手順だけでもまとめておきます。 Google Search Consoleの登録手順 : アカウント登録〜ログイン Google Search Consoleは通常のGmailアカウントがあればそれでログイン可能です。 Google Search ConsoleにアクセスしてGmailアカウントでログインしてください。 Google Search Consoleの登録手順 : サイト登録 Google Search Consoleの左上のプロパティを検索メニューからプロパティを追加します。次にサイトのTOPページのURLを記入します。（自分のサイトの場合はhttps://tc-minami.github.io/と記入します。）こんな感じで登録したURLが表示されたらサイトの登録は無事完了です。 Google Search Consoleの登録手順 : サイトマップ登録次にGoogleがあなたのサイトの更新などを把握できるように、サイトマップの登録を行います。サイトマップとは名前の通りサイトの地図ようなもので、これを登録することでGoogleはあなたのサイトがどのような構成かを把握することができます。詳しく知りたい方はSearch Consoleヘルプのサイトマップについてを確認してください。サイトマップのメニューは画面左のインデックス > サイトマップを開いてください。その後以下の画面でサイトマップが存在するURLを登録します。Hugoを使用している場合はindex.xmlというサイトマップファイルがpublicフォルダ配下に作成されていますので、index.xmlと記入してください。 Google Search Consoleの登録手順 : 検索結果を確認サイトの登録と、サイトマップの登録が完了した後、あなたのサイトのURLを直接検索しましょう。下記のようにあなたのサイトが検索結果に表示された場合、Google Search Consoleへの登録は無事完了です。

【初心者用】Hugoで作成したブログに自作CSSを適応する簡単な方法【CSS】

Dec 12, 2018

CSSの反映が簡単に出来た件以前Hugoでブログはじめました～！って時に色の付け方がわからないとか言ってましたが、思ったより簡単に出来たので方法をまとめておきます。以前の記事で触れてたフォントの変更方法もわかったけど、そもそも使いたいフォントを探していないので今回はスルーします。（）自作CSSを適用するために必要なもの自作CSS 以上。今回は以下な感じでどシンプルなCSSを書いてみました。 /* Basic CSS for Text related things. Color info https://www.wanichan.com/web/resources/color.html */ span.b { font-weight: bold; } span.red { color: orangered; } span.gray { color: darkgray; } span.large { font-size: 1.5em; } span.small { font-size: 0.75em; } span.ul { border-bottom: solid 3px;} span.ul-red { border-bottom: solid 3px orangered;} span.ul-gray { border-bottom: solid 3px darkgray;} span.dul { border-bottom: dotted 3px;} span.slash { text-decoration: line-through; } 自作CSSを適用する方法プロジェクト直下のstaticフォルダ配下にCSSファイルを配置する。画像ファイル等を置いているstaticフォルダを同じ場所です。 themes以下でCSSを取り込んでいるhtmlファイルを検索する。 <link rel="stylesheet" href="で検索し、他のCSSを取り込んでいる場所を探しました。そこに自作したCSSを取り込むコードを以下のように記述するだけで、一瞬で反映されます。 CSSを取り込むコードのサンプル

【GitHub Pages】GitHubを使った無料でできるブログの簡単画像管理方法【Hugo】

Dec 12, 2018

画像の管理について気になったこと先日Hugoを触り始めて、ようやくGitHub Pagesに反映+公開が終わったけれども…ブログの管理で1つ懸念があったため調査してみました。それはファイル容量制限とか大丈夫なん？という点です。軽く調べた所、Hugo的には↓のようにstaticフォルダ配下に画像を置いて、「ファイルパス使ってそこ参照してね♪」ってなってるっぽい。一般的にはそれで問題ないと思うけどGitHub Pages使っている以上あまり重たいファイルはリポジトリ内に置きたくなかったりするので、なんとか別の方法を考えてみることに…。 [Hugoのフォルダ構成] GitHubを使った画像管理方法 DropboxやらGoogleDriveやら、無料で使えそうなサービスはいくつかあったのですが、今回せっかく全てをGitHubに寄せているので思い切ってファイル管理もGitHubに丸投げすることにしました。実はGitHubのIssueって画像や動画をドラッグ＆ドロップするだけでGitHub側が勝手にUploadしてくれて、URLまで出力してくれます。そのため今回はリソースファイル専用のRepositoryとIssueを立てて、そこに各種ファイルをUpしてみることにしました。 [GitHubに画像をUploadする方法] 補足恐らくRepositoryを分ける必要はないと思うのですが、GitHub的に1Repositoryで1GBを超えるのは好ましくないようなので、念の為切り分けてあります。 Issueに貼り付けた画像がこの容量としてカウントされるのかは不明ですが、最悪カウントされた場合もRepositoryを複数用意すれば半永久的に画像の管理を無料で行えるのかな、と思っています。

【Hugo】無料でブログを公開する簡単な方法【GitHub Pages】

Dec 12, 2018

見切り発車満載ですが、以前まで試していた自作CSSでのブログ開発は一旦止めて、Hugoを使ってブログを進めてみようかと思います。 Hugoとは Hugoとは今流行りの静的サイトジェネレーターです。静的サイトジェネレーターって何？という方も多いと思いますがざっくり言うと簡単にHTML/CSSを用いたサイトが作れるモノという感じでイメージしています。 JavaScript等を使った挙動の調整は不向きなようですが、私は手軽にサイトを作れるというメリットに惹かれて始めてみました。なぜHugoに変更するか Hugo自体がどれだけ凄いのか、とは他の選択肢は？というのは正直よくわかっていません。とりあえずわかっているのは最近のブログの多くが静的サイトジェネレーターを使用しているということと、今のはやりっぽいということぐらいだったりします。ちなみに数ある静的サイトジェネレーターからなぜHugoを選んだの？という点に関しては単純に調べている最中にHugoという単語を多く見かけたので、はやりに乗ってみよう感を出したかっただけです。なのでとりあえずはHugoを使って色々試して、もしかしたらまた何か別の静的サイトジェネレーターに移行する可能性はあります。とりあえず直近の目標としては、手軽にブログが書けて、三日坊主にならない方法を模索したいなと考えています。（前回はHTML/CSSの勉強をして、デザインがうまくいかなかったりで意欲だだ下がりしていたので…） Hugoの凄い所今回初めてHugoを使って、今始めての記事を書いている段階で何を知ったかぶっているんだという感はありますが、現段階で言えるのはHugoなら気軽にブログ続けられそうかな…？という点です。現段階でいくつかHugoいいなー、便利だなー、って思うことは多々あるのですが、移行の一番のきっかけとなったのが以下の3点です。 1. デザインの調整が後からでも楽そう大元の設定ファイルでテーマ切り替えしたり、レイアウトも調整できるらしいのでまずは流行ってそうなテーマダウンロードしてそのまま使っています。なので大部分（名前とかリンクとか）はサンプルのままですが、そのうち調整するのでスルーしておいてください…。 2. マークダウンで記事がかける Web関係からっきしの私からして非常に助かるのがコレ。なんとHugoはHTML/CSS知識不要で簡単に記事作成出来ます。（今もマークダウンで書いてます）もちろん将来的にはCSSを調整したり、細かい演出系はHTMLで直接書いたほうが良いんでしょうけど、三日坊主防止としてはかなり協力な機能だと感じています。 3. 記事管理がローカルで簡単にできる。 Web関係からっきし(ry) コレに関しては今までの私の管理方法が悪かっただけかも知れませんが、Hugoを使う場合は各種フォルダ構成が自動で作られているため各種ファイルの管理が非常に簡単そうです。また、.mdで記事を掛けるので、振り返った時に内容が読みやすく個人的に後から記事を編集/調整する場合楽なんだろうなーと思っています。今はAtomで記事を書いているので、ソースコードを管理するみたいに簡単に各種ファイルを編集できるのは大きいですね。まとめとりあえずHugoに移行して、Github Pages使って無料でブログ運用したいなー、出来れば広告とか入れてお小遣い欲しいなーと思っていますが、まずは三日坊主にならないように頑張りたいと思います。あと簡単な太字、Codeの記述はいつもどおりできるけど、色文字やフォントの調整とか色々覚えていかないとですね。 [追記] 後日cssの反映方法についてまとめました。想像以上に簡単に反映できたのでこれから色々調整していきますね。 ↓cssの反映方法【初心者用】Hugoで作成したブログに自作CSSを適応する簡単な方法【CSS】