あまり更新のないブログのindex2.html

ようやくサイドバーにTwitterロゴを入れました。ちょうどいい大きさにするのって結構難しいものですよね。どうぞお気軽にフォローお願いします(4/22)。

ちょっとご案内

検索で初めて来られて、目的の記事ではなくトップページが表示されてる場合、お手数ですが右上の検索ボックス(スマホでは記事の下)をご利用いただければと思います。
以前から思ってたのですが、ブログはトップページから時系列で並んでいるので管理人が本当に書きたいことがトップページのでは分からないことがありますよね。大手のブログポータルサイトなどはこの”ブログの人気記事”とかいうのをサイドに表示してくれたりするのですが、ここのシステムは広告が無いついでにはそういうものもありません。なので、以前に書いていた”ブログの説明記事を”index専用の記事に利用して常時2~3記事目に表示させたいと考えています。
※このブログは2016.4.24に”サクラのブログ”からWordPressに引越しをしています。4/24以前の記事の一部はさくらのブログを前提に書かれていて訂正がされていない記事がありますのでご了承ください。

それなりに頑張ったよっていう記事

秋晴れの日これから福島から仙台まで自転車でちょっと出掛けてくる
朝のタウンウォッチングでビール飲んでる男を見かける
WordPressのTwentySixteenを濃い目にカスタマイズした

閲覧が多いと思われる記事

ティッシュをキーワードに訪れる方がいますが、私としては嬉しいようで期待外れなんですけどね
とうとう高級ティッシュの使い方が判明する~Kleenex至高
さくらのブログにアクセスカウンターを設置したことについて詳しく書いてみる
宇都宮に行きたくて朝から餃子を食べる

私の主張(です!)

俺は自転車乗るけどピチピチタイツなんか絶対に履かない
多くの男がコーヒーの頼み方を間違えている話

###以下、ブログについての説明になります。###

”男が満足するときBlog”の説明

このブログは”男が満足するときホームページ”のブログ版です。
ホームページURL:http://danman.jp/

サブタイトルの「小さな満足の積み重ねが大きな結果につながる」は、大きな満足は求めてもすぐには見つからないし、大きな幸せも突然にはやってこない。でも安心して小さな満足や小さな幸せを積み重ねることで、そのうち大きな満足にも出会えるよ。という意味です。
ホームページは、どちらかと言えばシンプルに仕上げたいと思っています。そしてブログは日記を中心に”オモシロ可笑しく”を狙っています。テーマは”男の満足”ですが女性の方もよろしくお願いします。

サイトのカテゴリー

公開しているカテゴリーは、日記、散歩と小旅行、食、習慣をメインとして8つ用意しています。ブログはホームページより親しみやすくするため、日記を中心にしています「散歩と小旅行、食、習慣」の3つはホームページのテーマである”男も歩けば、食で満ち足りる、大事な習慣”に沿ったタイトルとして置いています。他には「期間限定掲載-ブログによるつぶやき」がありますが、こちらは、ブログには書きたいのだけれどずっと公開しておくのはどうかなと思った”日常の出来事”なんかを書いています。だいたい10日から2週間を目途に削除を予定する記事になります。

管理人について

サイドにある自己紹介の他は、ホームページのプロフィールをご覧いただければと思います。

コメント

只今、コメント用記事は非公開に設定中。気が向いたら再開する予定です

その他

※当ブログの記事数も順調に増えてきましたが、初めて閲覧にお越しになる方のために案内も必要かなと考え”ブログの説明”を書いてみました。こちらも必要な中身を書き足したり修正したりしながら、その都度新しい日付でアップしたいと思っています。


スポンサーリンク

俺は疲れちゃいないが家で光回線のことなど考えたくはない

