雑記

2015年07月04日

ブログのCSSを変えてみました。

ブログのレイアウトを変えるために、CSSを少し変更してみました。 それぞれ下のように変えたので、ちょっとだけ見栄えが良くなったような気がします。

見出し

見出しがちょっと素っ気ない気がずっとしていたので次のように変更しました。

h3タグ

ブログでよく使う見出しタグです。基本的にh3-h5で見出しを作るので、実質このタグが一番目立つようにしました。 青を基調に明るい感じにしてみました。

h3

h3 {
  position: relative;
  padding-left: 45px;
  color: #333;
  font-size: 1.943em;
  line-height; 30px;
}
 
h3:before {
  position:  absolute;
  top: 6px;
  left: 8px;
  width: 12px;
  height: 12px;
  border: 4px solid #B2E0FF;
  content: "";
}
 
h3:after {
  position:  absolute;
  top: -4px;
  left: -2px;
  width: 16px;
  height: 16px;
  border: 4px solid #0099FF;
  content: "";
}

h4タグ

h3の次に目立つようにしました。 このタグの■が一番気に入っていたりします。

h4

h4 {
  position: relative;
  color: #111;
  font-size: 1.643em;
  font-weight: bold;
  margin: 0 0 1.5em;
  padding: 0.5em 0.5em 0.5em 1.7em;
  border-bottom: 3px solid #B92A2C;
}
 
h4:before {
  content: "";
  position: absolute;
  background: #ff00cc;
  top: 0.1em;
  left: 0.5em;
  height: 12px;
  width: 12px;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}
 
h4:after {
  content: "";
  position: absolute;
  background:#dd2266;
  top: 0.9em;
  left: 0.1em;
  height: 8px;
  width: 8px;
  transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
}

h5タグ

小さな□を少しずらした形で配置しました。 また、色合いも抑える形にしてあります。

h5
h5 {
  position: relative;
  font-size: 1.143em;
  font-weight: bold;
  margin: 0 0 1.5em;
  padding: 0.5em 0.5em 0.5em 2.0em;
  border-bottom: 2px solid #B92A2C;
}
 
h5:before {
  content: "□";
  font-size: 200%;
  position: absolute;
  color: #ff6b6e;
  top: -0.1em;
  left: 0.2em;
  height: 12px;
  width: 12px;
}
 
h5:after {
  content: "□";
  font-size: 200%;
  position: absolute;
  color: #B92A2C;
  top: +0.1em;
  left: 0;
  height: 12px;
  width: 12px;
}

コードプレビュー

preタグ

複数行にわたるソースコードはこのタグで囲むようにしています。 ソースコードの表示では行数を表示するサイトがありますが、コピーする際に数字が邪魔になってしまうので、ただ囲むだけにしています。

preタグはこんな感じです。
pre {
  font-family: "Courier New",Courier,monospace;
  font-size: 1em;
  color: #007000;
  background-color: #fafafa;
  border: solid 1px #bbbbbb;
  line-height: 120%;
  margin:10px;
  padding: 0.99em;
  overflow-x: auto;
  overflow-y: auto;
}

codeタグ

文章中のコードはこのタグで囲むようにしています。 実はあんまり目立たないので、あえて使わなくてもいいとは思います。

codeタグはこんな感じです。

code {
  font-family: monospace;
  font-weight: normal;
  line-height: 150%;
  text-align: left;
  margin-bottom: 10px;
}

Tableタグ

Table はなるべくシンプルなものにしようと思ったので、最低限のもので構成しました。 ポイントとしては、行列を線で分けるようにしたことくらいでしょうか。 角が丸くなった表やもっとカラフルなものも作れるみたいですが、意外とシンプルな方が見やすいかなと思いました。

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
table {
    border-collapse: collapse;
}
 
table, th, td {
    border: 1px solid black;
    padding: 5px;
}
th {
    background-color: #a9a9a9;
    color: white;
}

さいごに

他のサイトのCSSからすると見劣りするかもしれませんが、シンプルなので使い勝手が良ければぜひ使ってください。



rabbitcats at 02:12|PermalinkComments(0)TrackBack(0)

2015年03月15日

Visual Studio 2010 における例外

