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年11月26日

    動的にアイコンを変えられるツールバー

    C++ でMFC を利用してデスクトップアプリケーションの開発をしていた時の覚書です。
    画面を切り替えて使うアプリケーションなどでは、画面ごとに似たような機能を持ったツールバーを用意することがあると思います。
    その場合に一つのツールバーで見た目と機能を切り替えると便利かと思ったので、試してみました。

    下準備

    CMFCToolBar を継承した新しいToolBar クラスを作成し、下記の関数をオーバーライドします。

    BOOL CMyToolBar::LoadToolBar(UINT uiResID, UINT uiColdResID, UINT uiMenuResID, BOOL bLocked,
            UINT uiDisabledResID, UINT uiMenuDisabledResID,  UINT uiHotResID)
    {
        m_uiOriginalResID = 0;
        return CMFCToolBar::LoadToolBar(uiResID, uiColdResID, uiMenuResID, bLocked, uiDisabledResID, uiMenuDisabledResID, uiHotResID);
    }
    
    BOOL CMyToolBar::LoadToolBarEx(UINT uiToolbarResID, CMFCToolBarInfo& params, BOOL bLocked)
    {
        m_uiOriginalResID = 0;
        return CMFCToolBar::LoadToolBarEx(uiToolbarResID,params,bLocked);
    }
    

    実際にはLoadToolBar は内部でLoadToolBarEx を呼び出しているので、LoadToolBarEx だけオーバーライドすればできると思います。
    動的にアイコンを変えたい場合にはm_uiOriginalResID の値を0 にしてあげる必要があります。
    これはCMFCToolBar::LoadToolBarEx 内でビットマップをロードするLoadBitmapEx と同じ条件式のところで、m_uiOriginalResID の値を見ているからです。

    if (m_uiOriginalResID != 0 || LoadBitmapEx(params, bLocked))
    

    afxtoolbar.cpp のLoadToolBarEx 内でこのようにコードが書かれています(VisualStudio12.0で確認)。 m_uiOriginalResID が0 以外の場合ではLoadBitmapEx が呼び出されないため、変更したいツールバーのビットマップが読み込まれないことになってしまいます。

    使い方

    使い方は簡単で、いつも通りツールバーを作成します。

    m_pMyToolBar->CreateEx(
        this,
        TBSTYLE_FLAT,
        WS_CHILD | WS_VISIBLE | CBRS_ALIGN_TOP | CBRS_TOOLTIPS | CBRS_FLYBY | CBRS_SIZE_DYNAMIC,
        CRect(0, 0, 0, 0),
        MYTOOLBAR1_ID
        );
    m_pMyToolBar->LoadToolBar(IDR_MYTOOLBAR1, 0, 0, TRUE);
    m_pMyToolBar->SetWindowText(_T("MyToolbar1"));
    m_pMyToolBar->SetControlBarStyle(m_pMyToolBar->GetControlBarStyle() & ~AFX_CBRS_CLOSE);
    
    this->DockPane(m_pWndToolBar.get());
    

    そのあとに変更したいタイミング(たとえばツールバーのアイコンをクリックしたタイミングなど)で下記のコードを呼び出します。

    m_pMyToolBar->CleanUpLockedImages();
    m_pMyToolBar->LoadToolBar(IDR_MYTOOLBAR2, 0, 0, TRUE);
    m_pMyToolBar->AdjustLayout();
    m_pMyToolBar->AdjustSizeImmediate();
    

    これで無事にツールバーを変更することができます。

    おまけ

    実は上に書いたコードには落とし穴がありました。
    ツールバーを作成した後に
    m_pMyToolBar->SetControlBarStyle(m_pMyToolBar->GetControlBarStyle() & ~AFX_CBRS_CLOSE);
    でツールバーの閉じるボタンを無効に設定しているのですが、実際には閉じるボタンは表示されてしまいます。

    CMFCToolBar::CanBeClosed

    CanBeClosed で閉じることができるかどうかを判断できるのですが、CMFCToolBar は常にTRUE を返すようです。
    ちょっと意味が分からないですね。
    そこで、とりあえず下記のようにオーバーライドすることで設定した値で判断するように変更できます。

    BOOL CMyToolBar::CanBeClosed() const
    {
        return CBasePane::CanBeClosed();
    }
    

    これで解決できるのですが、良いのかどうか・・・



    rabbitcats at 00:50|PermalinkComments(0)TrackBack(0)C++