はてなブログテーマ「Flex PhotoGraph2」

写真系ブログ向けテーマ(旧Flex PhotoGraphのバージョンアップ版)

はてなブログテーマ「The.明朝」を作成してみました。

明朝フォントで表示する2カラムブログテーマです。

記事一覧は「FlexPhotoGraph2」のテーマを継承しています。

FlexPhotoGraph2は1カラムのテーマでしたが、2カラムにバージョンアップしたものが、「The.明朝」となります。写真系のブログは、明朝フォントと相性がいいのではの発想です。

f:id:tommyoctopas:20190727133526j:plain

blog.hatena.ne.jp

はてなブログテーマ「The.明朝」

●2カラム、レスポンシブデザイン(スマホは1カラムになります)

●すべて明朝で表示する。※はてなブックマークコメント、はてな過去記事パネルは保護します。スマホは明朝できませんので、システムフォントとなります。

windows, macで使える明朝フォントで対応しています。

・游明朝(YuMincho) – windows8以降の明朝フォント
ヒラギノ明朝(Hiragino Mincho) – macの明朝フォント

その他、テーマの特徴

インパクトのある明朝を生かした記事タイトル表示、少し大きめ目に表示

記事一覧ページはカード型表示、レスポンシブに列が生成されます。

●左側のコンテンツフレーム幅は固定にしない、自動最大幅、写真を大きく表示したいを優先しました。

 

こちらがテーマ適用ブログです。

tommyoctopas.hatenablog.com

 

新バージョンFlexPhotoGraph2のリリース

f:id:tommyoctopas:20190718182359j:plain

改良点

1フレームテーマなのでサイドバーコンテンツはブログ記事のメインフレームの後へ表示されますが

最新記事一覧等の長いコンテンツは、縦長に間延びし、その他のサイドバーコンテンツとの並びの位置関係がデザイン上、見難い配置となってしまう。

これを解決しました。

サイドバーコンテンツ内のオブジェクトを横へ展開し配置することで、その他のサイドバーコンテンツとの並びの位置関係を改善しました。

 

ブラウザの高さの超えた縦長の画像ファイルの表示について

おそらく全テーマについて起こりうる、、記事編集でその画像ファイルの高さ調整を任意で行っているはずです。しかしそれは、そのPCのそのブラウザ環境で、うまく収まるよう編集しただけで、不特定多数のその他PC、スマホで、縦長の画像がうまく収まっている可能性は、かなり低いです。

これを解決しました。

開いているブラウザの高さに対しての比率で画像ファイルの合わせてしまう、これにより、どの環境下でも縦の画面サイズにフィットされ、一番大きい見え方で表示します。比率は85%で行い、前後の文字の行があれば、少しそれが見えている感じとなります。もうこれで気にせず、長大な縦長写真を、そのまま掲載できます。

 

テーマを使用したブログはこちら

kobe.hatenadiary.com

 

詳細な仕様はこちらです

flexphotograph.hatenablog.com

はてなブログテーマ「FlexPhotoGraph2」

 

サムネイルをメインしたカード型の記事一覧表示ができる写真系のブログ向けテーマです。

どんな写真が掲載されているのか、ひと目で解る一覧をデザインしてみました。

 

左:デフォルトモード 右:ランダムカード幅モード(※要拡張機能追加)

f:id:tommyoctopas:20170917132912p:plain
f:id:tommyoctopas:20170918135740p:plain

 

mac safari8 2560*1600 アーカイブ50件表示 ランダムカード幅モード


トップページはFlexBoxの機能を使用してカードのカラム列数がレスポンシブに変化します。
タブレット、スマフォにおいても可能な限りカラム列数を増やして表示する仕様です。

※トップページの記事一覧を一覧形式で表示するに設定(pro限定)しておく必要があります。アーカイブのページは一覧形式になっていますので、無料ユーザー様でも、このテーマでのカード型の記事一覧にて表示されます。

 

記事ページに関して、ページのインナー幅を従来のブログより広く設定し、写真が大きく表示されるようになっています。大きな写真を2枚横並びに配置しても写真が小さく表示されてしまうのを抑えれます。

