本日より、「たくのろじぃのメモ部屋」のデザインが変わりました。
旧デザイン
今までは Naked というテーマをダウンロードして使用していました。
このデザインも悪くはないのですが、ソースコードのシンタックスハイライトが微妙なのと「はてなブログっぽさ」が出てしまっています。
他のテーマにしても良かったのですが、あまりいいものがなかったので
無いなら作ってしまおう
ということで、丸1日かけて CSS と睨めっこしていました。そして、完成したのがこちらです。
新デザイン
Bootstrap 4 を使用したデザインです。ASP.NET Core に使用されているデザインテンプレートと同じで、結構気に入っていたので導入してみました。どうでしょう？はてなブログとは思えないデザインだと思います。
そして、シンタックスハイライトです。
Visual Studio と同じような配色にしてみました。完全には一致できませんが、ほぼ同じような見た目です。また、目次と固定ページを追加して、より手作り感満載なデザインになったと思います。
ちょっとしたプレビュー
Bootstrap がそのまま使えるので、ボタンや入力フォームも利用できます。
見出し 1
見出し 2
見出し 3
見出し 4
見出し 5
ソースコードです。
using System; namespace Hoge { class Huga { static void Main(string[] args) { Console.WriteLine("Hello!"); } } }
C++ とかです。
#include <iostream> using namespace std; int main() { cout << "Hello" << endl; return 0; }
PowerShell とか。
dotnet new Templates Short Name Language Tags --------------------- ------------------- ------------ ---------------------- Console Application console [C#], F#, VB Common/Console Class library classlib [C#], F#, VB Common/Library WPF Application wpf [C#], VB Common/WPF WPF Class library wpflib [C#], VB Common/WPF WPF Custom Control... wpfcustomcontrollib [C#], VB Common/WPF WPF User Control L... wpfusercontrollib [C#], VB Common/WPF Windows Forms App winforms [C#], VB Common/WinForms Windows Forms Cont... winformscontrollib [C#], VB Common/WinForms Windows Forms Clas... winformslib [C#], VB Common/WinForms Worker Service worker [C#], F# Common/Worker/Web Unit Test Project mstest [C#], F#, VB Test/MSTest NUnit 3 Test Project nunit [C#], F#, VB Test/NUnit NUnit 3 Test Item nunit-test [C#], F#, VB Test/NUnit xUnit Test Project xunit [C#], F#, VB Test/xUnit Razor Component razorcomponent [C#] Web/ASP.NET Razor Page page [C#] Web/ASP.NET MVC ViewImports viewimports [C#] Web/ASP.NET MVC ViewStart viewstart [C#] Web/ASP.NET Blazor Server App blazorserver [C#] Web/Blazor Blazor WebAssembly... blazorwasm [C#] Web/Blazor/WebAssembly ASP.NET Core Empty web [C#], F# Web/Empty ASP.NET Core Web A... mvc [C#], F# Web/MVC ASP.NET Core Web App webapp [C#] Web/MVC/Razor Pages ASP.NET Core with ... angular [C#] Web/MVC/SPA ASP.NET Core with ... react [C#] Web/MVC/SPA ASP.NET Core with ... reactredux [C#] Web/MVC/SPA Razor Class Library razorclasslib [C#] Web/Razor/Library ASP.NET Core Web API webapi [C#], F# Web/WebAPI ASP.NET Core gRPC ... grpc [C#] Web/gRPC dotnet gitignore file gitignore Config global.json file globaljson Config NuGet Config nugetconfig Config Dotnet local tool ... tool-manifest Config Web Config webconfig Config Solution File sln Solution Protocol Buffer File proto Web/gRPC
ここからは Bootstrap のサンプルコードです。
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
おわりに
はてなブログって結構制約があるのかと思いましたが、設定次第では「はてなブログ」だと分からないくらいのデザインができるのに驚きました。また、私は今までに C# くらいしかやってこなかったのですが、HTML や CSS などに触れて Web 系も面白いと思いました。
リニューアルした「たくのろじぃのメモ部屋」をどうぞよろしくお願いします。