Visual Studio を起動した際に以下のような例外メッセージが出ることがありました。
vs_error
log ファイルを見ても、それらしい原因がわかりませんでしたが下記のサイトにある方法で解決できました。
  •    Clear your %temp% folder, they are all temp files. Ignore those files you cannot delete.
  •    We may need to reset templates. Open Windows Explorer, and navigate to  <Visual Studio Installation Path>\Common7\IDE (by default is C:\Program Files \Microsoft Visual Studio 10.0\Common7\IDE); 
  •    Delete the ItemTemplatesCache, ProjectTemplatesCache folder; 
  •    Open Visual Studio Command Prompt (2010) under Start menu -> All Programs -> Microsoft Visual Studio 2010 -> Visual Studio Tools (run it with Administrator privilege: right-click the program -> Run as administrator); 
  •    Run the devenv /InstallVSTemplates switch
  •    Run the devenv /Setup switch
  • 最初の一つ目にあたる%temp%フォルダの中身を削除することで例外が出なくなりました。

    理由としては、フォルダにファイルがたくさんありすぎたようです。

    例外が出ていたときは6GBほど利用していました。

    もし同じようなことがあれば、お試しあれ



    rabbitcats at 22:30|PermalinkComments(0)TrackBack(0)

    2014年10月16日

    Sleipnir4.3.9のchromiumツールバー表示問題について

    sleipnir439

    windows8.1 の環境でsleipnir のバージョンを挙げた際に上記画像みたいにツールバーが増えてしまったので、その対応を行いました。

    Sleipnir のフォーラムを探してみると、同じような現象になった方がおり、対処法が回答されていたので同じように行いました。

    4.3.9.4000アップデート時の問題について - Fenrir User Community 

    フォーラムの内容が消えてしまうと困るので、以下に対処法を引用します。 
    1.Sleipnirを終了する 

    2.以下のファイルを開く 

    C:\Users\<ユーザー名>\AppData\Roaming\Fenrir Inc\Sleipnir\setting\client\user.ini 

    3.以下を追記して保存する 

    [WebKit] 
    AddStartupParams="/high-dpi-support=1 /force-device-scale-factor=1" 

    4.Sleipnirを起動する 

    私の環境でもこの手順を行うことで、よくわからないツールバーが消えました。
    最初はバージョンを下げようと思ったので、簡単に対処できて良かったです。

    ところで、Sleipnir はバージョン5以降からタブの使い勝手がすごく悪くなるのですけど、
    どうにかならないものですかね。
    このままですと、ずっとバージョン4系を使うことになりそうです。 

    rabbitcats at 23:42|PermalinkComments(0)TrackBack(0)

    2013年08月12日

    イタリアの漫画紹介雑誌

    こんにちは、今日は少し前にイタリアに行ったときに古本屋で見つけた雑誌について紹介します。

    20130812_1


    1998 年に出たこの本はイタリアに日本の漫画をいろいろと紹介しています。
    その漫画は日本で有名なものばかり集めており、それぞれ第一話や読みきりをすべてイタリア語に翻訳したものが載っていました。
    有名漫画ばかりだったため、イタリア語がわからない私でも大体の内容は把握できました。

    20130812_2雑誌に掲載された漫画は、上から「るろうに剣心 -明治剣客浪漫譚-」「北斗の拳」「COWA!」「幽☆遊☆白書」「キャプテン翼」「I''s」となっています。
    その中でも特に注目すべきはここに掲載されている北斗の拳は読みきりのものということ。
    まさか北斗の拳の読みきり、しかもフランス語版を読めるとは思いませんでした。

    また、るろうに剣心では漫画の時代背景などの注釈が1ページ丸ごと使ってあるなどなかなか親切なものとなっていました。






    20130812_3JETRO によるイタリアにおけるコミック・アニメ市場基礎調査(*1)では1980年頃より漫画市場は伸びてきており、ちょうどこの雑誌が出された年はだいたい発行部数がピークを迎えるころだったようです。

    そんな中発行されたこの本は、漫画をあまり読まない人に向けて漫画を紹介するために作られたものだったのかもしれませんね。











    (*1) イタリアにおけるコミック・アニメ市場 基礎調査(輸出促進調査シリーズ) 2007年3月

    rabbitcats at 22:45|PermalinkComments(0)TrackBack(0)

    2012年12月07日

    タイのお土産をいただきました。

    こんにちは、今日はタイに行った友達からレッドブルをいただきました。

    画像1
    いつもはビンのレッドブルをいただいて飲んでいるのですが、今回は缶のレッドブルをいただきました。

    まだ飲んでないので味は分かりませんが、美味しいといいですね。

    タイにはこういったドリンクがいろいろと充実しているそうなので、他のも飲んでみたいですね。続きを読む

    rabbitcats at 23:37|PermalinkComments(0)TrackBack(0)