ブラウザー内で内包されている各枠を内部方向へ(ブログヘッダー > 記事タイトル > 記事コンテンツ)インテンドさせるデザインにしております。

 

カードの特徴

・大きなサムネイルでカード型記事一覧
・記事タイトルはサムネイル上に配置、画像上の文字への見やすさを配慮
・ブックマーク数、スターもサムネイル上の下部に配置
・日付、記事概要はサムネイル下の別枠へ配置

・カテゴリーの表示は、カードのスペースを確保する為、隠してあります。フォーカスが当たると、開示されます。

 

その他特徴

・カラム列数はブラウザの幅に応じてレスポンシブに増減します。
・列数は1~9列まで対応、可能な限り多くの列数を試みる仕様です。

・デバイス幅の狭いスマフォ(iPhone5等)は1列の表示となります。

 ・サムネイルにフォーカスした時、FlexGrowを行います。カード間の隙間を詰めて、フォーカス対象の幅を広げます。 (廃止)

 ・ヘッダ画像をブログ記事画像と動的に差し替える演出を行う機能が別途、追加可能

 

記事内のフォーマットサンプルです。

テーマのフォントは、Google Fonts「Noto Sans JP」を採用しています。

Webフォントの廃止、以下に変更、文字の読み易さを改善

font-family: -apple-system, BlinkMacSystemFont,"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;

 

 

横並び

f:id:tommyoctopas:20170701153415j:plain
f:id:tommyoctopas:20160623140550j:plain

 

単体(サイズ編集なし、記事インナー幅でオートフィット)

f:id:tommyoctopas:20150915214125j:plain

 

長大縦長サイズ単体(サイズ編集なし、ブラウザ高さ85%でオートフィット)

f:id:tommyoctopas:20190715143155j:plain

h1 あいうえお12345ABC

h2 あいうえお12345ABC

h3 大見出し あいうえお12345ABC

h4 中見出し あいうえお12345ABC

h5 小見出し あいうえお12345ABC

標準 あいうえお12345ABC 

太字 あいうえお12345ABC

斜体 あいうえお12345ABC

打消 あいうえお12345ABC

アンダーライン あいうえお12345ABC

85% あいうえお12345ABC (スマホでのレスポンシブ表示サイズ)

90% あいうえお12345ABC (タブレットでのレスポンシブ表示サイズ)

100% あいうえお12345ABC

150% あいうえお12345ABC

200% あいうえお12345ABC

 引用あいうえお12345ABC

  • 箇条書きA
  • 箇条書きB
  1. 番号つきリスト
  2. 番号つきリスト

以上、主要タグのサンプルです。

 

別途、拡張機能が追加できます。

このテーマはデフォルトのCSSのみでカード型およびカラムのレスポンシブを実現しております。

@mediaのCSSにて判定、適正値を割り出しておりますが、CSSではデバイス幅を無段階で判定、実装できない為、若干ヌルヌル感的なレスポンシブになってません。

そのヌルヌル感をjavascriptを追加して補う拡張機能です。

そこまでブログ記事の一覧にこだわる必要があるのか!ってのありますので

この拡張機能は特に必要ないと思いますが、お好みでお使い下さい。

 

機能説明

①カード幅の下限基準値が設定できるようになる。

javascriptの設定値(220)を変更しますと、カードをワイドにしたり、逆に細くしたりできます。440にするとカード幅が倍で展開されます。

バイス幅でなくブログ内の実際のインナーフレーム幅にて無段階に適正値を演算させ、より精密な動作になります。ヌルヌル感が若干、若干アップしますw

 

②カード間の隙間が設定できるようになる。

javascriptの設定値(12)を変更すると、横方向のカード間の隙間が変わります。24にすると、おおよそ倍の隙間を空けてカードが並びます。隙間が大きいほど、フォーカスした時のFlexGrow効果が現れやすくなります。隙間を減ら減らしたい場合は、値を小さくします。

※あまり大きい値を設定しないで下さい(max.30~40ぐらい、30以下推奨)

 

