BUNNY ROBBER GRPC BLOG

最近、私のブログでBloggerの海外製テンプレートについて書いた記事にアクセスが集まっているようなので、ちょっとおさらいの意味もこめてBloggerで海外製テンプレートを使うコツを書いていきます。 1. メニューやSNSのリンクを有効にするにはHTMLの知識が必要 海外製のテンプレートの多くは、メニューにBloggerの標準ガジェットを使用していません。これはメニューの階層化を設定するためで、ここを編集するには HTMLのリストタグ（ulとli）とリンクの知識が必要になります 。 SNS関連もBlogger標準のものではないので、自力で各リンクのコードをHTMLに入力する必要があります。 メニューやSNSのコードを入れるタグの場所はテンプレートによって異なりますが、大抵は <!-- main menu --> などのHTMLコメントがあるので、それを探してみてくだい。 これら知識のHTMLの中でも初歩的なので、簡単に覚えられると思います。 2. 色とフォントを変えるにはCSSの知識が必要 海外製のフリーのテンプレートの場合、Bloggerのダッシュボードのテーマ、カスタマイズ以降の編集は殆ど出来ません。なので 各所の色とフォントを変えるには自力でCSSを上書きする必要があります 。 色とフォント色を変えるくらいのCSSならそれほど難しくはないのですが、CSSを設定するためのIDやClassを見つけるのがやや難儀で、根気のいる作業となります。 最低限、Chomeの検証機能を使用して目的のCSSを探せるくらいの知識は必要です。 3.  Javaが使用されているケースがある 海外のテンプレートでは、もともとBloggerに無いような機能を持たせているいるものがあり、それらにはJavaが使用されているケースがあります。 例えばサマリー表示です。サマリー表示というのは、Blogger標準のテンプレートcontempoにもあるような、写真＋見出し＋文字で構成された要約ブロックのことです。 このような標準でない表現にはJavaが使われることが多いのですが、Blogger+Javaの知識は日本のウェブサイトではあまり手に入らないので、ここに手を入れるのはハードルが高いと思います。 4. ウィジェットは...

今回はBloggerのテンプレート『canvas』を日本語化します。 現在Blogger標準の『Contempo』というテンプレートをカスタマイズして使用しているこのブログですが、左カラムの使い勝手が悪いことが大きな欠点でした。 これをどうにか解消したくて様々なテンプレートを探し、見つけたのがフリーの海外製のテンプレート『canvas』です。 『canvas』のスクリーンショット。非常にシンプルです。 今回はこのテンプレートを日本語に合うようにします。 日本語化で問題になる文字列の行間を広げ、フォントをサンセリフ中心に、デザインや色も味気ないので変更、これを全てCSSの追記で処理しています。 作業後のイメージが、下記スクリーンショットとなります。 元の状態から配色とデザインを一部変更しています。 メインメニュー内にあった検索は使い勝手がイマイチだったのでCSSで非表示にし、 標準の検索ガジェットを使用しています。 『canvas』とCSSカスタマイズを適応したサンプルブログ これからその手順を紹介していくのですが、注意点がいくつかあるので先に挙げていきます。 1 . 事前に、 現在使用しているテンプレートをバックアップ しておいて下さい。 1. Bloggerのダッシュボードの左側にあるテーマを選択し、 右上のバックアップ／復元をクリック。 (C) Google ↓ 2. 表示されたウインドウ内、テーマをダウンロードをクリックすると、 現在ブログに使用されているテーマのダウンロードが始まります。 (C) Google 2 . 途中でHTMLを直接書き換える工程があるので、作業は慎重に行ってください。 3 . 作業に自信が無い方は、 練習用のブログを作成し、そのブログ上で作業を練習 して下さい。 4 . 全ての作業は 自己責任 にて行って下さい。 注意点は以上です。次に事前準備です。 事前準備1. 現在のブログの固定ページ名と主要タグ名、それぞれのアドレスを控える 『canvas』には2つのメニューバーが備わっていますが、共にBlogger標準のページガジェットは使われていません。ここを編集するにはHTMLコードを直接書き換える必要があるので、事前に メニ...