私の家では、いまだにインターネット回線にADSLを使用しています。既存のアナログ配線が配管式になっておらず、ひかり回線へ変更するにあたって新たに配線経路を確保しなくてはならなくて、どう取り回しても家の外観を損ねそうだし屋内を露出配線というのも大いに抵抗があったのが一番の理由でした。
そもそも、ネット回線の速度に不満を持ったことがあまりなくて必要性も感じませんでしたが、最近になって必要と思わない段階であえて光を導入したら快適なんじゃねえーの?とか思うようになったわけです。

家電店での申込みが胡散臭すぎて

光の契約で思いつくのが”ホニャララひかりとセットでパソコンが‥”とか、欲しくもないスペックのパソコンが安く買えてもどうなかな?工事費に、関連費用とかはどうなのか、プロバイダは自由にえらべる?そんな話を長々と喧しい宣伝ソングが流れる場所で話を聞くのは、どうなんでしょうね話聞くのにこっちがお金貰いたいほどです。

最近少なくなってた勧誘の電話にのってみたが

うちがアナログ回線だと何処から聞きつけて来るのか何度”要りません”と断ったことやら数え切れない。しかし、最近そんな電話がめっきり少なくなったところで、へそ曲がり主義の私は行動を起こそうと決心したわけです。

そう待つこともなく、たまたま自宅にかかって来た光の勧誘電話に調子良く返事をし、資料を郵送してもらったのですが、その料金体系の分かりづらいのなんのって、あれは人に何か買ってほしい時に用いるパンフレットとしては最低のものだよね?

思うに、メーカーやら通信業者のお付き合いの関係で、コレにすると一番安いよ!ってのがハッキリ言えないのか。もしくは、ワザとわかりづらくしておいて月額単価のわずかの差で儲けを狙うトラップが仕掛けてあるのかと疑うほどだ。じっくり読むのが苦痛でならない。

何度聞いても分かりにくい話し方のマニュアルでもあんの?

その分かりづらい資料が届いたあとの数日後に電話がかかってきて、そこでいろいろ質問したりもするわけですが、返事がどうも不自然なんですよ。話し方がプロとは思えないほどに要点を突いてこない、こういうのって大手だったら最初の説明は勿論、質問への回答も虎の巻読むだけのはずが、どうにも大陸系の方と話ししてるのかと思うほど要領を得ない。仕方がないので、そこでプランの決定とか申込みはせずに次回また電話をもらうことにしました。

結局、真剣にパンフを読み込むことに

電話では、料金体系の把握に至らなかったために仕方なく資料を真剣に読むことになるわけですが、私は決して物分りが悪い男ではなくて集中力を発揮する場面は選びたいものなのですよ。こういう言い方は品が無いですが「金を払うのは客なのでもっと分かりやすく説明してくれないか?支出に関して客に頭使わせるんじゃねぇヨ!」というのが本音なのです。

こうした方が安いとハッキリと言えよ

パンフレット読んでて俺は思ったさ、料金の仕組みと区分けは理解ができたがネット業界のシガラミまで深読みしちゃったぜ。

「お客さん、このプランが一番お得で安いよ、でもA社の機嫌損ねると困るからついでにコレも載せとくよ!八方美人でゴメンね(笑!)」とハッキリ言えよ。

俺は疲れちゃいないが、次の電話じゃどう返事して良いのか迷っている。


スポンサーリンク

WordPressのTwentySixteenを濃い目にカスタマイズした

Webページの見た目も自己表現のうち、TwentySixteenを現在のスタイルにするまで結構大変でしたので記事にしてみました。
この手の記事をご覧になる方は、すでにお分かりかと思いますがカスタムには子テーマ作成が必須。私がそれを知ったころにはスタイルシートをかなりいじっちゃってました。
なお、管理人は”なんちゃって”なスタンスなので、そのつもりでお読みいただければと思います
ブログをWordPressにしてから、標準のテーマであるTwentySixteenを使用しています。

テーマTwentySixteen
2017.4.13現在のサイト構成