③ランダムでカード幅を決定し、並べる一覧モード

javascriptの設定値(0)を(1)変更すると、カードの幅をランダムに決定、可能な限り横並びで押し込んでいきます。ランダムモードを使用する場合、合わせて①のカード幅を300ぐらいに増やしておいて下さい。極端に小さな幅のカードの発生を抑えれます。

この機能を使ってるブログはこちらです。

kobe.hatenadiary.com

 
 ④ヘッダ画像をブログ記事画像と動的に差し替える演出。

ブログ記事を表示した時、記事に掲載されている先頭の写真画像をブログのヘッダ画像へ差し替えセットします。Coverモード50%50%にて表示します。

 

⑤ナビメニュー簡単管理

ブログヘッダ画像下に置くメニューについて、デザイン設定のサイドバーモジュールで追加されたリンクモジュールの内容にてナビメニュー化します。

サイドバーに任意でデザイン設定できるリンクモジュールを自動的にメニュー化して、ブログヘッダ画像下へナビメニューとして展開される機能です。

この機能より、HTMLタグの知識が無い方でも、容易にナビメニューの構築が出来るのではないかと思われます。

 デザイン設定のヘッダに<div id="navflexphoto"></div>これだけ追加すれば完了です。あとはサイドバーのリンクモジュール内の設定するだけで、その内容が自動的にナビメニュー化され、ヘッダ画像直下に展開されます。

 同様にカテゴリーモジュールも自動でナビ化できます。<div id="cateflexphoto"></div>こちらをデザイン設定のヘッダに追加します。

 

※①②③の機能に関して、タブレット、スマフォでは、javascriptが作動するしないのトラブルが多いので、この機能はPC専用とさせて頂きます。動作確認を終え次第、①②③をタブレット、スマフォでも作動するようにしますので、お待ち下さい。

対応しました。全機能、全デバイスで使用可能になりました。たぶんw

拡張機能javascript 本体はこちらです。

flexphotograph.hatenablog.com

リリースノート随時更新中

flexphotograph.hatenablog.com

ウェブフォント Noto Sans JPのimport urlを変更、テーマの表示速度を改善しました。

計4点、修正と廃止を行い、テーマストアにアップしました。

テーマCSSを変更しました。以下に変更

@import url('http://fonts.googleapis.com/css?family=Noto+Sans+JP');
読み込み先を最新なものに変更

記事の本文中の文字色を少し黒の濃度を上げました。

 Webフォントは廃止しました。ロードに時間がかかる為

font-awesomeは廃止しました。

これの実装していると、表示速度に影響があり廃止しました。

 

記事タイトルは上下ラインで囲みました。

下のラインのみでしたが、記事タイトルを目立つようにしました。

少し内側に記事タイトルを配置しています。

 

 カード形状での記事一覧表示でカード内をフォーカスさせると枠を広げる表示を行っていましたが、廃止しました。

スマホで操作する場合、記事が選択し難い為、廃止しました。

 

1フレームのテーマであり、サイドバーのコンテンツは最下部に3列で表示されますが、各コンテンツが間延びして、並びのデザイン性が悪い。

本テーマの弱点です。現在、改善を試みる改造を行っています。

別テーマにて、新バージョンで公開する予定です。

FlexPhotoGraph2にて改善、対応済み

 

横画像の幅は100%のまま、高さだけを縮小し、画像内容を中央にフィットさせる

※テーマのCSSを更新しました。ブラウザキャッシュのクリアをお願いします。

 

こちらは通常の貼っただけの原画です。

f:id:tommyoctopas:20171004200345j:plain

 

ブログ記事のHTML編集にて、対象の画像を<div class="coverflexphoto"></div>で囲います。

 

<div class="coverflexphoto">

 <p><img class="hatena-fotolife" ~はてばブログの画像~></p>

</div>

 

ブラウザの画面の高さ50%に自動で画像の高さを合わせてくれます。

(※画像サイズの高さを50%にするのでなく、表示中のブラウザ画面のその高さ50%内に収める。)