今回はソーシャルメディアのイメージ画像を簡単に作成できるpabloの紹介です。 pabloはSNS予約投稿ツール等を開発しているBufferがリリースしているGoogleChromeの機能拡張の一つで、Chromeストアにて無償で提供されています。 pabloを使用すれば上のようなイメージ画像が簡単に作成することができるので、ブログのイメージ画像でお困りの方は是非使ってみてください。 まずはpabloをChromeへインストール bufferのホームページ にある青いボタンをクリック。 赤い線で囲った青いボタンをクリックして下さい。 クリックするとChromeウェブストアのpabloのページに移動するので、右上の「Chromeに追加」ボタンをクリックして下さい。次にインストールの許可を求めるウインドウが開くので、許可ボタンを押してください。 次は右上にあるChromeに追加をクリック。 Chromeへのインストールが終了すると右上にpabloのアイコンが追加されます。それをクリックするとpabloが起動します。 丸に筆マークがpabloのアイコン。名前の由来はパブロ・ピカソからでしょうか？ インストールした機能拡張を外したいときは、 Chormeの環境設定→左上にある機能拡張で無効化や削除ができます。 実際にPabloを使ってみる pabloのメイン画面 これがpabloの画面です。左上から右下へ順に進めていけば作業が終わるようにレイアウトされています。以下簡単にですが、画像を作る手順を説明していきます。 画像の検索と選択 ルーペアイコンの左にキーワードを入力すると、下に候補となる写真が出てきます。気に入った写真をクリックすると、中央の写真（CANVAS）がそれに変わります。他の候補写真が見たい場合は、ルーペアイコンの上にある「SHUFFLE」の文字をクリックして下さい。ランダムで写真が入れ替わります。 また、候補となる写真は全てクリエイティブ コモンズゼロとなっているので、著作権等の心配はありません。 pabloのライセンスについて（英語） 左上のルーペアイコンが画像の検索欄。キーワードを入れると下に候補画像が出てきます。 自分のPCの中にある画像を使いた...

前回でリニューアルをしたこのブログ。素のテーマの状態だと物足りない面もあるので少しずつ手を入れていこうと考えているのですが、今後はそうしたコード等もブログに載せていこうと思い、手段を色々と探しました。 ブログの投稿にソースコードを貼り付ける方法は幾つかあるものの、手軽さと分かりやすさではGitHub Gistを利用するのが一番だと私は感じました。 そこで今回は、GitHub Gistを使ってブログにコードを載せる手順を自分なりに解説していきたいと思います。 ※Google および Google ロゴは Google LLC の登録商標であり、同社の許可を得て使用しています。 1. まずは GitHub Gist にアクセス GitHub Gistへのリンク →  GitHub Gist（クリックしてください） GitHub Gistの画面。ログインしなくても使えます。 2. ブログに載せたいコードを中央の欄にペースト サンプルとして、このブログの3行のHTMLコード（metaとtitle要素）をペーストしてみます。 ※スクリーンショット この3行を 1の横にペーストして、こんな感じに（赤枠で囲った部分）。 3. 次は右下の Create public gist ボタンをクリック 次は右下のボタンをクリック（その左にある黄色い「Create secret gist」でも可。違いは検索対象になるかならないか）。 4. 画面が切り替わり、埋め込み用のコードが生成されます この画面になったら、赤い枠で囲ったボタンをクリックしてください。ブログにコードを埋め込むためのコードがクリップボードへコピーされます（その左にあるコードを全選択してコピーでも可）。 5. コピーされたコードをブロガーの投稿の入れたい場所へペースト (C) Google コードをペーストする際の注意点として、必ずHTMLモードでペーストしてください。また、ペーストが済んだらプレビューで確認することをお勧めします。 5. 出来上がり こんな感じになります。 6. 慣れたらコードに名前（ファイルネーム）を付けてみる ファイルネームは無くてもコードを...

始まってそれほど経っていないこのブログですが、昨年にリリースされたBlogger公式のテンプレートを使ってリニューアルしました。 以前のデザインも自分でBloggerのシンプルテンプレートのCSSを追記して作ったのですが、投稿記事の自動カラム表示が出来なかったこととレスポンシブに非対応だったので、思い切って変えてみることにしました。 ※Google および Google ロゴは Google LLC の登録商標であり、同社の許可を得て使用しています。 「Contempo」を使ってシンプルなデザインに リニューアルで使ったテンプレートは 「Contempo」 です。自分の中でリニューアルのコンセプトを「海外サイトで配布されているようなシンプルなデザイン」に決めてヘッダーの画像を削除&背景色を白に。CSSを追記してヘッダー画像のオーバーレイを外したり投稿の枠に点線を入れています。 現状はとりあえず形になっているものの、細かいところまでは手が入っていません。本来なら左のメニュー領域の幅を広げたりカラム内の写真を大きくしたいのですが、自分にはそこまでの技量は無いので断念。とりあえずはこのデザインを使って、気になる箇所を探しつつ改良していこうと思います。 なんだかよく解らない「Contempo」のテーマデザイナー (C) Google Bloggerをカスタマイズする上で避けることの出来ないテーマデザイナー。新しいテンプレートのものは新しい項目や見慣れない言葉が増えており、今まで使っていた人もちょっと戸惑うと思います。実際に触ってみても変更項目がどこにどのように反映するのか解りづらいので、ここはトライ＆エラーで理解していくしかなさそうです。 改良されたソーシャルボタン (C) Google Bloggerの仕様でも絶望的にダサかった各種ソーシャルボタンは、投稿の下のラベルの横にある「く」の形をしたマークをクリックすると出てくる吹き出しの中にあります。 初期状態でソーシャルボタンが隠れていることが良いか悪いかは判断しかねますが、少なくとも前の小さいボタンよりは使いやすくなったのでは思います。 ただ、日本のユーザーにはおなじみの「はてなブックマーク」は無いので、その点は物足りないと思う人もいる...