6月26日の勉強会

ボタンのユニークスタイルの修正

前回(6月19日)作成したユニークスタイルのボタンの修正を行った。

 

詳細はブログ「6月19日の勉強会」にも記したが、追加した背景画像が切れて表示されるのを修正しようとするもの。

 

そのためには、「リンク文字のフォンtサイズを変更してボタンの高さを調整する」というものと、「リンク文字の水平位置を調整する」というもの。

 

ボタンのスタイルを標準のスタイル設定機能で変更する

これまで、ユニークさを強調して、CSSを使ってのスタイルの設定をおこなってきたが、実は Jimdo に備わる標準のスタイル設定機能をつかってもスタイル設定が行われることを確認した。これは汎用レイアウトを使って作成された場合に限られる。

参照:04B-1 ボタンのスタイルの汎用的編集

 

「管理メニュー」>「デザイン」>「スタイル」と進み、「詳細設定」を「オン」にする。そこでスタイルを編集したいコンテンツを、コロコロのアイコンでクリックすると、コンテンツ内容に応じた編集画面が上部に表示される。ボタンをクリックすると、ボタンのスタイルで編集できるメニューが表示される。

 

ボタンの場合は「フォント」「フォントサイズ」「フォントカラー」「フォントカラー(active)」「背景色」「背景色(active)」「罫線の色」「枠の色(active)」「罫線のサイズ」「角丸」がある。「XXXX(active)」はマウスがボタンの上に乗ったときのスタイルを意味する。

 

サイト内検索を設置する

フッターにあるサイドバー部分を、カラムを使って3等分したうちの左側と右側が完成したので、真ん中の部分の編集に入る。

 

ここにはサイト内検索窓を設置することにする。

この件に関しての詳細は、062 サイト内検索を設置するを参照する。

 

Google アカウント

サイト内検索ボックスを作成するには、Google アカウントが必要となる。それぞれアカウントのIDとパスワードの不明があって、スムースには進まなかった。

 

事前に Google Chrome ブラウザで、Google アカウントにログインしておいてもらうべきだった。

 

Google のカスタム検索サイトでの操作

カスタム検索サイトが開かれると、「検索エンジンの編集」で「追加」をクリックする。

 

「検索するサイト」ボックスに自分のホームページのURLを入力するのだが、これもスムースには行かなかった。以外にも自分のホームページのURL(○○○.jimdofree.com)がすぐ出てこない。ダッシュボードなどから辿るなどしてようやく自分のURLを見つけ、入力することになった。

 

「言語」を「日本語」にし、「検索エンジンの名前」は入力したURLの一部が使われて「○○○.jimdofree」となっている。これをそのまま使うことにし、「作成」をクリックする。

 

「カスタム検索エンジンの作成が完了しました」と出る。

 

「検索エンジンの編集」にある「デザイン」は、今回はそのままにしておき、「保存してコードを取得」をクリックする。

 

コードが表示されるので、<script> から </gcse:search> までを選択してコピーする。

 

Jimdo ページに挿入する

1)作成中のホームページにログインする

2)サイト内検索ボックスを挿入する場所で、「+コンテンツの追加」>「カスタム検索」を選ぶ。

3)コードを貼り付け、「保存」ボタンをクリックする。

 

サイト内に検索ウィンドウが追加される。

 

サイト内検索01.jpg
サイト内検索01.jpg