ただし、上下部分がカットされ、画像内容が中央でフィットされ表示されます。

これにより画面内にスクロールさせず、おおよそ2枚の画像を収めることが出来ます。

 

coverflexphotoを適用した2枚の画像

※幅100%のまま、2枚の画像をスクロールさせずに、おおよそ画面に収まるよう画像の高さが調整されます。

f:id:tommyoctopas:20171004200345j:plain

f:id:tommyoctopas:20171004200345j:plain

 

縦長の画像が間延びしてしまう場合のご提案

※テーマのCSSを更新しました。ブラウザキャッシュのクリアをお願いします。

 

ブログ記事のHTML編集にて、対象の画像を<div class="vhflexphoto"></div>で囲います。

 

<div class="vhflexphoto">

 <p><img class="hatena-fotolife" ~はてばブログの画像~></p>

</div>

 

ブラウザの画面の高さの90%に自動で画像の高さを合わせてくれます。

(※画像サイズの高さを90%にするのでなく、表示中のブラウザ画面のその高さ90%内に収める。)

これにスクロールさせずに画面内に画像を収めることができます。

縦長の画像が間延びしてしまう場合にお使い下さい。

 

<div class="vhflexphoto"></div>で囲った画像

※ブラウザ画面の高さ内に自動で収まってくれる。

f:id:tommyoctopas:20171005094212j:plain

 

70%バージョン"vhflexphoto70"も用意しました。

f:id:tommyoctopas:20171005094212j:plain

 

そのまま貼り付けただけの画像

※画像が大きいので、スクロールが必要になってしまいます。

f:id:tommyoctopas:20171005094212j:plain

 

リリースノート

最新更新情報

2019/07/16 FlexPhotoGraph2へバージョンアップしました。

 

flexphotograph.hatenablog.com