デフォルトがコレだったのと、レスポンシブデザインに対応していたのが使い始めた理由です。それと、私は画像中心のデザインがあまり好きになれません。記事本文を読んでもらうのにヘッダーの分だけ無駄にスクロールが必要になるからです。今時の無料ブログは殆どがそうで、私がカスタマイズしたようにヘッダー短めにしているデザインなど無いに等しいです。

字がデカイのをなんとか出来ないか

まずは、最初に気になったのが記事タイトルの文字が大きいことです。コイツのデカさが尋常ではありません。ついでにサイトタイトルも、もう少し小さくても良いかなと感じます。

検索からの新規訪問なんかだと、サイトタイトルなんてあまり興味が無いものではないでしょうか。私が調べものをするときなどは、記事タイトルを最初のターゲットとして該当ページを訪れ、読んでみて参考になったらサイトタイトルも興味を持って見てみるとかそんなのが多い気がします。

サイト名は大丈夫?

まずは記事タイトルに触る前にサイトタイトルのほうですが、スタイルシートに手を加えるとすればココでしょう。

.site-title {
        font-family: Montserrat, "Helvetica Neue", sans-serif;
	font-size: 23px;/*←ここと*/
	font-size: 1.3rem;/*←ここ*/
	font-weight: 700;
       	line-height: 1.2173913043;
	margin: 0;
}

今の時点でも、かなり変更していてサイトタイトルの文字サイズまで変更したかどうか覚えてないくらいです。

TwentySixteenは記事タイトルが大きすぎる

記事タイトルのフォントサイズは、メディアクエリごとに設定されているようです。そしてそれが大きすぎます。TwentySixteenでは表示する画面サイズによって次の5段階の項目があります。

* 14.0 – Media Queries
* 14.1 – >= 710px
* 14.2 – >= 783px
* 14.3 – >= 910px
* 14.4 – >= 985px
* 14.5 – >= 1200px

