/ software

2014ブログテーマ

WordPress 3.8に合わせてTwenty Fourteenが先駆けてリリースされるとかしないとか。

パクっ触発されてこのブログのテーマのブランチを切ったのでこれから2014テーマを作っていく。

テーマは参考までにGitHubで公開しています。
https://github.com/makotokw/wp-theme-makotokw

以下について考えたい。

  • トップページ機能させる
  • ページ関連整理する
  • CSSちゃんとする

Twenty TwelveがTwenty Thirteenがそぎ落としてシンプルになっていたのでTwenty Forteenがこういう風になるのはある程度想像がついていた。歴史を見てもモダン→ポストモダンのようにあるデザインが流行るとその後、その反動が来たものが流行る。そうやって洗練されていく。

モバイル向きなレスポンシブルであったり、フラットUIによってごちゃごちゃしたデスクトップデザインから一旦シンプルなデザインの方向に動いていたがここにきてまた必要なものはフィーチャリングしようという気配が見え隠れする。

トップページ

個人的にはサイドバーは外したままでいいかなと思っているけど、トップページがまるで機能していないので少し機能的にしようかと思っている。付随してヘッダやフッタのナビゲーションも多少改良したい。

トップページを含めて一部のアーカイブページで表示する記事を要約にしてみた。テーマがはっきりしているブログは別としてこのブログは記事ごとのテーマが大きく変わるので読者も記事ごとに変わると思う。自分で読んでても俯瞰のできなさが気になっていたので日付系のアーカイブの時は全文載せるのではなく要約だけ入れて記事を選びやすくしてみた。

トップページについては思うことがあるので別の機会に書きたい。

ページ

新しいプログラム系のメモはQiitaに書いていてメモはブログで使わないようにしようと思っている。ポートフォリオはトップドメインに持っていくつもりなんだけど緊急性がないのでページが放置されたまま。そのせいもあってナビゲーション・メニューをちゃんとつくれずフッターにとりあえずの形で入れている。トップページ改善とともに整理したい。

CSSの設計

CSSをその時の気分気分で書いているのでいい加減、ルールを統一しようと思う。ウェブの勉強としてOOCSS, SMACSS, BEMあたりから採用してみようと考えている。最初は先入観でこれはないかなとか、このブログの規模に合わせて選ぶことも考えたが、失敗してもさほどリスクがない自分のサイトだから割りきってどれを採用してもいいのかな。

とりえずOOCSS風にすることにした。まぁBootstrapやFontAwesomeもそうしているから参考になるだろう。と言ってもWordPressのお作法的なクラスがたくさん残っているので全部書き直すというより、変更する箇所から徐々に変えていくという感じ。

Zenback外してみた

Zenbackの広告が嫌になったので外した。有料でもいいから広告はずすオプション欲しいというのは意見として送ったのでそうなったらまた入れるかもしれない。Zenbackからの集客に頼れなくなるが、どちらかというと集客よりも機能的な面で使っていたのが大きかったので、自分でShareLinkをテーマで実装してみた。

Twitter/Bookmarkのコメントが表示されると周囲を気にして記事を書いてしまうのでマイペースでやるならこれくらいでいいのかもしれない。

function makotokw_share_this() {
    // twitter: https://about.twitter.com/resources/buttons#tweet
    // hatena: http://b.hatena.ne.jp/guide/bbutton
    // pocket: http://getpocket.com/publisher/button
    // google+: https://developers.google.com/+/web/+1button/
?>
<div class="section section-mini section-share-this">
    <h2 class="section-title"><?php _e('Share This', 'makotokw');?></h2>
    <div class="section-content">
        <div class="share-item share-item-twitter">
            <a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-lang="en">Tweet</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
      </div>
        <div class="share-item share-item-hatena-bookmark">
            <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="en" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
        </div>
        <div class="share-item share-item-pocket">
            <a data-pocket-label="pocket"  data-save-url="<?php the_permalink(); ?>" data-pocket-count="horizontal" class="pocket-btn" data-lang="en"></a>
            <script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
        </div>
        <div class="share-item share-item-google-plus"">
            <div class="g-plusone" data-size="medium" data-href="<?php the_permalink(); ?>"></div>
            <script type="text/javascript">
                (function() {
                    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                    po.src = 'https://apis.google.com/js/platform.js';
                    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                })();
            </script>
        </div>
        <div class="share-item share-item-facebook-like">
            <iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;send=false&amp;layout=button_count&amp;width=110&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>
        </div>
    </div>
</div>
<?php
}
Markdown with by ❤ wp-gfm