リリースノート

  1. 2017/09/16 「Flex PhotoGraph」テーマストア公開、不具合、要望等、御座いましたらコメント欄にてお知らせ頂ければ助かります。よろしくお願いします。
  2. 2017/09/16 検討事項、カード内にカテゴリーをどこに設置するのがよいか
  3. 2017/09/17 不具合確認、デザイン設定にてヘッダ画像を設定すると常にセンター位置に固定されてしまう。予めセンター位置にロックされてもいいように事前にヘッダー画像をトリミングしてから設定して下さい。申し訳ございません。
  4. 2017/09/17 デザイン変更、ヘッダ画像をブラウザ幅一杯まで広げました。
  5. 2017/09/17 デザイン変更、Google Fonts「Noto Sans JP」の使用
  6. 2017/09/17 2.検討事項決定、カテゴリーはカード内の表示が煩くなる為カード下部へ隠しておりました。FlexGrowのタイミングでこれを表示する事にしました。
  7. 2017/09/18 拡張機能追加、ランダムカード幅モードを追加しました。使用する場合は、javascript の更新が必要です。
  8. 2017/09/18 拡張機能追加、ブログヘッダ画像下に置くメニューについて、サイドバーに任意でデザイン設定できるリンクモジュールを自動的にメニュー化して、ブログヘッダ画像下へナビメニューとして展開される機能。この機能より、HTMLタグの知識が無い方でも、容易にナビメニューの構築が出来るのではないかと思われます。
  9. 2017/09/18 追加機能検討、サイドバーのHTMLモジュールをカード化してカード一覧の中に入れ込む機能を検討中、例えばアフリエイトバナーをサイドバーに設置するだけで、カード一覧内にアフリエイトバナーをカードとして掲載できる機能、ランダムや任意の順番位置等、色々と出来ると思われます。
  10. 2017/09/18 デザイン変更、記事ページのフォントサイズを100%→105%にしました。文字が少し大きくなって見やすくなったと思います。あと字間が詰め詰めのような感じなので、ほんの少しだけ空けたいと思います。
  11. 2017/09/18 デザイン変更、テーマのCSS「Font Awesomeを組み込みました。ご利用下さい。合わせて引用のCSSのデザイン変更を致しました。引用符のWebアイコンを採用しました。

    Font Awesome Icon List (with charcode)

  12. 2017/09/19 デザイン変更、カードのホバー時、中のサムネイルも合わせて拡大表示するようにしました。
  13. 2017/09/19 拡張機能、全デバイスに対応、エミュレータでの動作確認のみですが、一旦スマフォにも公開してみます。
  14. 2017/09/19 デザイン変更、カードから★スターを消したいときは、.archive-entries .social-buttons {display: none;} このCSSをデザインCSSへ追加して下さい。
  15. 2017/09/20 デザイン変更、カード内の日付の位置をサムネイル上の下部、右側に変更しました。合わせてスターの位置をサムネイル上の底辺部分に移動させました。下の余白は、スターの数が多い場合の折り返しに備えてです。
  16. 2017/09/20 拡張機能追加、カテゴリーモジュールを自動でナビメニュー化できます。
  17. 2017/09/20 デザイン変更、記事タイトル枠内の右側部分が余白が多く残るデザインを改めました。従来、記事タイトル枠内で日付、タイトル、カテゴリー、ユーザーカスタムHTML、ソーシャルと「縦」展開してましたが、これを「横」展開に変更しました。記事タイトルを優先して幅を与えております。デバイス幅が狭い場合は、従来どおりの縦方向へ切り替わります。また、順番も変更しました。ユーザーカスタムHTMLを一番最後にしました。これで何もかもがギュッと左に集まって一塊にならいので、見やすくなったと思います。
  18. 2017/09/22 かなり古いブラウザに対してもテーマ対応しました。cssのFlexBoxが作動する比較的最近のブラウザのみ対応のテーマでしたが、ie10などの古いブラウザにも対応しました。なお拡張機能javascript を使った場合は、古いブラウザ上では一部サポートされない機能があります。詳細を近々アップしたいと思います。とりあえず古いブラウザでこのテーマが動作するよう対応いたしました。
  19. 2017/09/23 追加機能検討の9.について、サイドバーのHTMLモジュールをカードとして記事一覧へ組み込む機能のプロトタイプの実装を開始しました。現在、トップページの先頭カードで表示されています。同じくサイドバーに設定したプロフィールも同様にカード化します。
  20. 2017/09/29 19の機能ですが、現テーマに追加するのでなく、別バージョンのテーマをリリースして、そちらへ実装したいと思います。
  21. 2017/09/30 サムネ上に配置している記事タイトル、従来、黒の単一色の透明な帯上に文字を置くことで文字の識別度を確保してましたが、明らかに帯として目立ってしまうデザイン上の欠点がありました。これを上から下へ薄くなるグラデーションにしました。サムネ上にタイトルがあっても、自然に溶け込むような感じになったと思います。
  22. 2017/10/01 拡張機能のカテゴリーのナビ化のアイコンを変更しました。リンクモジュールのナビ化と同じものでしたが、ナビ要素とてしは別機能となりますので、表示上で違いを表すようにしました。(+)のアイコンに変更しました。
  23. 2017/10/04 近々に始まると思われる「はてなブログ」のSSL化対応、本テーマのCSSを点検致しました。サイドバーモジュールの検索モジュールで使われてる虫眼鏡のアイコンが(http://blog.hatena.ne.jp/images/theme/search.png)となっていましたので、httpsに改めました。

flexphotograph.hatenablog.com

拡張機能(javascript)

flexphotograph.hatenablog.com

拡張機能を使いたい場合は、以下のjavascript をデザインのフッタへ設定して下さい。

タイムスタンプ 2017/09/20 機能追加で更新しました。

 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script>
/*====== Flex PhotoGraph 拡張機能 設定値  =========*/
var bw = 220; /* カード幅の下限基準値(def.220px) */
var yw = 12; /* カード間の隙間補正(def.12px) */
var rmode = 0; /* ランダムモード = 1 */
var wv;
/*=================================================*/

    /*----- デバイスの判定、PCかどうか知りたい ----*/
    var dev = (function(){
        var ua = navigator.userAgent;

        if( (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0) && ua.indexOf('Mobile') > 0){
            return 'smf';
        }else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
            return 'tbl';
        }else{
            return 'pc';
        }
    })();

    /* ナビ機能予約 */
    $('#navflexphoto').append($('.hatena-module-links .hatena-urllist').html());
    $('#cateflexphoto').append($('.hatena-module-category .hatena-urllist').html());

    /*ヘッダ画像、ブログの写真と差し替え */
    if($('#blog-title-inner').css("backgroundImage").length > 10) {
        var imgUrl = $('.entry-inner').find(".hatena-fotolife:first").prop("src");
        if (imgUrl) {
        $('#blog-title-inner').css("backgroundImage", 'url(' + imgUrl + ')');
        $('#blog-title-inner').css("background-size", 'cover');
        $('#blog-title-inner').css("background-position", '50% 50%');
        }
    }
    if( dev == "smf") {
    //$(window).on('load', function() {
    //    /* ロード一発目補正をレディで */
    //    wv = $('#main').css('width');
    //    wv = wv.replace("px", "");
    //    MainWidthChg(wv);
    //});
    }
    else {
        /* ロード一発目補正をレディで */
        wv = $('#main').css('width');
        wv = wv.replace("px", "");
        MainWidthChg(wv);
    }   
    

    /*---------- 画面の大きさ変わった ------------*/
    $(window).on('resize', function(){
            wv = $('#main').css('width');
            wv = wv.replace("px", "");
            MainWidthChg(wv);
    });

    /*------------ 精密にカード列数と幅をレスポンシブさせる処理 -------------*/
    function MainWidthChg(wv) {
    
        /* 下限基準値で何列配置できるか */
        var cols = Math.floor(wv / (bw+yw));
        if (cols <= 1) {
            /* 1列分の幅しかないよ */
            $('.archive-entries .archive-entry').css("width", "100%");
            $('.archive-entries .archive-entry').css("margin-bottom", yw);
            return;
        }
        
        /* 現物の個数でアンダースペックになった場合、演算側で幅増やす */
        if( wv > ($('.archive-entries .archive-entry').length * (bw+yw)) ) {
             cols = $('.archive-entries .archive-entry').length;    
        }

        /* 得た列数で配置した場合の余る余白の演算、若干の隙間補正 */
        /* まだ使える余白をカード幅の下限基準値に足し込み%計算 */
        var fw = bw + ((wv - ((bw+yw) * cols)) / cols);
        fw = fw * 100 / wv
        fw = fw + "%"

        if (rmode==1) {
            var wv2 = 0;
            $('.archive-entries .archive-entry').each(function() {
                /* ランダム幅 ベースサイズ / 2 以上からスタート growで連結して押し込む */
                var rw = (bw / 2) + (Math.random()*bw);
                if($('.archive-entries').css("display")=='flex' || $('.archive-entries').css("display")=='-webkit-flex') {
                    $(this).css("flex-grow", "2");
                    $(this).css("width", rw);
                }
                else {
                    /* 古いブラウザ対応 */
                    wv2 = wv2 + rw;
                    if( wv2 >= wv ) {
                        rw = wv - (wv2 - rw + 20);
                        wv2 = 0;
                    }
                    if( rw < (bw / 4) ) {
                       rw = bw;
                       wv2 = bw;
                    }
                    $(this).css("width", rw);
                }
            });

            $('.archive-entries .archive-entry').css("margin-bottom", "0");
        }
        else {
            if($('.archive-entries').css("display")=='flex' || $('.archive-entries').css("display")=='-webkit-flex') {
                /* レスポンシブさせる */
                $('.archive-entries .archive-entry').css("width", fw);
                $('.archive-entries .archive-entry').css("margin-bottom", yw);
            }
            else {
                /* 古いブラウザ対応 */
                $('.archive-entries .archive-entry').css("width", fw);
                $('.archive-entries .archive-entry').css("margin-bottom", yw / 2);
                $('.archive-entries .archive-entry').css("margin-left", yw / 2);
            }
        }
    } 
</script>