そして書き換える場所は .entry-title{ の部分です。

せっせと手あたり次第変更したので、全部に記事タイトルのサイズ設定があったかどうかは正直覚えてません。
そして710px以上の5項目全部に対して記事タイトルの変更を行っても、実はスマートフォンでの表示は依然として大きすぎるままになります。こうやって冷静に見るとすぐに気が付きますが、>= 710pxなので710px以上の設定はメディアクエリで設定してます、それは710px未満のデフォルト設定がどこかに記載されているよということでもあります。
その場所が  * 11.2 – Posts and pages のようです。

.entry-title { のほかに念のため
.textwidget h2 { の設定も小さくしてしまいます。

記事タイトルをh2から変更している場合はそちらをも変更します。
正解かどうか分かりませんが、私の場合は以上の設定でスマホでも記事タイトルを小さく表示できています。もちろんiPhone 、Andrid両方で確認済みです。

PC画面の左に表示されてしまう投稿者などの情報を記事下に固定

※phpファイルの編集で記事の上に表示することも可能です。

左に来る投稿者

デスクトップで最大表示されたとき、投稿者、日付、カテゴリーなどが画面左に表示され、3カラムのように記事本文の幅が狭くなってしまうのは  * 14.4 – >= 985px を弄ります。

だいたい3560行目くらい(他にも追加と削除を繰り返してるので初期状態から大きく違っていると思われます)、記事を書くにあたってcssファイルを印刷してみましたが、テキストエディタから印刷をして72ページの量、そのうちの63ページ目なのでだいぶ後半のほうですね。

/*	body:not(.search-results) article:not(.type-page) .entry-content {
		float: right;
		width: 71.42857144%;
	}*/

ここを削除すれば、アイコンが左に来なくなるので本文の幅が広くなります。私の場合、後でもとに戻せるようにコメントアウトしています。

※2017.5月現在、TwentySixteenの最新バージョンでは子テーマでこの手法を設定できないようです。私はどうしてもこの3カラムのようなスタイルが納得できずスタイルシートを古いバージョンへ戻してしまいました。

これでプロフィールアイコンと記事の日付やカテゴリーの回り込みを停止できますが、コンテンツの下でプロフィールが表示されるとアイコンが被るためプロフィールの非表示にします。これはWordPress設定画面のユーザー→あなたのプロフィールで”プロフィール情報”の記述を全部削除すれば表示されなくなります。最初に入力していなければ表示されないようです。

無事に下に配置したところで余計な改行をなくします

フロートの設定をコメントアウトしたあとに気になるのが、左にあったときのなごりの改行です。

	body:not(.search-results) article:not(.type-page) .entry-footer {
		float: left;
		margin-top: 2.2em;/*隙間を入れてみる*/
		/*width: 21.42857143%;←ここをコメントアウトで日付とタグの改行を無くす*/
	}

そしてもう一か所10数行下の次のdisplay:blockが余計な改行の確信犯かと

nk {
		/*display: block;←これが日付とカテゴリーの並びをいちいち改行している*/
		margin-bottom: 0.5384615385em;
	}

 投稿日の右に更新日を表示させる

cssをずっとさかのぼって行って* 11.2 – Posts and pagesの2045行目付近

.updated:not(.published) {
	display: inline;/*noneから変更*/
        margin-left: 5px;
        border-left: 3px solid #d1d1d1;/*スラッシュの入れ方が分からないので縦線を入れます*/
        padding-left: 5px;/*左に隙間*/
}

displayの変更で更新日は表示できますが、スラッシュの追加はphpファイルの編集が必要なのかと思います(?)。私レベルでは難解すぎなので間にラインを引きます。

ヘッダーと記事タイトルの間にラインを引く

先に、記事タイトルの文字の大きさを調整していますが、バランスが取れた後にメリハリを付けるためエントリータイトルの上に横線を入れます。
編集場所は更新日の追加と同じ* 11.2 – Posts and pages

.site-main > article {
	margin-bottom: 2.5em;/*3.5*/
	position: relative;
        border-top: medium solid #7a1c38;/*ヘッダーとの境にラインを引く*/
}

編集するのは一番はじめの部分になります。

スマホ表示でサブタイトルを表示させる

PC画面では表示されるサブタイトルがスマホでは表示されないので、これも追加して表示させます。
更新日を追加した.updated:not(.published) {から30行くらい下にある.page-title {.taxonomy-description {の間に次の記述を書き足します。

.site-description {
	display: block;       
	}

サイドメニューのカテゴリーをクリックしたらやっぱり

要所要所に頭でっかちが設定されているんですね、これはやっぱり気になるので、カテゴリー表示したときに上部に表示されるカテゴリー名とラインを消してしまいます。
こちらはスタイルシートではなくarchive.phpファイルを編集します。
真ん中あたりの<header class=”page-header”>から</header>の部分をコメントアウトします。
※コードのコピーを記載しようとしたら上手くいきませんでした。

ここまで手を付けたらとことん

ちょこちょこ弄りましたが今のところ * 14.5 – >= 1200pxの設定は手付かずでそのままにしてあります。

そして、ここまで手を付けてしまうと愛着がわいてしまい出来の良い優良テーマとかに鞍替えできません。また気が向いたら更新しようと思いますが、次の更新はいつになるやら‥

ほかに細かいところも調整

* 11.2 – Posts and pages でborder-topを追加記述と、サブタイトル(デスクプリクションていうの?)の右マージンを追加してます。

前後記事へのナビゲーションメニューがデカすぎるのは、調整が難しすぎたのでググって適当に修正。

タブレットとスマホ表示のときのにメニューが表示されるようにResponsive Menuというプラグインを追加しました。そこに表示させる項目の作成の仕方でやや手こずりましたが、こちらはダッシュボードの画面から外観→メニューのメニュー項目を設定すれば導入したResponsive Menuの表示に適用されるようです。

関連記事:さくらのブログからWordPressへブログ引越し完了


スポンサーリンク