BloggerのQooQテンプレートで、検索ボックスをもう少し長くしたいなと思いました。
さっそくやり方を探したのですが、あまりに初歩的すぎるためか、調べても出てきません。
仕方ないので、自力で何とかしてみた。
基本いじらない、をいじる
下記のやり方はQooQの場合ですが、修正したい部分の記述はそんなに変わらなそうなので、他のブログやテンプレートでも使えるかもしれません。
1、HTML編集をひらく
テーマ → カスタマイズ → HTMLを編集。心配な場合は、バックアップを取っておいてください。
2、gsc-search-box
HTML編集画面をひらいたら、コードの適当なところをクリックして、Ctrl+Fを押します。するとSearch:というバーが出てくるので、
gsc-search-box
と入力して、Enterを押します。すると、初期化処理-*基本いじらないと書かれたエリアの中に、ヒットする部分があると思います。別のエリアでもヒットする所があるので、場所を間違えないように気をつけてください。
3、いじる
いじらないよう警告が出ている場所をいじるなんて怖い！あたいソースとかわからないし。と思いつつ、いじります。ヒットした場所の右のほうを読んでいくと、
table.gsc-search-box
{background:#fff;border-radius:18px;max-width:16em}
というような記述があると思います。意味としては、
background
背景色。#fffは白。
border-radius
角の丸み。ここの数値を変えると、検索窓のふちの形が変わる。
max-width
要素の最大幅。ここの数値が、検索窓の最大表示幅になる。
というわけで、今回いじるのはmax-widthの部分です。私はここを20emにしました。
数値を書き換えたら、右上の保存を押して、ブログを表示してみてください。長さが変わっていると思います。
4、まとめ
2文字書き換えればOK。
【おすすめ記事】
マスタープログラム後にやるクエストはこれ！
ドラムや3次職のマスタープログラムのあとに、クリアしておきたいクエストの話。
最新のストーリクエスト
2020年11月に公開されたROの最新ストーリー、「賢者の遺産」をクリアしました。
0 件のコメント:
コメントを投稿