Blind Carbon Copy

ラベル CSS の投稿を表示しています。すべての投稿を表示

2014-12-25

Bloggerに検索ボックスを設置

Bloggerには検索ボックスを設置するための、
検索ボックスガジェットがあらかじめ用意されています。

しかし、これがうまく動かないようなので他の方法で設置しました。

レイアウトからガジェットを追加で、HTML/JavaScriptガジェットを使います。
以下のように入力します。


<form id="searchform" action="/search" method="get">

<input id="s" value="" name="q" size="30" type="search"/><input id="searchsubmit" value="検索" type="submit"/>

</form>

CSSも追加すれば見栄えも良くなります。

例:


<style>

input {

outline:none;

font-size:1em;

border:solid 1px #dddddd;

}

input[type="search"]:focus {

border:solid 1px #31c8aa;

}

input[type="submit"]:hover {

background:#31c8aa;

border:solid 1px #31c8aa;

color:#fff

}

</style>

2014-12-22

モバイル版Bloggerのリンクの色を変更

Blogger管理画面のサイドバーからテンプレートを選びます。
モバイルの歯車ボタンをクリック、
「はい。携帯端末でモバイルテンプレートを表示する。」が選択されているはず。

「モバイルテンプレートを選択」で一番下のカスタムを選択します。

以前書いたように、a要素の色が既に変更してある場合、
その色がモバイル版でも適用されます。

リンク付き文字の色を変える

リンクの付いたテキストの色を変えたいときは、CSSでa要素の色を指定します。
以下のようにします。


a {

color: #000000;

}

colorはテキストの色を表しています。

また、未訪問のリンクと訪問済みのリンクで色を変えたいときは、以下のようにします。


a:link {

color: #111111;

}

a:visited {

color: #888888;

}

マウスカーソルを合わせたときに色を変えたい場合は次のように。


a:hover {

color: #1a0dab;

}

Bloggerでも同じです。
HTMLの編集から検索(Ctrl+F)などして、該当の箇所を探して、変更します。

2014-12-08

Text Editor

contenteditableとローカルストレージを使ったシンプルなテキストエディタ
詳細はこちらをどうぞ。

Type text here...

2014-11-15

MENU v1.0

CSS Menu Makerのナビゲーションメニュー。試しに使ってみましたが、少し動きがおかしい気がします。
詳細はこちらをどうぞ。