ファンブログカスタマイズ: I Found It!

見たい情報にすぐたどり着けるようにタグクラウドを活用しよう、と思い立ちました。このブログの場合、スマホサイズではサイドバーを非表示にしているので、サイドバーにタグクラウドを配置して、さらにフッターにもタグクラウドを表示させたいと考えました。サイドバーにはコンテンツの設定画面で簡単にタグクラウドを追加できますが、メインにはタグクラウドをドラッグ＆ドロップできません。試しにサイドバーに貼り付けたコンテンツのhtmlをコピーして「デザイン html」からhtmlのフッターあたりに貼り付けて色々試してもうまくいきません。そこで、サイドバーに表示させているタグクラウドの中身をフッターにコピーすることにしたら、無事フッターにもタグクラウドを表示できることがわかったので、その方法を紹介します。ちなみにこの方法はサイドバーに貼り付けたタグクラウドがたとえ非表示（display:none;）であっても使えるので、非表示のタグクラウドをサイドバーに配置することでフッターだけにタグクラウドを表示させることも可能です。変更の前にあらかじめhtmlのバックアップを取っておいてください。コンテンツの変更「デザイン > コンテンツ」でサイドバーにタグクラウドがなければ貼り付けます。（サイドバーにはタグクラウドは表示させたくない、という方も、自由形式で一から書くよりはここでタグクラウドを貼り付けてからコンテンツのhtml編集画面で必要な部分だけ残してそれをstyle="display:none;" にするのが楽だと思います。）タグクラウドを貼り付けた初期状態ではタグクラウド部分のidにcontent.idという変数が埋め込まれます。メイン部分でタグクラウドのコピーのためにidを指定する際、content.idを参照しようとすると..

オリジナルのソーシャルボタンの作り方

今日は下記の5種類のソーシャルボタンの作り方を紹介します。各記事を対象にブックマークに追加、シェア、LINEに送ります。（下記は画像です。記事下に実物があります。）ファンブログで用意されたソーシャルボタンは画像やシェア数などを取得するために表示が遅くなる原因になっていました。なので、カウント数の表示もしない、シンプルなボタンにしています。筆者は人気ブロガーでも何でもないので、カウント気にしてもしょうがないし、「LINEに送る」ボタン欲しかったので。今回紹介する方法ではPC表示（画面サイズ大）ではボタン幅を大きくして、LINEボタンが非表示になります。変更の前にあらかじめcssとhtmlのバックアップを取っておいてください。下準備アイコンには「はてなブックマーク」と「LINE」以外はFont Awesomeのアイコンフォントを使用しています。画像を使うより表示が速いです。下記の記事を参考にFont Awesomeアイコンを使えるようにしてください。２行の変更でサイドバーコンテンツタイトルにアイコンを使用する「はてなブックマーク」のアイコンは実はただの文字です。どの環境でも表示できて「B!」がはてブのアイコンに似たフォント、ということで、GoogleのWebフォント「Montserrat」を使用しています。「デザインデザイン設定」で、PCの使用中のテンプレートのcss編集リンクをクリックしてcssの先頭にならんだ@なんとか、の行の後ろにでも下記を追加してください。 @import url('https://fonts.googleapis.com/css?family=Montserrat'); 「LINE」のアイコンのみ画像を使用しています。LINE公式ガイドラインから画像をダウンロードできるので、こちらの「30×30」サイズ..

パンくずリストを表示させる

調べものをしていたらPC版でパンくずリストを表示させる記事を見つけました。パンくずリストとは、現在のページの場所を示す、これ。（トップページには表示されません）簡単につけられそうだったので、つけてみました。せっかくなので以前紹介したアイコンフォントを使用しています。参考にさせていただいたのはこちら。 Seesaaブログにdata-vocaburary.orgのパンくずリストを設置するファンブログはSeesaaブログと同じブログシステムらしいので使えるかなぁ、と思ったら、ほんとにそのまま使えました。筆者は今のところ最低限のブログパーツしか配置していないので、実際は表示されないページの対応も入ってますが、そのうちどうなるかわからないのでそのまま使わせていただきました。変更点は以前紹介したFontAwesomeのフォントを使用するようにしたのと、カテゴリページで「HOME > [カテゴリ] > HERE」となっていたので、HEREは表示させないようにしました。変更方法「デザイン > html」からhtmlを編集します。htmlを初めて追加する場合は適当な名前で新しくhtmlを追加して、そちらを編集してください。まず <div id="content">  を探します。その直後に下記をコピペします。 <div class="breadcrumbs"> <% if:page_name eq "index" -%><span typeof="v:Breadcrumb"><a rel="v:url" pr..

簡単にコードを見やすく表示する方法

HTMLやCSSをカスタマイズする方法を書こうと思ったらコードを見やすく表示したいなぁ、と思ったのでその方法を調べてみました。WordPress用の「Crayon Syntax Highlighter」の記事が圧倒的に多いのですが・・・いいのがありました！nbsp;それが、「highlight.js」です。WEBで公開されてるので、このファンブログでも利用可能です。しかも超軽量でCrayon Syntax Highlighterから乗り換えた人もいるみたいじゃないですか。早速これを使えるようにしたいと思います。 highlight.jsの公式サイトで詳しい使い方や最新バージョンを確認できます。もちろんこちらでライブラリのダウンロードもできますが、ここで紹介する方法ではダウンロードは必要ありません。設置方法「デザイン html」からhtmlを編集します。htmlを初めて追加する場合は適当な名前で新しくhtmlを追加して、そちらを編集してください。 CSS、JavaScriptへの参照と、ハイライトに置換する呼び出しを追加します。上の方にある</html>の直前に追加してください。  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/default.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js..