【最強タスク管理ツール Notion】Notionのデザインをアレンジして、お洒落に使いこなそう！
こんばんは、ひでまるです。
今回の記事では、前回の導入編に引き続き『Notion』について書いていきます。
何事も継続するにあたって必要だと思うのがわくわく感。
味気ないツールより、自分なりにカスタマイズして、自分の気に入っているツールに変えていくことで、愛着がわき、継続していくのではないでしょうか？
今回は、そんなデザインを変更するための方法について書いていこうと思います。
アイテムアイコンの設定
Notionを立ち上げると、左のほうに自分で作成したり取り込んだりしたアイテムが並んでいると思います。
私では現状こんな感じになっています。
画像を見てわかる通り、アイテム毎にアイコンを設定することができます。
アイコンの設定は、
・そのままクリックし（カーソルを合わせると、『Change icon』という文字が出てきます）画像選択する画面から選ぶ
・アイテムを開いた状態で、『Add icon』ボタンを押し、自動で出てきたアイコンを更にクリックしてiconを選ぶ
という方法があります。
Filterと書いてある窓にキーワードを入れることで、アイコンを絞ることができますが、このキーワードは英語限定となっております。
デフォルトで入っているアイコンを使うか、Upload an imageタブを開き、自分で画像をアップロードしてアイコンとして使う方法があります。
とことんこだわりたいという方は、オリジナルアイコンを使っていくのもいいのではないでしょうか？
私のToDo&日報のアイテムでは、こんな感じの設定になっています。
子アイテムにもアイコンを設定することが可能となっております。
背景画像の変更
こちらはアイテムを開いたときのページ上部に表示される背景画像の設定です。
タイトル上あたりにカーソルを持っていくと『Add Cover』というボタンが表示されますので、そこをクリックします。
ボタンを押すと、ランダム？に背景が設定されます。
画像の下のほうにカーソルを持っていくと、『Change cover』というボタンが出てきますので、このボタンを押すことで、画像の変更が可能となります。
デフォルトで入っている背景画像は、数が少ないので、『Unsplash』ボタンを押すと、他のNotionユーザが作った画像を使えるようになりますので、こちらを使うのがお勧めです。
まとめ
今回の記事はNotionのデザインについてでした。
継続して使っていくためには、デザインも自分なりにアレンジしていくのもいいのかなと思い、今回の記事を作成いたしました。
次回以降の記事では、使い方について本格的に記事を書いていこうと思いますので、引き続きよろしくお願いいたします。
それではまた次の記事でお会いしましょう！アディオス！
【最強タスク管理ツール Notion】Notionの導入方法について
こんにちは、ひでまるです。
今回は、Notionについての記事を書いていこうと思います。
Notionとは、
Notionは、タスク、Wiki、およびデータベースを統合するマークダウンサポートを備えたメモアプリケーション及びサービス。 同社はこのアプリを、メモ作成、プロジェクト管理、タスク管理のためのオールインワンワークスペースと説明している
Wikipadiaより引用
ということで、タスク管理や記録を付けることにおいて優れたツールとなっております。
タスク管理したいけど、何だか続かないなぁという人や、読書が趣味でその記録に使っていきたいなどの人にお勧めです。
今回の記事では、Notionはどうやったら使えるようになるのか、見ていこうと思います。
Notion導入 アカウント作成
NotionのHPは以下です。
HPにアクセスするとこのようなページが表示されます。
ここで、『Notionを無料で使ってみる』という赤色のボタンを押すと、アカウント作成の画面に進みます。
アカウント作成の画面です。
GoogleアカウントやアップルID、メールアドレスがあれば登録できます。
必要な項目を入力すると、デフォルトの画面が開かれます。
デフォルトで入っているものは、英語でちょっと使いにくいかなと思います。
そういったときに、テンプレートを公開している方々がいますので、テンプレートを適用することで、他人が工夫して作ったテンプレを使うことが可能になります。
テンプレのコピー
というわけで、私が使っているお勧めのテンプレを一つ紹介いたします。
こちらの動画内でテンプレが紹介されています。
これが、テンプレを開いた画面です。
画面の右上に『Duplicate』というボタンがあります。
このボタンを押すと、テンプレがコピーされ自分のページに反映されます。
あとは、自分の使いたいように項目を足したり、削除したりしていけばOKです。
そんなに私も使いこなせてはいませんが、現在はこんな感じになっています。
毎日継続して行いたいことは左側の各日の＋ボタンをおして新たなページを追加し、記録していきます。
右側はタスク関係です。今は、ブログの目標設定に使っています。
まとめ
今回はNotionの導入についての記事を書きました。
Notionは自分の使いたいようにカスタマイズしていくことが可能ですので、自由度がとても高いツールとなっております。
次回の記事では、もう少し細かい設定についてみていこうと思います。
それではまた次の記事でお会いしましょう！アディオス！
【30代エンジニアの日記】今週の目標の達成状況と来週の目標
こんばんは、ひでまるです。
本日は、前回の目標設定から一週間が経過したので、目標の達成状況の確認と来週の目標設定を行おうと思います。
それでは早速見に行きましょう
今週の目標の達成状況
今週の目標：ブログデザインを美しくし、10PV/日を達成する
という目標でした。結果は、
12、12、1、15、18、17、5PVということで、計80PV、11PV/日という結果になりました。ギリギリ達成することができました。
PV数は目標を達成したものの、ネット検索からの流入はゼロとなりました。
表示回数すらゼロという状況で、記事を全削除した影響がもろに出ています。
何とか検索流入でブログに入ってくるようにしないと、今後の伸びが心配になりますね。
とりあえずは記事の数を増やすこと、キーワードをしっかり選定して記事を書いていくことが重要になってきそうです。地道に頑張っていきます。
来週の目標
来週の目標は、先日の記事でも宣言した通り、
毎日『Notion』についての記事を書く
にしました。
hidemaru-1988-sub.hatenablog.com
『Notion』は資格勉強やタスク管理にもってこいのツールとなっており、このブログのコンセプトである『週に一つの目標に挑戦する』に対しては非常に有用であると思っております。
記事を書きながら、自分に合ったツールを作りこんでいこうと思います。
『Notion』を知っている人、知らない人ともに為になる記事を書けるよう今週末はがっつり調査に取り組んでいこうと思います。
まとめ
今週の目標は達成できたものの、まだまだ課題の残る結果となってしまいました。
次週は、投稿し続ければ達成となる目標なので、質にもしっかりこだわって記事を書いていこうと思います。
あと、今週末はエンジニアっぽくAI関係のプログラムもいじっていこうと思っています。これもいずれ機会があれば記事にしていくかもしれません。
それではまた次の記事でお会いしましょう！アディオス！
【ブログデザイン】CSSを張り付けるだけ！このブログのデザイン設定を公開！！
こんばんは、ひでまるです。
今日はブログのデザインを一通り弄り終えたので、その内容とcssコードを公開していこうと思います。
約一週間かけてイジった内容ですが、一部上手くいかなくて断念した内容があるものの、概ね満足のいくデザインになりました。
色々な所からコードを拝借してきたので、引用元がわからなくなってしまったものに関しましては失礼ながら省略させて頂きます。申し訳ございません。
実際に使ってみる場合は、バックアップを取るなどして元に戻せるようにしておきましょう。
というわけで、早速見てみましょう！
ヘッダ設定
グローバルメニュー
こちらは、グローバルメニューの設定になります。
こんなやつですね。
『https://hidemaru-1988-sub.hatenablog.com/archive/category/自己紹介』の部分は、リンクさせるカテゴリのURLに変えてください。
『i class=" blogicon-user"』の部分はメニューの文字の横に表示させるアイコンの種類になります。コードは、こちらのサイトを参考にさせていただきました。
ブログ階層化
こちらは、ブログカテゴリを階層化する為の設定になります。
何も設定していないとカテゴリが階層化されませんが、この変更を行うことで下図でいうCSS部分のように階層化できる機能です。
この設定は、下記記事を参考にさせていただきました。
記事/記事上・記事上設定
読者登録ボタン
読者登録ボタンを表示する機能です。
記事上記事下ともに同じものが入っていました。
フッタ設定
上に戻るボタン
1～14行目は、ブログを下げていくと表示される『上に戻る』ボタンのための設定です。
下図でいうと、青丸の部分です。
15～17行目は、カテゴリ階層化のための設定です。
ヘッダと合わせて設定が必要です。
デザインCSS
ブログテーマ
こちらは、ブログテーマの設定です。
ブログテーマを変更すれば勝手に書き換わります。
私は割とシンプルかつレスポンシブ対応のデザインを選定しました。レスポンシブ対応ですと、携帯電話で見た時に同じようなデザインで表示させることが可能になります。
見出しデザイン
こちらは、この記事でいうと下記の装飾に当たります。
ここは正直改善の余地があるなと感じるところです。シンプルに見やすい感じのもので選んでいます。
大見出し、中見出しのみ設定しております。
これ以上の記事段落の階層化を行うと、階層毎の内容が薄くなってしまいそうなので、中見出しまでで十分かなと思っております。
サイドバー囲み&アイコン追加
こちらはサイドバーのモジュールを枠で囲むのとタイトルの横にアイコンを追加する機能です。
こちらのアイコンははてなブログのデフォルトアイコンではなく、『Awesome』というところのアイコンを使用しております。
contentより右側の4つの文字を変更することでアイコンを変更することができます。
無料で1700個近いアイコンを使用することが可能ですので、ご自身の趣味に合ったアイコンが見つかりやすいのではないでしょうか？
グローバルメニュー
ヘッダでの設定と合わせて設定を行います。
ボタンのデザインやカーソルが上に来た時の色の変更などの設定をしております。
TOPに戻るボタン
フッダでの設定と合わせて設定を行います。
記事一覧表示
ブログトップに戻った時や、カテゴリページに飛んだ時に記事を一覧にして表示する機能です。私は全くいじっていませんが、お気に入りの変更の一つです。
この変更は、この記事を参考にさせていただきました。
設定→詳細設定→<head>要素にメタデータを追加
Awesomeアイコン用設定
サイドバーで使ったアイコンを使うための設定です。
不明/Jクエリ
何のために書いてあるのか覚えていません。
記事一覧表示
デザインCSSの部分と合わせて設定が必要です。
まとめ
今回は、私が調べて実際に使っているブログデザインにかかわる部分の設定を全て公開しました。
ほとんどがコピペで色合いやサイズ感、うまく動かないところを微調整したのみで、ほとんどは、先人の方々の作ったコードとなっております。
まだまだCSSなどをマスターできるようになるには時間がかかりそうですね。
今週順調にいけばブログデザイン改善目標はストップになりますが、今後もちょこちょこいじっていく予定です。
引き続きブログの応援よろしくお願いいたします。
それではまた次の記事でお会いしましょう！アディオス！
【30代エンジニアの日記】来週の目標をそろそろ検討
こんばんは、ひでまるです。
本日は、今週の目標達成状況の確認、次週の目標を検討していこうと思います。
今週の目標達成状況
今週の目標は、『ブログデザインを美しくし、アクセスを10/日達成する』というものでした。現状は、13日現在で
となっており、12、12、1、15、13と平均10.6アクセスと目標をギリギリ達成できております。
残り2日で17アクセスなんで目標は達成できそうな気がします。引き続きよろしくお願いいたします。
来週の目標
来週の目標は、『「Notion」についての記事を毎日投稿する』にしようと思います。
毎日投稿すれば目標達成できるので、自分の頑張り次第となります。
『Notion』とは何？という人も多いかと思います。
Notionは、タスク、Wiki、およびデータベースを統合するマークダウンサポートを備えたメモアプリケーション及びサービス。 同社はこのアプリを、メモ作成、プロジェクト管理、タスク管理のためのオールインワンワークスペースと説明している
wikipediaより引用
つまりは、読書の記録であったり、タスクの管理であったり記録や管理のためのツールとなっております。
また、このツールの特徴としては、
・自分の使いやすいようにアレンジできる
・他の人の作ったものを流用できる
・色々なデバイスでシェアできる
といったものがあり、私自身も最近使い始めているツールです。
私が使っているものとして下のものがあります。
左のカレンダーでは、下のようなチェックポイントを記録することができます。
毎日のタスクや、期間を設けて取り組むタスクなどを見やすく簡単に記録できるので、習慣付け・記録の振返りがやりやすくなります。
何かに取り組んでいくにあたり、『Notion』をしっかり活用していけばより内容の濃い挑戦にできると思い、『Notion』をより理解するために今回『「Notion」の記事を毎日投稿する』という目標を立てました。
まとめ
今回は、次回の目標についての記事を書きました。次の目標に移れるように確実に今回の目標を達成していきたいですね。
次回は『Notion』の記事投稿を目標に決めました。より良い記事を提供できるように頑張りますので、期待していただければと思います。
それではまた次の記事でお会いしましょう！アディオス！
