ABOUT
このページはブロガーサービスを使ったブログです。
海外のテンプレートに差し替えたものをベースにして、ちょこちょことカスタマイズしています。
このページの基になっているものは以下のものです。
http://www.soratemplates.com/2015/05/nano-mag-blogger-templates.html
このページでは以下のページを参考にしています。
http://webnonotes.com/css/heading_sample/
http://plaza.rakuten.co.jp/shophunter/011003/
https://gist.github.com/
海外のテンプレートに差し替えたものをベースにして、ちょこちょことカスタマイズしています。
テンプレート
テンプレートは、「blogger template free」等のキーワードで先生に尋ねると、カッコいいものがたくさん紹介されているページが見つかります。このページの基になっているものは以下のものです。
http://www.soratemplates.com/2015/05/nano-mag-blogger-templates.html
見出し
見出しのCSSデザインも変更するとオシャレになります。このページでは以下のページを参考にしています。
http://webnonotes.com/css/heading_sample/
http://plaza.rakuten.co.jp/shophunter/011003/
preタグ
ブログ内でも紹介していますが、コマンドライン説明用のpreタグのCSS。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
pre.commandline { | |
/*fontの指定(google web font)*/ | |
font-family: 'Source Code Pro' ; | |
/*境界との位置関係を調整*/ | |
margin: 0px 0px 0px 0px; | |
padding: 5px 0px 5px 5px; | |
border: 1px solid #7a7a7a; | |
/*色*/ | |
background-color: #ffffff; | |
color: #0000000; | |
/*角を丸くする*/ | |
-webkit-border-radius: 5px; | |
-moz-border-radius:5px; | |
border-radius:5px; | |
/*影をつける(外と中の両方)*/ | |
-webkit-box-shadow:3px 3px 5px 0 #aaa, 1px 1px 5px 0 rgba(0,0,0,0.3) inset; | |
-moz-box-shadow:3px 3px 5px 0 #aaa, 1px 1px 5px 0 rgba(0,0,0,0.3) inset; | |
box-shadow:3px 3px 5px 0 #aaa, 1px 1px 5px 0 rgba(0,0,0,0.3) inset; | |
overflow: auto; | |
white-space: pre-wrap; | |
word-wrap: break-word; | |
} |
gist埋め込み
シンタックスハイライターとかありますが、gistの方がかっこいいかなと思って使ってみてます。https://gist.github.com/
アイキャッチ画像
自分でも面白いアイキャッチ画像を作れたらいいなと思いつつ、写真を撮ったりして使っているけれど、巷のアイキャッチ画像屋さんの画像も使わせてもらってます。
ABOUT
Reviewed by shunsk
on
6/04/2015
Rating:
No comments: