div - OTTAN.JP

Hugo + Algolia + Instantsearch.jsで静的サイトに全文検索を導入

Hugo + Algolia + Instantsearch.jsで、静的サイトに全文検索を導入するまでの一部始終をまとめてみました。完成版メニューバー右側のテキストボックスに検索キーワードを入力して、Enterキーを押します。検索したキーワードにヒットした記事が表示されます。最低限の実装です。テーマに合わせた検索結果の表示...

#lt #gt #div #インデックス #class

CSSフレームワーク「Bulma」の「columns」クラスに関する挙動について

CSSフレームワークの「Bulma: Free, open source, and modern CSS framework based on Flexbox」のcolumnsクラスの挙動がおかしい、というお話です。 Columns responsivenessは、Flexboxをベースとしたレスポンシブなレイアウトを簡単に定義できます。ところが、以下のシンプルなコードをみてください。 <html> <body> <div class="columns is-desktop"> <div class="column">1</div> <div class="column">2</div>...

#div #lt #gt #エレメント #body

Netlify Functions + Hugoで簡単サイト内検索

静的サイトの悩みの種、サイト内検索をNetlify Functions＋Hugoで実装してみました。ポイントは、以下の通りです。クライアントであるブラウザにとって負荷の低い実装方法とする記事の更新の都度、インデックス等の更新にかかる運用が発生しないようにする（自動的に行う） Hugoの機能、ある程度の月...

#lt #gt #div #fuse #json

Twitter Bootstrap 3を用いてWordPressテーマを作成しよう①

Twitter Bootstrapを用いたWordPressテーマは数多く配信されています。その中からピックアップしてカスタマイズしても良いのですが、それでは面白味がありませんので、極力そういった類いのツールは借りず、自作に近い形でテーマを作成したいと思います。簡単にレスポンシブに対応したデザインが作成できる「I...

#lt #gt #class #js #div

Twitter Bootstrap 3を用いてWordPressテーマを作成しよう③

Twitter Bootstrap 3 を用いて WordPress テーマを作成しよう ②は、Twitter Bootstrap の根幹となるグリッドシステムのご紹介から、メインコンテンツにアイキャッチ画像、タイトル、投稿の内容を表示させる、など盛りだくさんの内容でしたまた、その中で、the_XXXX() 関数とget_the_XXXXX() 関数の違い、the_post()...

#sidebar #gt #サイドバー #lt #div

Twitter Bootstrap 3を用いてWordPressテーマを作成しよう④

投稿ページの作成 Twitter Bootstrap 3 を用いて WordPress テーマを作成しよう ③まででメインとなる「index.php」では投稿一覧の表示まで行いました。今回は、投稿の個別ページを表示する「single.php」を作成します。「index.php」からリンクされたページは、WordPress により「single.php」に誘導...

#lt #gt #div #php #class