css

A collection of 2 posts
Scroll dropdown menu
css

Scroll dropdown menu

以前algoliaを使ってblogに検索窓を設置しました。 * Trying out Algolia * Install Algolia Search on Ghost * Completion of Algolia in-site search box 無事検索出来るようになって嬉しいのですが、「検索結果7個はちょっと少ない...。」そこで検索結果を増やした所、「ドロップダウンメニューが画面外まで伸びてしまう...。」と言う問題に直面したので、ドロップダウンメニューをスクロールさてみました。 やり方 意外に簡単で、CSSだけで出来ました。overflowを使い、ボックスが250px以上の場合はスクロールさせるようにしました。良いやり方なのかはわからんちん。 検索結果は7個から21個にしました。 background-color: #fff; border: 1px solid #999; border-top: none; + overflow: scroll; +
1 min read
Install Algolia Search on Ghost
algolia

Install Algolia Search on Ghost

Trying out Algoliaでは大敗北しましたが、今回無理やり検索結果に一致したページに飛べるように半分なった!のでメモ。 やりたいこと! 検索ボックスで検索した結果としてタイトルの文字列を返したい。またそのタイトルはタイトルの記事へのリンクになって欲しい。 検索ボックスの見た目を変えたい。トップページの記事一覧のように画面に合わせてボックスの大きさを伸縮したい。また、Free版を使っているので、algoliaのロゴを検索ボックス付近に設置しなければならない。 やったこと JS * suggestion._highlightResult..valueで検索したときに返すattributeを決定できるみたいなので、検索結果に表示する文字列はsuggestion._highlightResult.title.valueで良い * ある文字列をリンクにするためにはlink()メソッドが使えそう * link先のurlはhttps://ghost.ponpokopon.me/とsuggestion._highlightResul
3 min read